/* =========================================================================
   WHAT THE RECORD SAYS - homepage, v2, 2026-09-12
   -------------------------------------------------------------------------
   v1 was two things wrong: it was a nursing-home page pretending to be a
   homepage, and Steve's word for the palette was "beige".

   THE FIX FOR BOTH IS THE SAME ONE. This site covers many inspected trades,
   so COLOUR BECOMES STRUCTURE: every trade owns a hue, and the hue carries
   through the numbers, the cards and the eventual sections. That kills the
   beige and does a job at the same time - a reader learns the colour before
   they learn the name.

   Restraint stays where it belongs: the FRAME is quiet, the DATA is loud.
   Every figure is IBM Plex Mono so it reads as lifted out of a file.
   ========================================================================= */

:root {
  --paper:      #FFFEFB;
  --sunk:       #F4F2ED;
  --deep:       #10100D;   /* the dark band. Stops the page reading as one long cream sheet */
  --edge:       #E0DDD4;
  --ink:        #14140F;
  --soft:       #55534A;
  --faint:      #8A877D;

  /* ---- one hue per trade. Saturated enough to be alive, dark enough to
     stay professional on paper-white, and distinguishable to a
     colour-blind reader by position and label as well as by hue. ---- */
  --care:  #1F6F5C;   /* nursing homes - clinical green */
  --food:  #C2410C;   /* restaurants - a hot pass */
  --road:  #1D4ED8;   /* trucking - highway blue */
  --kids:  #A21CAF;   /* childcare - violet */
  --fire:  #B91C1C;   /* fire safety - red, used sparingly and only here */
  --fran:  #7C3AED;   /* franchising - a contract violet */
  --law:   #0F766E;   /* professional licensing - a deep teal */

  --measure: 38rem;
  --wide: 74rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#100F0C; --sunk:#17161230; --deep:#000; --edge:#302E27;
    --ink:#F6F4EC; --soft:#B4B1A5; --faint:#7E7B72;
    --care:#3DBF9E; --food:#FB923C; --road:#7DA2FF; --kids:#E879F9; --fire:#F87171;
    --fran:#A78BFA; --law:#2DD4BF;
  }
}
:root[data-theme="dark"]{
  --paper:#100F0C; --sunk:#171612; --deep:#000; --edge:#302E27;
  --ink:#F6F4EC; --soft:#B4B1A5; --faint:#7E7B72;
  --care:#3DBF9E; --food:#FB923C; --road:#7DA2FF; --kids:#E879F9; --fire:#F87171;
  --fran:#A78BFA; --law:#2DD4BF;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  font-size:1.0625rem; line-height:1.62; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{line-height:1.13;margin:0}
h1{font-size:clamp(2.3rem,5.6vw,4rem)}
h1 em{font-style:italic;font-weight:400}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.18}
h3{font-size:1.28rem;line-height:1.25}
p{margin:0 0 1.1em}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--road);outline-offset:3px}

.fig,.big{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 1rem}
.wrap{max-width:var(--wide);margin:0 auto;padding:0 1.5rem}
.read{max-width:var(--measure)}
.rule{border:0;border-top:1px solid var(--edge);margin:0}

/* ---- the mark: nine cells, a file filling up ---- */
.mark{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;width:max-content}
.mark i{width:.5rem;height:.5rem;background:var(--edge);border-radius:1px}
.mark i:nth-child(1),.mark i:nth-child(2),.mark i:nth-child(4),
.mark i:nth-child(5),.mark i:nth-child(7){background:var(--ink)}

.freebar{
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.07em;
  text-transform:uppercase;text-align:center;padding:.55rem 1rem;
  background:var(--deep);color:#F6F4EC;
}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 0;border-bottom:1px solid var(--edge)}
.logo{display:flex;align-items:center;gap:.65rem;text-decoration:none}
.logo b{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:.8rem;letter-spacing:.03em;text-transform:uppercase}
.nav{display:flex;gap:1.4rem;font-size:.87rem}
.nav a{color:var(--soft);text-decoration:none}
.nav a:hover{color:var(--ink);text-decoration:underline}
@media(max-width:34rem){.nav{display:none}}

.hero{padding:clamp(1.6rem,4.5vw,3rem) 0 3rem}  /* halved on Steve's note */
.hero h1{max-width:19ch}
.hero .stand{max-width:44ch;margin-top:1.5rem;font-size:1.2rem;color:var(--soft)}
.hero .stand strong{color:var(--ink)}

