/* ===================================================================
   site.css — the website. index.html, deep-audit.html, thanks.html.

   Everything a visitor sees AROUND the report: the masthead, the search,
   the show picker, the beta bars, the offer, the footer. The report itself
   is document.css and free.css, and never styled from here.

   Contract: feed-check/CLASSES.md — sections B0, B, B3. Values:
   feed-check/tokens.css. Colours follow PALETTE-MAP.md's final table.

   ⚠ THE COLOUR RULE, AND IT HAS NO EXCEPTIONS:
       Blocks of colour with dark ink on top. Never coloured type on cream.
       On a colour fill, only full --ink.
   Teal describes. Orange ASKS — it is on anything that wants a click.
   Brown is for notices: the beta bars, the error line, "act now".

   ⚠ NO FIXED-WIDTH TYPE. Hamish, 11 September. Barlow throughout.

   Not carried over from the old <style> block, on purpose: the dark
   palettes (the product is light by decision), every shadow, the serif
   face, and the dead episode-table rules.

   Written 11 September 2026.
   =================================================================== */


/* ============================================ B0 · THE BASE ===
   What every page gets with no class at all. A new page built from plain
   tags already looks like this site. CLASSES.md B0.
   ------------------------------------------------------------------- */

:root{ color-scheme: light }

*{ box-sizing: border-box }

html{ -webkit-text-size-adjust: 100% }

body{
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--face-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4{
  font-family: var(--face-head);
  font-weight: 600;
  line-height: var(--lh-head);
  margin: 0 0 var(--s-3);
}
h1{ font-size: var(--t-h1) }
h2{ font-size: var(--t-sec) }
h3{ font-size: var(--t-find) }
h4{ font-size: var(--t-lead) }

p{ margin: 0 0 var(--s-3) }

/* Links are ink with an underline. Teal fails as text. tokens.css. */
a{
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: .15em;
}

ul, ol{ margin: 0 0 var(--s-3); padding-left: 1.2em }
li{ margin-bottom: var(--s-2) }

img{ max-width: 100% }

button{
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* ⚠ Anything marked hidden stays hidden, whatever its class says. Without
   this, a rule like .actions{display:flex} quietly shows a hidden block. */
[hidden]{ display: none !important }

/* A focus ring you can see. Ink, because teal on cream is 2.49:1 and
   fails even the 3:1 a focus ring needs. */
:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Inline code in hints — "it usually ends /rss". Barlow, on a tint. */
code{
  font-family: inherit;
  font-size: .9em;
  background: var(--ground);
  padding: 1px var(--s-1);
  border-radius: 3px;
}

/* The page gutter. [doc] [site] in CLASSES.md B2 — lives here only: on
   paper the page margins do this job. */
.wrap{
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: var(--s-4);
}


/* =================================================== BUTTONS ===
   .btn        an ORANGE OUTLINE, ink label on the cream — it asks
   .btn.ghost  an ink outline — the quieter choice
   .btn-lg     the one big yes
   .beta-btn   on the brown bar, an ink outline: orange is lost on brown

   ⚠ NEVER AN ORANGE FILL UNDER WRITING. Hamish, 11 September, choosing
   from four drawn options: small dark writing on orange does not work.
   The label is ink on the page's own cream (14:1). The orange outline is
   a boundary, which needs 3:1: 3.18 on the ground, 3.04 on the surface.
   ------------------------------------------------------------------- */

.btn,
.buy-btn,
.beta-btn{
  display: inline-block;
  background: transparent;
  color: var(--ink);
  border: 3px solid var(--accent-action);
  border-radius: 6px;
  padding: var(--s-2) var(--s-4);
  font-family: var(--face-body);
  font-size: var(--t-secd);
  font-weight: var(--w-label);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

/* Hover thickens the outline from the inside, so nothing shifts. */
.btn:hover,
.buy-btn:hover{ box-shadow: inset 0 0 0 2px var(--accent-action) }

.btn.ghost,
.beta-btn{
  border-color: var(--ink);
}
.btn.ghost{ border-width: 2px }
.btn.ghost:hover,
.beta-btn:hover{ box-shadow: inset 0 0 0 2px var(--ink) }
.beta-btn.ghost{ border-width: 2px }

.btn[disabled]{ opacity: .55; cursor: default }

.btn-lg{
  font-size: var(--t-lead);
  padding: var(--s-3) var(--s-5);
}

/* A button that looks like a link. */
.linky{
  background: none;
  border: 0;
  padding: var(--s-1) 0;
  color: var(--ink);
  font-size: var(--t-small);
  text-decoration: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: .15em;
}

.row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-3);
}


/* ================================================== MASTHEAD ===
   All three pages. .back is the offer and thank-you pages' way home.
   ------------------------------------------------------------------- */

.top{
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.top .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  padding-block: var(--s-3);
}

.brand{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
}

.nm{
  font-family: var(--face-head);
  font-size: var(--t-lead);
  font-weight: 600;
}

.tl{
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.privacy{
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-small);
  color: var(--ink-soft);
}

/* A mark, not type — so teal is allowed. */
.dot{
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--teal);
}

