/* Self-hosted subsets. Built by brand/build_webfonts.py, printable ASCII plus
   the handful of marks the copy uses. 29 KB for all four faces, same origin,
   so the page makes no external requests at all.
   Inter Tight ships 400 and 600 only, Plex Mono 400 and 500 only. Anything
   asking for another weight is a bug, not a fallback. */
@font-face{
  font-family:"Inter Tight";
  src:url("assets/fonts/inter-tight-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Inter Tight";
  src:url("assets/fonts/inter-tight-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("assets/fonts/plex-mono-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("assets/fonts/plex-mono-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}

:root{
  --ink:#1C1A17; --rust:#A8442B; --paper:#F2EFE8;
  --paper-2:#EAE5D9; --muted:#6B6458; --line:#D8D2C4;
  /* Ink at 30% over paper. A sanctioned tint, not a new colour. Paper 2 is
     1.09:1 against paper, so the rising curve was effectively invisible. */
  --bar-inactive:#B2AFA9;
  /* Button hover. Ink lifted ten percent toward paper, so it is derived from
     the palette rather than a hex someone picked. */
  --ink-hover:#312F2C;
  /* The ink-background section. Rust and ink body text both fail contrast on
     ink, so these are the sanctioned substitutes from the brief's table, not
     new colours. They exist only inside .bleed and must not be used on paper. */
  --rust-light:#D4714F; --ink-body:#BEB8AC; --ink-rule:#35312B;
  --sans:"Inter Tight",-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --pad:clamp(20px,5vw,64px);

  /* Tracking. BRAND.md's table looks like six values but every row is the
     same ratio: 52px/-2.08px, 40px/-1.6px, 32px/-1.28px and the rest all
     resolve to exactly -0.04em. So it is one token, not six, and certainly
     not the eight hand-picked values this file used to carry.

     Three tiers, and every rule below uses one of them:
       display  Inter Tight at 600. Headings, buttons, display statements.
       label    mono, 11px, uppercase. Eyebrows, keys, axis, data labels.
       none     body copy at 400, and mono captions and UI text. */
  --track-display:-.04em;
  --track-label:.12em;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}

/* Horizontal longhands only. A `padding:0 var(--pad)` shorthand here also sets
   the vertical axis to 0, and since .shell outranks the `section` element
   selector it silently killed every section's vertical padding. */
.shell{max-width:1180px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.prose{max-width:60ch}

/* skip link, first thing in the tab order */
.skip{position:absolute;top:0;left:0;z-index:100;transform:translateY(-100%);
  background:var(--ink);color:var(--paper);text-decoration:none;padding:12px 20px;
  font-family:var(--mono);font-size:11px;letter-spacing:var(--track-label);text-transform:uppercase}
.skip:focus{transform:translateY(0)}

/* Visually hidden, still read aloud. Carries the ramp's numbers.
   Must wrap the table rather than sit on it: a table's intrinsic minimum
   width beats width:1px, and setting display on a <table> to force the clip
   strips its table semantics in some browsers, which is the opposite of the
   point. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* The sticky nav would otherwise sit on top of anchor targets. The nav is
   ~60px tall, so 80px leaves the target clear of it rather than flush against
   it. Individual <details> are targets too: main.js opens the one the fragment
   names, and an opened answer under the nav is the same bug as a heading under
   the nav. The class selector covers every question without listing ids. */
#main,#how,#pricing,#contact,#faq,.faq details{scroll-margin-top:80px}
main:focus{outline:none}

/* eyebrow, the structural device: mono labels that read like log lines.
   Some eyebrows are h2 where the section has no other heading, so the h2
   rule below has to be neutralised here. */
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--rust);margin:0 0 20px;display:block;
  max-width:none;line-height:1.6}

/* nav */
nav{position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--pad);max-width:1180px;margin:0 auto}
.wm{width:116px;height:auto}
.nav-link{font-family:var(--mono);font-size:12px;
  text-decoration:none;color:var(--muted);border-bottom:1px solid transparent;padding-bottom:2px;
  position:relative}
.nav-link:hover{color:var(--ink);border-bottom-color:var(--rust)}
/* The nav link is 22px tall, too small to hit on a phone, and it is the
   persistent CTA. Grow the hit area without moving the underline or shifting
   the flex centring. Same for the mail link, which is 35px. */
.nav-link::after,.mail::after{content:"";position:absolute;left:0;right:0;top:-12px;bottom:-12px}
.mail{position:relative}
.mail::after{top:-6px;bottom:-6px}

/* hero. Vertical longhands only, so .shell keeps supplying the horizontal
   padding. The shorthand here was zeroing it and running the h1 edge to edge
   on every viewport narrower than the shell's max-width. */
.hero{padding-top:clamp(64px,11vw,132px);padding-bottom:clamp(48px,8vw,88px)}
/* text-wrap:balance evens out the last line. At 80px a single orphaned word
   is very visible. Unsupported browsers just wrap normally. */
h1{font-size:clamp(38px,7.4vw,80px);font-weight:600;line-height:1.02;
  letter-spacing:var(--track-display);margin:0 0 28px;max-width:15ch;
  text-wrap:balance}
h1 em{font-style:normal;color:var(--rust)}
.lede{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:46ch;margin:0 0 36px}
.btn{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;
  font-weight:600;padding:14px 28px;border-radius:4px;letter-spacing:var(--track-display);
  transition:transform .12s ease,background .15s ease}
.btn:hover{background:var(--ink-hover);transform:translateY(-1px)}

/* hero status strip, mono, reads like a system readout */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(48px,7vw,80px)}
.strip div{background:var(--paper);padding:18px 20px}
.strip dt{font-family:var(--mono);font-size:11px;letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--muted);margin:0 0 6px}
.strip dd{margin:0;font-size:15px;font-weight:600;letter-spacing:var(--track-display)}

