/* Palette: the analysis pad. Pale green paper, dark green-black ink, and the two pens
   an auditor actually carries: green for "checked", blue biro for reviewer notes.
   Type: the three fonts this design was rendering in as Android system-font
   fallbacks, self-hosted so every visitor sees the same three, not whatever
   their own OS happens to substitute for a missing custom font. */
@font-face { font-family: "Noto Serif"; src: url(fonts/noto-serif-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Serif"; src: url(fonts/noto-serif-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Serif"; src: url(fonts/noto-serif-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Serif"; src: url(fonts/noto-serif-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url(fonts/roboto-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url(fonts/roboto-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url(fonts/roboto-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Waiting for the Sunrise"; src: url(fonts/waiting-for-the-sunrise-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --font-serif: "Noto Serif", Georgia, "Times New Roman", Times, serif;
  --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Waiting for the Sunrise", cursive;
  --paper: #EAF4FB;
  --paper-2: #F7FBFE;      /* header block / raised area: pale blue-white, not pure white, to limit glare */
  --ink: #131F33;
  --ink-2: #3B4A63;        /* secondary text, AA on paper */
  --rule: rgba(19,31,51,.34);
  --rule-soft: rgba(19,31,51,.16);
  --tick: #0C6B38;         /* green pen */
  --biro: #16296F;         /* blue biro (darkened for contrast against the pale paper) */
  --red: #C21F1F;          /* the red pen: the usual, painful way. The only red on the site (5.4:1 on the paper, AA for small text) */
  --focus: #8A2B00;
  --gold: #A47300;         /* "Au" in the wordmark and favicon */
  --orange: #CD5900;       /* "DHD" in the wordmark */
  --margin-l: 9.5rem;
  --margin-r: 13rem;
  --pad: clamp(1.25rem, 4vw, 3.5rem);
}
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 1.125rem; line-height: 1.62; overflow-wrap: break-word; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; background: var(--ink); color: var(--paper); padding: .8rem 1rem; z-index: 9; }
.skip:focus { left: 0; top: 0; }
.hidden { display: none; }

/* Every row of the document sits on the same three-column frame: reference | content | tickmark */
.frame { display: grid; grid-template-columns: var(--margin-l) minmax(0, 1fr) var(--margin-r); column-gap: clamp(1rem, 2.5vw, 2.25rem); max-width: 1320px; margin: 0 auto; padding-inline: var(--pad); }
.ref { font-family: var(--font-serif); font-size: .95rem; color: var(--ink-2); padding-top: .35rem; }
.ref b { display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem; padding: 0 .35rem; border: 1.5px solid var(--ink); font-weight: 600; color: var(--ink); margin-right: .5rem; }

/* ── File masthead ── */
.file { border-bottom: 2px solid var(--ink); }
/* The masthead stays at the top while scrolling, with a solid background so nothing shows through. Once the page
   is scrolled, script.js adds .slim and it gives up some padding; the margin hands back exactly that height, so
   the page below never moves when the header changes size. scroll-padding-top keeps anchor jumps clear of it. */
.file { position: sticky; top: 0; z-index: 30; background: var(--paper); transition: margin-bottom .15s ease; }
.file .frame { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding-block: 1rem; transition: padding-block .15s ease; }
.file.slim .frame { padding-block: .35rem; }
.file.slim { margin-bottom: 1.3rem; }
html { scroll-padding-top: 3.75rem; }
@media (prefers-reduced-motion: reduce) { .file, .file .frame { transition: none; } }
.file .name { display: inline-flex; align-items: center; gap: .75rem; min-width: 0; text-decoration: none; user-select: none; }
.brand-text { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.15; }
.brand-line1, .brand-line2 { font-family: var(--font-sans); font-size: .8125rem; font-weight: 800; letter-spacing: .14em; margin-right: -.14em; }
.brand-line1 { color: var(--ink); }
.brand-au { color: var(--gold); }
.brand-dhd { color: var(--orange); }
.brand-line2 { color: var(--ink); text-transform: uppercase; }
.index { display: flex; gap: .3rem; font-size: .95rem; }
/* No hover state at all - a colour change on tap can look just as
   stuck as a background fill on some touch-capable devices (e.g.
   Android Chrome with a Bluetooth mouse), and these are already
   clearly interactive without it. */
.index a { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 1.5px solid var(--ink); text-decoration: none; font-family: var(--font-serif); font-weight: 600; }

/* ── File index (header and footer): the lettered box plus one word, as in the section headings.
   Wide screens show the row; narrower ones get an "A–E" button that opens the list, with Contact beside it. ── */
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.nav-list a { display: inline-flex; align-items: center; text-decoration: none; font-family: var(--font-serif); font-size: .95rem; color: var(--ink-2); }
.nav-list b { display: inline-grid; place-items: center; font-weight: 600; color: var(--ink-2); margin-right: .3rem; }
/* Contact is set in heavier ink than the other entries but has no box: the letters in this index are plain,
   and boxes belong to the section headings, so a boxed F here would not match them. */
.nav-list li.cta b { color: var(--ink); }
.nav-list li.cta a { color: var(--ink); font-weight: 600; }
.nav-toggle { display: none; align-items: center; gap: .5rem; height: 2rem; padding: 0 .8rem; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font-family: var(--font-serif); font-weight: 600; font-size: .95rem; cursor: pointer; }
.nav-toggle::after { content: ""; width: .45rem; height: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.12rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"]::after { transform: translateY(.1rem) rotate(-135deg); }
@media (max-width: 1099px) {
  html:not(.js) .site-nav { flex-basis: 100%; }
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav .nav-list { display: none; position: absolute; right: var(--pad); top: 100%; z-index: 20; flex-direction: column; flex-wrap: nowrap; gap: 0; min-width: 14rem; padding: .4rem 0; background: var(--paper-2); border: 1.5px solid var(--ink); border-top: 0; }
  .js .site-nav .nav-list.open { display: flex; }
  .js .site-nav .nav-list a { padding: .55rem 1rem; }
  .js .site-nav .nav-list b { min-width: 1.9rem; padding: 0 .35rem; margin-right: .5rem; }
}
/* Tablet and mobile: the menu button covers A to E, and Contact stands beside it so it is always visible.
   Contact is left out of the dropdown on these widths because it is already on screen. */
.nav-contact { display: none; }
@media (max-width: 1099px) {
  .js .site-nav { display: flex; align-items: center; gap: .75rem; }
  .js .nav-contact { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 .25rem; text-decoration: none; font-family: var(--font-serif); font-weight: 600; font-size: .95rem; color: var(--ink); }
  .js .nav-contact b { margin-right: .3rem; font-weight: 600; color: var(--ink); }
  .js .site-nav .nav-list li.cta { display: none; }
}
@media (max-width: 380px) {
  .file .frame { column-gap: .5rem; }
  .js .site-nav { gap: .5rem; }
  .js .nav-toggle { padding: 0 .6rem; }
}

/* Same reference box, used inline within body copy (e.g. the capacity row's link on to E) */
strong .index { display: inline-flex; vertical-align: middle; margin-left: .5rem; }
@media (max-width: 400px) { .file .name { font-size: 1.05rem; } .brand-line1, .brand-line2 { font-size: .75rem; } }

/* ── D heading: the sentence plus a two-line "tax computation". The wrapper is only as wide as the
   sentence, so each handwritten "nil" ends flush with the end of it. Same size and weight as h2. ── */
.tc-wrap { width: fit-content; max-width: 100%; margin-bottom: 1.25rem; }
.tc-wrap h2 { max-width: none; margin-bottom: .7rem; }
.tc { list-style: none; margin: 0; padding: 0; }
.tc li { margin-bottom: .3em; display: flex; align-items: baseline; gap: .6rem; font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.6rem, 2.9vw, 2.35rem); line-height: 1.25; letter-spacing: -.012em; }
.tc i { flex: 1; min-width: .75rem; border-bottom: 2.5px dotted rgba(19,31,51,.6); transform: translateY(-.35rem); }
.tc b { position: relative; font-family: var(--font-hand); font-weight: 400; font-size: 1.25em; line-height: 1; color: var(--biro); -webkit-text-stroke: .3px var(--biro); padding: 0 .1rem; }
/* The double underline is two lines of the same handwriting font (the underscore glyph), not a CSS border */
/* The underline is one underscore glyph stretched to the word: scale = word width / glyph width ("relieved" 4.5, "minimal" 4.75) */
.tc b.long { --u: 4.5; }
.tc b.mid { --u: 4.75; }
.tc b::after { content: "_\A_"; white-space: pre; position: absolute; left: 50%; width: max-content; top: .795em; text-align: center; transform: translateX(-50%) scaleX(var(--u, 1.5)); font-family: var(--font-hand); font-size: .8em; line-height: .11; letter-spacing: 0; color: var(--biro); -webkit-text-stroke: .3px var(--biro); pointer-events: none; }

/* ── Working-paper header: one compact strip, so the objective stays above the fold ── */
.head { padding-block: clamp(1.25rem, 3vw, 2rem) 0; }
.strip { grid-column: 1 / -1; margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; background: var(--paper-2); border: 1px solid var(--rule); }
.strip > div { padding: .65rem .95rem .7rem; border-left: 1px solid var(--rule); min-width: 0; }
.strip > div:first-child { border-left: 0; }
.strip dt { font-family: var(--font-serif); font-size: .86rem; color: var(--ink-2); font-weight: 500; }
/* Handwritten answers on a printed form: the labels (dt) are typed, the values (dd) are in biro.
   The fine text-stroke thickens the single, thin weight of the hand font so it holds up on the pale paper. */
.strip dd { margin: 0; font-family: var(--font-hand); font-weight: 400; font-size: 1.9rem; line-height: 1.2; color: var(--biro); -webkit-text-stroke: .3px var(--biro); }
/* Wide screens: the outer two boxes shrink to their text and the Subject box takes the rest, on one line */
@media (min-width: 1200px) { .strip dd { white-space: nowrap; } }
@media (max-width: 900px) { .preparer { max-width: 15rem; } }
@media (max-width: 900px) { .strip { grid-template-columns: 1fr; } .strip > div { border-left: 0; } .strip > div:not(:first-child) { border-top: 1px solid var(--rule); } }
/* Privacy page strip has two boxes: Prepared by keeps its size, Subject takes the rest */
@media (min-width: 901px) { .strip.two { grid-template-columns: minmax(0, 1fr) max-content; } }

/* Index strip: Subject (the positioning line), Prepared by, and the preparer's photo as the last cell.
   Wide: one row; Subject keeps one line and takes any spare width, and the photo sits against the right border.
   Narrower: Subject takes the first row; Prepared by and the photo share the second. */
.strip > .strip-photo { position: relative; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.strip-photo dd { margin: 0; font-size: 0; line-height: 0; -webkit-text-stroke: 0; }
.strip-photo dd:first-of-type { position: relative; flex: 0 0 auto; width: 100%; aspect-ratio: 133 / 153; }
.strip-photo dd:first-of-type img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
/* The ICAEW badge sits under the photo, inside the same cell: the same link and image as the footer badge, with its
   blank margins trimmed so the logo fills the row. The padding is 3% of the column width on every side (percentage padding
   follows the width), so the logo fills the same 94% of its box at every screen size. */
.strip-photo .photo-badge { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 3%; border-top: 1px solid var(--rule); }
.strip-photo .photo-badge a { display: block; width: 100%; }
.strip-photo .photo-badge img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; opacity: .8; }
.strip.has-photo > div:not(.strip-photo) { display: flex; flex-direction: column; justify-content: flex-start; }
.strip.has-photo > div:not(.strip-photo) dd { margin-block: auto; }
/* The photo keeps its original proportions (0.867 wide to tall) at every width, scaled down to leave room for the badge
   under it. Row height is set by the Prepared by cell (a typed label plus three lines of handwriting), so --ph is 38px
   plus 3.12 times the handwriting size: the width the photo would be if it filled the whole cell. --col is the narrower
   width at which photo plus badge row exactly fill that same height (1.549 = photo height per unit width, 1.151, plus
   badge row height per unit width, 0.398; 6px is the row's padding and rule, less the padding that scales away). */
.strip.has-photo { --hand: 1.9rem; --ph: calc(38px + 3.12 * var(--hand)); --col: calc((var(--ph) * 1.1538 - 6px) / 1.549); }
.strip.has-photo > .prep dd { font-size: var(--hand); }
/* Subject is a size container, so its text is sized from the box itself: the widest line measures 13em, so 97cqw / 13
   fills 97% of the box's inner width (the 3% is a safety margin). The ceiling of 2.4rem keeps it a headline, not a shout. */
.strip.has-photo > div:first-child { container-type: inline-size; }
.strip.has-photo > div:first-child dd { font-size: min(2.4rem, calc(97cqw / 13)); }
.strip.has-photo > .strip-photo { min-height: calc(var(--ph) * 1.1538); }
/* One row from 1060px: Subject takes the spare width and Prepared by shrinks to its text, so that text sits against the photo. */
@media (min-width: 1060px) {
  .strip.has-photo { grid-template-columns: minmax(0, 1fr) max-content var(--col); }
}
@media (min-width: 901px) and (max-width: 1059px) {
  .strip.has-photo { grid-template-columns: minmax(0, 1fr) var(--col); }
  .strip.has-photo > div:nth-child(1) { grid-column: 1 / -1; }
  .strip.has-photo > div:nth-child(2) { border-left: 0; border-top: 1px solid var(--rule); }
  .strip.has-photo > .strip-photo { border-top: 1px solid var(--rule); }
}
@media (max-width: 900px) {
  .strip.has-photo { grid-template-columns: minmax(0, 1fr) var(--col); }
  .strip.has-photo > div:nth-child(1) { grid-column: 1 / -1; }
  .strip.has-photo > .strip-photo { border-left: 1px solid var(--rule); }
}
/* Below 840px the handwriting scales down with the screen (divisor 14: the widest Subject line is 13em, plus padding). */
@media (max-width: 839px) {
  .strip.has-photo { --hand: min(1.9rem, calc((100vw - 2 * var(--pad) - 3px - 1.9rem) / 14)); }
}
/* Prepared by: the name on its own line, then two matched lines, so the two "neurodivergent"s share a left edge.
   "the" and "for" sit in a fixed-width slot, and the tails stay together if a line has to wrap. */
.strip.has-photo > .prep dd { white-space: normal; }
.strip dd .who, .strip dd .dl { display: block; }
.strip dd .lead { display: inline-block; width: 1.5em; }
.strip dd .tail { white-space: nowrap; }
/* Phones: the handwriting scales so all three Prepared by lines fit beside the photo (widest line 11.64em, photo 3.12em + 38px). */
@media (max-width: 639px) {
  .strip.has-photo { --hand: min(1.9rem, calc((100vw - 2 * var(--pad) - 72px) / 14.8)); }
}
/* Privacy page: opening sentence stays on one line where there is room */
#privacy .lede { max-width: none; }
.preparer { margin: 0 0 1.1rem; }
.preparer img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 8px; }
.preparer figcaption { margin-top: .5rem; font-size: .9rem; color: var(--ink-2); line-height: 1.4; }

/* ── Sections ── */
section { padding-block: clamp(2rem, 4.5vw, 3.5rem); border-top: 1.5px solid var(--rule); margin-top: clamp(1.5rem, 3.5vw, 2.5rem); }
.head + section { margin-top: clamp(1.25rem, 3vw, 2rem); }
section .body { grid-column: 2; }
section .margin { grid-column: 3; }
section .wide { grid-column: 2 / 4; }
@media (max-width: 900px) {
  .frame { grid-template-columns: minmax(0, 1fr); row-gap: .75rem; }
  section .ref, section .body, section .margin, section .wide { grid-column: 1; }
  .file .frame { grid-template-columns: 1fr auto; }
}

h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.2rem, 4.5vw, 4rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 1.4rem; max-width: 20ch; }
h1, h2, .scope .big { text-wrap: balance; }
h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.6rem, 2.9vw, 2.35rem); line-height: 1.15; letter-spacing: -.012em; margin: 0 0 1.25rem; max-width: 26ch; }
p { margin: 0 0 1rem; max-width: 37rem; }
.lede { font-size: 1.28rem; line-height: 1.55; color: var(--ink); max-width: 35rem; }