.back{ font-size: var(--t-small) }

/* deep-audit.html (25 Sep 2026): the beta line and the way back, stacked on
   the right, so the top bar matches the homepage's. */
.top-side{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
}


/* ================================================= BETA BARS ===
   Delete-on-launch. A solid brown block with ink on top — which also
   closes Lighthouse fault 1: the note was quiet grey on a tint, and on a
   fill only full ink passes. PALETTE-MAP.md section G. The lighter
   --brown-fill since 11 September: ink on it is 8.81:1.
   ------------------------------------------------------------------- */

.beta-top,
.beta{
  background: var(--brown-fill);
  color: var(--ink);
  border-radius: var(--radius);
  padding: var(--s-5);
}
.beta-top{ margin: var(--s-5) 0 0 }
.beta{ margin: var(--s-4) 0 var(--s-5) }

.beta-head{
  display: block;
  font-family: var(--face-head);
  font-size: var(--t-find);
  font-weight: 600;
  line-height: var(--lh-head);
  margin-bottom: var(--s-3);
}

.beta-top p,
.beta p{
  max-width: var(--measure);
  color: var(--ink);
}

.beta-btns{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: var(--s-4) 0 var(--s-3);
}


.beta-note{
  font-size: var(--t-small);
  color: var(--ink);
}


/* ================================================ THE INTRO === */

.intro{ padding-block: var(--s-7) var(--s-2) }

.intro h1{ max-width: 17em }

.intro p{
  color: var(--ink-soft);
  max-width: var(--measure);
}


/* ============================================ THE INPUT PANEL ===
   THE REASON THE SITE EXISTS, so it is the loudest thing on the page.
   Hamish, 11 September, from four drawn ideas: a solid TEAL panel with two
   TABS on top — Find by name · I have my feed address. The feed-address
   route stays folded until its tab is chosen (locked in website-ux.md,
   9 September); the tab is the big, obvious way in.

   ⚠ ON TEAL, ONLY FULL INK. Every grey used elsewhere fails on teal, so
   everything inside the panel is ink. Orange disappears on teal, so the
   panel's buttons are SOLID INK with cream writing — the one place
   buttons are not an orange outline. Boxes inside the panel (the search
   box, a show card, the confirm card) sit on the page cream.
   ------------------------------------------------------------------- */

.inputs{ padding-block: var(--s-5) var(--s-2) }

.door-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.door-tab{
  font-family: var(--face-head);
  font-size: var(--t-lead);
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: var(--edge) solid var(--rule);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: var(--s-3) var(--s-5);
}
.door-tab:hover{ background: var(--ground) }
/* The chosen tab is the panel's own teal, so it joins the panel. */
.door-tab[aria-selected="true"]{
  background: var(--teal);
  border-color: var(--teal);
}

.drop{
  background: var(--teal);
  color: var(--ink);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  padding: var(--s-6);
}

/* A file being dragged over the panel. */
.drop.over{
  outline: 3px dashed var(--ink);
  outline-offset: -12px;
}