/* =========================================================================
   THE NUMBERS. A dark band, because the page needs a floor to stand on and
   because a figure in mono on near-black is the most legible thing here.
   Each card takes its trade's hue.
   ========================================================================= */
.numbers{background:var(--deep);color:#F1EFE7;padding:clamp(3rem,7vw,4.75rem) 0}
.num-grid{display:grid;gap:2.5rem 2.75rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.n{margin:0}
.n .big{display:block;font-size:clamp(2.6rem,5.5vw,3.6rem);font-weight:600;line-height:1;color:var(--tc,#F1EFE7)}
.n figcaption{margin:.85rem 0 0;font-size:.97rem;color:#C9C6BB;max-width:32ch}
.n figcaption strong{color:#FFF;font-weight:600}
.n .hl{color:var(--tc,#F1EFE7);font-family:"IBM Plex Mono",monospace;font-weight:600}
.n cite{display:block;margin-top:.85rem;font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:#7E7B72}
.n[data-trade=care]{--tc:#3DBF9E}
.n[data-trade=food]{--tc:#FB923C}
.n[data-trade=road]{--tc:#7DA2FF}
.n[data-trade=kids]{--tc:#E879F9}
.n[data-trade=fire]{--tc:#F87171}
.n[data-trade=fran]{--tc:#A78BFA}
.n[data-trade=law]{--tc:#2DD4BF}
.numnote{margin:2.75rem 0 0;font-size:.85rem;color:#8A877D;max-width:52ch}

.sec{padding:clamp(3rem,7vw,4.75rem) 0}
.sec-head{max-width:var(--measure);margin-bottom:2.5rem}
.lede{font-size:1.08rem;color:var(--soft);margin-top:1rem}

/* ---- the four steps: what we actually do ---- */
.steps{display:grid;gap:1.75rem 2.5rem;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr))}
.step{border-top:2px solid var(--edge);padding-top:1rem}
.sn{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;color:var(--faint);display:block;margin-bottom:.5rem}
.step h3{font-size:1.1rem;margin-bottom:.45rem}
.step p{font-size:.93rem;color:var(--soft);margin:0}

/* ---- the records we work with. No links, no badges, no status ladder:
   a list of what we do, presented as equals. ---- */
.recs{list-style:none;margin:0;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.recs li{display:flex;flex-direction:column;gap:.2rem;padding:.95rem 0 .95rem 1rem;
  border-bottom:1px solid var(--edge);border-left:3px solid var(--tc,var(--edge))}
.recs li[data-trade=care]{--tc:var(--care)} .recs li[data-trade=food]{--tc:var(--food)}
.recs li[data-trade=road]{--tc:var(--road)} .recs li[data-trade=kids]{--tc:var(--kids)}
.recs li[data-trade=fire]{--tc:var(--fire)}
.recs li[data-trade=fran]{--tc:var(--fran)} .recs li[data-trade=law]{--tc:var(--law)}
.recs b{font-weight:600;font-size:1rem}
.recs span{font-size:.87rem;color:var(--soft)}

/* ---- trades (retained for the nursing page) ---- */
.trades{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr))}
.trade{
  display:block;text-decoration:none;padding:1.6rem 1.5rem 1.5rem;
  background:var(--sunk);border:1px solid var(--edge);border-top:3px solid var(--tc,var(--edge));
  border-radius:3px;
}
.trade[data-trade=care]{--tc:var(--care)} .trade[data-trade=food]{--tc:var(--food)}
.trade[data-trade=road]{--tc:var(--road)} .trade[data-trade=kids]{--tc:var(--kids)}
.trade.live:hover{background:var(--paper);border-color:var(--tc)}
.trade.soon{opacity:.72}
.badge{
  display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.64rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tc,var(--faint));
  border:1px solid currentColor;border-radius:2px;padding:.14rem .45rem;margin-bottom:.9rem
}
.trade h3{margin-bottom:.5rem}
.tstat{font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--soft);margin:0 0 .8rem}
.tstat .fig{color:var(--tc,var(--ink));font-weight:600}
.trade p{font-size:.93rem;color:var(--soft);margin-bottom:1rem}
.go{font-family:"IBM Plex Mono",monospace;font-size:.76rem;letter-spacing:.04em;color:var(--tc,var(--faint))}
.trade.soon .go{color:var(--faint)}

/* ---- position + honesty ---- */
.two{display:grid;gap:3rem;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));align-items:start}
.two p{color:var(--soft)}
.big-line{font-size:clamp(1.5rem,3vw,2rem);line-height:1.2;color:var(--ink)!important;margin:1.4rem 0}
.honesty{background:var(--sunk);border:1px solid var(--edge);border-left:3px solid var(--care);border-radius:3px;padding:1.6rem}
.honesty p{font-size:.95rem;margin-bottom:.9rem}
.honesty p:last-child{margin-bottom:0}
.honesty strong{color:var(--ink)}

.cta{font-weight:600;text-underline-offset:4px}

footer{background:var(--sunk);border-top:1px solid var(--edge);padding:3rem 0 3.5rem;font-size:.87rem;color:var(--soft);margin-top:2rem}
.foot-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
footer strong{color:var(--ink);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-family:"IBM Plex Mono",monospace}
footer .mark{margin-bottom:.8rem}

@media print{:root{--paper:#fff;--sunk:#fff;--deep:#fff;--ink:#000}.numbers{color:#000}.n figcaption{color:#333}.freebar,.nav{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* =========================================================================
   v3 - the freedom-fighter pass, 2026-09-12
   Steve: "we want to come over as data freedom fighters, working for
   industries to free up data so they can use it - NOT pitching our pdf's."
   And: more colour in header and footer, "magicians of data, on your side".
   ========================================================================= */

/* THE SPECTRUM. Every trade's hue in one line, top and bottom. The palette
   IS the branding: many records, one place. Costs nothing, says a lot. */
.spectrum{display:flex;height:4px;width:100%}
.spectrum i{flex:1}
.spectrum i:nth-child(1){background:var(--care)}
.spectrum i:nth-child(2){background:var(--food)}
.spectrum i:nth-child(3){background:var(--road)}
.spectrum i:nth-child(4){background:var(--kids)}
.spectrum i:nth-child(5){background:var(--fire)}
.spectrum i:nth-child(6){background:var(--fran)}
.spectrum i:nth-child(7){background:var(--law)}

/* THE MISSION. Dark, so it lands as a statement rather than another section. */
.mission{background:var(--deep);color:#F1EFE7;padding:clamp(3.5rem,8vw,5.5rem) 0}
.mission .eyebrow{color:#8A877D}
.mission-grid{display:grid;gap:2.5rem 4rem;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));align-items:start}
.mission h2{font-size:clamp(1.9rem,4vw,2.9rem);color:#FFFEFB;max-width:16ch}
.mission-body p{color:#C9C6BB;max-width:46ch}
.mission-body strong{color:#FFF}
.mission-body .sign{
  font-size:1.35rem;line-height:1.35;color:#FFFEFB;
  border-left:3px solid var(--fran);padding-left:1.1rem;margin-top:1.8rem
}

/* Take it and use it. The four questions, answered as permission. */
.takeit{margin-top:3.5rem;padding-top:2.5rem;border-top:1px solid #302E27}
.takeit h3{font-size:1.5rem;color:#FFFEFB;margin-bottom:1.5rem}
.takeit-cols{display:grid;gap:1.5rem 3rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.takeit-cols p{color:#C9C6BB;font-size:.97rem;margin:0}
.takeit-cols strong{color:#FFF;display:block;margin-bottom:.15rem}

/* FOOTER, warmer and with the spectrum across the top of it. */
footer{background:var(--deep);color:#B4B1A5;border-top:0;padding:0 0 3.5rem;margin-top:0}
footer .foot-grid{padding-top:3rem}
footer a{color:#C9C6BB;text-underline-offset:3px}
footer a:hover{color:#FFF}
footer strong{color:var(--faint)}
.foot-brand b{color:#FFFEFB;font-size:1.15rem}
.foot-tag{color:#8A877D;font-size:.85rem}
footer .mark i{background:#302E27}
footer .mark i:nth-child(1){background:var(--care)}
footer .mark i:nth-child(2){background:var(--food)}
footer .mark i:nth-child(4){background:var(--road)}
footer .mark i:nth-child(5){background:var(--kids)}
footer .mark i:nth-child(7){background:var(--fran)}


/* v4: the mission moved above the numbers, so the numbers band can no longer be
   the dark floor of the page - two dark blocks touching read as one. It takes
   the paper ground instead, and the trade hues do the work they were always
   doing. The dark now bookends: mission at the top, footer at the bottom. */
.numbers--light{background:var(--sunk);color:var(--ink);border-bottom:1px solid var(--edge)}
.numbers--light .n figcaption{color:var(--soft)}
.numbers--light .n figcaption strong{color:var(--ink)}
.numbers--light .n cite{color:var(--faint)}
.numbers--light .numnote{color:var(--faint)}
.numbers--light .n[data-trade=care]{--tc:var(--care)}
.numbers--light .n[data-trade=food]{--tc:var(--food)}
.numbers--light .n[data-trade=road]{--tc:var(--road)}
.numbers--light .n[data-trade=kids]{--tc:var(--kids)}
.numbers--light .n[data-trade=fire]{--tc:var(--fire)}
.numbers--light .n[data-trade=fran]{--tc:var(--fran)}
.numbers--light .n[data-trade=law]{--tc:var(--law)}
/* the hero now runs straight into the dark mission, so it needs its own breath */
.hero{padding-bottom:clamp(2rem,5vw,3.25rem)}


/* v5: the coloured mark is the PRIMARY, not the footer variant. Steve picked it,
   and he is right - the monochrome version says "a file", the coloured one says
   "many records, one place", which is the whole proposition in nine squares. */
.mark i{background:var(--edge)}
.mark i:nth-child(1){background:var(--care)}
.mark i:nth-child(2){background:var(--food)}
.mark i:nth-child(3){background:var(--edge)}
.mark i:nth-child(4){background:var(--road)}
.mark i:nth-child(5){background:var(--kids)}
.mark i:nth-child(6){background:var(--edge)}
.mark i:nth-child(7){background:var(--fran)}
.mark i:nth-child(8){background:var(--edge)}
.mark i:nth-child(9){background:var(--edge)}
/* slightly larger in the masthead so the colour reads at a glance */
.masthead .mark i{width:.58rem;height:.58rem}
/* on the dark footer the empties need a dark ground, not the light edge */
footer .mark i:nth-child(3),footer .mark i:nth-child(6),
footer .mark i:nth-child(8),footer .mark i:nth-child(9){background:#302E27}


/* v6: the real swap. Mission sits under the hero; the numbers moved down to the
   mission's old slot; take-it stayed at the bottom where it always was.
   Take-it is no longer inside a dark section, so it takes the paper ground.
   Rhythm now: paper hero, DARK mission, three paper sections, sunk numbers,
   sunk take-it, DARK footer. One dark statement at the top, one at the base. */
.takeit-sec{background:var(--sunk);border-top:1px solid var(--edge);
  padding:clamp(2.75rem,6vw,4rem) 0}
.takeit-sec .takeit{margin:0;padding:0;border-top:0}
.takeit-sec .takeit h3{color:var(--ink);font-size:1.7rem;margin-bottom:1.5rem}
.takeit-sec .takeit-cols p{color:var(--soft)}
.takeit-sec .takeit-cols strong{color:var(--ink)}


/* v7: the vault animation under the mission headline. */
.vault-fig{margin:2rem 0 0;padding:0}
#vault{display:block;width:100%;height:auto;aspect-ratio:520/230;
  background:#0A0A08;border:1px solid #2A2822;border-radius:3px}
.vault-fig figcaption{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:.85rem}
.v-step{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:#7E7B72}
.v-step b{color:var(--fran);font-weight:600;margin-right:.3rem}
/* the mission headline no longer needs to fill its column now the canvas is under it */
.mission h2{max-width:18ch}
@media(max-width:52rem){ .mission-grid{gap:2rem} }


/* v8 */
.recs li.more{border-left:3px dashed var(--faint);background:transparent}
.recs li.more b{color:var(--soft)}
.recs li.more span{color:var(--faint)}
.takeit-lede{max-width:46ch;color:var(--soft);font-size:1.05rem;margin:-.5rem 0 1.75rem}
.takeit-sec .takeit-cols{grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:1.6rem 3rem}


/* v9: the numbers go back to black. They are no longer adjacent to the mission,
   so the page now alternates properly: dark mission, three paper sections,
   dark numbers, light permission block, dark footer. The numbers band also gets
   the spectrum on its top edge, which ties it to the header and footer. */
.numbers{position:relative;background:var(--deep);color:#F1EFE7;border-bottom:0}
.numbers::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(to right,
    var(--care) 0 14.28%, var(--food) 14.28% 28.56%, var(--road) 28.56% 42.84%,
    var(--kids) 42.84% 57.12%, var(--fire) 57.12% 71.4%, var(--fran) 71.4% 85.68%,
    var(--law) 85.68% 100%)}
.numbers .n figcaption{color:#C9C6BB}
.numbers .n figcaption strong{color:#FFF}
.numbers .n cite{color:#7E7B72}
.numbers .numnote{color:#8A877D}
.numbers .n[data-trade=care]{--tc:#3DBF9E} .numbers .n[data-trade=food]{--tc:#FB923C}
.numbers .n[data-trade=road]{--tc:#7DA2FF} .numbers .n[data-trade=kids]{--tc:#E879F9}
.numbers .n[data-trade=fire]{--tc:#F87171} .numbers .n[data-trade=fran]{--tc:#A78BFA}
.numbers .n[data-trade=law]{--tc:#2DD4BF}


/* v10: the take-it lede is now three short paragraphs (what it is, who it is
   for, the arrangement) rather than one. Tighten the spacing between them so
   they read as one opening statement and not three separate thoughts. */
.takeit-lede{margin:0 0 .85rem}
.takeit-lede:first-of-type{margin-top:-.5rem}
.takeit-lede:last-of-type{margin-bottom:1.9rem;color:var(--ink)}


/* =========================================================================
   v10: ONE TYPEFACE, AND AIR.

   Steve: "the font looks weird and there's too much text for the eye, split
   it up."

   THE FONT. Three families was one too many, and the odd one was Newsreader:
   a variable serif with an optical-size axis, which at clamp() display sizes
   picks an optical size that does not match the rendered size, so headings
   came out with the wrong stroke contrast. Plex Sans and Plex Mono were drawn
   as one family, so the page now has one voice and the mono figures read as
   part of it rather than as a third guest.

   The display face is Plex Sans at 600 with negative tracking. That is what
   makes it read as a display face rather than as large body text, and it is
   the reason we do not need a serif to get hierarchy.

   THE AIR. Shorter measure, bigger gaps between paragraphs, more room above
   each heading. Nothing was deleted here. The same words simply stop arriving
   as a wall.
   ========================================================================= */

h1,h2,h3{font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;font-weight:600}
h1{letter-spacing:-.035em;line-height:1.04}
h2{letter-spacing:-.024em;line-height:1.1}
h3{letter-spacing:-.012em;font-weight:600}
h1 em{font-style:normal;font-weight:400;color:var(--soft)}

/* the two pull quotes: same family, separated by WEIGHT not by serifs */
.big-line,.mission-body .sign{
  font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  font-weight:400;letter-spacing:-.018em
}
.big-line{line-height:1.22}
.mission-body .sign{font-size:1.3rem;line-height:1.4}
.foot-brand b{font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  font-weight:600;letter-spacing:-.01em}

/* ---- air ---- */
p{margin:0 0 1.35em}
body{line-height:1.66}

/* a shorter line is the single biggest thing that stops prose reading as a
   wall, so every block of running text gets one */
.mission-body p{max-width:42ch}
.two p,.lede{max-width:44ch}
.honesty p{max-width:46ch;margin-bottom:1.1rem}
.takeit-lede{max-width:44ch}
.takeit-cols p{max-width:40ch}
.step p{max-width:34ch}

/* room above each heading so sections announce themselves */
.two h2,.two h3{margin-bottom:.9rem}
.honesty{padding:1.9rem}

/* the spec strip: what it is / who it is for, as two cells rather than two
   more paragraphs. Numbered because they answer two questions in an order. */
.spec{display:grid;gap:1.5rem 3rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  margin:0 0 2rem;padding-bottom:1.75rem;border-bottom:1px solid var(--edge)}
.spec .v-step{color:var(--faint);display:block;margin-bottom:.5rem}
.spec .v-step b{color:var(--care)}
.spec p{margin:0;color:var(--soft);font-size:1rem;max-width:36ch}

/* v11: the deal diagram. Same treatment as the vault, but on the paper ground
   rather than the dark one, so no border box: it sits in the page rather than
   in a window. The canvas reads its own colours out of these tokens, so it
   follows the page into dark mode. */
.deal-fig{margin:.5rem 0 2.5rem;padding:0}
#deal{display:block;width:100%;max-width:42rem;height:auto;aspect-ratio:700/300;margin:0 auto}
.deal-fig figcaption{display:flex;gap:1.1rem 1.8rem;flex-wrap:wrap;
  margin-top:.6rem;padding-top:.9rem;border-top:1px solid var(--edge)}
.deal-fig .v-step{color:var(--faint)}
.deal-fig .v-step b{color:var(--fran);font-weight:600;margin-right:.3rem}
@media(max-width:34rem){ .deal-fig figcaption{gap:.6rem 1.2rem} }

/* v12: "We have nothing to sell you" gets the full width.

   It was inside the left column of .two, where v10's 44ch cap applies. That
   cap is right for body copy and wrong for a display line: it was wrapping a
   five word sentence. Out of the column, across the section, with the
   qualifier set beside it instead of underneath. */
.declare{
  border-top:1px solid var(--edge); margin-top:3.25rem; padding-top:2.25rem;
  display:grid; gap:1.1rem 3.5rem; grid-template-columns:1.1fr .9fr; align-items:start;
}
.declare .big-line{
  margin:0; max-width:none;
  /* 600, like every other display line on this page. At 400 a sans this
     large has nothing holding it together. */
  font-weight:600;
  font-size:clamp(1.7rem,3.5vw,2.55rem); line-height:1.1; letter-spacing:-.026em;
  text-wrap:balance;
}
.declare p:last-child{margin:0; color:var(--soft); max-width:38ch; padding-top:.45rem}
@media(max-width:52rem){ .declare{grid-template-columns:1fr; gap:1.1rem} }

/* v13: the two lede paragraphs match, and they run the full width.

   THE COLOUR WAS A LEFTOVER. Back when this section opened with THREE lede
   paragraphs, the last one was the punchline and got darkened on purpose:

       .takeit-lede:last-of-type{ ... color:var(--ink)}

   There are two now, so that rule just picks one of a matched pair and
   darkens it for no reason anybody reading the page could infer. Both go to
   --soft, which is what every other lede on the page uses. The margin half
   of the old rule still earns its place and stays.

   FULL WIDTH: the 44ch cap belongs on the six columns underneath, not on
   these two. They are short, one or two lines each at this width, and they
   sit directly above a full-width diagram. Capping them left the section
   opening on a narrow ragged block above a wide picture. */
.takeit-lede{max-width:none}
.takeit-lede:last-of-type{color:var(--soft)}

/* v14: the contact form.

   Paper ground, between the sunk take-it band and the dark footer, so the
   page keeps alternating rather than running two quiet sections together.
   Controls are deliberately plain: a 1px edge, a generous target, and the
   accent reserved for focus, which is the one state that has to be obvious. */
[hidden]{display:none!important}

.contact{background:var(--paper);border-top:1px solid var(--edge);
  padding:clamp(3rem,6vw,4.5rem) 0}
.contact-grid{display:grid;gap:2.5rem 4rem;
  grid-template-columns:minmax(15rem,.8fr) minmax(20rem,1.2fr);align-items:start}
.contact-say p{color:var(--soft);max-width:30ch;margin-top:1rem}

/* the honeypot: present for a bot, gone for everybody else */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.fl{display:block;font-family:"IBM Plex Mono",monospace;font-size:.68rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--faint);margin:0 0 .45rem}
.fl .opt{font-style:normal;text-transform:none;letter-spacing:.02em;color:var(--faint);
  opacity:.8}

.routes{border:0;padding:0;margin:0 0 1.6rem}
.routes legend{padding:0}
.routes label{display:flex;gap:.7rem;align-items:flex-start;padding:.62rem 0;
  cursor:pointer;font-size:.95rem;color:var(--soft);border-top:1px solid var(--edge)}
.routes label:last-of-type{border-bottom:1px solid var(--edge)}
.routes input{margin:.25rem 0 0;accent-color:var(--fran);flex:none;width:1rem;height:1rem}
.routes label:hover span{color:var(--ink)}
.routes input:checked ~ span{color:var(--ink);font-weight:500}

.warn{font-size:.88rem;color:var(--ink);background:var(--sunk);
  border-left:3px solid var(--fire);border-radius:2px;
  padding:.9rem 1rem;margin:-.6rem 0 1.5rem;max-width:52ch}

.field{margin:0 0 1.25rem}
.f2{display:grid;gap:0 1.25rem;grid-template-columns:1fr 1fr}
.form input[type=text],.form input[type=email],.form textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--edge);border-radius:3px;padding:.7rem .8rem;
  transition:border-color .12s}
.form textarea{resize:vertical;min-height:7.5rem;line-height:1.55}
.form ::placeholder{color:var(--faint);opacity:1}
.form input:focus-visible,.form textarea:focus-visible{
  outline:2px solid var(--fran);outline-offset:1px;border-color:var(--fran)}

.send{display:flex;gap:1rem 1.4rem;align-items:center;flex-wrap:wrap;margin-bottom:0}
.form button{font:inherit;font-weight:600;font-size:.95rem;cursor:pointer;
  color:var(--paper);background:var(--ink);border:0;border-radius:3px;
  padding:.72rem 1.6rem;transition:background .12s}
.form button:hover{background:var(--fran)}
.fnote{font-size:.82rem;color:var(--faint)}

@media(max-width:52rem){
  .contact-grid{grid-template-columns:1fr;gap:1.75rem}
  .contact-say p{max-width:44ch}
  .f2{grid-template-columns:1fr}
}

/* v15: the small print pages, and the thanks page. Plain reading pages: one
   column, a real measure, and no decoration competing with the text. */
.legal{padding:clamp(2.5rem,5vw,4rem) 0 clamp(3rem,6vw,4.5rem)}
.legal .wrap{max-width:44rem}
.legal h1{font-size:clamp(2rem,4.4vw,2.9rem);letter-spacing:-.03em;margin-bottom:1.1rem}
.legal h2{font-size:1.22rem;letter-spacing:-.012em;margin:2.6rem 0 .7rem}
.legal p,.legal li{color:var(--soft);max-width:62ch}
.legal .lede{font-size:1.12rem;color:var(--ink);max-width:52ch;margin-bottom:2rem}
.legal ul{margin:0 0 1.1em;padding-left:1.15rem}
.legal li{margin-bottom:.55rem}
.legal strong{color:var(--ink)}

/* the two markers that must not be quietly ignored */
.todo{background:var(--sunk);border-left:3px solid var(--fire);border-radius:2px;
  padding:1rem 1.15rem;margin:0 0 2.5rem;font-size:.92rem;max-width:58ch}
.gap{background:var(--sunk);border:1px dashed var(--faint);border-radius:2px;
  padding:.8rem 1rem;font-family:"IBM Plex Mono",monospace;font-size:.82rem;
  color:var(--ink);max-width:58ch}

/* v16: the deal figure lines up, and its caption fits on one line.

   ALIGNMENT. #deal was max-width:42rem with margin:0 auto inside a figure
   whose caption ran the full width of the wrap. So the drawing sat centred
   above a rule that stuck out past it on both sides, while every other block
   in the section was left-aligned full width. Capping the FIGURE instead and
   letting the canvas fill it puts the drawing, the rule and the surrounding
   text all on the same left edge.

   ONE LINE. Five labels at their old lengths ran to about 1,100px and wrapped
   to three rows. Shortened, nowrapped and on a tighter gap they come to
   roughly 650px, which fits 46rem with room to spare. They still wrap on a
   phone, which is correct. */
.deal-fig{max-width:46rem;margin:.5rem 0 2.5rem}
#deal{max-width:none;margin:0;aspect-ratio:700/245}
.deal-fig figcaption{gap:.7rem 1.5rem}
.deal-fig .v-step{white-space:nowrap}

/* v17: centre the figure as ONE block.

   v16 fixed the wrong half. The original fault was that the canvas was
   centred inside a caption that ran the full width, so the two parts of one
   figure had different widths and different centres. v16 solved that by
   pinning both to the left edge, which lines it up with the body copy but
   leaves the whole diagram sitting in the left two thirds of the section
   with nothing to its right.

   The figure and its caption are one object. They now share a width AND a
   centre: the block is centred, and the five steps are centred under the
   drawing rather than ranged left inside it. */
.deal-fig{margin:.5rem auto 2.5rem}
.deal-fig figcaption{justify-content:center}

/* v18: the declaration matches the section headings exactly.

   It was clamp(1.7rem,3.5vw,2.55rem) against h2's clamp(1.6rem,3.2vw,2.3rem),
   so "Our strength is that we have nothing to sell." rendered a step larger
   than "Why we can say things the trade press cannot" directly above it. Two
   display lines a quarter of a rem apart do not read as a deliberate
   hierarchy, they read as a mistake. Same clamp, same tracking, same weight. */
.declare .big-line{font-size:clamp(1.6rem,3.2vw,2.3rem);letter-spacing:-.024em}