/* sections */
section{padding:clamp(56px,9vw,104px) 0}
.rule{border-top:1px solid var(--line)}
h2{font-size:clamp(26px,4.2vw,42px);font-weight:600;letter-spacing:var(--track-display);
  line-height:1.1;margin:0 0 24px;max-width:20ch;text-wrap:balance}
h3{font-size:17px;font-weight:600;letter-spacing:var(--track-display);line-height:1.18;margin:0 0 8px}
p{margin:0 0 18px}
p:last-child{margin-bottom:0}

/* Annotation column. Was a one-off on the problem section, now a system used
   in three places. The note always follows its content in the DOM so it reads
   as a gloss on what was just said; above 960px grid puts it in the margin. */
.ann{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,64px)}
@media(min-width:960px){
  .ann{grid-template-columns:150px minmax(0,1fr)}
  .ann-main{grid-column:2;grid-row:1}
  .note-col{grid-column:1;grid-row:1}
}
.note-col{font-family:var(--mono);font-size:10.5px;line-height:1.9;color:var(--muted)}
.note-col span{display:block;border-left:2px solid var(--rust);padding-left:10px;margin-bottom:12px}

/* Tonal alternation. Paper 2 only, no new colour. Cells, steps and strip
   children inherit the tint so they do not read as lighter boxes floating on
   a darker ground; the 1px grid gaps still carry the hairlines. */
.tint{background:var(--paper-2)}
.tint .cell,.tint .step,.tint .strip div{background:var(--paper-2)}

/* build grid */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:8px}
@media(min-width:720px){.grid{grid-template-columns:1fr 1fr}}
.cell{background:var(--paper);padding:clamp(24px,3vw,34px)}
.cell .n{font-family:var(--mono);font-size:11px;color:var(--rust);letter-spacing:var(--track-label);
  display:block;margin-bottom:12px}
.cell p{font-size:15.5px;color:var(--muted);margin:0}

/* full bleed dark */
.bleed{background:var(--ink);color:var(--paper)}
.bleed .eyebrow{color:var(--rust-light)}
.bleed h2{max-width:24ch}
.bleed p{color:var(--ink-body)}
.bleed-note{margin-top:32px;max-width:52ch}
.nots li{list-style:none;font-size:clamp(19px,2.5vw,25px);font-weight:600;
  letter-spacing:var(--track-display);line-height:1.18;padding:20px 0;border-bottom:1px solid var(--ink-rule);color:var(--paper)}
.nots ul{margin:0;padding:0}
.nots li:last-child{border-bottom:none}

/* the ramp, signature element.
   Default state is finished. Animation is opt-in via .js-anim, which is only
   set when JS runs and the reader has not asked for reduced motion. If the
   script never runs, the chart is still a chart. */