.drop h2{
  font-size: var(--t-h1);
  margin-bottom: var(--s-2);
}

.hint{
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin: 0 0 var(--s-3);
  max-width: var(--measure);
}
.drop .hint{
  font-size: var(--t-secd);
  color: var(--ink);
}

.urlrow{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

input[type=search],
input[type=url],
input[type=text],
input[type=email],
textarea{
  flex: 1 1 14em;
  min-width: 0;
  background: var(--ground);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--radius-inner);
  padding: var(--s-4);
  font-family: var(--face-body);
  font-size: var(--t-lead);
  -webkit-appearance: none;
  appearance: none;
}
input::placeholder,
textarea::placeholder{ color: var(--ink-faint) }

input[type=search]:focus,
input[type=url]:focus,
input[type=text]:focus,
input[type=email]:focus,
textarea:focus{
  outline: 3px solid var(--ink);
  outline-offset: 0;
}

textarea{
  width: 100%;
  min-height: 7em;
  resize: vertical;
  font-size: var(--t-secd);
  line-height: 1.5;
}

/* The panel's buttons: solid ink, cream writing. */
.drop .btn{
  background: var(--ink);
  color: var(--ground);
  border: 2px solid var(--ink);
  font-size: var(--t-lead);
  padding: var(--s-3) var(--s-5);
}
.drop .btn:hover{
  box-shadow: none;
  filter: brightness(1.35);
}
.drop .btn.ghost{
  background: transparent;
  color: var(--ink);
}
.drop .btn.ghost:hover{
  filter: none;
  box-shadow: inset 0 0 0 2px var(--ink);
}

.drop .linky{
  font-size: var(--t-secd);
  font-weight: var(--w-label);
}

.orpaste{
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-5) 0 var(--s-2);
  font-size: var(--t-secd);
  color: var(--ink);
}
.orpaste::before,
.orpaste::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ink);
}

/* The feed-address route. Its own summary is hidden: the tab opens it. */
.how{
  margin-top: var(--s-4);
  font-size: var(--t-small);
}
.drop > .how{ margin-top: 0 }
.drop > .how > summary{ display: none }
.how .how > summary{
  cursor: pointer;
  width: fit-content;
  font-size: var(--t-secd);
  font-weight: var(--w-label);
  text-decoration: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: .15em;
  list-style: none;
}
/* Its arrow, drawn in CSS so it never depends on a font having the glyph.
   Twice the size of the browser's own, text unchanged (Hamish, 11 Sept).
   Points right when closed, down when open. */
.how .how > summary::-webkit-details-marker{ display: none }
.how .how > summary::before{
  content: "";
  display: inline-block;
  vertical-align: -0.1em;
  width: 0;
  height: 0;
  margin-right: .5em;
  border-style: solid;
  border-width: .5em 0 .5em .8em;
  border-color: transparent transparent transparent var(--ink);
  transition: transform .15s;
}
.how .how[open] > summary::before{ transform: rotate(90deg) }
.how ol{
  margin-top: var(--s-3);
  max-width: var(--measure);
}

/* Shown by the page when something goes wrong. Hidden until then. */
.err{
  display: none;
  margin-top: var(--s-3);
  background: var(--brown-fill);
  color: var(--ink);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-small);
}


/* ============================================ THE FRONT DOOR ===
   The show picker: what was searched, the candidates, the confirm card,
   the Spotify step.
   ------------------------------------------------------------------- */

.pick-h{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.pick-h h2{ margin: 0 }

.searched{
  font-size: var(--t-lead);
  color: var(--ink);
  margin: var(--s-2) 0;
}
.term{
  color: var(--ink);
  font-weight: var(--w-label);
}

.cands{
  list-style: none;
  margin: 0 0 var(--s-1);
  padding: 0;
  display: grid;
  gap: var(--s-2);
}
.cands li{ margin: 0 }

/* One candidate show. The whole card is the button. */
.cand{
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  text-align: left;
  background: var(--ground);
  border: 2px solid transparent;
  border-radius: 6px;
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-secd);
}
.cand:hover{ border-color: var(--ink) }

