/* 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}
/* The product, seen. Page one of the published Wordprint example, rendered from the site
   itself, so the picture is the thing and not an illustration of it. */
.hero .peek{display:block;justify-self:center;width:100%;max-width:340px;text-decoration:none;color:var(--quiet);font-size:.85rem;line-height:1.4}
.hero .peek img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:3px;box-shadow:0 10px 30px rgba(52,55,76,.14);transform:rotate(-1.2deg);transition:transform .2s}
.hero .peek:hover img{transform:rotate(0)}
.hero .peek span{display:block;margin-top:1rem;text-align:center;color:var(--ink);border-bottom:0}
.numbers{list-style:none;margin:clamp(2rem,4vw,3rem) 0 0;padding:1.4rem 0 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem}
.numbers li{font-size:.9rem;line-height:1.4;color:var(--quiet)}
.numbers strong{display:block;font-family:var(--display);font-size:2.2rem;font-weight:600;color:var(--ink);letter-spacing:-0.02em;line-height:1;margin-bottom:.3rem}
@media (max-width:720px){.numbers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .hero .split{grid-template-columns:1fr}
  .hero .mark{display:none}
  .hero .peek{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}

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}
/* Byline on the guides. Same shape as the author box on consultingpartner.io's Insights (photo,
   name, one line, a link back), in this site's palette. The score in it is checked by audit.mjs
   against the page's real score, so it cannot go stale after an edit. */
/* The worked example: a delivered report shown as the document it is, on a sheet that sits
   on the page rather than dissolving into it. Same type as the delivered page, because the
   delivered page uses this stylesheet. .note is the site's commentary, visibly not the report. */
.sheet{background:var(--card);border:1px solid var(--rule);border-radius:3px;box-shadow:0 2px 14px rgba(52,55,76,.08);max-width:860px;margin:1.4rem auto 0;padding:2rem 2.4rem 2.4rem}
.sheet .masthead{display:flex;align-items:center;gap:1rem;padding-bottom:1.1rem;border-bottom:2px solid var(--ink);font-family:var(--display);font-size:.92rem;line-height:1.35}
.sheet .masthead img{opacity:.7}
.sheet .masthead span{color:var(--quiet)}
.sheet .masthead .right{margin-left:auto;text-align:right;color:var(--quiet);font-size:.82rem}
.sheet .doc h2{font-family:var(--display);font-size:1.35rem;margin:2rem 0 .7rem;padding-top:1.1rem;border-top:1px solid var(--rule)}
.sheet .doc h3{font-family:var(--display);font-size:1.05rem;margin:1.4rem 0 .5rem}
.sheet .doc p,.sheet .doc li{font-size:.98rem}
.sheet .doc blockquote{margin:.6rem 0 1rem;padding:.2rem 0 .2rem 1rem;border-left:3px solid var(--rule);font-family:var(--display);font-size:1.05rem}
.sheet .doc .tablewrap{overflow-x:auto;margin:1rem 0}
.sheet .doc table{width:100%;border-collapse:collapse;font-size:.9rem}
.sheet .doc th,.sheet .doc td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--rule);vertical-align:top}
.sheet .doc thead th{font-family:var(--display);font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;color:var(--quiet)}
.sheet .doc td:not(:first-child){white-space:nowrap}
.sheet .doc code{font-size:.88em;background:var(--paper);padding:.1em .3em;border-radius:2px}
.narrow pre{background:var(--ink);color:var(--paper);padding:1.1rem 1.2rem;border-radius:3px;overflow-x:auto;font-size:.86rem;line-height:1.5;margin:1rem 0 1.4rem}
.narrow code{font-size:.9em;background:var(--paper);padding:.1em .3em;border-radius:2px}
.narrow pre code{background:none;padding:0}
.sheet .doc pre{background:var(--ink);color:var(--paper);padding:1.1rem 1.2rem;border-radius:3px;overflow-x:auto;font-size:.82rem;line-height:1.5;white-space:pre-wrap}
.sheet .doc pre code{background:none;padding:0;color:inherit}
.sheet .doc hr{border:0;border-top:1px solid var(--rule);margin:1.8rem 0}
.sheet .doc em{color:var(--quiet)}
/* The site's notes on a reproduced document. Inline they were mistaken for the document within
   a few screens, so on a wide screen they hang in the right margin as sidenotes (the Tufte
   float: a negative right margin keeps them out of the text column entirely) and on a narrow
   one they stay inline, dashed and labelled, so they cannot be read as the deliverable. */
.note{display:block;background:transparent;border:1px dashed var(--signal);border-left:3px solid var(--signal);border-radius:3px;padding:.65rem .9rem;margin:.6rem 0 1.1rem;font-size:.9rem;line-height:1.5;color:var(--ink)}
.note .eyebrow{display:block;margin:0 0 .25rem;font-size:.66rem;color:var(--signal)}
@media (min-width:1180px){
  .wrap:has(> .sheet .note){max-width:1160px}
  .sheet:has(.note){max-width:1150px;padding-right:calc(2.4rem + 290px)}
  .sheet .note{float:right;clear:right;width:250px;margin:-3rem -290px .8rem 0;border:0;border-left:2px solid var(--signal);border-radius:0;padding:.1rem 0 .3rem .8rem;font-size:.84rem;line-height:1.45;color:var(--quiet);background:transparent}
  .sheet .note .eyebrow{font-size:.62rem}
}
@media (max-width:640px){.sheet{padding:1.2rem 1rem 1.4rem}.sheet .masthead{flex-wrap:wrap}.sheet .masthead .right{margin-left:0;text-align:left;width:100%}}
.author-box{display:flex;gap:18px;align-items:center;background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--signal);border-radius:3px;padding:1.2rem 1.4rem;margin-top:2.4rem}
.author-box p{margin:.25rem 0 0;font-size:.94rem;line-height:1.5;color:var(--quiet)}
.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}}

/* The first tables on the site, added for the worked example that reproduces a Soundalike.
   A report is mostly numbers read side by side, so anything more decorative than a rule between
   rows gets in the way of the only thing the reader is doing, which is comparing two columns.
   The subject's column is bolded in the markup rather than here, because which column is "yours"
   changes with the document. */
.grid-table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.95rem}
.grid-table th,.grid-table td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--rule);vertical-align:top}
.grid-table thead th{font-family:var(--display);font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--quiet);border-bottom:2px solid var(--ink);white-space:nowrap}
.grid-table tbody td:not(:first-child){white-space:nowrap}
.grid-table tbody tr:last-child td{border-bottom:0}

/* 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}