.initials { font-family: var(--font-hand); font-size: 1.75rem; line-height: 1; color: var(--biro); transform: rotate(-3deg); display: inline-block; }
.note { font-family: var(--font-hand); font-size: 1.6rem; line-height: 1.08; color: var(--biro); max-width: 12rem; transform: rotate(-2deg); display: inline-block; }


.btn { display: inline-flex; align-items: center; gap: .7rem; margin-top: .75rem; padding: .95rem 1.4rem; border: 2px solid var(--ink); background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 700; font-size: 1.05rem; }
.btn:hover { background: transparent; color: var(--ink); }
/* No hover state - same reasoning as .index a: any change on tap can
   look stuck on some touch-capable devices, not just a background
   fill, so simplest to leave this unstyled on hover. */
.btn.ghost { background: transparent; color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }

/* ── Services & Pricing (section D) ──
   Two groups, each a list of pains. Under every pain sits its one-line "how I help", always visible; tapping the
   pair opens the longer explanation beneath, and each pair opens and closes on its own (see script.js). Prices sit
   under each list, outside the interactive part, so nobody has to open anything to find one. Without JavaScript
   the plain list is shown instead. Everything is scoped to #b. ── */
#b { --note: #F7FBFE; --speed: .32s; overflow-anchor: none; }
#b .cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); align-items: start; }
@media (min-width: 1100px) { #b .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#b .grp { border: 1px solid var(--rule-soft); border-radius: 6px; padding: .9rem 1.25rem 1.2rem; min-width: 0; }
@media (max-width: 480px) { #b .grp { padding-inline: .8rem; } }
#b .grp > h3 { margin: 0 0 .6rem; font-family: var(--font-sans); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }

#b .lab { margin: 0 0 .4rem; max-width: none; font-family: var(--font-hand); font-size: 1.3rem; line-height: 1; -webkit-text-stroke: .3px currentColor; }
#b .lab.a { color: var(--red); }
#b .lab.a::first-letter { font-size: 1.3em; }
/* The list of pains. Each pair is one button: the pain (red, handwritten), and beneath it its one-line "how I help"
   (green tick, existing headline), with a small chevron to say there is more. The longer explanation opens below. */
#b .tabs { display: flex; flex-direction: column; overflow-anchor: none; }
#b .item { border-radius: 4px; }
#b .item + .item { border-top: 1px solid var(--rule-soft); }
#b .item.open { background: var(--note); }
#b .tab { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; column-gap: .7rem; row-gap: .55rem; align-items: start; width: 100%; padding: .8rem .7rem; text-align: left; background: transparent; border: 0; border-radius: 4px; color: var(--ink); font-family: var(--font-serif); font-weight: 500; font-size: 1rem; line-height: 1.3; cursor: pointer; }
#b .tab .n { grid-area: 1 / 1; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1.5px solid var(--red); color: var(--red); font-family: var(--font-hand); font-size: 1.5rem; line-height: 1; -webkit-text-stroke: .3px var(--red); background: var(--note); }
#b .tab .t { grid-area: 1 / 2 / 2 / 4; padding-top: calc((2rem - 1.1em) / 2); font-family: var(--font-hand); font-weight: 400; font-size: 1.4rem; line-height: 1.1; color: var(--red); -webkit-text-stroke: .3px currentColor; }
#b .tab .k { display: block; font-family: var(--font-sans); font-size: .82rem; font-weight: 500; line-height: 1.3; color: var(--ink-2); -webkit-text-stroke: 0; }
#b .item.open > .tab .n { background: var(--red); color: var(--note); -webkit-text-stroke: .3px var(--note); }
/* The one-line answer: a green tick box in the number column, the headline beside it */
#b .tab .ok { grid-area: 2 / 1; display: grid; place-items: center; width: 2rem; height: 2rem; background: var(--tick); }
#b .tab .ok::after { content: ""; width: .35rem; height: .7rem; margin-top: -.12rem; border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(45deg); }
#b .tab .a { grid-area: 2 / 2; padding-top: calc((2rem - 1.3em) / 2); font-weight: 600; color: var(--ink); text-wrap: balance; }
/* The chevron, drawn the same way as the one on "What I need from you" below */
#b .tab .chev { grid-area: 2 / 3; align-self: center; width: .6rem; height: .6rem; margin: 0 .3rem .25rem .4rem; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); transition: transform .2s; }
#b .item.open > .tab .chev { transform: rotate(-135deg); margin-bottom: 0; margin-top: .3rem; }

/* The longer explanation: a grid row that goes from 0fr to 1fr, so it grows to its own height with no measuring */
#b .slot { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--speed) ease, visibility 0s var(--speed); }
#b .item.open > .slot { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--speed) ease, visibility 0s; }
#b .sin { min-height: 0; overflow: hidden; }
#b .sin p { margin: 0 .7rem 1rem calc(.7rem + 2rem + .7rem); padding-left: .9rem; border-left: 2px solid var(--tick); max-width: 37rem; color: var(--ink-2); font-size: 1.05rem; line-height: 1.55; }
@media (prefers-reduced-motion: reduce) { #b .slot, #b .tab .chev { transition: none !important; } }

/* Prices: handwritten biro figures with a double underline made from the hand font's underscore glyph,
   stretched to one continuous line (see script.js); a plain double border if JavaScript is off */
#b .prices { display: grid; justify-items: end; gap: .35rem; margin-top: 1rem; }
#b .price { margin: 0; max-width: none; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: .2rem .7rem; text-align: right; }
#b .price .lab2 { font-family: var(--font-sans); font-size: .82rem; font-weight: 500; line-height: 1.3; color: var(--ink-2); }
#b .hw { position: relative; display: inline-block; font-family: var(--font-hand); font-weight: 400; font-size: 2.1rem; line-height: 1; color: var(--biro); -webkit-text-stroke: .3px var(--biro); border-bottom: 3px double var(--biro); padding: 0 .15rem .1rem; white-space: nowrap; }
.js #b .hw { border-bottom: 0; padding-bottom: .5rem; }
.js #b .hw::after { content: "_\A_"; white-space: pre; position: absolute; left: 0; top: .86em; font-size: .8em; line-height: .11; transform-origin: left top; transform: scaleX(var(--sx, 1)); pointer-events: none; }
@media (max-width: 700px) { #b .hw { font-size: 1.7rem; } }
/* The caption under the prices: quiet and plain, so it reads as fine print rather than another benefit */
#b .inc { margin: 0; max-width: none; font-family: var(--font-sans); font-size: .82rem; font-weight: 500; line-height: 1.3; color: var(--ink-2); text-align: right; }
/* Closing statement under the prices: same voice as the two lines under the grid in section E, slightly smaller because these run longer */
#b .prices .inc.inc-promise { justify-self: stretch; font-family: var(--font-serif); font-weight: 600; font-size: 1.02rem; line-height: 1.3; color: var(--ink); text-align: left; }
#b .inc:not(.inc-promise) + .inc-promise { margin-top: 1rem; }
#b .inc-promise + .inc-promise { margin-top: .6rem; }
#b .hand-note { margin: .6rem 0 0 auto; max-width: 34rem; text-wrap: balance; font-family: var(--font-hand); font-size: 1.25rem; line-height: 1.2; color: var(--biro); -webkit-text-stroke: .3px var(--biro); text-align: right; }

/* The plain list: the source content, and what's shown without JavaScript or on paper */
#b .items { list-style: none; margin: 0; padding: 0; }
#b .items li { padding: .8rem 0; border-top: 1px solid var(--rule); }
#b .items li strong { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 1.1rem; line-height: 1.3; }
#b .items li span { color: var(--ink-2); }
.js #b .items { display: none; }
@media print { .js #b .items { display: block; } #b .tabs, #b .lab { display: none; } }

/* ── Calm-year chart, migrated as-is from the concept file ──
   Same paths, same draw-on animation, same colours (its own --cy-*
   variables, kept separate from the working-paper palette above) and
   labels as the original. Not yet adapted into the working-paper
   system or reshaped for quarterly MTD - that's a deliberate next
   step, kept apart from this migration. */
.calm-year-chart {
  grid-column: 1 / -1;
  --cy-chalk: #E8EBE7;
  --cy-ink: #131F33;
  --cy-muted: #4A5B72;
  --cy-signal: var(--red);
  --cy-line: rgba(19,31,51,.22);
  font-family: system-ui, sans-serif;
  padding-block: clamp(.25rem, .6vw, .5rem) 0;
}
.cy-chart { position: relative; }
.cy-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.cy-axis { stroke: var(--cy-ink); stroke-width: 1.5; }
.cy-grid { stroke: var(--cy-line); stroke-width: 1; }
.cy-p-usual { fill: none; stroke: var(--cy-signal); stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; }
.cy-p-me { fill: none; stroke: var(--cy-ink); stroke-width: 3.6; stroke-linejoin: round; stroke-linecap: round; }
.cy-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: .6rem; font-size: .92rem; color: var(--cy-muted); }
.cy-months span { padding-left: .1rem; }
/* Chart annotations are handwritten, in the colour of the line they describe (red for the usual year, ink for "with me") */
.cy-ann { position: absolute; margin: 0; font-family: var(--font-hand); font-weight: 400; -webkit-text-stroke: .3px currentColor; font-size: clamp(1rem, 1.55vw, 1.4rem); line-height: 1.1; max-width: 18rem; color: var(--cy-ink); }
.cy-ann b { display: block; font-family: var(--font-hand); font-weight: 400; font-size: clamp(1.35rem, 2.1vw, 2rem); line-height: 1; margin-bottom: .1rem; }
.cy-over { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1200 / 340; pointer-events: none; }
.cy-ann.red { top: calc(15.3% + 6px); text-align: center; font-size: clamp(1.05rem, 1.7vw, 1.4rem); line-height: 1.15; color: var(--cy-signal); }
.cy-ann.red-a { left: 0; width: 19.8%; }
.cy-ann.red-b { left: 24.5%; width: 21%; }
.cy-ann.dk { bottom: 25.1%; text-align: center; font-size: clamp(1.05rem, 1.7vw, 1.4rem); line-height: 1.15; }
.cy-ann.dk-c { left: 62%; width: 18%; text-wrap: balance; }
.cy-keys { display: none; margin: 1.25rem 0 0; padding: 0; list-style: none; gap: .9rem; }
.cy-keys li { display: grid; grid-template-columns: 2.2rem 1fr; gap: .5rem; align-items: start; }
.cy-keys i { display: block; height: 0; border-top: 4px solid var(--cy-signal); margin-top: .7em; }
.cy-keys li.me i { border-top-color: var(--cy-ink); }
.cy-keys li { font-family: var(--font-hand); font-weight: 400; -webkit-text-stroke: .3px currentColor; font-size: 1.35rem; line-height: 1.15; color: var(--cy-signal); }
.cy-keys li.me { color: var(--cy-ink); }
.cy-keys li span > span { display: block; }
.cy-keys li > span { text-align: center; }
.cy-keys li span > span + span { margin-top: .5em; }
.cy-keys b { font-family: var(--font-hand); font-weight: 400; font-size: 1.75rem; display: block; line-height: 1.1; }
.cy-cap { margin: 1rem 0 0; max-width: none; font-size: .95rem; color: var(--cy-muted); text-align: center; }
@media (max-width: 1050px) { .cy-over { display: none; } .cy-keys { display: grid; } }
@media (max-width: 600px) { .cy-months span:not(:nth-child(3n+1)) { display: none; } .cy-months span { grid-column: span 3; } }

/* Animation is gated on .in-view (added by script.js via IntersectionObserver
   when the chart scrolls into the viewport) rather than firing on page load,
   so the lines draw when the visitor actually reaches the chart. Before that,
   and always when reduced motion is requested, the finished state shows
   plainly with no animation. */
.cy-p-me, .cy-p-usual, .cy-ann { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .cy-p-me { opacity: 1; stroke-dasharray: 1; stroke-dashoffset: 1; }
  .cy-p-usual { opacity: 1; stroke-dasharray: 1; stroke-dashoffset: 1; }
  .cy-ann { opacity: 0; }
  /* Both lines share one start, duration and easing (linear, so the pen moves at a constant pace and the big 31 January spike lands as the finale); the shading and labels follow once both have finished (0.2s + 2s = 2.2s). */
  .calm-year-chart.in-view .cy-p-me { animation: cy-draw 2s .2s linear forwards; }
  .calm-year-chart.in-view .cy-p-usual { animation: cy-draw 2s .2s linear forwards; }
  .calm-year-chart.in-view .cy-ann { animation: cy-fade .6s 2.6s ease forwards; }
  /* Each caption fades in just as the line reaches the part it describes:
     the red line passes the May peak at about 0.4s and the August peak at
     about 0.9s, and the dark line reaches the December trough at about 1.6s
     (both draw over 2s from 0.2s, so the questions always arrive first). */
  .calm-year-chart.in-view .cy-ann.red-a { animation-delay: .45s; }
  .calm-year-chart.in-view .cy-ann.red-b { animation-delay: .9s; }
  .calm-year-chart.in-view .cy-ann.dk-c { animation-delay: 1.6s; }
  @keyframes cy-draw { to { stroke-dashoffset: 0; } }
  @keyframes cy-fade { to { opacity: 1; } }
}

/* ── Critique: the two-email comparison ──
   Same card border/rule language as the rest of the page (see .fit-step),
   just laid out as a side-by-side pair that stacks on narrow screens. */
#h-a { margin-bottom: .4rem; }
#h-a, #h-critique, #critique .frame:first-child .body p, #h-b { max-width: none; }
.redline { color: var(--red); }
.email-pair-wrap { grid-column: 1 / -1 !important; }
.email-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: .5rem; }
.email-cap { font-family: var(--font-sans); font-weight: 600; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 .6rem; }
.email-sheet { border: 1px solid var(--rule); padding: clamp(1.1rem, 2.5vw, 1.5rem); background: var(--paper-2); }
.email-sheet p { font-size: 1rem; margin: 0 0 .85rem; }
.email-sheet p:last-child { margin-bottom: 0; }
.email-meta { font-size: .9rem; color: var(--ink-2); padding-bottom: .7rem; margin-bottom: .85rem !important; border-bottom: 1px solid var(--rule); }
.email-sheet.clear { border-color: var(--tick); }
.vague { text-decoration: underline wavy var(--biro); text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Reviewer's pen: the reference numbers in the email and the questions beneath it are handwritten,
   while the email itself stays typed. Same fine text-stroke as the other hand-written elements. */
.vague + sup { font-family: var(--font-hand); font-size: 1.25em; line-height: 0; color: var(--biro); font-weight: 400; -webkit-text-stroke: .3px var(--biro); margin-left: .15em; }
.email-notes { list-style: none; counter-reset: note; margin: .85rem 0 0; padding: 0; font-family: var(--font-hand); font-size: 1.5rem; line-height: 1.15; color: var(--biro); display: grid; gap: .15rem; }
.email-notes li { display: grid; grid-template-columns: 1.2rem 1fr; -webkit-text-stroke: .3px var(--biro); }
.email-notes li::before { content: counter(note); counter-increment: note; font-weight: 400; color: var(--biro); }
@media (max-width: 700px) { .email-pair { grid-template-columns: 1fr; } }

/* ── Capacity: the same month, shared out ──
   Two grids side by side, in the same pair layout as the emails above. Left, a high-volume
   firm's month cut into two hundred slices with yours highlighted (#133). Right, the same
   month in eight, with the reader as the first name. The number grid is decorative
   (aria-hidden, with a text alternative in the markup). */
#h-capacity { max-width: none; }
.cap-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: .5rem; }
.cap-label { font-family: var(--font-sans); font-weight: 600; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 .6rem; }
.cap-brand { text-transform: none; }
.cap-wrap { position: relative; }
.cap-grid { display: grid; aspect-ratio: 2 / 1; border: 1px solid var(--rule); background: var(--paper-2); }
.cap-grid i { display: grid; place-items: center; min-width: 0; font-style: normal; border-right: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
.cap-numbers { grid-template-columns: repeat(20, 1fr); grid-template-rows: repeat(10, 1fr); }
.cap-names { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); border-color: var(--biro); }
.cap-grid i.hi { background: #D4E9F8; box-shadow: inset 0 0 0 2px var(--biro); }
.cap-names i span { font-family: var(--font-hand); font-size: clamp(1.3rem, 2.6vw, 2.1rem); line-height: 1; color: var(--biro); -webkit-text-stroke: .3px var(--biro); }
/* Sits just right of the highlighted cell (column 13 of 20, row 7 of 10), so it lines up at any width */
.cap-tag { position: absolute; left: calc(65% + .4rem); top: 65%; transform: translateY(-50%); font-family: var(--font-hand); font-size: 1.5rem; line-height: 1; color: var(--biro); -webkit-text-stroke: .3px var(--biro); white-space: nowrap; background: var(--paper-2); padding: .1rem .35rem; }
/* The high-volume firm is the "usual way", so it takes the chart's red: label, marker and tag. The grid itself stays grey. */
.cap-usual .cap-label { color: var(--red); }
.cap-usual .cap-grid i.hi { background: #F8E1E1; box-shadow: inset 0 0 0 2px var(--red); }
.cap-usual .cap-tag { color: var(--red); -webkit-text-stroke: .3px var(--red); }
.cap-note { font-size: .95rem; color: var(--ink-2); margin: .7rem 0 0; }
/* Two plain consequences of the capped list, set directly under the AuDHD Accountant grid only.
   The high-volume grid stretches down to the same bottom edge, and the note spans both grids on the last row. */
.cap-pair { row-gap: .7rem; }
.cap-usual { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; }
.cap-usual .cap-wrap { flex: 1; }
.cap-usual .cap-grid { aspect-ratio: auto; height: 100%; }
.cap-pair > :nth-child(2) { grid-column: 2; grid-row: 1; }
.cap-points { grid-column: 2; grid-row: 2; display: grid; gap: .6rem; }
.cap-points p { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 1.22rem; line-height: 1.3; }
.cap-pair .cap-note { grid-column: 1 / -1; grid-row: 3; margin: .3rem 0 0; max-width: none; text-align: center; }
@media (max-width: 700px) { .cap-pair { grid-template-columns: 1fr; row-gap: 1rem; } .cap-usual { grid-row: auto; display: block; } .cap-usual .cap-grid { aspect-ratio: 2 / 1; height: auto; } .cap-pair > :nth-child(2), .cap-pair .cap-note, .cap-points { grid-column: 1; grid-row: auto; } .cap-pair .cap-note { margin: 0; } .cap-tag { font-size: 1.2rem; } }

/* ── Enquiry form card ──
   One card in the same border/rule language as the rest of the page. The
   gate is the five confirmation ticks at the top (see .form-confirm). */
.fit-check { margin: 1.75rem 0 2rem; max-width: 46rem; }
.fit-check .lede { font-size: 1rem; }
#h-f { max-width: none; }
.fit-step { border: 1px solid var(--rule); padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--paper-2); }
.fit-thanks h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.3rem; margin: 0 0 .6rem; }

/* ── Enquiry form, carried over from the live site's working form
   (same field names and submission endpoint), restyled here. ── */
.form-step-label { font-family: var(--font-sans); font-weight: 600; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin: 1.75rem 0 .9rem; }
.form-step-label:first-of-type { margin-top: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
.form-group { margin-bottom: 1.1rem; }
.nowrap { white-space: nowrap; }
.form-group label { display: block; font-size: .95rem; font-weight: 600; margin-bottom: .35rem; }
.form-group input, .form-group textarea {
  width: 100%; font-family: var(--font-sans); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--rule); padding: .65rem .75rem;
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--ink); }
.form-group input.invalid { border-color: var(--red); }
.form-group textarea { min-height: 5.5rem; resize: vertical; }
.field-error { display: none; color: var(--red); font-size: .85rem; margin-top: .3rem; }
.field-error.visible { display: block; }
.form-submit { margin-top: .5rem; }
.form-submit:disabled { opacity: .6; cursor: wait; }
/* Confirmation tick at the top of the form. Until it is ticked the inputs are
   disabled and dimmed (labels stay readable); a transparent layer over them
   catches clicks and points back at the tick (disabled fields can't be clicked
   themselves). While locked, the tick sits in its own panel and the standing
   instruction under it is the same #error-confirm message, shown in green;
   it turns to the error colour once someone clicks into a locked field. */
.form-confirm { margin: 0 0 1.5rem; padding: 1.1rem 1.2rem; border: 2px solid var(--biro); background: #EAF4FB; }
.form-confirm label { display: flex; align-items: flex-start; gap: .75rem; font-weight: 600; font-size: 1rem; line-height: 1.4; cursor: pointer; }
.form-confirm .field-error { margin: 1rem 0 0; font-size: .95rem; font-weight: 600; }
.form-confirm:has(+ .form-lock-wrap.is-locked) .field-error { display: block; color: var(--tick); }
.form-confirm:has(+ .form-lock-wrap.is-locked) .field-error.visible { color: var(--red); }
.form-confirm input { flex: none; width: 1.6rem; height: 1.6rem; margin: .1rem 0 0; accent-color: var(--tick); cursor: pointer; }
/* Gate card: an invitation with no box (neurodivergence is never a tick), then five required ticks, then a kind way out. */
.confirm-nd { margin: 0 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); max-width: none; font-size: 1.02rem; line-height: 1.5; }
.confirm-lead { margin: 0 0 .85rem; max-width: none; font-family: var(--font-sans); font-weight: 600; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.confirm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
/* Centre the first line of each label on its box (the box is taller than one line of text) */
.confirm-list label > span { padding-top: .25rem; }
.confirm-list small { display: block; margin-top: .25rem; font-weight: 400; font-size: .9rem; line-height: 1.4; color: var(--ink-2); }
.confirm-exit { margin: .75rem 0 0; max-width: none; font-size: .9rem; line-height: 1.45; color: var(--ink-2); }
/* Once all five are ticked the exit line is moot, so it goes (only when JavaScript is running, since without it nothing ever locks) */
.js .form-confirm:not(:has(+ .form-lock-wrap.is-locked)) .confirm-exit { display: none; }
.form-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.form-lock-wrap { position: relative; }
.form-lock-wrap.is-locked .form-fields input, .form-lock-wrap.is-locked .form-fields textarea { opacity: .6; }
.form-lock-wrap.is-locked .form-submit { opacity: 1; background: transparent; color: var(--ink-2); border: 2px dashed var(--ink-2); }
.form-lock-wrap.is-locked .form-submit::before { content: ""; width: 1.05em; height: 1.05em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h1zm2 0h6V7a3 3 0 0 0-6 0v3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h1zm2 0h6V7a3 3 0 0 0-6 0v3z'/%3E%3C/svg%3E") center / contain no-repeat; }
.form-lock { position: absolute; inset: 0; z-index: 2; cursor: not-allowed; }
.form-lock[hidden] { display: none; }
.form-error-banner { color: var(--red); font-size: .92rem; margin-top: 1rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

/* ── Conclusion ── */
.sign { display: flex; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin: 1.5rem 0 0; }
.signature { font-family: var(--font-hand); font-size: 3.4rem; line-height: .9; color: var(--biro); -webkit-text-stroke: .3px var(--biro); transform: rotate(-3deg); }
.sign small { display: block; color: var(--ink-2); font-size: .95rem; padding-bottom: .4rem; }

footer { background: var(--paper); border-top: 2px solid var(--ink); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; padding: 2.5rem max(var(--pad), calc((100% - 1320px) / 2 + var(--pad))); /* 1320px = .frame max-width: keeps footer content on the same edges as the header and section boxes */ margin-top: clamp(2rem, 4vw, 3rem); }
footer .foot-nav { grid-column: 1; justify-self: start; }
footer .foot-nav .nav-list li { text-align: left; }
footer .foot-nav .nav-list b { min-width: 1.9rem; padding: 0 .35rem; margin-right: .5rem; }
@media (max-width: 400px) { footer .foot-nav .nav-list { column-gap: .9rem; } }
@media (max-width: 340px) { footer .foot-nav .nav-list { column-gap: .3rem; } footer .foot-nav .nav-list b { margin-right: .35rem; } }
footer .foot-nav .nav-list { display: grid; grid-template-rows: repeat(3, auto); grid-auto-flow: column; grid-auto-columns: max-content; gap: .5rem 1.5rem; }
footer .footer-badges { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 2rem; }
footer .footer-badges img { height: 4rem; width: auto; mix-blend-mode: multiply; opacity: .8; }
footer .footer-badges > img { transform: translateY(-.7rem); }
footer .footer-right { grid-column: 3; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: .375rem; }
footer .footer-right p { margin: 0; }
footer .footer-copy { font-size: .8125rem; color: var(--ink-2); }
footer .footer-copy a { color: var(--ink-2); text-decoration: none; }
footer .footer-logo-wrap { vertical-align: middle; display: inline-flex; gap: .5rem; }
footer .brand-line1, footer .brand-line2 { font-size: .625rem; }
@media (max-width: 900px) {
  footer { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 2.25rem 1.5rem; gap: 1.25rem; }
  footer .foot-nav, footer .footer-badges, footer .footer-right { grid-column: 1; justify-self: center; }
  footer .footer-right { align-items: center; }
  footer .foot-nav .nav-list { justify-content: center; }
  footer .footer-badges { flex-wrap: wrap; gap: 1rem 2rem; max-width: 100%; }
  footer .footer-badges img { height: 4.5rem; max-width: 100%; }
  footer .footer-badges > img { transform: translateY(-.78rem); }
}

/* ── Who I am: a single register, one interleaved timeline ──
   Same row/border convention as table.fees - marker, then one line,
   repeated - no columns, no dt/dd sentence pairing. */
.register { margin: 0; max-width: 44rem; }
.register > div { display: grid; grid-template-columns: 7rem 1fr; gap: 1.5rem; align-items: center; padding: 1.1rem 0; border-top: 1px solid var(--rule-soft); }
.register > div:first-child { border-top: 0; }
.register > div:last-child { border-bottom: 1.5px solid var(--ink); }
.register dt { font-family: var(--font-serif); font-weight: 600; color: var(--ink-2); font-size: 1rem; }
.register dd { margin: 0; }
/* About me ledger: a thin rule above and below, the same as the row dividers */
#ledger .register > div:first-child { border-top: 1px solid var(--rule-soft); }
#ledger .register > div:last-child { border-bottom: 1px solid var(--rule-soft); }
/* Privacy page: long paragraphs, so the label starts level with the first line of text, and multi-paragraph answers get a small gap */
#privacy .register > div { align-items: start; }
#privacy .register dd p { margin: 0; max-width: none; }
#privacy .register dd p + p { margin-top: .7rem; }
@media (max-width: 620px) {
  .register > div { grid-template-columns: 1fr; gap: .25rem; padding: .9rem 0; }
  .register dt br { display: none; }
}

/* ── Credentials, under the photo ── */
.creds { margin: 1.1rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--rule-soft); font-size: .9rem; }
.creds > div + div { margin-top: .85rem; }
.creds dt { font-family: var(--font-serif); font-weight: 600; color: var(--ink); }
.creds dd { margin: .1rem 0 0; color: var(--ink-2); }
.creds a { color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.creds .arrow { font-weight: 700; display: inline-block; position: relative; top: -.15em; }

@media print { .file, .actions { display: none; } }

/* Small screens: photo with the credentials beside it, before the ledger (heading, photo + credentials, story) */
@media (max-width: 900px) {
  #ledger .body { display: contents; }
  #ledger .ref { order: 0; }
  #ledger .body > h2 { order: 1; }
  #ledger .margin { order: 2; display: flex; align-items: flex-end; gap: 1rem; }
  #ledger .preparer { flex: 0 0 auto; width: 10rem; max-width: 10rem; margin: 0; }
  #ledger .creds { flex: 1 1 0; min-width: 0; margin: 0; padding-top: 0; border-top: 0; }
  #ledger .body > .register { order: 3; }
}
@media (max-width: 360px) { #ledger .preparer { width: 8.25rem; max-width: 8.25rem; } #ledger .margin { gap: .8rem; } }


/* Side by side: no outer boxes, a thin rule between the columns instead */
@media (min-width: 1100px) {
  #b .cols { column-gap: clamp(2rem, 4vw, 3.5rem); }
  #b .grp { border: 0; border-radius: 0; padding: 0; }
  #b .grp + .grp { position: relative; }
  #b .grp + .grp::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(clamp(2rem, 4vw, 3.5rem) / -2); border-left: 1px solid var(--rule-soft); }
}

/* ── Break-even chart (D): my fee as a flat line, the reader's own time as a rising one.
   Same two inks as the calm-year chart: dark for me, red for the cost of doing it yourself. ── */
.be { --be-ink: #131F33; --be-signal: var(--red); --be-muted: #4A5B72; --be-line: rgba(19,31,51,.22);
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem); padding: clamp(1.1rem, 2.5vw, 1.75rem); border: 1px solid var(--rule-soft); border-radius: 6px; }
.be-title { margin: 0 0 1.1rem; font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.be-lede { margin: 0 0 1.25rem; max-width: none; color: var(--ink-2); font-size: 1rem; }
.be-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 900px) { .be-grid { grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; } }
.be-inputs .form-group { margin-bottom: 1.25rem; }
.be-field { display: flex; align-items: center; gap: .5rem; }
.be-field input { flex: 1; min-width: 0; }
.be-unit { font-weight: 600; color: var(--ink-2); }
.be-hint { margin: .4rem 0 0; max-width: none; font-size: .88rem; line-height: 1.45; color: var(--ink-2); }
.be-vat { display: flex; align-items: flex-start; gap: .75rem; font-weight: 600; font-size: 1rem; line-height: 1.4; cursor: pointer; }
.be-vat input { flex: none; width: 1.6rem; height: 1.6rem; margin: .05rem 0 0; accent-color: var(--tick); cursor: pointer; }
.be-vat > span { padding-top: .25rem; }
.be-ticks { display: grid; gap: .75rem; }
.be-plat { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: 1rem; line-height: 1.4; cursor: pointer; }
.be-plat input { flex: none; width: 2.4rem; height: 2.2rem; text-align: center; font: inherit; font-weight: 600; color: var(--ink); background: var(--paper); border: 1.5px solid var(--rule); border-radius: 0; }
.be-plat input:focus { border-color: var(--ink); }
.be-plat input { -moz-appearance: textfield; appearance: textfield; }
.be-plat input::-webkit-outer-spin-button, .be-plat input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.be-plat input::placeholder { color: var(--ink-2); opacity: 1; }
.be-vat small { display: block; margin-top: .2rem; font-weight: 400; font-size: .88rem; color: var(--ink-2); }
.be-eg { margin: 1rem 0 0; max-width: none; font-family: var(--font-hand); font-size: 1.3rem; line-height: 1.15; color: var(--biro); -webkit-text-stroke: .3px var(--biro); }
.be-eg[hidden] { display: none; }

.be-big { margin: 0 0 .35rem; max-width: none; font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.2; letter-spacing: -.012em; }
.be-sentence { margin: 0 0 1rem; max-width: 40rem; color: var(--ink-2); font-size: 1.05rem; line-height: 1.5; }
.be-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin: 0 0 .5rem; padding: 0; font-size: .95rem; color: var(--ink); }
.be-legend li { display: flex; align-items: center; gap: .55rem; }
.be-legend i { display: block; width: 1.6rem; height: 0; border-top: 3px solid var(--be-ink); border-radius: 2px; }
.be-legend i.k-time { border-top-color: var(--be-signal); }
.be-chart { position: relative; }
.be-plot svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.be-tick { font: 400 13px var(--font-sans); fill: var(--be-muted); }
.be-axt { font: 500 13px var(--font-sans); fill: var(--be-muted); }
.be-gl { stroke: var(--be-line); stroke-width: 1; }
.be-axis { stroke: var(--be-ink); stroke-width: 1.5; }
.be-fee { fill: none; stroke: var(--be-ink); stroke-width: 3.4; stroke-linecap: round; }
.be-time { fill: none; stroke: var(--be-signal); stroke-width: 3.2; stroke-linecap: round; }
.be-ref { stroke: var(--be-muted); stroke-width: 1; }
.be-lab { font: 400 19px var(--font-hand); fill: var(--be-ink); stroke: var(--be-ink); stroke-width: .3px; }
.be-lab-halo { font: 400 19px var(--font-hand); fill: var(--paper); stroke: var(--paper); stroke-width: 7px; stroke-linejoin: round; }
.be-lab-s-halo { font: 500 14px var(--font-sans); fill: var(--paper); stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
.be-lab.sig { fill: var(--be-signal); stroke: var(--be-signal); }
.be-lab-s { font: 500 14px var(--font-sans); fill: var(--be-ink); }
.be-lab-s.be-lab-mine { fill: var(--be-signal); }
.be-ref-mine, .be-xh.is-mine .be-ref, #be-xh.is-mine .be-ref { stroke: var(--be-signal); }
.be-ring { stroke: var(--paper); stroke-width: 2; }
.be-tip { position: absolute; z-index: 3; top: 1.5rem; pointer-events: none; padding: .5rem .7rem; background: var(--paper-2); border: 1.5px solid var(--ink); font-size: .9rem; line-height: 1.4; white-space: nowrap; }
.be-tip[hidden] { display: none; }
.be-tip strong { display: block; margin-bottom: .15rem; font-weight: 700; }
.be-tip .row { display: flex; align-items: center; gap: .5rem; }
.be-tip i { display: block; width: .9rem; height: 0; border-top: 3px solid var(--be-ink); }
.be-tip i.k-time { border-top-color: var(--be-signal); }
.be-cap { margin: .75rem 0 0; max-width: none; font-size: .85rem; line-height: 1.45; color: var(--ink-2); }
.be-cap.be-cant { margin-top: .4rem; }
.be-out .be-legend { margin-top: 0; }
@media (max-width: 599px) { .be-hint { font-size: .82rem; } .be-inputs .form-group { margin-bottom: .9rem; } }
.be-field input { font-family: var(--font-hand); font-size: 1.5rem; line-height: 1.1; color: var(--biro, #16296F); padding-top: .45rem; padding-bottom: .4rem; }
.be-field input::placeholder { font-family: var(--font-hand); color: var(--biro, #16296F); opacity: .67; -webkit-text-stroke: .3px var(--biro, #16296F); } /* .67 is the lowest opacity that clears 4.5:1 on the paper */
/* Contact form placeholders: one explicit colour (5.16:1 on the paper) instead of each browser's own default, which fails AA */
.form-group input::placeholder, .form-group textarea::placeholder { color: #5B6777; opacity: 1; }
.be-plot.is-ex .be-time, .be-plot.is-ex .be-lab.sig { opacity: .67; } /* example state: softened so it reads as an example; matches the handwritten placeholders. Line 3.30:1 (passes 3:1 for graphics); label is 3.30:1, below the 4.5:1 text threshold, by choice */
.be-plot.is-ex .be-time { stroke-dasharray: 7 5; }
.be-inputs .be-cap.be-cant { margin-top: .9rem; }

.be-hint.be-hint-top { margin: 0; }
.be-try { margin: 0 0 .7rem; max-width: none; font-size: .95rem; font-weight: 600; line-height: 1.4; color: var(--ink); }
.be-fields { display: grid; gap: .75rem; margin-bottom: 1.1rem; }
/* The two boxes now sit together, outside the question groups, so they carry the form-field look themselves */
.be-fields input { width: 100%; background: var(--paper); border: 1.5px solid var(--rule); padding: .45rem .75rem .4rem; }
.be-fields input:focus { border-color: var(--ink); }

/* ── Section D: Getting started pricing ── */
#b .q-sum { width: 100%; border-collapse: collapse; margin: .9rem 0 0; }
#b .q-sum caption { caption-side: top; text-align: left; padding: 0 0 .35rem; font-family: var(--font-sans); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
#b .q-sum th, #b .q-sum td { padding: .5rem 0; border-top: 1px solid var(--rule-soft); font-weight: 400; vertical-align: baseline; }
#b .q-sum th { text-align: left; padding-right: .8rem; font-size: .95rem; line-height: 1.35; }
#b .q-sum th small { display: block; margin-top: .15rem; font-size: .82rem; line-height: 1.4; color: var(--ink-2); }
#b .q-sum td { text-align: right; white-space: nowrap; font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem; line-height: 1.3; color: var(--biro); font-variant-numeric: lining-nums tabular-nums; }
#b .q-sum td small { display: block; margin-top: .1rem; font-family: var(--font-sans); font-size: .8rem; font-weight: 500; line-height: 1.3; color: var(--ink-2); }
#b .q-note { margin: .65rem 0 0; max-width: none; font-size: .9rem; line-height: 1.5; color: var(--ink-2); }

#b details.quote { margin-top: 1rem; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
#b .quote summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; padding: .7rem 0; cursor: pointer; font-family: var(--font-serif); font-weight: 500; font-size: 1.15rem; line-height: 1.3; }
#b .quote summary::-webkit-details-marker { display: none; }
#b .quote summary::after { content: ""; flex: none; width: .65rem; height: .65rem; margin: 0 .3rem .25rem 0; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform .2s; }
#b .quote[open] summary::after { transform: rotate(-135deg); margin-bottom: 0; margin-top: .35rem; }
@media (prefers-reduced-motion: reduce) { #b .quote summary::after { transition: none; } }

#b .q-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: .4rem 0 1.25rem; }
#b .q-tbl { width: 100%; border-collapse: collapse; }
#b .q-tbl caption { caption-side: top; text-align: left; padding: 0 0 .35rem; font-family: var(--font-sans); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
#b .q-tbl th { padding: .5rem 0; border-top: 1px solid var(--rule-soft); vertical-align: top; text-align: left; font-family: var(--font-sans); font-size: .95rem; font-weight: 400; line-height: 1.4; color: var(--ink); }
#b .q-tbl th small { display: block; margin-top: .1rem; color: var(--ink-2); font-size: .82rem; line-height: 1.35; }
#b .q-foot { margin: 0; max-width: none; font-size: .88rem; line-height: 1.5; color: var(--ink-2); }
#b .q-foot + .q-foot { margin-top: .6rem; }

/* Divider between the two groups runs the full height of the row, even when the left group is opened */
@media (min-width: 1100px) {
  #b .cols { position: relative; }
  #b .grp + .grp::before { display: none; }
  #b .cols::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid var(--rule-soft); }
}

/* Section D merged layout: one pain list beside the costs */
#b .q-cap { margin: 1.6rem 0 0; padding-top: 1rem; border-top: 2px solid var(--ink); max-width: none; font-family: var(--font-sans); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
#b .q-cap + .prices { margin-top: .5rem; }
#b .grp > .q-sum:first-child { margin-top: 0; }
#b .hw.hw-s { font-size: 1.6rem; padding: 0 .15rem; border-bottom: 0; }
#b .hw.hw-s::after { display: none; }
@media (max-width: 700px) { #b .hw.hw-s { font-size: 1.35rem; } }
#b .q-sum td .hw { white-space: nowrap; }
#b .q-note strong { display: block; margin-top: .35rem; color: var(--ink); font-weight: 700; }
#b .q-triggers { margin: .3rem 0 0; padding: 0 0 0 1.25rem; list-style: disc; max-width: none; font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
#b .q-triggers li { margin: .15rem 0; padding: 0; }
#b .q-note-after { margin-top: .5rem; }

.strip dd h1.subj { font: inherit; letter-spacing: inherit; margin: 0; max-width: none; text-wrap: initial; -webkit-text-stroke: inherit; }

/* Narrow screens: the chart is drawn at full width, so at 1200:340 it shrinks to about 100px tall on a phone. Below 1050px (where the
   labels move out from over the chart) its height follows the screen width in a straight line instead: 274px at 1050px, which is
   where it already is, down to about 200px at 390px. The shape is stretched vertically, so the line weights are set in screen
   pixels and also follow the width, matching the current weights at 1050px. */
@media (max-width: 1050px) {
  .cy-chart svg { height: calc(156px + 11.2vw); }
  .cy-p-usual, .cy-p-me, .cy-axis, .cy-grid { vector-effect: non-scaling-stroke; }
  .cy-p-usual { stroke-width: calc(1.6px + .1vw); }
  .cy-p-me { stroke-width: calc(1.8px + .1vw); }
  .cy-axis { stroke-width: 1.5px; }
}

/* Tap targets: footer email, ICAEW verify link and footer logo link are at least 24px high, 44px on small screens. */
footer .footer-copy a[href^="mailto:"], .creds dd a { display: inline-flex; align-items: center; min-height: 24px; }
footer .footer-logo-wrap { min-height: 24px; align-items: center; }
@media (max-width: 700px) {
  footer .footer-copy a[href^="mailto:"], .creds dd a, footer .footer-logo-wrap { min-height: 44px; }  /* The 44px tap area is centred on the text; pull it back so the verify line sits as close to its label as the Durham row's lines do. */
  .creds dd a { margin-block: -10px; }
}