.cand img{
  flex: none;
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--surface);
}

.cn{
  display: block;
  font-weight: var(--w-label);
  line-height: 1.3;
}

.cm{
  display: block;
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin-top: 2px;
}

/* The show's description, two lines at most. */
.cb{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin-top: 2px;
  line-height: 1.4;
}

.candrow{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-2);
}

/* The smaller picker used for Spotify, inside "Where this show is listed". */
.cands.mini{ margin: var(--s-2) 0 }
.cands.mini .cand{ font-size: var(--t-small) }
.cands.mini .cand img{ width: 40px; height: 40px }

/* "Is this the one?" A solid teal block, ink on top — and only ink,
   because nothing quieter passes on teal. */
.confirm,
.spotpicked{
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  background: var(--teal);
  color: var(--ink);
  border-radius: var(--radius);
  padding: var(--s-3);
}
/* Inside the teal panel a teal card would vanish: page cream, ink edge. */
.drop .confirm,
.drop .spotpicked{
  background: var(--ground);
  border: 2px solid var(--ink);
}
.confirm{ margin: 0 0 var(--s-3) }
.confirm > span{ min-width: 0 }

.confirm img,
.spotpicked img{
  flex: none;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--surface);
}
.spotpicked img{ width: 44px; height: 44px }

.confirm .cm,
.spotpicked .cm{ color: var(--ink) }

/* The feed address on the confirm card. Barlow; allowed to break. */
.cf{
  display: block;
  font-size: var(--t-small);
  margin-top: var(--s-2);
  overflow-wrap: anywhere;
}

.spot-step{
  margin: var(--s-4) 0 var(--s-1);
  padding-top: var(--s-3);
  border-top: 1px solid var(--ink);
}

.steplab{
  font-weight: var(--w-label);
  margin: 0 0 var(--s-1);
}

.spot-reason{
  display: inline-block;
  margin-top: var(--s-1);
  font-size: var(--t-small);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.runrow{ margin-top: var(--s-4) }


/* ================================================ THE DOWNLOAD ===
   Outside the report, on purpose — nobody wants a Download button inside
   the file they just downloaded.
   ------------------------------------------------------------------- */

.actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.tester-invite{
  flex-basis: 100%;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: var(--edge) solid var(--rule);
}
.tester-invite p{
  margin: 0 0 var(--s-3);
  font-size: var(--t-secd);
}
.download-hint{
  flex-basis: 100%;
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin: 0;
  max-width: var(--measure);
}


/* ==================================================== FOOTER === */

.sitefoot{
  margin-top: var(--s-7);
  background: var(--surface);
  border-top: 1px solid var(--rule);
}

.sitefoot .wrap{ padding-block: var(--s-5) var(--s-6) }

.sitefoot p{
  font-size: var(--t-small);
  color: var(--ink-soft);
  max-width: var(--measure);
  margin-bottom: var(--s-2);
}
.sitefoot b{ color: var(--ink) }

/* ⚠ The beta box inside the footer. The footer's own paragraph rule above —
   small, grey — outranks the beta box's, and put grey writing on brown, which
   the colour rule forbids. Found on 11 September on the live page. On a fill,
   only full ink. */
.sitefoot .beta p{
  color: var(--ink);
  font-size: var(--t-secd);
  margin-bottom: var(--s-3);
}
.sitefoot .beta p.beta-note{ font-size: var(--t-small) }

.foot-cta a{ font-weight: var(--w-label) }


/* =========================================================================
   B3 · THE OFFER PAGE AND THE THANK-YOU PAGE
   ========================================================================= */

/* ---- the opening block, both pages ---- */
.page-head{ padding-block: var(--s-7) var(--s-2) }

.page-kick{
  font-size: var(--t-label);
  font-weight: var(--w-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s-3);
}

.page-head h1{ max-width: 16em }
/* The Deep Audit page's first ask (25 Sep 2026): see the real thing, or ask
   to be a tester. */
.page-head-btns{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  margin: var(--s-5) 0 var(--s-2);
}
.page-head-link{
  font-size: var(--t-secd);
  font-weight: var(--w-label);
}
.page-head-small{
  font-size: var(--t-small);
  color: var(--ink-soft);
}
@media print{ .page-head-btns, .page-head-small{ display: none } }

.page-stand{
  font-size: var(--t-lead);
  color: var(--ink-soft);
  max-width: var(--measure-lead);
}

/* The large tick on the thank-you page: a teal disc, ink tick. */
.page-tick{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--ink);
  font-size: var(--t-find);
  font-weight: 600;
  margin-bottom: var(--s-4);
}