.ramp-wrap{margin-top:clamp(32px,5vw,56px)}
.ramp-fig{margin:0}
/* 2px gap floor rather than 3px: at 320px the bars are only ~11px wide, and a
   3px gap is a quarter of that, which reads as a comb rather than a chart. */
.ramp{display:flex;align-items:flex-end;gap:clamp(2px,.8vw,7px);height:clamp(140px,22vw,230px);
  border-bottom:1px solid var(--line);padding-bottom:0}
.bar{flex:1;background:var(--bar-inactive);height:var(--h);border-radius:2px 2px 0 0}
.bar.wk3{background:var(--rust)}
.js-anim .bar{height:0;background:var(--bar-inactive);
  transition:height .7s cubic-bezier(.22,.61,.36,1),background .5s ease;
  transition-delay:calc(var(--i) * 55ms)}
.js-anim .ramp.go .bar{height:var(--h)}
.js-anim .ramp.go .bar.wk3{background:var(--rust)}
/* "Week 4, live" cannot fit one line in a 70px column at 320px without going
   below 9px, so it wraps. Tight line-height keeps that wrap from making the
   whole axis row loose, since grid equalises all four to the tallest. */
.ramp-axis{display:grid;grid-template-columns:repeat(4,1fr);margin-top:14px;line-height:1.35;
  font-family:var(--mono);font-size:11px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted)}
.ramp-axis span{border-top:1px solid var(--line);padding-top:10px}
.ramp-axis span:last-child{color:var(--rust)}
.ramp-cap{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:20px}

.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(32px,5vw,52px)}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--paper);padding:clamp(22px,3vw,30px)}
.js-anim .step{opacity:0;transform:translateY(12px);
  transition:opacity .6s ease,transform .6s ease}
.js-anim .step:nth-child(2){transition-delay:.5s}
.js-anim .step:nth-child(3){transition-delay:1s}
.js-anim .steps.go .step{opacity:1;transform:none}
.step .wk{font-family:var(--mono);font-size:11px;letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--rust);display:block;margin-bottom:10px}
.step p{font-size:15.5px;color:var(--muted);margin:0}

/* guarantee */
.guar{border:1px solid var(--ink);padding:clamp(28px,5vw,56px)}
/* The guarantee statement is an h2 and was a peer of the section headings at
   34px. Inherit h2's size and tracking so it stays a peer now the scale moved. */
.guar .big{margin:0 0 24px;max-width:none}

/* suits. Reuses .grid/.cell rather than a second, weaker device: this section
   was four paragraphs under hairlines while every other section had structure.
   Only the exception cell keeps a rust rule, which is the signal the old
   .suit.no border carried. */
.cell.not{border-top:2px solid var(--rust)}

/* FAQ. Type and rules only. The disclosure marker is a mono plus sign, not an
   icon: the default triangle is replaced because it is the one piece of
   browser chrome on the page that ignores the brand. */
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;position:relative;
  padding:22px 40px 22px 0;font-size:17px;font-weight:600;
  letter-spacing:var(--track-display);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:22px;
  font-family:var(--mono);font-size:16px;font-weight:400;
  letter-spacing:normal;color:var(--rust);line-height:1.3}
.faq details[open] summary::after{content:"-"}
.faq summary:hover{color:var(--rust)}
.faq details p{max-width:68ch;color:var(--muted);font-size:16px;
  margin:0 0 22px;padding-right:40px}

/* contact */
.contact{text-align:left}
.mail{font-family:var(--mono);font-size:clamp(18px,3.2vw,30px);font-weight:500;
  text-decoration:none;border-bottom:2px solid var(--rust);
  padding-bottom:4px;display:inline-block;margin-top:8px}
.mail:hover{color:var(--rust)}

/* The Companies House and PECR lines are a credibility claim, not small print,
   so the footer sits at ink rather than muted. */
footer{border-top:1px solid var(--line);padding:36px 0 64px;font-family:var(--mono);
  font-size:13px;line-height:1.9;color:var(--ink)}

:focus-visible{outline:2px solid var(--rust);outline-offset:3px}

/* .js-anim is set once at load. If the reader turns reduced motion on later
   without reloading, these force the finished state anyway. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn:hover{transform:none}
  .js-anim .bar{height:var(--h);transition:none}
  .js-anim .bar.wk3{background:var(--rust)}
  .js-anim .step{opacity:1;transform:none;transition:none}
}