:root{
  --paper:#ffffff; --paper-2:#f4f7f9; --paper-raised:#ffffff;
  --ink:#0b0c0e; --ink-muted:#4b5158; --hairline:#e2e7ea;
  --accent:#0b0c0e; --on-accent:#ffffff;
  --good:#0f6b39; --good-soft:#e8f3ec;
  --ok:#8a6100; --ok-soft:#fbf1dc;
  --bad:#ad2216; --bad-soft:#fbeae7;
  --focus:#1a63d8;
  --serif:"Source Serif 4","Iowan Old Style",Georgia,serif;
  --sans:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:140px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0e1113; --paper-2:#151a1d; --paper-raised:#171c1f;
    --ink:#eef2f4; --ink-muted:#a4adb4; --hairline:#2a3135;
    --accent:#eef2f4; --on-accent:#0b0c0e;
    --good:#74d29a; --good-soft:#12291d;
    --ok:#e0bb5c; --ok-soft:#2b2412;
    --bad:#f0907f; --bad-soft:#2e1512;
    --focus:#8fb8ff;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:27px;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
img{max-width:100%}

/* The picture sits fixed behind everything; opaque sections scroll over it. */
.backdrop{position:fixed;inset:0;z-index:-2;background:#0b0c0e center/cover no-repeat;
  background-image:var(--hero-image, linear-gradient(160deg,#10151a 0%,#1d262e 45%,#0b0c0e 100%))}
/* Phones get an image a quarter of the size. It falls back to the large
   one, and then to the gradient, so a page with no hero is unaffected. */
@media (max-width:820px){
  .backdrop{background-image:var(--hero-image-sm, var(--hero-image, linear-gradient(160deg,#10151a 0%,#1d262e 45%,#0b0c0e 100%)))}
}
.backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,10,.80) 0%,rgba(6,8,10,.66) 38%,rgba(6,8,10,.82) 100%)}

.wrap{max-width:1140px;margin:0 auto;padding:0 var(--s4)}
@media(min-width:700px){.wrap{padding:0 var(--s5)}}
.eyebrow{font-size:16px;line-height:22px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 var(--s4)}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(36px,6.4vw,74px);line-height:1.03}
h2{font-size:clamp(28px,4vw,46px);line-height:1.1}
h3{font-size:23px;line-height:31px}
p{margin:0}
.lede{font-size:clamp(18px,1.7vw,22px);line-height:1.5;color:var(--ink-muted);max-width:56ch}
.mono{font-family:var(--mono);font-size:16px;line-height:24px;word-break:break-all}
.note{color:var(--ink-muted);font-size:17px;line-height:27px}

/* nav */
.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--hairline)}
.nav .wrap{display:flex;align-items:center;gap:var(--s6);height:84px}
.brandmark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.mark{height:56px;width:auto;display:block}
/* The nav lockup, one file instead of a mark plus live text. 2.55:1, so even
   at 34px it is only 87px wide and fits beside the button and the menu on a
   small phone. The footer still uses the mark and the word separately. */
.brandlogo{height:60px;width:auto;display:block}
@media(max-width:620px){.brandlogo{height:46px}}
@media(max-width:400px){.brandlogo{height:38px}}
.mark.foot{height:40px}
.wordmark{font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.wordmark em{font-style:italic}
.wordmark.foot{font-size:21px}
@media(max-width:620px){.mark{height:42px}.wordmark{font-size:21px}}
@media(max-width:620px){.nav .wrap{height:72px}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mark{content:url('/assets/mark-dark.png')}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brandlogo{content:url('/assets/logo-light.svg')}}
.brandmark .c2{font-style:italic}
.navlinks{display:flex;gap:var(--s5);margin-left:auto;font-size:17px;white-space:nowrap}
/* A rule that draws itself in under the word, and stays drawn on the page you
   are already on. Enough to feel like an answer to the pointer, quiet enough to
   suit the rest of the page. */
.navlinks a{text-decoration:none;color:var(--ink-muted);position:relative;padding-bottom:4px;transition:color .18s ease}
.navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.navlinks a:hover,.navlinks a:focus-visible{color:var(--ink)}
.navlinks a:hover::after,.navlinks a:focus-visible::after{transform:scaleX(1)}
.navlinks a[aria-current="page"]{color:var(--ink)}
.navlinks a[aria-current="page"]::after{transform:scaleX(1);background:var(--hairline)}
@media (prefers-reduced-motion:reduce){.navlinks a::after{transition:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);
  padding:12px var(--s5);font:600 16px/22px var(--sans);text-decoration:none;cursor:pointer;transition:opacity .18s ease}
.btn:hover{opacity:.86}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.light{background:#fff;color:#0b0c0e;border-color:#fff}
.btn.outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
/* Under 860px the links used to be hidden with nothing in their place, so a
   phone had no way to reach Pricing, About or the email checker at all. They
   are still hidden in the bar, but now there is a button that opens them as a
   panel underneath it. */
.navtoggle{display:none}
@media (max-width:860px){
  .navlinks{display:none}
  .nav .btn{margin-left:auto}
  .nav .wrap{position:relative;gap:var(--s4)}
  .navtoggle{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
    flex:0 0 auto;padding:0;background:none;color:var(--ink);border:1px solid var(--hairline);cursor:pointer}
  .navtoggle svg{width:22px;height:22px;display:block}
  .navtoggle .ico-shut{display:none}
  .nav.open .navtoggle .ico-open{display:none}
  .nav.open .navtoggle .ico-shut{display:block}
  /* a panel under the bar, not a line in it: the links need room to be tapped */
  .nav.open .navlinks{display:flex;flex-direction:column;gap:0;white-space:normal;
    position:absolute;left:0;right:0;top:100%;margin:0;padding:var(--s2) 0;
    background:var(--paper);border-bottom:1px solid var(--hairline);
    box-shadow:0 12px 24px rgba(0,0,0,.08)}
  .nav.open .navlinks a{padding:14px var(--s2);font-size:18px;min-height:48px;display:flex;align-items:center}
}
/* on a phone the nav is just the logo and one button, and it stays on one line */
@media(max-width:560px){.nav .btn{font-size:15px;line-height:20px;padding:10px 14px;min-height:44px;white-space:nowrap}}
@media(max-width:400px){.mark{height:36px}.wordmark{font-size:19px}.nav .wrap{gap:var(--s3)}}

/* hero: text on the picture, the tool as a card over it */
.hero{position:relative;min-height:min(92svh,860px);display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding:var(--s9) 0 var(--s8);color:#fff}
/* The hero is a flex container, so .wrap is a flex item, and a flex item with
   the default min-width:auto refuses to shrink below its content minimum. The
   ticker items are white-space:nowrap, so once the ticker moved into the hero
   it gave the whole page a 640px floor: the document went wider than the
   screen and every full-width band stopped reaching the right edge. One line
   fixes it, and it is the first thing to check whenever that happens again. */
.hero > .wrap{min-width:0}
.hero h1{color:#fff;max-width:18ch;margin-bottom:var(--s5)}
.hero .lede{color:rgba(255,255,255,.88);margin-bottom:var(--s6);max-width:52ch}
.hero .eyebrow{color:rgba(255,255,255,.72)}
.tool{background:var(--paper-raised);border:1px solid var(--hairline);padding:var(--s5);max-width:640px;box-shadow:0 24px 60px rgba(0,0,0,.28);color:var(--ink)}
.tool h2{font-size:24px;line-height:32px;margin-bottom:var(--s3)}
.checkform{display:flex;flex-wrap:wrap;gap:var(--s2)}
.checkform input{flex:1 1 220px;min-width:0;min-height:54px;border:1px solid var(--hairline);background:var(--paper);color:var(--ink);
  font:400 17px/26px var(--mono);padding:14px var(--s4)}
.checkform input::placeholder{color:var(--ink-muted)}
.checkform button{min-height:54px;border:0;background:var(--accent);color:var(--on-accent);font:600 17px/22px var(--sans);padding:0 var(--s5);cursor:pointer}
.checkform button:disabled{opacity:.6;cursor:progress}
.microcopy{font-size:16px;line-height:24px;color:var(--ink-muted);margin-top:var(--s3)}
.trustrow{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--hairline)}
.trustrow span{font-size:16px;color:var(--ink-muted);display:flex;align-items:center;gap:var(--s2)}
.tick{width:9px;height:5px;border-left:2px solid var(--good);border-bottom:2px solid var(--good);transform:rotate(-45deg);flex:none}
.progress:not(:empty){margin-top:var(--s3);min-height:24px}
.progress{font-size:16px;color:var(--ink-muted)}
.err{color:var(--bad)}

/* Something worked. A grey sentence where a form used to be reads as nothing
   happening, so a confirmation gets the weight of the thing it replaced. */
.confirm{background:var(--good-soft);border:1px solid var(--hairline);border-left:6px solid var(--good);padding:var(--s5);margin-top:var(--s4)}
.confirm h3{font-size:24px;line-height:32px;color:var(--good);margin-bottom:var(--s3)}
.confirm p{font-size:17px;line-height:27px;color:var(--ink)}
.confirm p + p{margin-top:var(--s3)}
.confirm .actions{margin-top:var(--s4)}

/* the look-alike pass takes about a minute: show that it's moving */
.waiting{margin-top:var(--s4)}
.waiting p{font-size:16px;line-height:25px;color:var(--ink-muted)}
.waiting .count{font-variant-numeric:tabular-nums;color:var(--ink);margin-bottom:var(--s2)}
.waiting .count:empty{display:none}
.bar{position:relative;height:10px;margin:var(--s7) 0 var(--s3);background:var(--paper-2);border:1px solid var(--hairline)}
.bar i{display:block;height:100%;width:0;background:var(--ink)}
.bar .cat{position:absolute;left:0;top:-24px;line-height:0;color:var(--ink);transform:translateX(-50%)}
.bar .catart{display:block;animation:bob .5s steps(2,end) infinite}
.bar .leg{transform-origin:50% 0;animation:stepA .5s steps(2,end) infinite}
.bar .l2,.bar .l3{animation-name:stepB}
@keyframes bob{0%{transform:translateY(0)}50%{transform:translateY(-1px)}100%{transform:translateY(0)}}
@keyframes stepA{0%{transform:rotate(-13deg)}50%{transform:rotate(13deg)}100%{transform:rotate(-13deg)}}
@keyframes stepB{0%{transform:rotate(13deg)}50%{transform:rotate(-13deg)}100%{transform:rotate(13deg)}}
.bar.pacing i{width:100%;opacity:.12}
.bar.pacing .cat{animation:pace 9s cubic-bezier(.45,0,.55,1) infinite}
@keyframes pace{
  0%{left:0;transform:translateX(-50%) scaleX(1)}
  48%{left:100%;transform:translateX(-50%) scaleX(1)}
  52%{left:100%;transform:translateX(-50%) scaleX(-1)}
  98%{left:0;transform:translateX(-50%) scaleX(-1)}
  100%{left:0;transform:translateX(-50%) scaleX(1)}}
@media (prefers-reduced-motion:reduce){.bar .cat,.bar .catart,.bar .leg{animation:none}.bar .cat,.bar i{transition:none}}


/* The ticker now lives inside the tool card, under the explanation, so what a
   check finds is visible on a phone without scrolling past a full-height hero.
   Negative margins take it edge to edge inside the card. */
/* In the hero, under the card. It sits on the photograph rather than inside
   the card, so it keeps its own edges. */
.hero .marquee{margin-top:var(--s7);min-width:0}

/* A thin line that fills downward: enough to say the page continues, quiet
   enough not to be a bouncing arrow. */
.morecue{display:block;width:1px;height:56px;margin:var(--s7) auto 0;position:relative;
  background:rgba(255,255,255,.22);overflow:hidden}
.morecue span{position:absolute;left:0;top:0;width:1px;height:56px;background:#fff;
  transform:translateY(-100%);animation:cue 2.4s cubic-bezier(.45,0,.55,1) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.morecue span{animation:none;transform:none;opacity:.45}}

@media (max-width:620px){
  /* The hero was at least 92% of the screen and vertically centred, which put
     the check box low and everything the product does below the fold. On a
     phone it sits at the top and takes only the room it needs. */
  .hero{min-height:auto;justify-content:flex-start;padding:var(--s6) 0 var(--s6)}
  .hero h1{max-width:none;margin-bottom:var(--s4)}
  .hero .lede{margin-bottom:var(--s5)}
  .morecue{height:44px;margin-top:var(--s6)}
  .morecue span{height:44px}
}

/* With a menu button in the bar, the logo, the wordmark, the call to action and
   the button no longer fit across a small phone. The word goes; the mark stays. */
@media (max-width:460px){
  .nav .wordmark{display:none}   /* footer only now */
  .nav .btn{padding-left:var(--s3);padding-right:var(--s3)}
}

/* sections ride over the picture, with gaps where it shows through */
.sheet{position:relative;background:var(--paper);padding:var(--s8) 0}
.sheet.alt{background:var(--paper-2)}
@media(min-width:980px){.sheet{padding:var(--s9) 0}}
.gap{height:120px}
@media(max-width:700px){.gap{height:72px}}
.head{max-width:62ch;margin-bottom:var(--s6)}
.head h2{margin-bottom:var(--s4)}
.rule{height:2px;width:56px;background:var(--ink)}

.cards{display:grid;grid-template-columns:1fr;gap:var(--s4)}
@media(min-width:820px){.cards{grid-template-columns:repeat(3,1fr)}}
.cards.two{grid-template-columns:1fr}
@media(min-width:820px){.cards.two{grid-template-columns:repeat(2,1fr)}}
.cell{background:var(--paper-raised);border:1px solid var(--hairline);padding:var(--s5)}
.cell h3{margin-bottom:var(--s3)}
.cell p{color:var(--ink-muted);font-size:17px;line-height:27px}
.cards.numbered{margin-top:var(--s7)}
.cards.numbered .cell{position:relative;padding-top:var(--s8)}
.bignum{position:absolute;top:-34px;left:-12px;font-family:var(--serif);font-size:96px;line-height:1;font-weight:600;
  /* The fade goes on the stroke, not the element: opacity here would fade the
     background too, and the border would show straight through the mask. */
  color:transparent;-webkit-text-stroke:1.5px var(--hairline);pointer-events:none;font-variant-numeric:tabular-nums;
  /* The card's own border runs behind the numeral. A background the colour of
     the page masks it, so the line appears to break and let the number through. */
  background:var(--paper);padding:0 10px}
/* Card and page share a background here, so the mask has nothing to give away. */
.cards.numbered .cell{background:var(--paper)}
@supports not ((-webkit-text-stroke:1px black)){.bignum{color:var(--hairline)}}
@media(max-width:820px){.bignum{font-size:76px;top:-26px;left:-6px}.cards.numbered .cell{padding-top:var(--s7)}}
.cell.aside{margin-top:var(--s5);border-left:3px solid var(--ink)}
.cell .num{font-family:var(--serif);font-size:42px;line-height:1;display:block;margin-bottom:var(--s3)}

/* the scrolling list of example addresses */
.marquee{position:relative;background:var(--paper);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:var(--s4) 0;overflow:hidden}
.marquee .track{display:flex;gap:var(--s6);width:max-content;animation:slide 52s linear infinite}
.marquee .item{display:flex;align-items:center;gap:var(--s2);font-size:17px;white-space:nowrap;color:var(--ink-muted)}
.marquee .item b{font-family:var(--mono);font-weight:400;color:var(--ink)}
.marquee .mark{width:22px;height:22px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.marquee .mark.yes{background:var(--good-soft);color:var(--good)}
.marquee .mark.no{background:var(--bad-soft);color:var(--bad)}
.marquee .mark.eye{background:var(--ok-soft);color:var(--ok)}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* results */
#result{margin-top:var(--s5);scroll-margin-top:80px}
.card{background:var(--paper-raised);border:1px solid var(--hairline);padding:var(--s5);margin-bottom:var(--s4);color:var(--ink)}
.card h3{margin:0 0 var(--s3)}
.verdictcard{border-left:6px solid var(--ink);margin-bottom:0}
.verdictcard + .card{border-top:0}
.verdictcard .lbl{font-size:17px;color:var(--ink-muted);margin-top:var(--s2)}
.verdictcard .word{font-family:var(--serif);font-size:clamp(34px,5.4vw,48px);line-height:1.05;font-weight:600;margin:0}
.verdictcard .ans{font-size:18px;line-height:28px;margin-top:var(--s3);color:var(--ink)}
.v-good{border-left-color:var(--good);background:var(--good-soft)} .v-good .word{color:var(--good)}
.v-ok{border-left-color:var(--ok);background:var(--ok-soft)} .v-ok .word{color:var(--ok)}
.v-bad{border-left-color:var(--bad);background:var(--bad-soft)} .v-bad .word{color:var(--bad)}
.rowline{display:flex;justify-content:space-between;gap:var(--s3) var(--s4);border-bottom:1px solid var(--hairline);padding:14px 0;font-size:17px;line-height:25px;flex-wrap:wrap}
.rowline:last-child{border-bottom:0}
.rowline .lo{color:var(--ink-muted)}
.rowline .hi{color:var(--bad);font-weight:600}
.rowline .mid{color:var(--ok);font-weight:600}
.rowline .yes{color:var(--good);font-weight:600}
.dnsblock{font-family:var(--mono);font-size:15px;line-height:23px;background:var(--paper-2);border:1px solid var(--hairline);padding:var(--s4);word-break:break-all;margin:var(--s3) 0}
.actions{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s4)}
.scroller{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.lookalike{border-bottom:1px solid var(--hairline);padding:var(--s4) 0}
.lookalike:last-child{border-bottom:0}
.lookalike .mono{font-size:19px;color:var(--ink)}
.flag{color:var(--ink-muted);font-size:16px;line-height:25px;margin:var(--s1) 0 0}

/* numbers band, sits directly on the picture */
.figures{position:relative;padding:var(--s8) 0;color:#fff}
.figures h2{color:#fff;max-width:22ch;margin-bottom:var(--s6)}
.stats{display:grid;grid-template-columns:1fr;gap:var(--s5)}
@media(min-width:860px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat .fig{font-family:var(--serif);font-size:clamp(42px,5.4vw,66px);line-height:1;font-weight:600;font-variant-numeric:tabular-nums}
.stat p{font-size:17px;line-height:26px;color:rgba(255,255,255,.84);margin-top:var(--s3);max-width:34ch}
.figures .src{margin-top:var(--s6);font-size:15px;line-height:24px;color:rgba(255,255,255,.66)}
.figures .src a{color:#fff}

/* pricing */
.tiers{display:grid;grid-template-columns:1fr;gap:var(--s4);align-items:start}
@media(min-width:860px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{background:var(--paper-raised);border:1px solid var(--hairline);padding:var(--s5);display:flex;flex-direction:column;border-top:3px solid transparent}
.tier.rec{position:relative;z-index:2;border-top-color:var(--good);border-top-width:4px;box-shadow:0 22px 50px rgba(0,0,0,.12)}

@media(min-width:860px){.tier.rec{margin-top:-24px;margin-bottom:-24px;padding-top:var(--s6);padding-bottom:var(--s6)}}



.tier .name{font-family:var(--serif);font-size:26px;font-weight:600}
.tier .price{font-size:36px;line-height:1.1;font-weight:600;font-variant-numeric:tabular-nums;margin:var(--s3) 0 var(--s1)}
.tier .price .per{font-size:18px;font-weight:400}
.tier .sub{font-size:16px;line-height:24px;color:var(--ink-muted);margin-bottom:var(--s3);min-height:24px}
.tier .promise{min-height:81px}
@media(max-width:860px){.tier .promise,.tier .sub{min-height:0}}
.tier li.plain{padding-left:0;color:var(--ink-muted)}
.tier li.plain::before{display:none}
.tier .promise{color:var(--ink-muted);font-size:17px;line-height:27px;margin-bottom:var(--s5)}
.tier ul{list-style:none;padding:0;margin:0 0 var(--s5)}
.tier li{font-size:17px;line-height:26px;padding-left:24px;position:relative;margin-bottom:var(--s3)}
.tier li::before{content:"";position:absolute;left:2px;top:9px;width:9px;height:5px;border-left:2px solid var(--good);border-bottom:2px solid var(--good);transform:rotate(-45deg)}
/* A section that opens. The plus is a promise that there is more, where a
   chevron only says "expand"; on a page of findings that difference matters. */
.fold summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);min-height:48px;font-family:var(--serif);font-size:clamp(19px,2.2vw,22px);
  font-weight:600;color:var(--ink)}
.fold summary::-webkit-details-marker{display:none}
.fold summary::after{content:"+";font-family:var(--sans);font-size:26px;line-height:1;font-weight:400;
  color:var(--ink-muted);flex:none;transition:transform .18s}
.fold[open] summary::after{content:"‘2";transform:rotate(180deg)}
.fold summary:hover::after{color:var(--ink)}
.fold summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.fold > :not(summary){margin-top:var(--s4)}
/* A quieter one, for an aside rather than a whole section. */
.fold.small summary{font-family:var(--sans);font-size:16px;font-weight:600;color:var(--ink-muted);min-height:44px}
.fold.small summary::after{font-size:22px}
.fold.small{border-top:1px solid var(--hairline);margin-top:var(--s4);padding-top:var(--s2)}

.tier .more{margin:calc(var(--s3) * -1) 0 var(--s4)}
.tier .more summary{list-style:none;cursor:pointer;font-size:16px;font-weight:600;color:var(--ink-muted);
  padding:var(--s3) 0;display:flex;align-items:center;gap:var(--s2);min-height:44px}
.tier .more summary::-webkit-details-marker{display:none}
.tier .more summary::after{content:"";width:9px;height:9px;border-right:1.5px solid var(--ink-muted);
  border-bottom:1.5px solid var(--ink-muted);transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.tier .more[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.tier .more summary:hover{color:var(--ink)}
.tier .more ul{margin:var(--s2) 0 0}
.tier > .btn{margin-top:auto}
.tier .tag{font-size:14px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ink-muted)}

/* faq */
.faq{border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{list-style:none;cursor:pointer;padding:var(--s5) var(--s6) var(--s5) 0;font-family:var(--serif);font-size:21px;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:var(--s2);top:50%;width:11px;height:11px;border-right:1.5px solid var(--ink-muted);border-bottom:1.5px solid var(--ink-muted);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .a{padding:0 var(--s6) var(--s5) 0;color:var(--ink-muted);font-size:17px;line-height:27px;max-width:72ch}

footer{position:relative;background:var(--paper);border-top:1px solid var(--hairline);padding:var(--s6) 0 var(--s7);font-size:16px;line-height:25px;color:var(--ink-muted)}
/* Two columns: who we are on the left, where to go on the right. Flex let the
   left block run to whatever width its longest line wanted, which put the plain
   law in a 46ch strip beside a nav that had nothing under it. */
.footgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:var(--s5) var(--s7);align-items:start}
@media(max-width:820px){.footgrid{grid-template-columns:minmax(0,1fr);gap:var(--s5)}}
.footgrid a{text-decoration:none;transition:color .18s ease}
/* The two lines of plain law in the footer. Short enough to actually read,
   which is the only version of a privacy notice anybody ever does read. */
/* The line somebody repeats to a colleague. A stance, not a claim:
   nothing has to be delivered to make it true, which is the whole reason
   it is this one and not a promise about naming people. */
.brandline{font-family:var(--serif);font-size:19px;line-height:27px;font-weight:600;
  color:var(--ink);margin-top:var(--s3)}
/* The one piece of proof on the page that is not a statistic about other
   people. Bordered rather than boxed in colour: it is evidence, not an alert. */
/* It sits inside .figures, which is an inverted section, so every colour here
   is stated rather than inherited. Without that the heading is white on white. */
.proof{border:1px solid var(--hairline);border-left:4px solid var(--ink);background:var(--paper-raised);
  padding:var(--s5);margin-top:var(--s6);max-width:62ch;color:var(--ink)}
.proof .eyebrow{color:var(--ink-muted)}
.proof h3{font-size:clamp(20px,2.6vw,26px);margin:var(--s2) 0 var(--s3);max-width:24ch;color:var(--ink)}
.proof .mono{color:var(--ink)}
.proof p{font-size:17px;line-height:27px}
.proof .note{font-size:15px;line-height:24px;color:var(--ink-muted);margin-top:var(--s3)}
.plainlaw{font-size:14px;line-height:21px;color:var(--ink-muted);margin-top:var(--s2)}
.plainlaw b{color:var(--ink)}
.footnav a:hover,.footnav a:focus-visible{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.footnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2) var(--s5)}
@media(max-width:820px){.footnav{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}}
@media(max-width:860px){.navlinks a,.footnav a{display:inline-flex;align-items:center;min-height:44px}}

.rv{opacity:0;transform:translate3d(0,24px,0);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.marquee .track{animation:none}html{scroll-behavior:auto}}
[hidden]{display:none !important}

/* a quiet way to reach a person, on every page */
.sticky-contact{position:fixed;right:16px;bottom:16px;z-index:70;display:inline-flex;align-items:center;min-height:48px;
  padding:12px 18px;background:var(--ink);color:var(--paper);text-decoration:none;font:600 16px/22px var(--sans);
  box-shadow:0 10px 30px rgba(0,0,0,.25);padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.sticky-contact:hover{opacity:.9}
@media(max-width:520px){.sticky-contact{right:12px;bottom:12px;font-size:15px;padding:11px 14px}}
@media print{.sticky-contact{display:none}}