/* A page section's heading: a dark rule above it marks the new part. */
.wrap > h2,
main > section > h2{
  margin-top: var(--s-7);
  padding-top: var(--s-3);
  border-top: 2px solid var(--ink);
}

.page-note{
  color: var(--ink-soft);
  font-size: var(--t-secd);
  max-width: var(--measure);
  margin-bottom: var(--s-4);
}

/* ---- How it works: numbered, on a line ---- */
.steps{
  counter-reset: step;
  list-style: none;
  margin: var(--s-2) 0 0;
  padding: 0;
}
.steps > li{
  counter-increment: step;
  position: relative;
  margin: 0 0 0 18px;
  padding: 0 0 var(--s-5) var(--s-6);
  border-left: 2px solid var(--rule);
}
.steps > li:last-child{
  border-left-color: transparent;
  padding-bottom: 0;
}
/* A teal disc with the number in ink. */
.steps > li::before{
  content: counter(step);
  position: absolute;
  left: -19px;
  top: -2px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-small);
  font-weight: 600;
}
.steps h4{ margin: 0 0 var(--s-1) }
.steps p{
  color: var(--ink-soft);
  max-width: var(--measure);
  margin-bottom: var(--s-2);
}

/* ---- deep-audit.html: what lands in your inbox ---- */
.deliverables{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
  gap: var(--s-3);
}
.deliverable{
  background: var(--ground);
  border: var(--edge) solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
}
.deliverable-kick{
  font-size: var(--t-label);
  font-weight: var(--w-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s-2);
}
.deliverable-title{
  font-family: var(--face-head);
  font-size: var(--t-lead);
  font-weight: 600;
  margin-bottom: var(--s-2);
}
.deliverable p{
  color: var(--ink-soft);
  font-size: var(--t-secd);
  margin: 0;
}

/* ---- deep-audit.html: what actually gets checked ---- */
.check-group{
  background: var(--ground);
  border: var(--edge) solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-3);
}
.check-group h3{ margin-bottom: var(--s-1) }
.check-group-why{
  font-size: var(--t-secd);
  color: var(--ink-soft);
  max-width: var(--measure);
}

.tick-list{
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
}
.tick-list > li{
  position: relative;
  margin: 0;
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-secd);
  color: var(--ink-soft);
}
.tick-list > li:last-child{ border-bottom: 0 }
/* A teal dot — a mark, not type. */
.tick-list > li::before{
  content: "";
  position: absolute;
  left: 2px;
  top: 1.05em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--teal);
}
.tick-list b{ color: var(--ink) }

.aside{
  display: block;
  margin-top: var(--s-1);
  font-size: var(--t-small);
}

/* ---- deep-audit.html: the price ---- */
.price{
  background: var(--ground);
  border: var(--edge) solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s-5);
  margin-top: var(--s-4);
}
.price-amount{
  font-family: var(--face-display);
  font-size: var(--t-display);
  font-weight: 600;
  line-height: var(--lh-tight);
}
.price-per{
  font-size: var(--t-secd);
  color: var(--ink-soft);
  margin: var(--s-1) 0 var(--s-4);
}
/* FREE FOR BETA TESTING (25 Sep 2026, Hamish). £49 with an orange line
   through it, and the words beside it in orange — his exception to the colour
   rule, made large and bold so it reads (3.19:1; large bold type needs 3:1). */
.price-head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-5);
}
.price-was{
  position: relative;
  display: inline-block;
}
.price-was s{ text-decoration: none }
.price-was::after{
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  top: 50%;
  height: 5px;
  border-radius: 3px;
  background: var(--accent-action);
  transform: rotate(-20deg);
}
.price-beta{
  font-family: var(--face-head);
  font-size: clamp(30px, 5vw, 48px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--accent-action);
}

/* The one thing on the page that asks for money: orange, and big. */
.buy-btn{
  font-size: var(--t-lead);
  padding: var(--s-3) var(--s-5);
}
.price-note{
  font-size: var(--t-secd);
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: var(--s-3) 0 0;
}
.price-terms{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--ink-soft);
}
.price-terms b{ color: var(--ink) }

/* ---- deep-audit.html: the beta form (25 Sep 2026, CLASSES.md B3) ---- */
.beta-form{
  margin-top: var(--s-4);
  max-width: var(--measure);
}
.beta-form p{ margin: 0 0 var(--s-3) }
.beta-form-lead{ font-size: var(--t-secd) }
.beta-form label{
  display: block;
  font-size: var(--t-small);
  font-weight: var(--w-label);
  margin-bottom: var(--s-1);
}
.beta-form input[type=text],
.beta-form input[type=email]{
  display: block;
  width: 100%;
  padding: var(--s-3);
  font-size: var(--t-secd);
}
.beta-form-small{
  font-size: var(--t-small);
  color: var(--ink-soft);
}
/* The offer PDF (make-offer-pdf.sh) is a sheet to read, not to fill in. */
@media print{ .beta-form{ display: none } }
/* The trap: off the page for people and screen readers; bots still fill it. */
.beta-form-trap{
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- deep-audit.html: the sample pop-up (25 Sep 2026, CLASSES.md B3) ----
   The dialog IS the dark area, full screen; the pages sit in a column on it.
   A click on the dark area (the dialog itself) closes it. No ::backdrop, so
   no browser has to carry a colour into it. */
.sample{
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ink);   /* solid: at 90% the page showed through */
  overflow-y: auto;
}
.sample::backdrop{ background: transparent }
.sample-inner{
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--s-4) var(--s-6);
}
.sample-bar{
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  background: var(--ink);
  color: var(--ground);
  padding: var(--s-3) var(--s-4);
  margin: 0 calc(-1 * var(--s-4)) var(--s-4);
}
.sample-title{
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.3;
}
.sample-close{
  flex: none;
  background: transparent;
  color: var(--ground);
  border: 2px solid var(--ground);
  border-radius: 6px;
  font-size: var(--t-lead);
  line-height: 1;
  width: 2em;
  height: 2em;
  cursor: pointer;
}
.sample-page{ margin: 0 0 var(--s-5) }
.sample-page figcaption{
  color: var(--ground);
  font-size: var(--t-small);
  font-weight: var(--w-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}
.sample-page img{
  display: block;
  width: 100%;
  height: auto;
  background: var(--ground);
}
@media print{ .sample-open{ display: none } }

/* The Free Report sample (25 Sep 2026): the same dark frame, a wider column,
   and the live report in a frame that scrolls on its own. */
.sample-free .sample-inner{
  max-width: 1060px;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--s-3);
}
.sample-frame{
  flex: 1;
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--radius);
  background: var(--ground);
}
/* index.html?sample=… — the report alone, nothing around it. */
.sample-mode .top,
.sample-mode .intro,
.sample-mode .inputs,
.sample-mode .two-audits,
.sample-mode .actions,
.sample-mode .sitefoot{ display: none !important }

/* ---- deep-audit.html: what this doesn't include ---- */
.not-included{
  background: var(--ground);
  border: var(--edge) solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
}
.not-included p{
  font-size: var(--t-secd);
  color: var(--ink-soft);
  max-width: var(--measure);
}
.not-included p:last-child{ margin-bottom: 0 }
.not-included b{ color: var(--ink) }

/* ---- thanks.html ---- */
/* The one thing to do now: a brown notice block, ink on top. */
.act-now{
  background: var(--brown-fill);
  color: var(--ink);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-5) 0 var(--s-3);
}
.act-now p{ max-width: var(--measure) }
.act-now p:last-child{ margin-bottom: 0 }

.note{
  background: var(--ground);
  border: var(--edge) solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-3);
}
.note p{
  color: var(--ink-soft);
  max-width: var(--measure);
}
.note p:last-child{ margin-bottom: 0 }


/* ---- index.html: FREE REPORT OR DEEP AUDIT (25 Sep 2026, CLASSES.md B3) ----
   Two cards, the same rows in the same order, and EVERY LINE LINES UP ACROSS.
   Hamish, 25 Sep: "Every line needs to line up precisely." What keeps it so:
     · both cards carry the same blocks — the free card's .plan-beta holds a
       non-breaking space so it is as tall as "Free for beta testers";
     · the tick and the cross are the same size: box-sizing on the ::before,
       or the cross's border adds 4px to every crossed row and the headings
       drift further out with each one (found in the mock-up, 25 Sep);
     · every row is one line, and the words were cut until they were.
   Measured headless: 0px out on all 31 lines at 1100 and 1400 wide.
   Teal is a MARK here (the tick) or a FILL with ink on it (the Deep Audit's
   name) — never type on cream. */
.plans{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20em, 100%), 1fr));
  gap: var(--s-4);
}
.plan{
  display: flex;
  flex-direction: column;
  background: var(--ground);
  border: 3px solid var(--ink);
  border-radius: 18px;
  overflow: hidden;
}
/* The Deep Audit sits on the darker surface, like the report's count tiles. */
.plan-deep{ background: var(--surface) }
.plan-name{
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-bottom: 3px solid var(--ink);
  text-align: center;
  font-family: var(--face-head);
  font-size: var(--t-find);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.plan-deep .plan-name{ background: var(--teal) }
.plan-body{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--s-5);
}
.plan-price{
  margin: 0;
  text-align: center;
  font-family: var(--face-head);
  font-size: 88px;
  font-weight: 600;
  line-height: 1;
}
.plan-per{
  margin: var(--s-2) 0 0;
  text-align: center;
  font-weight: var(--w-label);
}
.plan-beta{
  margin: var(--s-1) 0 0;
  min-height: 1.5em;
  text-align: center;
  font-size: var(--t-small);
  color: var(--ink-soft);
}
.plan-list{
  list-style: none;
  margin: var(--s-4) 0 var(--s-5);
  padding: 0;
}
.plan-list li{
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  padding: var(--s-2) 0;
  border-bottom: 2px solid var(--rule);
  font-size: var(--t-secd);
  line-height: 1.3;
}
.plan-list li:last-child{ border-bottom: 0 }
.plan-list li::before{
  content: "";
  box-sizing: border-box;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
/* Done: a teal disc, an ink tick. */
.plan-list .plan-yes::before{
  background: var(--teal) no-repeat center / 13px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%23202020' stroke-width='2.2'/%3E%3C/svg%3E");
}
/* Not done: a grey ring, a grey cross, the words quieter. Never red. */
.plan-list .plan-no{ color: var(--ink-faint) }
.plan-list .plan-no::before{
  border: 2px solid var(--rule);
  background: no-repeat center / 9px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' fill='none' stroke='%236D6861' stroke-width='2'/%3E%3C/svg%3E");
}
/* Said to a screen reader, never seen. */
.plan-no-label{
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.plan-list .plan-group{
  display: block;
  padding: var(--s-4) 0 var(--s-1);
  border-bottom: 0;
  font-family: var(--face-head);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.plan-list .plan-group::before{ display: none }
.plan-list .plan-group:first-child{ padding-top: 0 }
.plan-foot{
  margin-top: auto;
  text-align: center;
}
.plan-foot .btn{ width: 100% }
.plan-foot p{
  margin: var(--s-2) 0 0;
  font-size: var(--t-small);
}
.two-audits-compare{
  margin: var(--s-5) 0 var(--s-2);
  text-align: center;
  font-weight: var(--w-label);
}
.two-audits-foot{
  margin-top: var(--s-4);
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--t-secd);
}

/* ---- index.html: THE GATE (25 Sep 2026, CLASSES.md B3) ----
   A box on the page, never a pop-up, after "Where the problems sit". It sits
   INSIDE #report but it is chrome, so it is styled here and never printed.
   An ink border marks it as the one place on the page that asks. */
.gate{
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--s-5);
  margin: var(--s-6) 0;
}
.gate .gate-head{
  font-size: var(--t-sec);
  margin: 0 0 var(--s-2);
}
.gate p{ margin: 0 0 var(--s-3) }
.gate-lead{
  font-size: var(--t-secd);
  max-width: var(--measure);
}
.gate-fields{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
  gap: 0 var(--s-4);
  max-width: 40em;
}
.gate-fields label{
  display: block;
  font-size: var(--t-small);
  font-weight: var(--w-label);
  margin-bottom: var(--s-1);
}
.gate-fields input{
  display: block;
  width: 100%;
  padding: var(--s-3);
  font-size: var(--t-secd);
}
.gate-tick label{
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--t-secd);
}
.gate-tick input{
  flex: none;
  margin-top: .25em;
  width: 1.1em;
  height: 1.1em;
}
.gate .gate-small{
  font-size: var(--t-small);
  color: var(--ink-soft);
  max-width: var(--measure);
}
.gate-err{
  background: var(--brown-fill);
  color: var(--ink);
  border-radius: var(--radius-inner);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-small);
}
/* What is still to come: the headings, greyed. */
.gate-next{
  border-top: var(--edge) solid var(--rule);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
}
.gate .gate-next-lead{
  font-size: var(--t-label);
  font-weight: var(--w-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s-2);
}
.gate-next ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
.gate-next li{
  margin: 0;
  padding: var(--s-2) 0;
  border-bottom: var(--edge) dashed var(--rule);
  font-family: var(--face-head);
  font-size: var(--t-lead);
  line-height: 1.3;
  color: var(--ink-faint);
}
.gate-next li:last-child{ border-bottom: 0 }
.gate-next li span{
  font-family: var(--face-body);
  font-size: var(--t-small);
  white-space: nowrap;
}


/* ===================================================== PHONE ===
   Size queries never reach a PDF — WeasyPrint ignores them.
   ------------------------------------------------------------------- */

@media (max-width: 600px){
  .wrap{ padding-inline: var(--s-3) }
  .intro,
  .page-head{ padding-block: var(--s-6) var(--s-1) }
  .drop,
  .beta-top,
  .beta,
  .price,
  .gate{ padding: var(--s-4) }
  .door-tab{
    flex: 1 1 0;
    font-size: var(--t-secd);
    padding: var(--s-2) var(--s-3);
  }
  .drop h2{ font-size: var(--t-find) }
  /* The table runs long on a phone, so it goes nearly edge to edge. */
  .two-audits.wrap{ padding-inline: 6px }
  .plans{ gap: var(--s-3) }
  .plan{ border-radius: 12px }
  .plan-name{ font-size: var(--t-lead); padding: var(--s-2) var(--s-3) }
  .plan-body{ padding: var(--s-4) var(--s-3) }
  .plan-price{ font-size: 72px }
  .plan-list li{ font-size: 17px; gap: var(--s-2) }
  .plan-list li::before{ width: 22px; height: 22px }
  .plan-list .plan-group{ font-size: 17px }
  .steps > li{ padding-left: var(--s-5) }
}


/* ============================================= PRINTING THE PAGE ===
   Chrome's print — the fallback for the free report's PDF. Only the
   report prints; everything around it gives way. The worker's PDF never
   sees this sheet at all: it is sent the report alone.
   ------------------------------------------------------------------- */

@media print{
  .top,
  .beta-top,
  .intro,
  .inputs,
  .two-audits,
  .gate,
  .gate-slot,
  .err,
  .actions,
  .sitefoot{ display: none !important }

  .wrap{
    max-width: none;
    padding-inline: 0;
  }
}