/* Practice Value: shared component foundation, with the current supplied
   Brand Pack 1.0 layer at the end of this file (PV-018X, 2026-09-29).
   The older implementation history below is retained for context.

   PV-001 built this as a homepage preview, PV-002 made it light-only, and
   PV-003 (this file) rolled it across every page after Martin signed the
   preview off. The preview pipeline is retired: there is one stylesheet
   again, and it is this one.

   Layered, and the order matters. Everything down to the accessibility
   block is the shared foundation and the homepage. Below that come the
   page types the preview never had to cover (article, hub, glossary,
   tools, about) and then the calculator, which is the largest single
   component on the site and the only one whose markup is written by
   JavaScript rather than by the build.

   Skill: .claude/skills/apple-design/SKILL.md, applied in full for
   1 Response, 7 Spatial consistency, 11 Frame-level smoothness,
   12 Materials and depth, 14 Reduced motion and accessibility,
   15 Typography, 16 Design foundations, 17 Process; sparingly for
   3 Interruptibility and 4 Springs (sticky nav and mobile menu only);
   sections 2, 5, 6, 9, 10 and 13 deliberately not applied, being
   touch-gesture physics with no surface on a lead generation page.

   Animated properties are transform and opacity only. Nothing here
   triggers layout. */

/* ----------------------------------------------------------------- font */

/* PV-018X: the supplied Roboto Regular and Medium, self-hosted with OFL.
   The build stamps each font URL from its own bytes. */
@font-face { font-family: "Roboto"; src: url("/assets/fonts/Roboto-Regular.woff2?v=85fa68fb") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/assets/fonts/Roboto-Medium.woff2?v=99c80417") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }

/* ---------------------------------------------------------------- tokens */

:root {
  /* Neutral grey scale. One brand accent (oxblood, carried from the live
     site); every other colour on the page is grey. */
  --bg:            #F7F5F2;
  --bg-sunken:     #EDEDF0;
  --surface:       #FFFFFF;
  --surface-2:     #FBFBFC;
  --text:          #1D1D1F;
  --text-2:        #5E5E63;   /* 5.9:1 on --bg */
  /* Tertiary is still real text, so it is held to AA against the DARKEST
     ground it ever renders on, which is --bg-sunken and not white. The
     Apple-ish #86868B measures 3.1:1 there and was caught failing. */
  --text-3:        #65656B;   /* 4.95:1 on --bg-sunken, 5.8:1 on --surface */
  --line:          rgba(0, 0, 0, 0.10);
  --line-strong:   rgba(0, 0, 0, 0.18);

  --accent:        #7A2E33;   /* oxblood, 8.5:1 on --bg */
  --accent-fill:   #7A2E33;
  --accent-on:     #FFFFFF;   /* 9.3:1 on --accent-fill */
  --accent-wash:   rgba(122, 46, 51, 0.08);

  /* The single non-accent hue on the site: a "this reconciles" / "this is
     within tolerance" green on the calculator and the scorecard. Darkened
     from the old #2E5E42 so it clears AA on --bg-sunken, the darkest ground
     it renders on, rather than only on white (the PV-001 tertiary defect). */
  --good:          #285E4B;

  /* Materials (s12). The header is the only translucent surface on the
     page: a light translucent layer must never sit on another. */
  /* PV-003 raised this from 0.72. The preview header dissolved into the page
     at rest, which Martin asked to correct; a more present material is the
     move that changes least, because the header is still the same one
     translucent surface it always was. */
  --material:      rgba(250, 250, 252, 0.82);
  --material-blur: saturate(180%) blur(20px);
  --material-edge: rgba(255, 255, 255, 0.65);

  --shadow-card:   0 1px 2px rgba(0, 0, 0, 0.05),
                   0 8px 24px -8px rgba(0, 0, 0, 0.14),
                   0 24px 56px -24px rgba(0, 0, 0, 0.18);
  --shadow-press:  0 1px 2px rgba(0, 0, 0, 0.06),
                   0 3px 10px -4px rgba(0, 0, 0, 0.12);

  /* Spacing in rem so the layout scales WITH the user's text size (s15). */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.25rem; --s6: 1.5rem;  --s8: 2rem;    --s12: 3rem;
  --s16: 4rem;   --s24: 6rem;

  --radius:    14px;
  --radius-lg: 20px;

  /* PV-020 layout system. One container, one gutter, one section rhythm.
     The spacing scale is --s1 to --s24 above (rem, so it follows the reader's
     text size); the roles below name how that scale is used, so a rule reads
     "gap between groups" and not "24px". */
  --container:  75rem;                                   /* 1200px content box */
  --gutter:     clamp(1rem, 0.6rem + 1.4vw, 2.5rem);     /* 16px at 390, 40px cap */
  --section-y:  clamp(3rem, 2.2rem + 3.6vw, 6rem);       /* 48px at 390, 96px cap */
  --gap-tight:  var(--s2);    /*  8: label to field, item to item in a list */
  --gap:        var(--s4);    /* 16: paragraph to paragraph */
  --gap-loose:  var(--s6);    /* 24: heading to its content, card padding */
  --gap-group:  var(--s8);    /* 32: one group of things to the next */
  --gap-block:  var(--s12);   /* 48: one block of a page to the next inside a section */
  --measure:    54ch;         /* body reading column. ch is the width of "0" (about 0.56em) and real text averages about 0.43em a character, so 54ch is 65 to 70 real characters a line at 17 to 20px */
  --measure-lg: 60ch;         /* the widest a paragraph may ever run: about 75 real characters; 80 is the ceiling */
  --header-row: 4.75rem;      /* the header row's minimum height; NOT --header-h, which is the sticky offset below */

  /* Motion. No library: CSS transitions with restrained easing.
     --ease-out / --ease-in are inverse control points, so a reversible
     transition returns along the path it arrived on (s7). --ease-settle
     reads as a critically damped spring (damping 1.0, no overshoot),
     which is the default for anything a tap opens (s4). */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:     cubic-bezier(0.64, 0, 0.78, 0.39);
  --ease-settle: cubic-bezier(0.32, 0.72, 0, 1);
  --t-press:  100ms;
  --t-quick:  180ms;
  --t-panel:  340ms;

  --font-display: "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------- base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The header is sticky on every page, so an in-page anchor lands underneath
     it without this. Set on the scrolling element, which is <html>, because
     scroll-padding on <body> would not be read. */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  /* Body sits near zero tracking; only display sizes are tightened (s15). */
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .wordmark, .btn, .kicker, .nav-toggle {
  font-family: var(--font-display);
  font-weight: 500;
}

h1, h2, h3 { margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

img { max-width: 100%; height: auto; }

/* PV-020: THE container. Every block in <main>, the header, the breadcrumb and
   the footer sit in one .wrap, so they share one left and one right edge at
   every width. The content box is min(--container, viewport minus two
   gutters); the padding is the gutter. Nothing else on the site declares a
   page width. Reading columns inside it are set by measure (ch), never by a
   second container. */
.wrap {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Focus is never removed, only shaped. s16: visible everywhere. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: var(--s4);
  top: var(--s4);
  z-index: 100;
  padding: var(--s3) var(--s4);
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  transform: translateY(-200%);
  transition: transform var(--t-quick) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Every control responds on press, not on release (s1). */
a, button, input, label, summary {
  touch-action: manipulation;
}

/* ---------------------------------------------- header: the one material */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* s12: a translucent functional layer with content scrolling underneath,
     not an opaque bar consuming a fixed strip. */
  background: var(--material);
  -webkit-backdrop-filter: var(--material-blur);
  backdrop-filter: var(--material-blur);
  /* At rest the bar now keeps its own hairline (PV-003) rather than waiting
     for a scroll to draw one. It still strengthens on scroll, so the edge
     effect below is a change of degree, not the only thing separating the
     header from the page. */
  border-bottom: 1px solid var(--line);
  transition: border-color var(--t-quick) var(--ease-out),
              background-color var(--t-quick) var(--ease-out);
}

/* The bright top edge: light catching the near side of the material. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--material-edge);
  pointer-events: none;
}

/* s12: a scroll edge effect, not a hard 1px divider. The gradient only
   appears once content is actually underneath the floating chrome. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 22px;
  background: linear-gradient(to bottom, var(--material), rgba(0, 0, 0, 0));
  opacity: 0;
  transition: opacity var(--t-quick) var(--ease-out);
  pointer-events: none;
}
.site-header.is-scrolled::after { opacity: 1; }
.site-header.is-scrolled { border-bottom-color: var(--line-strong); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 56px;
}

/* PV-003: the header was asked to stand out a little more than the preview's,
   without becoming a different design. Three small moves, no new elements:
   the wordmark takes an oxblood mark, the type goes up a step, and the bar
   keeps a hairline at rest instead of only once scrolled (below). */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--text);
  text-decoration: none;
  padding: var(--s2) 0;
  transition: opacity var(--t-press) var(--ease-out);
}
.wordmark:active { opacity: 0.55; }

/* The mark: the one piece of brand furniture on the page. A 6px oxblood
   square, optically centred on the cap height rather than the line box,
   which is why it carries a translate rather than sitting on the baseline. */
.wordmark::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent);
  transform: translateY(-0.04em);
  flex: 0 0 auto;
}
/* The footer wordmark is a <p>, not the link, and the mark would read as a
   bullet in a column of links. */
.wordmark--footer::before { display: none; }

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: var(--s1);
}

.primary-nav a {
  /* s16: 44px touch targets, achieved with padding rather than a fixed
     height, so the target grows with the user's text size. */
  display: flex;
  align-items: center;
  padding: var(--s3);
  min-height: 44px;
  line-height: 1.4;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0;
  color: var(--text-2);
  text-decoration: none;
  border-radius: 9px;
  transition: color var(--t-press) var(--ease-out),
              background-color var(--t-press) var(--ease-out),
              transform var(--t-press) var(--ease-out);
}

@media (hover: hover) {
  .primary-nav a:hover { color: var(--text); background: var(--accent-wash); }
}
/* Feedback on pointer-down, instant (s1). */
.primary-nav a:active { transform: scale(0.96); color: var(--accent); }

/* Where you are. A fifty-page site with no current-section marker makes the
   reader keep a map in their head. aria-current carries it, so the screen
   reader announces the same fact the colour shows, and the pillar hubs and
   articles resolve to Guides in build.py rather than lighting nothing. */
.primary-nav a[aria-current="page"] {
  color: var(--text);
  background: var(--accent-wash);
}
@media (hover: hover) {
  .primary-nav a[aria-current="page"]:hover { color: var(--accent); }
}

/* --------------------------------------------------------- mobile menu */

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-right: calc(var(--s2) * -1);
  background: none;
  border: 0;
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--t-press) var(--ease-out),
              transform var(--t-press) var(--ease-out);
}
.nav-toggle:active { transform: scale(0.92); background: var(--accent-wash); }

.nav-toggle__box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 18px;
}

.nav-toggle__bar {
  display: block;
  height: 1.5px;
  width: 100%;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center;
  transition: transform var(--t-panel) var(--ease-settle),
              opacity var(--t-quick) var(--ease-out);
}

/* The glyph becomes the dismissal it performs: same path in and out (s7). */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

@media (max-width: 767px) {
  .nav-toggle { display: flex; }

  .primary-nav {
    position: absolute;
    top: calc(100% + var(--s2));
    right: var(--s6);
    left: auto;
    width: min(17rem, calc(100vw - var(--s6) * 2));
    padding: var(--s2);
    /* s12: the panel is SOLID. Stacking a light translucent surface on the
       translucent header would collapse legibility. */
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);

    /* s7: anchored to the control that opened it, so the spatial
       relationship between button and content is obvious. */
    transform-origin: top right;
    transform: scale(0.92) translateY(-8px);
    opacity: 0;
    visibility: hidden;
    /* s3, applied sparingly: transform and opacity interpolate from their
       live computed values, so a tap mid-flight reverses from where the
       panel actually is rather than jumping to the target first. The
       easing pair is mirrored, out on the way in, in on the way out. */
    transition: transform var(--t-panel) var(--ease-in),
                opacity var(--t-quick) var(--ease-in),
                visibility 0s linear var(--t-panel);
  }

  .primary-nav.is-open {
    transform: scale(1) translateY(0);
    opacity: 1;
    visibility: visible;
    will-change: transform, opacity;   /* s11: hint only while motion is imminent */
    transition: transform var(--t-panel) var(--ease-settle),
                opacity var(--t-quick) var(--ease-out),
                visibility 0s linear 0s;
  }

  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .primary-nav a { justify-content: flex-start; padding: var(--s3) var(--s4); font-size: 1rem; }
}

/* ---------------------------------------------------------------- hero */

.hero {
  padding-block: var(--s12) var(--s16);
}

@media (min-width: 768px) { .hero { padding-block: var(--s16) var(--s24); } }

/* The homepage is the only page whose hero holds a working tool, so it is
   the only one that needs the two columns. Every other page's hero is a
   title and a standfirst and inherits .hero on its own. */

.kicker {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.75rem;
  /* s15: small text takes slightly POSITIVE tracking. */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s4);
}

h1 {
  font-size: clamp(2.25rem, 1.6rem + 3.1vw, 4.25rem);
  /* s15: leading tracks size inversely, tracking goes negative as type grows. */
  line-height: 1.04;
  letter-spacing: -0.032em;
  font-weight: 500;
  margin-bottom: var(--s6);
  text-wrap: balance;
}

.standfirst {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  letter-spacing: -0.006em;
  color: var(--text-2);
  max-width: 34ch;
}

/* ------------------------------------------------------ the calculator */

.calc {
  /* s12: the biggest surface on the page reads as the thickest. It is solid,
     not translucent, and carries a deeper shadow than anything else here. */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--s6);
}

@media (min-width: 768px) { .calc { padding: var(--s8); } }

.calc h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--s6);
}

.field + .field { margin-top: var(--s5); }

.field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--text-2);
  margin-bottom: var(--s2);
}

.calc input[type="text"] {
  width: 100%;
  min-height: 48px;
  padding: var(--s3) var(--s4);
  font-family: var(--font-display);
  font-weight: 500;
  /* 16px floor: anything smaller makes iOS Safari zoom on focus. */
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  appearance: none;
  transition: border-color var(--t-press) var(--ease-out),
              box-shadow var(--t-press) var(--ease-out),
              background-color var(--t-press) var(--ease-out);
}

/* A <select> is as wide as its longest <option> unless it is told otherwise,
   and on /tools/net-proceeds-estimator/ that came to 381px, six past a 375px
   viewport. Pre-existing and not caused by PV-001-d; it only became visible
   when the sweep's mobile width moved from 390 to 375. Fixed here rather than
   left red, because a page that scrolls sideways on the narrowest common phone
   is a real defect wherever it lives. */
select { max-width: 100%; }

.calc input[type="text"]::placeholder { color: var(--text-3); font-weight: 500; }

.calc input[type="text"]:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3.5px var(--accent-wash);
}

.calc input[aria-invalid="true"] {
  border-color: var(--accent);
  background: var(--accent-wash);
}

.unit { position: relative; display: block; }
.unit input { padding-right: 2.75rem; }
.unit__mark {
  position: absolute;
  right: var(--s4);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--text-3);
  pointer-events: none;
}

.helper, .calc-hook {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-3);
  margin-top: var(--s2);
}
.helper:empty, .calc-hook:empty, .field-error:empty { display: none; }

.field-error {
  font-size: 0.8125rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--accent);
  margin-top: var(--s2);
}

.calc-hook { margin-top: var(--s3); text-align: center; }

.btn {
  display: block;
  width: 100%;
  min-height: 50px;
  margin-top: var(--s6);
  padding: var(--s3) var(--s6);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.005em;
  color: var(--accent-on);
  background: var(--accent-fill);
  border: 0;
  border-radius: var(--radius-btn, 8px);
  box-shadow: var(--shadow-press);
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out),
              filter var(--t-press) var(--ease-out),
              box-shadow var(--t-press) var(--ease-out);
}
.btn:empty::after { content: "Continue"; }

@media (hover: hover) {
  .btn:hover { filter: brightness(1.1); }
}
/* s1: the press itself is the feedback, and it lands on pointer-down. */
.btn:active {
  transform: scale(0.975);
  filter: brightness(0.94);
  box-shadow: none;
}

/* ------------------------------------------------------------ sections */

.section { padding-block: var(--s16); }

@media (min-width: 768px) { .section { padding-block: var(--s24); } }

.section h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.026em;
  margin-bottom: var(--s8);
  text-wrap: balance;
}

/* Centred, because a 62ch column pinned left inside a 1120px shell leaves
   half the band empty and reads as a layout that broke rather than as
   restraint (s16 craft: nothing on the page is accidental). */
.prose { max-width: 62ch; margin-inline: auto; }
.prose h2 { margin-bottom: var(--s6); }
.prose p {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.65;
  color: var(--text-2);
}
.prose p + p { margin-top: var(--s4); }

/* ------------------------------------------------------ the guide index */

.pillar-index {
  display: grid;
  gap: var(--s2);
}

@media (min-width: 768px) {
  .pillar-index { grid-template-columns: 1fr 1fr; gap: var(--s3); }
}

.pillar-index a {
  position: relative;
  display: block;
  height: 100%;
  padding: var(--s4) var(--s8) var(--s4) var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: transform var(--t-press) var(--ease-out),
              box-shadow var(--t-quick) var(--ease-out),
              border-color var(--t-quick) var(--ease-out);
}

.pillar-index__t {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.25;
  letter-spacing: -0.014em;
  color: var(--text);
}

.pillar-index__d {
  display: block;
  margin-top: var(--s1);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text-2);
}

/* A chevron drawn in CSS: no asset, and it inherits the theme. */
.pillar-index a::after {
  content: "";
  position: absolute;
  right: var(--s4);
  top: calc(50% - 4px);
  width: 7px; height: 7px;
  border-right: 1.75px solid var(--text-3);
  border-top: 1.75px solid var(--text-3);
  transform: rotate(45deg);
  transition: transform var(--t-quick) var(--ease-out),
              border-color var(--t-quick) var(--ease-out);
}

@media (hover: hover) {
  .pillar-index a:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-press);
  }
  .pillar-index a:hover::after {
    transform: rotate(45deg) translate(2px, -2px);
    border-color: var(--accent);
  }
}
.pillar-index a:active { transform: scale(0.985); }

/* ---------------------------------------------------------------- footer */

.site-footer {
  background: var(--bg-sunken);
  border-top: 1px solid var(--line);
  padding-block: var(--s16) var(--s8);
}

.site-footer__grid {
  display: grid;
  gap: var(--s8);
}

@media (min-width: 640px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s12); }
}

.wordmark--footer {
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: var(--s3);
}

/* The brand column leads the footer on a wide screen and sits above the
   link columns on a narrow one; it is the only column carrying prose. */
.site-footer__brand { grid-column: 1 / -1; }
@media (min-width: 1024px) { .site-footer__brand { grid-column: auto; } }

.site-footer__blurb {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 38ch;
}

/* Legal text: still real text, so it takes the secondary grey rather than
   the tertiary one, and keeps a readable measure at every width. */
.site-footer__disclaimer {
  max-width: 90ch;
  color: var(--text-2);
  margin-bottom: var(--s3);
}

.site-footer__h {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--s3);
}

.site-footer__col ul { display: grid; gap: 1px; }

.site-footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: var(--s1) 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--t-press) var(--ease-out),
              transform var(--t-press) var(--ease-out);
}
@media (hover: hover) {
  .site-footer__col a:hover { color: var(--text); text-decoration: underline; }
}
.site-footer__col a:active { transform: scale(0.97); color: var(--accent); }

.site-footer__base {
  margin-top: var(--s12);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--s3);
}

/* The disclaimer and the company line are legal text, not meta: they take
   the secondary grey, not the tertiary one. */
.site-footer__base p {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 76ch;
}

/* ------------------------------------------- s14: the three preferences */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Not "no feedback": a gentler, non-vestibular equivalent. Opacity and
     colour changes that aid comprehension stay; slides, scaling and
     overshoot go. */
  *, *::before, *::after {
    transition-duration: 120ms !important;
    transition-timing-function: linear !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
  .primary-nav,
  .primary-nav.is-open,
  .skip-link:focus,
  .btn:active,
  .pillar-index a:active,
  .nav-toggle:active,
  .primary-nav a:active,
  .site-footer__col a:active,
  .wordmark:active {
    transform: none !important;
  }
  .primary-nav { transition: opacity 120ms linear, visibility 0s linear 120ms; }
  .primary-nav.is-open { transition: opacity 120ms linear, visibility 0s linear 0s; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1),
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(6.5px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }
  .btn:active { filter: brightness(0.9); }
  .pillar-index a:active { border-color: var(--accent); }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: var(--line);
  }
  .site-header::after { background: none; }
  .site-header::before { background: none; }
}

@media (prefers-contrast: more) {
  :root {
    --text-2: #303034;
    --text-3: #45454A;
    --line: rgba(0, 0, 0, 0.42);
    --line-strong: rgba(0, 0, 0, 0.62);
  }
  .site-header {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid var(--line-strong);
  }
  .site-header::after { background: none; }
  .calc, .pillar-index a, .primary-nav { border-width: 2px; }
  .calc input[type="text"] { border-width: 2px; }
  :focus-visible { outline-width: 3px; }
}

/* A short viewport with a tall calculator is the one case where the sticky
   header costs more room than it earns. */
@media (max-height: 460px) and (max-width: 767px) {
  .site-header { position: static; }
}

@media print {
  body.page-calculator { background:white !important; }
  .site-header, .nav-toggle, .skip-link { display: none; }
  body { background: #fff; color: #000; }
}

/* ================================================================ PV-003 ==
   Page types the homepage preview never had to cover, then the calculator.
   Written in the tokens declared at the top of this file; nothing below
   references the retired --color-* / --space-* scale.
   ========================================================================= */

/* ------------------------------------------------------- shared helpers */

.section--tight { padding: var(--s8) 0; }

/* A hairline that reads as a seam rather than a drawn line (s12). */

/* ------------------------------------------------------------ hub lists */

/* Ruled rows, not cards. A card per article would put twenty shadowed
   rectangles on one page, which is noise where the list itself is the
   content. The row is the target, so the whole thing is the link. */
.alist { list-style: none; margin: var(--s8) 0 0; padding: 0; }
.alist li { border-top: 1px solid var(--line); }
.alist li:last-child { border-bottom: 1px solid var(--line); }
.alist a {
  display: block; text-decoration: none; color: inherit;
  padding: var(--s5) var(--s3);
  margin: 0 calc(var(--s3) * -1);
  border-radius: var(--radius);
  transition: background var(--t-quick) var(--ease-out);
}
.alist a:hover { background: var(--surface); }
.alist a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.alist__title {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.012em;
  color: var(--text);
}
.alist a:hover .alist__title { color: var(--accent); }
.alist__standfirst {
  display: block; color: var(--text-2); max-width: 62ch; margin-top: 0.2em;
}
.alist__date {
  display: block; font-size: 0.8125rem; color: var(--text-3);
  margin-top: var(--s2); font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- article */

/* One measure, centred, and nothing competing with it down either side.
   The reading column is 68ch rather than the shell width: long-form prose
   is the one place on this site where the layout should get out of the way. */
.article { padding: var(--s12) 0 var(--s16); }
.article__header,
.article__body,
.article__sources {
  max-width: 46rem; margin-left: auto; margin-right: auto;
  padding-left: var(--s5); padding-right: var(--s5);
}
.article__header h1 {
  max-width: 22ch; letter-spacing: -0.022em; margin-bottom: var(--s4);
}
.article .dateline {
  font-size: 0.8125rem; color: var(--text-3);
  border-bottom: 1px solid var(--line); padding-bottom: var(--s5);
  margin-bottom: var(--s8);
}
.article__body > * { max-width: 68ch; }
.article__body h2 {
  margin-top: var(--s12); padding-top: var(--s6);
  border-top: 1px solid var(--line);
}
.article__body h3 { margin-top: var(--s8); }
.article__body ul, .article__body ol { padding-left: 1.35em; margin: 0 0 var(--s5); }
.article__body li { margin-bottom: 0.4em; }
.article__body blockquote {
  margin: var(--s8) 0; padding: var(--s5) var(--s6);
  background: var(--accent-wash); border-radius: var(--radius);
  border-left: 3px solid var(--accent); color: var(--text);
}
.article__body blockquote p:last-child { margin-bottom: 0; }
.article__sources { margin-top: var(--s12); }
.article__sources h2 {
  font-size: 1rem; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--text-2); border-top: 1px solid var(--line);
  padding-top: var(--s6);
}
.article__sources ul { padding-left: 1.35em; font-size: 0.9375rem; color: var(--text-2); }
.article__sources li { margin-bottom: 0.35em; }

/* -------------------------------------------------------------- glossary */

.glossary { margin: var(--s8) 0 0; }
.glossary dt {
  font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem;
  border-top: 1px solid var(--line);
  padding-top: var(--s6); margin-top: var(--s6);
  scroll-margin-top: 6rem;
}
.glossary dd { margin: var(--s2) 0 0; max-width: 68ch; color: var(--text-2); }

/* ----------------------------------------------------------------- tools */

/* The tool panels are working surfaces, so they get the card treatment the
   calculator gets: a real surface, a soft shadow, and no accent slab. */
.tool-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--s6);
  margin: var(--s8) 0;
}
@media (min-width: 768px) { .tool-panel { padding: var(--s8); } }
.tool-panel fieldset { border: 0; margin: 0 0 var(--s6); padding: 0; }
.tool-panel legend {
  font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem;
  padding: 0; margin-bottom: var(--s4);
}
.tool-panel .q { border-top: 1px solid var(--line); padding: var(--s5) 0; }
.tool-panel .q:first-of-type { border-top: 0; padding-top: 0; }
.tool-panel .q p { font-size: 0.9375rem; margin: 0 0 var(--s2); }
.tool-panel .q label {
  font-size: 0.9375rem; margin-right: var(--s6);
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; cursor: pointer;
}

.score-list { list-style: none; padding: 0; margin: 0; }
.score-list li { border-top: 1px solid var(--line); padding: var(--s5) 0; }
.score-list li:first-child { border-top: 0; }
.score-flag { font-family: var(--font-display); font-weight: 500; }
.score-flag--weak { color: var(--accent); }
.score-flag--ok { color: var(--good); }

.checklist { list-style: none; padding: 0; margin: var(--s6) 0; }
.checklist li {
  border-top: 1px solid var(--line);
  padding: var(--s4) 0 var(--s4) 2.25rem; position: relative;
}
.checklist li:first-child { border-top: 0; }
.checklist li::before {
  content: ""; position: absolute; left: 0.25rem; top: 1.15rem;
  width: 0.875rem; height: 0.875rem;
  border: 2px solid var(--line-strong); border-radius: 4px;
}

/* ----------------------------------------------------------------- about */

.about-grid { display: grid; gap: var(--s8); }
@media (min-width: 768px) {
  .about-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
}
.portrait { aspect-ratio: 3 / 4; width: 100%; max-width: 320px; }
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius); }
/* The available headshot bakes a circular crop onto white, so it sits square
   on a white ground rather than being re-cropped to 3:4. */
.portrait--photo {
  aspect-ratio: 1 / 1; background: var(--surface); margin: 0;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--s3); box-shadow: var(--shadow-press);
}
.portrait--photo img { object-fit: contain; }

/* ============================================================ calculator ==
   The calculator carries its own layout: a step column with a live estimate
   beside it at 1024px and above, and pinned to the foot of the viewport
   below that. Markup for the report is written by calc.js, so every class
   it injects is styled here whether or not it appears in any built page.
   ========================================================================= */

.calc--steps { padding: 0; background: none; border: 0; box-shadow: none; }

.stepsplit { display: grid; gap: var(--s8); }
@media (min-width: 1024px) {
  .stepsplit { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; }
}
.stepsplit__form { min-width: 0; }

/* Numbered AND named, throughout: a number alone gives no idea what is
   coming, a name alone gives no idea how much is left. */
.progress { margin: 0 0 var(--s6); }
.progress__list {
  list-style: none; margin: 0 0 var(--s2); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5);
  font-size: 0.8125rem;
}
.progress__item {
  display: flex; align-items: center; gap: var(--s2);
  color: var(--text-3); padding: var(--s1) 0;
}
.progress__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem;
  border: 1px solid var(--line-strong); border-radius: 50%;
  font-variant-numeric: tabular-nums; font-weight: 500; font-size: 0.75rem;
  transition: background var(--t-quick) var(--ease-out),
              color var(--t-quick) var(--ease-out);
}
.progress__item.is-done { color: var(--text-2); }
.progress__item.is-done .progress__num {
  background: var(--line); border-color: transparent; color: var(--text);
}
.progress__item.is-current { color: var(--text); font-weight: 500; }
.progress__item.is-current .progress__num {
  background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-on);
}
/* The step name beside the number. Hidden on the narrowest viewports, where
   six names wrap into a block taller than the question they introduce; the
   number and the "step 3 of 6" line still carry the position. */
.progress__name { white-space: nowrap; }
@media (max-width: 479px) { .progress__name { display: none; } }
.progress__item.is-current .progress__name { display: inline; }

.progress__time { font-size: 0.8125rem; color: var(--text-3); margin: 0; }

.step { border: 0; padding: 0; margin: 0; min-width: 0; }
.step__legend {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.15rem, 2vw, 1.375rem); line-height: 1.2;
  letter-spacing: -0.014em; padding: 0; margin: 0 0 var(--s2);
  display: flex; align-items: center; gap: var(--s3);
}
.step__legend:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; flex: 0 0 1.75rem;
  background: var(--accent-fill); color: var(--accent-on); border-radius: 50%;
  font-size: 0.875rem; font-variant-numeric: tabular-nums;
}
.step__intro { color: var(--text-2); font-size: 0.9375rem; margin: 0 0 var(--s5); }
.step .field { margin-bottom: var(--s5); }
.step .field:last-child { margin-bottom: 0; }

.gate { margin-top: var(--s6); padding-top: var(--s6); border-top: 1px solid var(--line); }
.gate__heading { font-family: var(--font-display); font-size: 1rem; font-weight: 500; margin: 0 0 var(--s1); }
.gate__intro { color: var(--text-2); font-size: 0.9375rem; margin: 0 0 var(--s5); }

/* A radio group's label is a span, not a <label>: there is no single control
   to point at. The group carries aria-labelledby to it. */
.calc .field__label {
  font-weight: 500; font-size: 0.9375rem; color: var(--text); display: block;
}
.field--optional { position: relative; }

/* Yes/no as two buttons, the network as chips. Native radios underneath, so
   arrow keys, roving focus and the group semantics stay the browser's job. */
.toggle, .chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.toggle__opt, .chip {
  /* Positioned so the visually hidden radio inside resolves against the
     label rather than against some distant ancestor. */
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: var(--s3) var(--s5);
  border: 1px solid var(--line-strong); border-radius: var(--radius-btn, 8px);
  background: var(--surface); color: var(--text);
  font-size: 0.9375rem; text-align: center; cursor: pointer;
  transition: background var(--t-press) var(--ease-out),
              border-color var(--t-press) var(--ease-out),
              transform var(--t-press) var(--ease-out);
}
.toggle__opt { flex: 1 1 0; min-width: 7rem; }
.toggle__opt input, .chip input { position: absolute; opacity: 0; pointer-events: none; }
.toggle__opt:hover, .chip:hover { border-color: var(--accent); }
.toggle__opt:active, .chip:active { transform: scale(0.97); }
.toggle__opt:has(input:checked), .chip:has(input:checked) {
  background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-on);
}
.toggle__opt:has(input:focus-visible), .chip:has(input:focus-visible) {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.calc [aria-invalid="true"] .toggle__opt, .calc [aria-invalid="true"] .chip {
  border-color: var(--accent); border-width: 2px;
}

.stepnav { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s8); }
.stepnav .btn { flex: 1 1 auto; min-width: 8.75rem; }
.btn--quiet {
  background: transparent; color: var(--accent);
  border: 1px solid var(--accent); box-shadow: none;
}
.btn--quiet:hover { background: var(--accent-fill); color: var(--accent-on); }

/* An optional field says so out loud and offers a way past it, rather than
   being left blank and looking unanswered. */

.linkbtn {
  background: none; border: 0; padding: var(--s3) 0; min-height: 44px;
  font-family: inherit; font-size: 0.875rem; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.linkbtn:hover { color: var(--text); }
.linkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------- live estimate */

.estimate {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--s5) var(--s6) var(--s6);
}
.estimate__summary { list-style: none; display: block; position: relative; padding: var(--s2) 0; cursor: pointer; }
.estimate__summary::-webkit-details-marker { display: none; }
.estimate__kicker {
  display: block; font-weight: 500; font-size: 0.75rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3);
}
.estimate__range {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  font-size: clamp(1.35rem, 3vw, 1.75rem); line-height: 1.2;
}
.estimate__body { margin-top: var(--s3); padding-top: var(--s5); border-top: 1px solid var(--line); }
.estimate__note { font-size: 0.8125rem; color: var(--text-3); margin: 0; }
.estimate__structured { font-size: 0.875rem; font-weight: 500; color: var(--accent); margin: var(--s2) 0 0; }
.estimate.is-moved .estimate__range { animation: pv-move var(--t-panel) var(--ease-settle); }
@keyframes pv-move {
  from { opacity: 0.35; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 1024px) {
  .estimate { position: sticky; top: var(--s24); }
  .estimate__summary { cursor: default; pointer-events: none; }
}
@media (max-width: 1023px) {
  .estimate {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    border-left: 0; border-right: 0; border-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--s3) var(--s5) var(--s5);
    max-height: 60vh; overflow-y: auto;
  }
  .estimate__summary::after {
    content: ""; position: absolute; right: 0.25rem; top: 1.1rem;
    width: 0.5rem; height: 0.5rem;
    border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
    transform: rotate(45deg);
    transition: transform var(--t-quick) var(--ease-settle);
  }
  .estimate[open] .estimate__summary::after { transform: rotate(-135deg); }
  .estimate__range { padding-right: 1.75rem; }
  /* The bar is over the page, so the last control must not sit under it. */
  .calc--steps.has-estimate .stepsplit__form { padding-bottom: 10rem; }
}

/* PV-011-b: the existing @media print rule hid #full-report (and so this
   panel, its descendant) once #pv-report showed, but only for print. On
   screen #full-report stayed in normal flow, so below 1024px, where .estimate
   is position:fixed at the bottom, it kept covering the report and, later,
   the introduction form underneath it. #pv-intro only ever shows while
   #pv-report is also visible, so one rule on #pv-report covers both. */
.page-calculator:has(#pv-report:not([hidden])) .estimate { display: none; }

.resume {
  background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--s5) var(--s6); margin-bottom: var(--s6);
}
.resume__heading { font-family: var(--font-display); font-size: 1rem; font-weight: 500; margin: 0 0 var(--s1); }
.resume__body { color: var(--text-2); font-size: 0.9375rem; margin: 0 0 var(--s5); }
.resume__actions { display: flex; flex-wrap: wrap; gap: var(--s4); margin: 0; }

/* ------------------------------------------------- distribution grids */

/* Label and count on one line where there is room, stacked where there is
   not. The input carries min-width:0 so a long band label can never push
   the row wider than the column it sits in. */

/* ------------------------------------------------------- report output */

.calc-result { border-top: 1px solid var(--line); margin-top: var(--s5); padding-top: var(--s6); }
.calc-kicker {
  font-weight: 500; font-size: 0.75rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s1);
}
.calc-range {
  font-family: var(--font-display); font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: -0.024em;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.1;
  margin: 0 0 var(--s5);
}
.calc-working, .calc-note{ color: var(--text-2); font-size: 0.9375rem; }
.calc-note {
  border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--accent-wash); padding: var(--s3) var(--s5);
}
.calc-emailnote { font-size: 0.9375rem; color: var(--good); }
.calc-disclaimer {
  border-top: 1px solid var(--line); margin-top: var(--s6); padding-top: var(--s5);
  font-size: 0.8125rem; color: var(--text-3);
}

/* Exact-figure form: grouped fields, inline validation messages. */

/* ----------------------------------------------------- calculation chain */

/* A table, because it is one: each row is a step in the arithmetic and the
   figures have to line up to be checkable. Scrolls in its own box rather
   than widening the page. */

/* Dual route: side by side above 768px, stacked below. */

/* --------------------------------------------------- guides and site index */

/* A row of jump links, not a filter. Filtering hides most of the page behind
   a control and needs JavaScript to do it; the grouping below IS the answer
   to "what is on this site", and these just get you down to a group fast. */
.jumpnav ul {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin: 0 0 var(--s12); padding: 0; list-style: none;
}
.jumpnav a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: var(--s2) var(--s5);
  border: 1px solid var(--line-strong); border-radius: var(--radius-btn, 8px);
  font-family: var(--font-display); font-weight: 500; font-size: 0.875rem;
  color: var(--text-2); text-decoration: none; background: var(--surface);
  transition: color var(--t-press) var(--ease-out),
              border-color var(--t-press) var(--ease-out),
              transform var(--t-press) var(--ease-out);
}
@media (hover: hover) { .jumpnav a:hover { color: var(--accent); border-color: var(--accent); } }
.jumpnav a:active { transform: scale(0.97); }

.guidegroup { margin: 0 0 var(--s16); }
/* The heading is a jump target, so it must not land under the sticky bar. */
.guidegroup { scroll-margin-top: 5.5rem; }
.guidegroup__meta {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  align-items: baseline;
  font-size: 0.875rem; color: var(--text-3); margin: var(--s2) 0 0;
}

.sitemap { display: grid; gap: var(--s12); }
@media (min-width: 768px) { .sitemap { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .sitemap { grid-template-columns: repeat(3, 1fr); } }
.sitemap__block h2 { font-size: 1.0625rem; margin-bottom: var(--s4); }
.sitemap__list { display: grid; gap: 1px; list-style: none; margin: 0; padding: 0; }
.sitemap__list a {
  display: block; padding: var(--s2) var(--s3);
  margin-left: calc(var(--s3) * -1);
  border-radius: 8px;
  font-size: 0.9375rem; color: var(--text-2); text-decoration: none;
  transition: color var(--t-press) var(--ease-out),
              background-color var(--t-press) var(--ease-out);
}
@media (hover: hover) {
  .sitemap__list a:hover { color: var(--accent); background: var(--accent-wash); }
}

/* ======================================================================
   HOMEPAGE (.page-home)

   PV-001-d, Mon 7th Sep 2026. The Mobbin-referenced homepage concept, folded
   in from clients/practice-value/docs/mobbin-redesign/styles.css, which is the
   concept exactly as Codex built it and is kept only as the record. There is
   ONE stylesheet on this site and this is it.

   PV-015: the .page-home scoping this block once had was lifted when the
   concept went site-wide (Tue 8th Sep 2026), so the inset header, .button,
   .eyebrow and the main h1 to h3 scale below apply to every page. The
   concept's own homepage sections were removed with their markup in PV-015.

   The concept's tokens are renamed --h-* here. It named them --ink, --line,
   --accent and so on, all of which this stylesheet already owns on :root, and
   redefining them inside <body> would cascade into the shared header and
   footer, whose links read var(--accent). The footer would have come out with
   pale lime links on white.

   The shell rules from the concept are NOT folded in: base.html supplies the
   header, the footer and the skip link, and main.js already has the mobile
   menu, complete with Escape, outside-tap, link-tap, breakpoint and bfcache
   handling. Re-importing the concept's simpler menu would have been a second
   implementation of a solved problem. The homepage restyles the header it is
   given; it does not bring its own.
   ====================================================================== */

/* ---- the inset header, every page ---- */

/* The site header is a full-width translucent bar with a hairline and a scroll
   edge. On the homepage it becomes the concept's inset pill, so the material,
   the hairline and the scroll gradient are all turned off rather than layered
   underneath a second surface. */
.site-header {
  top: 16px;
  margin: 20px auto 0;
  background: none;
  border-bottom: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-header::before,
.site-header::after { content: none; }
.site-header.is-scrolled { border-bottom-color: transparent; }

/* .wrap also sits on this element, so the header's content edges are the
   page's (PV-020: the pill's own width and padding are gone). position:relative
   anchors the mobile menu panel to this row. */
.site-header__inner {
  position: relative;
  gap: 28px;
  min-height: var(--header-row);
  padding-block: 12px;
  background: #ffffff;
}

/* Scoped to the header, because the FOOTER wordmark carries the same class and
   a bare .wordmark resized it too (18.88px against 17px on every
   other page). */
.site-header .wordmark {
  font-size: 1.18rem;
  letter-spacing: -.045em;
  color: var(--h-ink);
}

.primary-nav { margin-left: auto; }
.primary-nav ul { gap: 8px; }
.primary-nav a {
  font-size: .82rem;
  font-weight: 500;
  color: var(--h-ink);
  border-radius: var(--radius-btn, 8px);
}
@media (hover: hover) {
  .primary-nav a:hover { color: #7a2e33; background: rgba(122, 46, 51, 0.08); }
}
.primary-nav a:active { color: #7a2e33; }
.primary-nav a[aria-current="page"] {
  color: var(--h-ink);
  background: rgba(122, 46, 51, 0.10);
}

/* The one commercial action. It sits outside the collapsible panel so it stays
   on screen with the menu shut, which is the whole point of it on a phone. */
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  min-height: 43px;
  background: var(--accent-fill);
  color: #fff;
  border: 1px solid var(--accent-fill);
  border-radius: var(--radius-btn, 8px);
  font-family: var(--h-font);
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .2s var(--h-ease), background-color .2s;
}
@media (hover: hover) { .nav-cta:hover { transform: translateY(-2px); background: #602126; } }

.nav-toggle { color: var(--h-ink); }
.nav-toggle__bar { background: var(--h-ink); }

@media (max-width: 767px) {
  .site-header { top: 8px; margin-top: 14px; }
  .site-header__inner { gap: 10px; }
  /* The CTA takes the free space so the burger stays hard right. */
  .nav-cta { margin-left: auto; font-size: .71rem; min-height: 42px; padding-inline: 13px; }
  .primary-nav { margin-left: 0; right: 6px; }
  .primary-nav a { font-size: .96rem; }
}

@media (max-width: 365px) {
  .site-header__inner { gap: 6px; }
  .wordmark { font-size: .96rem; }
  .nav-cta { font-size: .65rem; padding-inline: 10px; }
}

/* ---- the page itself, folded from the concept ---- */

main button, main input, main select {
  font:inherit;
}

main button, main a {
  -webkit-tap-highlight-color:transparent;
}

main button {
  cursor:pointer;
}

main a {
  color:inherit;
  text-decoration:none;
}

main button, main summary, main a {
  touch-action:manipulation;
}

main button:focus-visible, main summary:focus-visible, main a:focus-visible {
  outline:3px solid #7a2e33;
  outline-offset:5px;
}

main h1, main h2, main h3, main p, main figure {
  margin:0;
}

main h1, main h2, main h3, .button {
  font-family:var(--h-font);
}

main h1, main h2, main h3 {
  font-weight: 500;
  letter-spacing:-.045em;
}

main h1 {
  font-size:clamp(2.6rem,5.25vw,5.3rem);
  line-height:1.055;
}

main h2 {
  font-size:clamp(2rem,3.5vw,3.5rem);
  line-height:1.12;
}

main h3 {
  font-size:1.4rem;
  line-height:1.25;
  letter-spacing:-.025em;
}

main img {
  max-width:100%;
  display:block;
  object-fit:cover;
}

main svg {
  width:22px;
  height:22px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

main button {
  border:0;
}

.eyebrow {
  font:500 .78rem/1.4 var(--h-font);
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--h-muted);
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:16px 25px;
  background:var(--accent-fill);
  color:#fff;
  border:1px solid var(--accent-fill);
  border-radius:var(--radius-btn, 8px);
  font-size:.96rem;
  font-weight:500;
  line-height:1.3;
  min-height:54px;
  transition:transform .2s var(--h-ease),background-color .2s;
}

.button:hover {
  transform:translateY(-2px);
  background:#602126;
}

.button svg {
  width:19px;
  height:19px;
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  font-weight: 500;
  font-size:.93rem;
}

.text-link:hover {
  text-decoration:underline;
  text-underline-offset:5px;
}

/* The concept's centred homepage hero and its breakpoints were removed in
   PV-015; the calculator hero is defined in the PV-015 layer at the end. */

/* Practice Value: shared brand, reading surfaces and calculator workspace.
   Bundled into styles.css by build.py. Calculation and submission logic is unchanged.

   PV-015, Mon 28th Sep 2026: the operative palette. White ground, near-black
   text, oxblood as the one accent and the one filled button, and every card
   or section edge a real border at 3:1 or better (--edge). Ratios measured
   from computed style in the browser, not from this comment:
     --text   #242326  18.9:1 on white, 17.3:1 on --surface-2
     --text-2 #615B59  10.9:1 on white,  9.9:1 on --surface-2
     --edge   #877D78   3.4:1 on white,  3.1:1 on --surface-2
     --accent #7a2e33   9.3:1 on white; white on the fill 9.3:1
   --line stays a soft divider inside a surface (table rows, list rules); it
   is never the only thing marking where a card or section ends. */
:root {
  --bg:#F7F5F2; --bg-sunken:#F3E8E8; --surface:#ffffff; --surface-2:#F7F5F2;
  --text:#242326; --text-2:#615B59; --text-3:#615B59;
  --line:#D9D2CC; --line-strong:#877D78; --edge:#877D78;
  --accent:#7a2e33; --accent-fill:#7a2e33; --accent-hover:#602126; --accent-on:#ffffff;
  --accent-wash:#F3E8E8; --good:#285E4B;
  --material:#ffffff; --material-blur:none;
  --radius:12px; --radius-lg:12px; --radius-btn:8px;
  --font-display:"Roboto",Arial,sans-serif;
  --font-body:"Roboto",Arial,sans-serif;
  --shadow-card:0 8px 30px -18px rgba(17,17,17,.15);
  --h-ink:#242326; --h-muted:#615B59; --h-paper:#fff; --h-surface:#F7F5F2;
  --h-sage:#F7F5F2; --h-line:#D9D2CC; --h-accent:#F3E8E8;
  --h-forest:#7a2e33; --h-radius:16px; --h-ease:cubic-bezier(.22,1,.36,1);
  --h-font:Roboto,ui-sans-serif,system-ui,sans-serif;
}
/* Author display rules must never override the native hidden contract. */
[hidden] { display:none !important; }
html { scroll-padding-top:120px; }
body { font-family:var(--font-body); font-size:16px; line-height:1.65; }
h1,h2,h3,.wordmark { font-family:var(--font-display); }
button,input,select,textarea { font-family:var(--font-body); }
input,select,textarea { font-size:16px !important; }
input::placeholder { color:#55555c; opacity:1; }
/* Calculator fields use persistent labels and helpers instead of examples
   inside empty controls. Actual entered values keep their full contrast. */

button,a,summary,label:has(input) { -webkit-tap-highlight-color:transparent; }
button,summary { cursor:pointer; }
:focus-visible { outline:3px solid #7a2e33; outline-offset:4px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.site-header { z-index:40; }
.site-header__inner { gap:18px; }
.site-header .wordmark { display:inline-flex; align-items:center; gap:9px; white-space:nowrap; font-size:1.125rem; }
.site-header .wordmark::before { content:none; }
.brand-mark { width:25px; height:25px; flex:none; }
.primary-nav a { min-height:44px; font-size:14px; }
.nav-cta { min-height:44px; }
.btn { border-radius:var(--radius-btn); min-height:48px; padding:13px 24px; font-size:16px; font-weight: 500; box-shadow:none; }
.btn--quiet { background:transparent; border:1px solid var(--line-strong); color:var(--text); }
.btn:hover { box-shadow:none; }
.kicker { color:var(--accent); font-size:12px; letter-spacing:.12em; font-weight: 500; }
.page-inner .hero { padding:88px 0 44px; background:transparent; border:0; }
.page-inner .hero h1 { font-size:clamp(2.6rem,4.6vw,4.5rem); letter-spacing:-.055em; line-height:1.06; max-width:21ch; }
.page-inner .hero .standfirst { font-size:19px; max-width:62ch; line-height:1.65; }
.page-inner .hero + .section { padding-top:24px; }
.page-inner .hero .kicker { margin-bottom:20px; }
.section { padding-block:64px; }
.prose { font-size:17px; line-height:1.8; }
.prose h2 { letter-spacing:-.035em; margin-top:40px; }
.prose > :first-child { margin-top:0; }
.article { padding-top:80px; }
.article__header { max-width:960px; }
.article__header h1 { font-size:clamp(2.25rem,4.5vw,4.3rem); letter-spacing:-.05em; max-width:23ch; }
.article__header .standfirst { max-width:66ch; font-size:20px; }
.article__body,.article__sources { max-width:790px; font-size:18px; line-height:1.8; }
.article__body h2 { letter-spacing:-.035em; line-height:1.2; }
.article__body blockquote { background:#F7F5F2; padding:28px 32px; }
.article .dateline { margin-top:28px; font-size:13px; padding-bottom:28px; }
.jumpnav { background:var(--surface-2); border:1px solid var(--edge); border-radius:16px; padding:24px; }
.jumpnav a { min-height:44px; display:inline-flex; align-items:center; font-size:15px; }

.pillar-index { gap:0; border-top:1px solid var(--line); }
.pillar-index li { border-bottom:1px solid var(--line); }
.pillar-index a { padding:28px 20px; border:0; border-radius:14px; background:transparent; box-shadow:none; }
.pillar-index__t { font-size:23px; letter-spacing:-.025em; }
.pillar-index__d { font-size:16px; line-height:1.7; }
.pillar-index li:first-child a { background:var(--accent-wash); }
.tool-panel { border-radius:16px; padding:32px; background:var(--surface-2); border:1px solid var(--edge); box-shadow:none; }
.tool-panel .q p,.tool-panel .q label { font-size:16px; }
.tool-panel input[type=radio],.tool-panel input[type=checkbox] { accent-color:var(--accent); width:20px; height:20px; }
.tool-panel input:not([type=radio]):not([type=checkbox]),.tool-panel select { min-height:52px; max-width:100%; min-width:0; background:white; }
.glossary dt { font-size:21px; letter-spacing:-.02em; }
.glossary dd { font-size:17px; line-height:1.8; padding-bottom:12px; }
.about-grid { gap:64px; }
.portrait--photo { background:var(--surface-2); border-radius:16px; padding:20px; }
.contact-panel { background:var(--surface-2); border:1px solid var(--edge); border-radius:16px; padding:40px; max-width:820px; }
.contact-panel h2 { font-size:clamp(1.8rem,3vw,2.7rem); }
.site-footer { background:var(--surface); border-top:1px solid var(--line); padding-top:64px; margin-top:32px; }
.site-footer__grid { gap:40px; }
.site-footer__h { font-size:13px; letter-spacing:.05em; }
.site-footer__blurb { font-size:16px; max-width:29ch; }
.site-footer li a { font-size:14px; line-height:1.65; padding-block:6px; }
.site-footer__base { font-size:13px; line-height:1.8; }

/* The calculator starts quickly and keeps the next action obvious. */
.page-calculator { background:#ffffff; }
.page-calculator .hero { padding:62px 0 30px; border:0; background:none; }
.page-calculator .hero .wrap { display:grid; grid-template-columns:1.2fr 1fr; column-gap:64px; align-items:end; }
.page-calculator .hero .kicker { grid-column:1/-1; margin-bottom:14px; }
.page-calculator .hero h1 { font-size:clamp(2.5rem,4.2vw,3.8rem); line-height:1.04; letter-spacing:-.055em; margin:0; }
.page-calculator .hero .standfirst { max-width:42ch; font-size:17px; margin:0; line-height:1.7; }
.calc-intro-meta { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:12px 24px; margin:22px 0 0; font-size:13px; color:var(--text-2); }
.calc-intro-meta span::before { content:'✓'; margin-right:7px; color:var(--accent); }
.page-calculator .hero + .section { padding-top:4px; }
.stepsplit { grid-template-columns:minmax(0,1fr) 355px; gap:28px; align-items:start; }
.stepsplit__form { border:1px solid var(--edge); border-radius:16px; background:#fff; padding:30px 36px 28px; }
.progress { margin-bottom:28px; border-bottom:1px solid var(--line); padding-bottom:22px; }
.progress__list { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
.progress__item { display:flex; flex-direction:column; align-items:flex-start; gap:7px; padding:0; position:relative; }
.progress__item::before { content:''; width:100%; height:3px; background:#D9D2CC; border-radius:3px; }
.progress__item.is-done::before,.progress__item.is-current::before { background:#7a2e33; }
.progress__num { width:28px; height:28px; flex-basis:28px; font-size:12px; background:#fff; }
.progress__name { display:none !important; }
.progress__time { font-size:13px; line-height:1.5; }
.step__legend { font-size:27px; letter-spacing:-.04em; margin-bottom:10px; line-height:1.2; }
.step__num { display:none; }
.step__intro { font-size:16px; margin-bottom:28px; max-width:50ch; }
.step .field { margin-bottom:25px; }
.calc label,.calc .field__label { font-size:16px; line-height:1.5; margin-bottom:9px; font-weight: 500; }
.calc input:not([type=radio]):not([type=checkbox]),.calc select { min-height:54px; border:1px solid #877D78; border-radius:12px; padding:13px 16px; background:#fff; color:#242326; width:100%; max-width:100%; min-width:0; box-shadow:0 1px 2px #24232608; }
.calc input[data-money] { font-variant-numeric:tabular-nums; font-weight:500; }
.calc input:focus,.calc select:focus { outline:2px solid #7a2e33; outline-offset:2px; border-color:#7a2e33; }
.calc input[aria-invalid=true],.calc select[aria-invalid=true] { border-color:#a32828; }
.calc .helper,.gate__intro { font-size:14px; line-height:1.6; }
.field-error { color:#a32828; font-size:14px; }
.field-error:empty { display:none; }
.unit__mark { right:17px; color:#615B59; }
.unit input { padding-right:42px !important; }
.stepnav { display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:24px; margin-top:28px; }
.stepnav .btn { width:auto; min-width:126px; }
.stepnav [data-next],.stepnav [data-submit] { margin-left:auto; }
.stepnav [data-next]::after { content:'→'; margin-left:18px; }
.stepnav [data-back]::before { content:'←'; margin-right:12px; }
.stepnav + .helper { font-size:12px; margin:16px 0 0; line-height:1.7; }
.toggle__opt,.chip { border-radius:12px; min-height:48px; font-size:16px; padding:12px 16px; }
.toggle__opt:has(input:checked),.chip:has(input:checked) { background:#F3E8E8; color:#242326; border-color:#7a2e33; box-shadow:inset 0 0 0 1px #7a2e33; }
.toggle__opt:focus-within,.chip:focus-within { outline:3px solid #7a2e33; outline-offset:3px; }
.gate { background:var(--surface-2); border:1px solid var(--line); padding:24px; border-radius:18px; }
.gate__heading { font-size:20px; letter-spacing:-.025em; }

.resume { background:#F7F5F2; border:1px solid #877D78; border-radius:12px; padding:24px; }
.resume__heading { font-size:21px; }
.resume__body { font-size:16px; }
.calc-companion,.estimate { border:1px solid #877D78; border-radius:12px; background:#F7F5F2; padding:30px; box-shadow:none; }
.calc-companion { position:sticky; top:118px; }
.calc-companion h2 { font-size:32px; line-height:1.12; letter-spacing:-.045em; margin:16px 0 20px; }
.calc-companion p,.calc-companion li { font-size:15px; line-height:1.7; }
.calc-companion ul { list-style:none; padding:0; margin:22px 0; border-top:1px solid #D9D2CC; }
.calc-companion li { padding:10px 0; border-bottom:1px solid #D9D2CC; }
.calc-companion li::before { content:'✓'; margin-right:10px; }
.calc-companion a { font-size:14px; font-weight: 500; }

.has-estimate .calc-companion { display:none; }
.estimate { position:sticky; top:118px; }
.estimate__kicker { font-size:12px; letter-spacing:.09em; color:#615B59; }
.estimate__range { font-size:clamp(1.65rem,2.3vw,2rem); font-family:var(--font-display); letter-spacing:-.045em; line-height:1.2; margin-top:18px; color:#242326; overflow-wrap:anywhere; }
.estimate__summary { min-height:60px; }
.estimate__body { border-top:1px solid #D9D2CC; padding-top:20px; margin-top:24px; }
.estimate__note { font-size:14px; color:#615B59; line-height:1.7; margin-top:20px; }

.page-calculator .prose.section--tight { max-width:78ch; margin:56px auto 0; font-size:16px; }
.page-calculator .prose.section--tight h2 { font-size:28px; }
.calc-result { background:#fff; border:1px solid var(--edge); border-radius:16px; padding:40px; margin-top:40px; scroll-margin-top:120px; }
.calc-result h2 { font-size:38px; letter-spacing:-.045em; }
.calc-result h3 { font-size:24px; margin-top:36px; }

.calc-range { font-size:clamp(1.55rem,2.7vw,2.4rem); overflow-wrap:anywhere; }
.report-actions { display:flex; gap:16px; flex-wrap:wrap; margin-top:24px; }
#pv-report[hidden] + .report-actions { display:none; }

/* Keep the reviewed homepage's small copy readable. */
.page-home main p,.page-home main li { font-size:16px; }

@media(min-width:1024px) {
  .page-inner .pillar-index { grid-template-columns:1fr 1fr; column-gap:36px; }
  .page-inner .about-grid > div:last-child { position:sticky; top:126px; }
}
@media(max-width:1023px) {
  .site-header__inner { gap:12px; }
  .primary-nav a { font-size:13px; padding-inline:8px; }
  .stepsplit { grid-template-columns:minmax(0,1fr); }
  .calc-companion { display:none; }
  .estimate { position:fixed; top:auto; bottom:0; left:0; right:0; padding:16px 24px; border-radius:16px 22px 0 0; max-height:48vh; z-index:30; overflow:auto; }
  .estimate__summary { min-height:52px; }
  .estimate__range { margin-top:4px; font-size:24px; padding-right:30px; }
  .estimate__body { margin-top:14px; padding-top:12px; }
  .estimate__note { margin-top:12px; }
  .calc--steps.has-estimate .stepsplit__form { padding-bottom:100px; margin-bottom:140px; }
}
@media(max-width:767px) {
  .site-header { top:8px; margin-top:12px; }
  .site-header__inner { gap:8px; }
  .site-header .wordmark { font-size:15px; gap:6px; letter-spacing:-.04em; }
  .brand-mark { width:20px; height:20px; }
  .nav-cta { margin-left:auto; padding:10px 12px; font-size:12px; min-height:44px; }
  .nav-toggle { order:4; flex:none; width:36px; min-width:36px; margin:0; }
  .primary-nav { right:0; top:calc(100% + 8px); width:min(300px,calc(100vw - 24px)); border-radius:16px; }
  .primary-nav:not(.is-open) { visibility:hidden; opacity:0; pointer-events:none; }
  .primary-nav a { font-size:16px; padding:12px 18px; }
  .page-inner .hero { padding-top:48px; }
  .page-inner .hero h1 { font-size:38px; }
  .page-inner .hero .standfirst { font-size:17px; }
  .section { padding-block:40px; }
  .article { padding-top:48px; }
  .article__body,.article__sources { font-size:17px; }
  .article__header .standfirst { font-size:18px; }
  .contact-panel,.tool-panel { padding:24px; border-radius:16px; }
  .about-grid { gap:32px; }
  .page-calculator .hero { padding:36px 0 24px; }
  .page-calculator .hero .wrap { display:block; }
  .page-calculator .hero h1 { font-size:38px; }
  .page-calculator .hero .standfirst { margin-top:18px; font-size:16px; }
  .calc-intro-meta { gap:6px 14px; font-size:12px; margin-top:18px; }
  .stepsplit__form { padding:22px 20px; border-radius:16px; }
  .progress { margin-bottom:24px; padding-bottom:18px; }
  .step__legend { font-size:25px; }
  .step__intro { font-size:16px; }
  .stepnav { gap:8px; }
  .stepnav .btn { min-width:0; padding:13px 18px; font-size:15px; }

  .gate { padding:18px; }
  .calc-result { padding:24px 20px; border-radius:16px; }
  .calc-result h2 { font-size:30px; }

  .site-footer__grid { gap:32px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
}
@media print {
  .site-header,.site-footer,.report-actions { display:none !important; }
  body { background:white; }
  .page-calculator:has(#pv-report:not([hidden])) .hero,
  .page-calculator:has(#pv-report:not([hidden])) #full-report,
  .page-calculator:has(#pv-report:not([hidden])) .prose.section--tight { display:none; }
  .calc-result { border:0; padding:0; margin:0; }
  
  h2,h3 { break-after:avoid; }
}

.progress__name { display:block !important; position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
button,a,summary { touch-action:manipulation; }
.estimate { overscroll-behavior:contain; }
.page-calculator input,.page-calculator select { scroll-margin-top:140px; }
@media(max-width:767px) {
  .nav-toggle { width:44px; min-width:44px; }
  .estimate { padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
  .page-calculator input,.page-calculator select { scroll-margin-bottom:50vh; }
}
@media(max-width:360px) {
  .site-header .brand-mark { display:block; }
  .site-header .wordmark { font-size:14px; }
}

/* A conventional serif word mark, with the letterforms doing the work. */
.site-header .brand-mark { width:36px; height:25px; color:var(--ink); }

@media(max-width:767px) {
  .site-header .brand-mark { width:30px; height:22px; }
}
@media print {
  .calc-emailnote { display:none !important; }
}

/* ================================================================== PV-008
   Visual pass, 9 Sep 2026: article furniture, pillar photography, hub heroes
   and the library. Appended so the layer above stays as Codex left it. */

/* --- article body typography ------------------------------------------ */
.article__body p { margin: 0 0 1.35em; }
.article__body > p:last-child { margin-bottom: 0; }
.article__body h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.95rem); line-height: 1.22; letter-spacing: -.03em; margin: 2.6em 0 .9em; padding-top: 1.4em; border-top: 1px solid var(--line); }
.article__body h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -.015em; margin: 1.9em 0 .7em; }
.article__body ul, .article__body ol { margin: 0 0 1.35em; }
.article__body li + li { margin-top: .45em; }
.article__body a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; text-decoration-color: rgba(122,46,51,.45); transition: text-decoration-color 120ms ease; }
.article__body a:hover { text-decoration-color: currentColor; }
.article__body blockquote { margin: 2em 0; }
.article__body strong { font-weight: 500; }

/* --- article header and figure ----------------------------------------- */
.article { padding-top: 64px; }
.article .dateline { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; border-bottom: 0; padding-bottom: 0; }
.dateline__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); display: inline-block; }
.article__figure { max-width: 1000px; margin: 40px auto 0; padding: 0 20px; }
.article__figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); background: var(--bg-sunken); }
.article__figure figcaption { margin-top: 10px; font-size: 12px; color: var(--text-3); letter-spacing: .02em; }
.article__figure figcaption small { font-size: inherit; }
.article__body { margin-top: 44px; }

/* --- in one sentence --------------------------------------------------- */
.article__lede { max-width: none; background: var(--accent-wash); border-radius: var(--radius); padding: 22px 26px; margin: 0 0 2.4em; }
.article__lede-label { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.article__lede-text { margin: 0; font-size: 1.0625em; line-height: 1.6; color: var(--text); }
.article__body .article__lede-label { margin: 0 0 8px; }
.article__body .article__lede-text { margin: 0; }

/* --- more in this guide ------------------------------------------------ */
.article__more { max-width: 790px; margin: 56px auto 0; padding: 0 20px; }
.article__more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 28px; }
.article__more h2 { font-size: 1.25rem; letter-spacing: -.02em; margin: 0; }
.article__more-hub { font-size: 14px; font-weight: 500; color: var(--accent); text-decoration: none; white-space: nowrap; }
.article__more-hub:hover { text-decoration: underline; }
.article__more ul { list-style: none; margin: 18px 0 0; padding: 0; }
.article__more li { border-top: 1px solid var(--line); }
.article__more li:last-child { border-bottom: 1px solid var(--line); }
.article__more li a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 4px; text-decoration: none; color: inherit; }
.article__more li a:hover .article__more-title { color: var(--accent); }
.article__more-title { font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; letter-spacing: -.01em; line-height: 1.35; }
.article__more-meta { flex: none; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* --- ruled lists whose second column carries something ----------------- */
.alist a { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 32px; align-items: start; padding: 22px 12px; }
.alist__main { display: block; min-width: 0; }
.alist__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.alist__date { margin: 0; }
.alist__read { white-space: nowrap; }
.alist__standfirst { margin-top: .3em; }
.alist--compact a { padding: 18px 12px; }
.alist--compact .alist__title { font-size: 1.0625rem; }
.alist--compact .alist__standfirst { font-size: 15px; }
@media (min-width: 720px) {
  .alist a { grid-template-columns: minmax(0, 1fr) 150px; }
  .alist__meta { flex-direction: column; align-items: flex-end; text-align: right; padding-top: 4px; }
}

/* --- library groups ---------------------------------------------------- */
.guidegroup { padding: 40px 0 8px; }
.guidegroup + .guidegroup { border-top: 1px solid var(--line); margin-top: 24px; }
.guidegroup__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 22px; }
.guidegroup__head h2 { margin: 0; }
.guidegroup__meta { margin: 0; font-size: 14px; color: var(--text-3); }
.guidegroup__meta a { color: var(--accent); font-weight: 500; text-decoration: none; margin-left: 8px; }
.guidegroup__meta a:hover { text-decoration: underline; }
.guidegroup__lead { display: grid; grid-template-columns: 1fr; gap: 20px 40px; align-items: center; text-decoration: none; color: inherit; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 8px; transition: border-color 160ms ease; }
.guidegroup__lead:hover { border-color: var(--line-strong); }
.guidegroup__lead:focus-visible { outline: 3px solid #7a2e33; outline-offset: 4px; }
.guidegroup__lead-media { position: relative; display: block; border-radius: var(--radius); overflow: hidden; background: var(--bg-sunken); }
.guidegroup__lead-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.guidegroup__lead-media small { position: absolute; left: 12px; bottom: 12px; font-size: 11px; letter-spacing: .02em; color: #fff; background: rgba(17,17,17,.78); padding: 4px 8px; border-radius: 6px; }
.guidegroup__lead-body { display: block; padding: 6px 8px 6px 0; }
.guidegroup__lead-kicker { display: block; font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.guidegroup__lead-title { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); line-height: 1.2; letter-spacing: -.03em; color: var(--text); }
.guidegroup__lead:hover .guidegroup__lead-title { color: var(--accent); }
.guidegroup__lead-standfirst { display: block; margin-top: 10px; color: var(--text-2); font-size: 16px; line-height: 1.6; max-width: 52ch; }
.guidegroup__lead .alist__meta { margin-top: 16px; flex-direction: row; align-items: center; text-align: left; padding: 0; }
@media (min-width: 800px) { .guidegroup__lead { grid-template-columns: 5fr 6fr; padding: 20px; } }

/* --- hub heroes -------------------------------------------------------- */
.hub-hero { display: grid; grid-template-columns: 1fr; gap: 32px 56px; align-items: center; }
.hub-hero__text { min-width: 0; }
.hub-hero__figure { margin: 0; }
.hub-hero__figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-lg); background: var(--bg-sunken); }
.hub-hero__figure figcaption { margin-top: 10px; font-size: 12px; color: var(--text-3); letter-spacing: .02em; }
.page-inner .hero--hub { padding-bottom: 56px; }
.page-inner .hero--hub h1 { max-width: 14ch; }
@media (min-width: 900px) {
  .hub-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); }
  .hub-hero__figure img { aspect-ratio: 5 / 4; }
}

/* --- library page opening ---------------------------------------------- */
.library-figure { margin: 0; }
.library-figure img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius-lg); background: var(--bg-sunken); }
.library-figure figcaption { margin-top: 10px; font-size: 12px; color: var(--text-3); letter-spacing: .02em; }
.section--library-figure { padding-block: 0 24px; }
@media (max-width: 640px) { .library-figure img { aspect-ratio: 16 / 10; } }

@media (prefers-reduced-motion: reduce) { .guidegroup__lead, .article__body a { transition: none; } }

/* ================================================================== PV-009
   The v3 report (website/report.js). Class names are shared with the emailed
   PDF's own stylesheet (pipeline/report-template.html) where the shape is the
   same; this file's tokens win over docs/v3-reference/pv-example-report-20m.html,
   whose structure the sections otherwise follow. */
#pv-report { max-width: 900px; padding: 0; margin: 40px auto; background: transparent; border: 0; box-shadow: none; }
#pv-report .report-section { margin-top: 56px; }
#pv-report .report-section:first-child { margin-top: 0; }
.small { font-size: 13.5px; }
.muted { color: var(--text-2); }
.scroll { overflow-x: auto; }
.num { font-variant-numeric: tabular-nums; }

/* title */
#pv-report h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem,4vw,2.6rem);
                line-height: 1.1; letter-spacing: -.03em; margin: 26px 0 0; }

/* playback tiles */
.facts { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 10px; margin-top: 18px; }
.fact { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.fact .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); font-weight: 500; }
.fact .v { font-family: var(--font-display); font-weight: 500; font-size: 16px; margin-top: 2px; letter-spacing: -.01em; }

.eyebrow { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: .08em;
           text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
#pv-report .report-section h2 { font-family: var(--font-display); font-weight: 500; font-size: 24px;
                                 letter-spacing: -.02em; margin: 0 0 6px; }
#pv-report .report-section h3 { font-family: var(--font-display); font-weight: 500; font-size: 19px;
                                 letter-spacing: -.015em; margin: 0 0 6px; }
#pv-report .intro { color: var(--text-2); max-width: 66ch; margin-bottom: 20px; }

/* route cards */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 4px; }
.cards:has(> .card:only-child) { grid-template-columns: 1fr; max-width: 460px; }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 18px; background: #fff; }

.card .k { font-family: var(--font-display); font-size: 12.5px; font-weight: 500; letter-spacing: .06em;
           text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.card .v { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem,3vw,2rem); letter-spacing: -.02em; }
.card .basis { font-size: 13.5px; color: var(--text-2); margin-top: 8px; }

#pv-report .note { border-left: 3px solid var(--accent); padding-left: 14px; color: var(--text-2); margin-top: 18px; }
#pv-report h4 { font-family: var(--font-display); font-size: 16px; margin: 0 0 8px; }

/* tables (mix, compare, market deals) */
.tbl, .mix{ width: 100%; border-collapse: collapse; font-size: 14.5px; margin-top: 10px; }
.tbl th, .tbl td, .mix th, .mix td{ text-align: left; padding: 11px 12px;
    border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th, .mix th{ font-family: var(--font-display); font-size: 12px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-2); font-weight: 500; }
.tbl td.r, .tbl th.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tr.hl td, .mix tr.hl td { background: var(--accent-wash); }

/* the book at a glance */
.glance { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; margin-top: 8px; }
.donut { width: 220px; height: 220px; max-width: 100%; flex: none; }
/* `main svg` strokes every icon with currentColor; the donut's labels inherit
   it, which outlines them on screen and draws them twice in print. */
svg.donut text { stroke: none; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.legend li { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center;
             font-variant-numeric: tabular-nums; }
.legend .sw { width: 12px; height: 12px; border-radius: 3px; }
.legend .sw.ex { background: repeating-linear-gradient(135deg,#a9a9af 0 3px,#c4c4ca 3px 4px); }
.legend .v { text-align: right; min-width: 4.5ch; font-weight: 500; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pill { font-size: 13px; font-weight: 500; padding: 6px 11px; border-radius: 999px; background: var(--surface-2);
        color: var(--text); display: inline-block; }
.pill.mid { background: #fbf0dc; color: #6b3f00; }
.bar { margin-top: 18px; }
.bar .track { height: 14px; border-radius: 7px; background: repeating-linear-gradient(135deg,#a9a9af 0 6px,#c4c4ca 6px 8px);
              overflow: hidden; position: relative; }
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 7px 0 0 7px; }
.bar .cap { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-2); margin-top: 6px;
            font-variant-numeric: tabular-nums; }

/* market snapshot */
.market { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 12px; margin-top: 8px; }
.stat { padding: 16px 16px 14px; border-radius: 12px; border: 1px solid var(--line); }
.stat .v { font-family: var(--font-display); font-weight: 500; font-size: 24px; letter-spacing: -.02em; }
.stat .l { font-size: 13.5px; margin-top: 6px; }
.stat .s { font-size: 12px; color: var(--text-3); margin-top: 8px; }

/* readiness */
.ready { display: grid; gap: 8px; margin-top: 8px; }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 12px 14px; border-radius: 12px;
         border: 1px solid var(--line); align-items: start; }
.check .ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px;
             font-weight: 500; color: #fff; background: var(--good); }
.check.todo .ic { background: #6b3f00; }
.check .t { font-weight: 500; }

.score { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; font-size: 14px; color: var(--text-2); }
.score i { width: 26px; height: 8px; border-radius: 4px; background: var(--line); }
.score i.on { background: var(--good); }

#pv-report .fee { font-size: 13px; color: var(--text-2); margin-top: 14px; }

/* footer disclaimer */
#pv-report footer { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px;
                     color: var(--text-3); line-height: 1.5; }

@media (max-width: 720px) {
  .cards { grid-template-columns: 1fr; }
  .glance { grid-template-columns: 1fr; justify-items: center; }
}

/* ================================================================ PV-011-b
   The report rebuilt around the engine's route_view: lede, single-route
   headline, what actually happens, the other route, benchmarks, readiness
   lines and the single next action. Then the A4 print sheet. Site tokens
   only; no motion added. */
#pv-report .report-lede { font-size: 1.125rem; line-height: 1.55; color: var(--text-2); max-width: 60ch; margin: 10px 0 0; }
.glance__key { min-width: 0; width: 100%; }
/* A single-route report has one chain: it takes the column, not half of it. */

.happens { border-top: 1px solid var(--line); }
.happens__part { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 8px 32px;
                 padding: 22px 0; border-bottom: 1px solid var(--line); }
#pv-report .happens__part h3 { margin: 0; font-size: 17px; }
.happens__body { min-width: 0; }
.happens__part p { margin: 0 0 12px; max-width: 64ch; }
.happens__part p:last-child { margin-bottom: 0; }

#pv-report .report-section[data-section="other-route"] { background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 28px; }
#pv-report [data-section="other-route"] p { max-width: 64ch; margin: 0 0 12px; }

.btn.report-cta { display: inline-flex; width: auto; align-items: center; justify-content: center; min-height: 48px;
                  margin-top: 8px; padding-inline: 24px; text-align: center; }

.bench { margin-bottom: 28px; }
#pv-report .eyebrow.bench-published { margin-top: 32px; }
.bench-lead { display: block; }
.tbl.deals td:first-child { white-space: nowrap; }
#pv-report .s a { color: inherit; text-decoration: underline; text-underline-offset: 2px; display: inline-flex;
             align-items: center; min-height: 44px; }
.worked { margin-top: 12px; }
.card.worked__card { border-style: dashed; }
#pv-report .card .s { font-size: 12px; color: var(--text-3); margin-top: 10px; }
.worked__label { display: inline-block; font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
                 color: var(--text-2); background: var(--bg-sunken); border-radius: 999px; padding: 3px 10px; margin: 0 0 12px; }

#pv-report [data-section="readiness"] h3 { margin-top: 22px; }
.check__lines { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 6px 0 0; font-size: 14px; }
.check__lines dt { color: var(--text-2); font-weight: 500; }
.check__lines dd { margin: 0; }

.next-action { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 12px; padding: 24px;
               border-radius: var(--radius-lg); background: var(--accent-wash); }
.next-action .btn.report-cta { margin-top: 0; }
.next-action__note { margin: 0; flex: 1 1 18rem; max-width: 52ch; font-size: 15px; color: var(--text-2); }

@media (max-width: 720px) {
  .happens__part { grid-template-columns: 1fr; }
  #pv-report .report-section[data-section="other-route"] { padding: 22px 18px; }
  .next-action { padding: 20px 18px; }
  .btn.report-cta { width: 100%; }
}
@media (max-width: 560px) {
  .check__lines { grid-template-columns: 1fr; }
  .check__lines dd { margin-bottom: 6px; }
}

/* ---- print: a clean A4 document from the report DOM ----
   A named page, so only the report takes this page box. The top-right
   margin box (edition and date) is written by report.js for each report,
   because Chromium does not implement string-set. */
@page pvreport {
  size: A4;
  margin: 20mm 16mm 20mm;
  @top-left { content: "Practice Value"; font-family: Roboto, Arial, sans-serif; font-size: 8.5pt; font-weight: 500; color: #242326; }
  @top-right { font-family: Arial, sans-serif; font-size: 8pt; color: #615B59; }
  @bottom-right { content: "Page " counter(page) " of " counter(pages); font-family: Arial, sans-serif; font-size: 8pt; color: #615B59; }
}
@media print {
  html, body { background: #fff !important; }
  .site-header, .site-footer, .skip-link, .report-actions, .estimate,
  [data-intro-form], #pv-intro, #pv-report button, #pv-report .btn,
  #pv-report .report-rerun-note, #pv-report .calc-emailnote { display: none !important; }
  .page-calculator:has(#pv-report:not([hidden])) main > :not(:has(#pv-report)),
  .page-calculator:has(#pv-report:not([hidden])) .hero { display: none !important; }
  #pv-report { page: pvreport; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
               font-size: 10pt; line-height: 1.45; color: #242326;
               -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #pv-report .report-section { margin-top: 20pt; }
  #pv-report .report-section:first-child { margin-top: 0; }
  #pv-report h1 { font-size: 22pt; margin-top: 12pt; }
  #pv-report .report-section h2 { font-size: 15pt; }
  #pv-report .report-section h3 { font-size: 12pt; }
  #pv-report .report-lede, #pv-report .intro, .next-action__note { font-size: 10pt; }
  #pv-report h2, #pv-report h3, #pv-report .eyebrow { break-after: avoid; page-break-after: avoid; }
  #pv-report p { orphans: 3; widows: 3; }
  /* Short sections never split; long ones split between their blocks. */
  #pv-report [data-section="masthead"], #pv-report [data-section="playback"],
  #pv-report [data-section="mix"], #pv-report [data-section="glance"],
  #pv-report [data-section="other-route"],
  #pv-report [data-section="next"], #pv-report [data-section="footer"] { break-inside: avoid; }
  #pv-report .score, #pv-report .ready, #pv-report .intro, #pv-report .bench-lead, #pv-report .report-section > .muted,
  #pv-report [data-section="other-route"] p { break-inside: avoid; }
  /* A heading inside a grid row with break-after: avoid made Chromium push
     the whole of "What actually happens" to the next page, stranding its
     heading and splitting its intro. The row itself stays whole instead. */
  #pv-report .happens__part h3 { break-after: auto; page-break-after: auto; }
  #pv-report .intro, #pv-report .report-section > .muted { break-after: avoid; page-break-after: avoid; }
  .card, .stat, .check, .happens__part, .glance, .donut, .bar, .facts,
  .tbl, .mix, tr, .next-action, .cards { break-inside: avoid; }
  #pv-report a { color: inherit; }
  #pv-report .s a { min-height: 0; display: inline; }
  .card, .stat, .check, .next-action, #pv-report .report-section[data-section="other-route"] { box-shadow: none; }
  #pv-report footer { margin-top: 14pt; padding-top: 8pt; }
  #pv-report .calc-disclaimer { margin-top: 0; padding-top: 0; border-top: 0; }
  .next-action { padding: 12pt 14pt; }
}

/* =========================================================================
   v3.0 five-screen form additions (PV-009 Task 6): the range/text slider
   pairing, and the advisers stepper. The age-mix partition control that lived here
   was removed in PV-016.
   ========================================================================= */

/* range + tap-to-type text, paired for retention, top ten, platform share
   and total cost. The text field stays the precision path: a typed value is
   never snapped, only a drag or an arrow key on the range moves by its
   step. */
.slider-pair { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s2); }
.slider-pair input[type="range"] {
  -webkit-appearance: none; appearance: none; flex: 1 1 11rem; min-width: 8rem;
  height: 44px; background: transparent; margin: 0; padding: 0; cursor: pointer; accent-color: var(--accent);
}
.slider-pair input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--line-strong); }
.slider-pair input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--surface); box-shadow: var(--shadow-card); margin-top: -10px;
}
.slider-pair input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line-strong); }
.slider-pair input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); box-shadow: var(--shadow-card);
}
.slider-pair .unit { flex: none; width: auto; }
/* PV-016: "100" plus the % mark. The .calc input rule sets width 100%, so
   this carries the extra class to win; 4ch of Roboto figures, 16px left pad,
   42px right pad that the % mark sits in. */
.calc .slider-pair .unit input[type="text"] { width: calc(4ch + 58px); }
.slider-pair .linkbtn { flex: none; padding-inline: var(--s2); }

/* the advisers stepper: a text field the engine still reads via data-field,
   flanked by two round 44px buttons. The minus glyph is U+2212, never a
   hyphen or an em/en dash. */
.stepper { display: inline-flex; align-items: center; gap: var(--s3); }
/* PV-016: 4ch was the whole box, padding included, so "10" already clipped.
   Now 4ch of content ("999" with room) plus 12px each side. */
.calc .stepper input[type="text"] { width: calc(4ch + 24px) !important; padding-inline: 12px; flex: none; text-align: center; }
.stepper__btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--surface-2); color: var(--text); font-size: 1.25rem; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.stepper__btn:hover { background: var(--accent-wash); border-color: var(--accent); }
.stepper__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* PV-016: the age-mix partition control and its switch were removed with
   website/age-mix.js; age is two chip questions now. */

/* ================================================================== PV-011-b
   The introduction form under the report (calc.js builds it in #pv-intro).
   Same field language as the five screens: 44px targets, labels above,
   inline errors, days as pressed chips and the time as radio chips. */
.intro-form { max-width: 900px; margin: 40px auto 0; scroll-margin-top: 120px; }
.intro-form__heading { font-size: 28px; letter-spacing: -.035em; margin: 0 0 8px; }
.intro-form__heading:focus { outline: none; }
.intro-form__heading:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.intro-form__lede { color: var(--text-2); font-size: 16px; margin: 0 0 24px; max-width: 56ch; }
.intro-form__who { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0 0 24px;
                   padding: 16px 18px; border-radius: 12px; background: var(--surface-2); font-size: 15px; }
.intro-form__who dt { color: var(--text-2); font-weight: 500; }
.intro-form__who dd { margin: 0; overflow-wrap: anywhere; }
.intro-form .field { margin-bottom: 24px; }
.chip[aria-pressed="true"] { background: #F3E8E8; color: #242326; border-color: #7a2e33; box-shadow: inset 0 0 0 1px #7a2e33; }
.chip:focus-visible { outline: 3px solid #7a2e33; outline-offset: 3px; }
.intro-form textarea { display: block; width: 100%; max-width: 100%; min-height: 140px; resize: vertical;
                       border: 1px solid #877D78; border-radius: 12px; padding: 13px 16px; background: #fff; color: #242326; line-height: 1.5; }
.intro-form textarea:focus { outline: 2px solid #7a2e33; outline-offset: 2px; border-color: #7a2e33; }
.intro-form textarea[aria-invalid="true"] { border-color: #a32828; }

.intro-form__status { margin: 16px 0 0; font-size: 16px; line-height: 1.6; }
.intro-form__status:empty { display: none; }
.intro-form__status:focus { outline: none; }
.intro-form__status.is-done { padding: 18px 20px; border-radius: 12px; background: var(--accent-wash); color: #242326; }
.intro-form__status.is-error { color: #a32828; }
@media (max-width: 720px) {
  .intro-form__heading { font-size: 24px; }
  .intro-form [data-intro-submit] { width: 100%; }
}

/* =====================================================================
   PV-011, Fri 18th Sep 2026: making the depth visible.
   Appended as its own layer so the PV-008 pass above stays as it was.

   The finding this layer answers, measured rather than felt: at 1440 every
   inner page had two or three competing left edges, because the reading
   column was CENTRED inside a container whose headings were LEFT-ALIGNED,
   and the spare width collected into a single dead void on the right
   (436px on the pillar hubs, 325px on the articles). Whitespace that is
   the residue of a centred column is not restraint, it reads as a page
   that broke. Below 1024 nothing here applies: the stacked layout already
   measured one left edge and was the better of the two.
   ===================================================================== */

/* --- one left edge, and the freed column put to work ------------------ */
@media (min-width: 1024px) {
  /* The article header, the reading column and the sources block share one
     container width, so all three start at the same x. */
  .article__header,
  .article__layout,
  .article__sources { max-width: 1060px; margin-inline: auto; }

  .article__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    /* --s10 does not exist on this scale (s1..s6, s8, s12). An undefined custom
       property makes the declaration invalid at computed-value time and the gap
       falls back to `normal`, which is 0 for a grid, so the reading column sat
       flush against the rail's hairline. Caught by the PV-011 critic, F1. */
    column-gap: var(--s12);
    align-items: start;
    padding-inline: var(--s5);
  }
  /* The body keeps its own 68ch measure from the rule above; it no longer
     needs a width or a centring margin of its own. */
  .article__layout > .article__body {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    min-width: 0;
  }

  .article__toc {
    position: sticky;
    top: 7.5rem;
    font-size: 0.875rem;
    border-left: 2px solid var(--line);
    padding-left: var(--s5);
  }
}

/* The pillar hub's prose starts where its own heading starts. This is a 768
   rule, not a 1024 one: at 768 the hub measured three elements on two left
   edges (32 / 100 / 32), so the "below 1024 it is already correct" assumption
   held at 375 and was false in the 768 to 1023 band. Critic F3. */
@media (min-width: 768px) {
  .page-inner .prose { margin-inline: 0; }
}

@media (max-width: 1023px) {
  /* The rail is a desktop affordance: on a phone the headings are already
     the contents, and a second list of them is just more to scroll past. */
  .article__toc { display: none; }
}

.article__toc-label {
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 var(--s4);
}
.article__toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: pvtoc;
}
.article__toc li { margin-bottom: var(--s3); }
.article__toc a {
  color: var(--text-2);
  text-decoration: none;
  line-height: 1.4;
  display: block;
  /* Anchors land clear of the sticky header, which is why the stylesheet
     already carries scroll-margin-top elsewhere. */
  transition: color 180ms ease;
}
.article__toc a:hover { color: var(--accent); text-decoration: underline; }
.article__toc a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* No scroll-margin-top here: the site already sets html { scroll-padding-top: 120px }
   and the two ADD, landing every heading 240px down instead of 120. Critic F2. */

/* --- provenance, stated where it can be seen -------------------------- */
.dateline__sources { color: var(--accent); text-decoration: underline; text-underline-offset: 0.16em; }

/* --- how much is actually here --------------------------------------- */
.alist__scale,
.library__scale {
  font-size: 0.8125rem;
  color: var(--text-3);
  margin: var(--s6) 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3);
}
.library__scale { margin-bottom: var(--s6); }
/* Inline, the two facts need a mark between them; stacked in the hub rail they
   do not, and the rule above switches the flex direction there. */
.alist__scale-part + .alist__scale-part::before {
  content: "\00B7";
  margin-right: var(--s3);
  color: var(--line-strong, var(--text-3));
}
.page-inner .section .wrap:has(> .alist__scale) > .alist__scale .alist__scale-part + .alist__scale-part::before {
  content: none;
}

/* --- calculator start panel ------------------------------------------- */
/* The decorative line graph that used to sit here plotted nothing. On a page
   about what a business is worth, a chart shape encoding no data reads as a
   result and is not one, so it is gone rather than restyled. */
.calc-companion__block { margin-top: var(--s6); }
.calc-companion__block:first-of-type { margin-top: var(--s5); }
.calc-companion__label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #615B59;
  margin: 0 0 var(--s3);
}

/* --- PV-011 fix round, critic findings F4 and F5 ---------------------- */

/* F5: the calculator's start panel was display:none below 1024, which left the
   only copy stating what the tool needs, what it returns and what happens to
   the answer on desktop alone. That is the material a first-time visitor on a
   phone most needs. It is shown below the form rather than above it, so the
   form still leads and the conversion path is unchanged. */
@media (max-width: 1023px) {
  .calc-companion {
    display: block;
    margin-top: var(--s8);
    background: var(--accent-wash);
    border-radius: 16px;
    padding: var(--s6);
  }
  .calc-companion h2 { font-size: 1.35rem; }
  .calc--steps.has-estimate .calc-companion { margin-bottom: 140px; }
}

/* F4: on the pillar hubs the left edge was corrected and the freed column was
   left empty, which made the void wider than the one it replaced. The hub's
   own scale line moves into that column beside the introduction, so the column
   carries the answer to "how much is here" at the point the reader asks it,
   rather than sitting below the list at the foot of the page. */
/* Scoped by :has(> .alist__scale), which ONLY the eight pillar hubs carry, and
   not by :has(> .prose), which every inner page carries. The first attempt used
   the looser selector and reflowed contact, terms, privacy, questions,
   methodology, start and all three tool pages: a change that did more than its
   finding named, which is the one thing this build was not allowed to do. */
@media (min-width: 1024px) {
  .page-inner .section .wrap:has(> .alist__scale) {
    display: grid;
    grid-template-columns: minmax(0, 62ch) minmax(0, 1fr);
    column-gap: var(--s12);
    align-items: start;
  }
  .page-inner .section .wrap:has(> .alist__scale) > .prose { grid-column: 1; }
  .page-inner .section .wrap:has(> .alist__scale) > .alist__scale {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
    padding-left: var(--s6);
    border-left: 2px solid var(--line);
  }
  .page-inner .section .wrap:has(> .alist__scale) > .alist__scale {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s2);
  }
  .page-inner .section .wrap:has(> .alist__scale) > :not(.prose):not(.alist__scale) {
    grid-column: 1 / -1;
  }
}

/* =====================================================================
   PV-015, Mon 28th Sep 2026: calculator in the hero, headline-first report,
   higher contrast. Appended last so it wins by source order over the layers
   above at equal specificity. Reference: design-brief.md, PV-015 section.

   The review that set this layer's job: low-contrast surfaces made blocks
   hard to tell apart and the next step unclear. So every card and section
   edge is a real border (--edge, 3:1 or better against its ground), body
   text is near-black, secondary text is 7:1 or better where it sits, and
   each screen carries exactly one filled oxblood button: the hero's
   Continue, each calculator step's Continue or Generate, the report's
   introduction action. Every other action is quiet. Motion is transform
   and opacity only.
   ===================================================================== */

/* --- one primary action per screen ------------------------------------ */
.btn, .button, .nav-cta {
  border-radius: var(--radius-btn);
  background: var(--accent-fill);
  border: 1px solid var(--accent-fill);
  color: var(--accent-on);
  font-family: var(--font-display);
  font-weight: 500;
  box-shadow: none;
}
@media (hover: hover) {
  .btn:hover, .button:hover, .nav-cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); filter: none; transform: none; }
}
.btn:active, .button:active, .nav-cta:active { transform: scale(0.98); }

/* The quiet action: white, near-black text, an --edge border. It never
   fills on hover, so the one filled button stays the only one. */
.btn--quiet,
.report-actions [data-print-report] {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--edge);
}
@media (hover: hover) {
  .btn--quiet:hover,
  .report-actions [data-print-report]:hover { background: var(--surface-2); color: var(--text); border-color: var(--text); }
}

/* On the homepage the hero's Continue is the primary action and on the
   calculator it is each step's Continue, so the header's "Value my
   practice" steps back to a quiet link-button on those two pages. */
.page-home .nav-cta,
.page-calculator .nav-cta {
  background: var(--surface);
  color: var(--text);
  border-color: var(--edge);
}
@media (hover: hover) {
  .page-home .nav-cta:hover,
  .page-calculator .nav-cta:hover { background: var(--surface-2); color: var(--text); border-color: var(--text); }
}

/* The arrow glyphs appended to Continue and Back said nothing the words do not. */
.stepnav [data-next]::after, .stepnav [data-back]::before { content: none; }

.site-header__inner { border-color: var(--edge); box-shadow: 0 2px 10px rgba(17, 17, 17, 0.06); }
.primary-nav a { color: var(--text); }

/* --- the progress bar, shared by the hero and the calculator ----------- */
.progress__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "step left" "track track";
  align-items: baseline;
  gap: 8px 16px;
  margin: 0;
}
.progress__step {
  grid-area: step;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--text);
}
.progress__left {
  grid-area: left;
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.progress__track {
  grid-area: track;
  display: block;
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.progress__fill {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--accent);
  border-radius: 3px;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--t-quick) var(--ease-out);
}

/* The calculator's bar ([data-progress]) sticks under the header while the
   form scrolls. Its <nav> wrapper is display: contents so the bar's sticky
   range is the whole form column rather than the wrapper's own few pixels.
   The numbered list beneath it repeated the bar's own words, so it is kept
   for screen readers and hidden from sight. */
.page-calculator .progress { display: contents; }
.page-calculator .progress__bar {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  margin: -8px -12px 0;
  padding: 12px 12px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.page-calculator .progress__list {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.page-calculator .progress__time { margin: 10px 0 24px; font-size: 0.8125rem; color: var(--text-2); }
/* A field brought into view by focus or an error lands below the header AND
   the sticky bar, not underneath them. PV-016: the document's
   scroll-padding-top now carries header + bar (PV-016 block at the end); the
   field's own margin only keeps its label in view above it. */
.page-calculator input, .page-calculator select { scroll-margin-top: 40px; }
@media (max-width: 767px) {
  .page-calculator .progress__bar { margin-inline: -8px; padding-inline: 8px; margin-bottom: 20px; }
  /* On a phone the sticky bar stays one line of words and the track; the
     time note repeats the hero's own "About three minutes". */
  .page-calculator .progress__time { display: none; }
}

/* --- calculator fields ------------------------------------------------- */
.stepsplit__form { border-color: var(--edge); border-radius: var(--radius-lg); }
.calc input:not([type=radio]):not([type=checkbox]), .calc select,
.hero-calc input[type=text], .intro-form textarea {
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}
.calc input:focus, .calc select:focus, .hero-calc input:focus, .intro-form textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent);
}
.calc label, .calc .field__label, .hero-calc label, .hero-calc legend { color: var(--text); }
.calc .helper, .step__intro, .gate__intro { color: var(--text-2); }

/* Chips and toggles: 8px corners, an --edge border, and a chosen state that
   reads at a glance (oxblood border and a pale oxblood ground) without
   becoming a second filled button. */
.toggle__opt, .chip {
  border: 1px solid var(--edge);
  border-radius: 8px;
  min-height: 44px;
  background: var(--surface);
  color: var(--text);
}
.toggle__opt:has(input:checked), .chip:has(input:checked), .chip[aria-pressed="true"] {
  background: var(--accent-wash);
  color: var(--text);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
/* "Not sure" is the resting answer on an optional question. Chosen, it is
   marked in grey rather than oxblood, so a question the owner has actually
   answered stands apart from one left at its default. */
.toggle__opt[data-opt="not_sure"]:has(input:checked),
.chip[data-opt="not_sure"]:has(input:checked) {
  background: var(--surface-2);
  border-color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--text-2);
}
.toggle__opt:focus-within, .chip:focus-within, .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Route choices carry a second line. */
.chip:has(.chip__sub) {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  text-align: left;
  padding: 12px 16px;
  font-weight: 500;
}
.chip__sub { display: block; font-size: 0.875rem; font-weight: 400; line-height: 1.4; color: var(--text-2); }
.chips:has(.chip__sub) { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

/* Required and optional are told apart by a word, not by weight or colour
   alone: an optional question's label ends "Optional" in secondary text. */
.field__optional {
  margin-left: 8px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-2);
  white-space: nowrap;
}

/* Once the report renders, the form gives way to one quiet way back. */
/* Aligned to the report's own column, so it reads as part of the report. */
.calc-edit { max-width: 960px; margin: 24px auto 0; }
.calc-edit .btn { width: auto; min-width: 12rem; margin-top: 0; padding-inline: 24px; }
.gate { border-color: var(--edge); background: var(--surface-2); }

/* The optional contacts row, shown only after a confirmed booking. */
.contacts-row { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--edge); }
.contacts-row__set { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.contacts-row__set > legend { margin-bottom: 4px; }
.contacts-row__set > .helper { margin: 0 0 12px; }
.contacts-row__item {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 4px 0;
  font-size: 1rem; color: var(--text); cursor: pointer;
}
.contacts-row__item input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--accent); }
.contacts-row__set .field { margin-top: 12px; }
.contacts-row .btn { width: auto; margin-top: 0; padding-inline: 24px; }

/* --- homepage card: the hero calculator's own surface (layout is the PV-020 layer) --- */
.hero-calc {
  display: grid;
  gap: 20px;
  padding: 24px 20px;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 12px 32px -20px rgba(17, 17, 17, 0.25);
}
.hero-calc__field { display: grid; gap: 8px; margin: 0; min-width: 0; }
.hero-calc label, .hero-calc legend {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  padding: 0;
}
.hero-calc input[type=text] {
  width: 100%;
  min-height: 52px;
  padding: 12px 44px 12px 16px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
}
.hero-calc .unit__mark { color: var(--text-2); right: 16px; }
.unit--before .unit__mark { left: 16px; right: auto; }
.hero-calc .unit--before input[type=text] { padding-left: 36px; padding-right: 16px; }
.hero-calc input[aria-invalid="true"], .hero-calc__choices[aria-invalid="true"] .hero-calc__choice { border-color: #a32828; }

.hero-calc__choices { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-calc__choices > legend { margin-bottom: 8px; }
.hero-calc__choices > .field-error { flex-basis: 100%; }
.hero-calc .hero-calc__choice {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--edge); border-radius: 8px;
  background: var(--surface); color: var(--text);
  font-family: var(--font-body) !important; font-weight: 400 !important; font-size: 1rem;
  cursor: pointer;
}
.hero-calc__choice input { position: absolute; opacity: 0; pointer-events: none; }
.hero-calc__choice:has(input:checked) { background: var(--accent-wash); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.hero-calc__choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.hero-calc__progress { padding-top: 4px; }
.hero-calc__continue { width: 100%; min-height: 52px; font-size: 1.0625rem; margin: 0; }


/* --- the report: headline first, sections as distinct surfaces ---------- */
#pv-report { max-width: 960px; }
#pv-report .report-section { margin-top: 24px; }
#pv-report > .report-section:not([data-section="masthead"]):not(footer):not(.report-more) {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  padding: 28px;
}
/* Each section opens with a ruled heading, so a scroll reads as separate
   parts rather than one long block. */
#pv-report > .report-section > h2 {
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--edge);
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
}
#pv-report > .report-section > .eyebrow { color: var(--text-2); }
#pv-report .intro, #pv-report .report-lede { color: var(--text-2); }
#pv-report h1 { margin-top: 0; }

/* The headline: the first and heaviest thing on the report. */
#pv-report > .report-section[data-section="headline"]:not(.report-more):not(footer) { border: 2px solid var(--text); }
.hl-cards { gap: 20px; margin-top: 8px; }
.hl-card {
  display: flex; flex-direction: column;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
}
.hl-card > .k { color: var(--text); font-size: 0.8125rem; margin-bottom: 14px; }
.hl-card__label { margin: 0; font-size: 0.875rem; color: var(--text-2); }
.hl-card > .v {
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
  margin: 2px 0 8px;
}
.hl-card .basis, .hl-card__note { font-size: 0.875rem; line-height: 1.5; color: var(--text-2); margin: 0 0 12px; }
.hl-card__heading {
  margin: 12px 0 6px !important;
  font-size: 0.9375rem !important;
  letter-spacing: 0 !important;
  color: var(--text);
}
/* The payment parts and the income lines read as small tables: label left,
   figure right, a rule between rows. */
.hl-parts, .hl-income { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--line); }
.hl-part, .hl-income > div {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}
.hl-part__label, .hl-income dt { color: var(--text); }
.hl-part__v, .hl-income dd {
  margin: 0 0 0 auto;
  font-family: var(--font-display); font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap; text-align: right;
}
.hl-part--first { font-size: 1.0625rem; }
.hl-part--first .hl-part__label { font-weight: 500; }
.hl-part--first .hl-part__v { font-weight: 500; }
.hl-own { margin: 0 0 12px; font-size: 0.9375rem; color: var(--text); }
.hl-total {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px;
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 2px solid var(--text);
}
.hl-total__label { font-weight: 500; font-size: 0.9375rem; }
.hl-total__v { margin-left: auto; font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; text-align: right; }
.hl-tax { margin: 20px 0 4px; font-weight: 500; color: var(--text); }
.hl-terms { margin: 0; color: var(--text-2); }
#pv-report [data-section="headline"] .report-lede { font-size: 1rem; }
.report-meta { margin: 16px 0 0; font-size: 0.8125rem; color: var(--text-2); }

/* Factors: two lists, each factor carrying a three-step size mark. Colour
   is never the only signal; the size is also written out. */
.factors { display: grid; gap: 28px; }
.factors__group > h2 {
  margin: 0 0 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--edge);
  font-size: 1.25rem;
}
.factor-list { list-style: none; margin: 0; padding: 0; }
.factor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label size" "route route";
  gap: 2px 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.factor__label { grid-area: label; color: var(--text); }
.factor__route { grid-area: route; font-size: 0.8125rem; color: var(--text-2); }
.factor__size {
  grid-area: size;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.8125rem; font-weight: 500; color: var(--text); white-space: nowrap;
}
.factor__size::before {
  content: "";
  width: 8px; height: 12px;
  margin-right: 20px;
  border-radius: 2px;
  background: var(--mark);
  box-shadow: 10px 0 0 var(--mark-2, var(--line)), 20px 0 0 var(--mark-3, var(--line));
}
[data-factors="lifted"] { --mark: var(--good); }
[data-factors="held"] { --mark: var(--accent); }
.factor[data-size="moderate"], .factor[data-size="large"] { --mark-2: var(--mark); }
.factor[data-size="large"] { --mark-3: var(--mark); }
.factors__call { margin: 20px 0 0; font-weight: 500; color: var(--text); }
@media (min-width: 768px) {
  .factors { grid-template-columns: 1fr 1fr; column-gap: 40px; }
}

/* Market conditions: four short blocks in two columns. */
.conditions { display: grid; gap: 12px; margin-top: 8px; }
.condition { padding: 16px 18px; border: 1px solid var(--edge); border-radius: var(--radius); background: var(--surface-2); }
#pv-report .condition h3 { margin: 0 0 6px; font-size: 1rem; letter-spacing: 0; }
.condition p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--text); }
@media (min-width: 768px) { .conditions { grid-template-columns: 1fr 1fr; } }

.check, .stat, .card { border-color: var(--edge); }
/* A readiness item left as "Not sure": neutral. A dashed edge on the grey
   surface and an outlined question mark, so it reads as neither a tick
   (green fill) nor a to-do (amber fill). */
.check.unsure { border-style: dashed; background: var(--surface-2); }
.check.unsure .ic { background: var(--surface); color: var(--text-2); border: 1.5px solid var(--text-2); }
/* The note that typical answers stood in for "Not sure": quiet secondary text. */
.factors__unsure { margin: 12px 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--text-2); }
.card.hl-card { border-top-color: var(--accent); }
.next-action { border: 1px solid var(--accent); background: var(--accent-wash); }
/* The printed page has no button, so print carries a written way to get in
   touch instead. Screen shows the button and hides this line. */
.next-print-contact { display: none; }
.next-action__note, #pv-report .fee { color: var(--text-2); }

/* "More detail": the reference material, visibly secondary. No card edge of
   its own, a dashed rule, smaller headings, and its parts divided by rules
   rather than boxed. */
#pv-report > .report-more {
  background: transparent;
  border: 0;
  border-top: 2px dashed var(--edge);
  border-radius: 0;
  padding: 28px 4px 0;
  margin-top: 40px;
}
#pv-report > .report-more > h2 { border-bottom: 0; color: var(--text-2); font-size: 1.25rem; padding-bottom: 0; }
#pv-report .report-more .report-section { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
#pv-report .report-more .report-section h2 { font-size: 1.125rem; }
#pv-report .report-more .report-section h3 { font-size: 1rem; }
#pv-report footer.report-section { margin-top: 32px; color: var(--text-2); }
.report-actions { justify-content: center; }
.report-actions .btn { width: auto; margin-top: 0; padding-inline: 28px; }

@media (max-width: 720px) {
  #pv-report > .report-section:not([data-section="masthead"]):not(footer):not(.report-more) { padding: 20px 16px; }
  #pv-report > .report-more { padding-inline: 0; }
  .hl-card { padding: 20px 16px; }
  .hl-part--first { font-size: 1rem; }
}

/* --- print: the report as an A4 document -------------------------------- */
@media print {
  /* Page 1 is the headline. Factors, market conditions and next steps
     follow on a fresh page, and the reference group starts its own. */
  #pv-report > [data-section="factors"],
  #pv-report > .report-more { break-before: page; page-break-before: always; }
  #pv-report > .report-section:not([data-section="masthead"]):not(footer):not(.report-more),
  #pv-report > .report-section[data-section="headline"]:not(.report-more):not(footer) {
    border: 0; border-radius: 0; padding: 0; background: none;
  }
  #pv-report > .report-section > h2 { border-bottom-color: #877D78; }
  #pv-report > .report-more { border-top: 0; margin-top: 0; padding: 0; }
  .hl-cards { gap: 10pt; }
  .hl-card { padding: 12pt; break-inside: avoid; page-break-inside: avoid; }
  .hl-card > .v { font-size: 20pt; }
  .hl-part, .hl-income > div { padding: 4pt 0; font-size: 9.5pt; }
  .hl-card .basis, .hl-card__note, .hl-own { font-size: 9pt; margin-bottom: 6pt; }
  .factor, .condition, .hl-total { break-inside: avoid; page-break-inside: avoid; }
  .factors { grid-template-columns: 1fr 1fr; column-gap: 18pt; }
  .conditions { grid-template-columns: 1fr 1fr; }
  .contacts-row, .progress { display: none !important; }
  #pv-report [data-section="headline"] .report-lede { font-size: 10pt; }
  .next-print-contact { display: block; margin: 8pt 0 0; font-size: 10pt; color: #615B59; }
  /* House orphan-heading rule: a heading keeps at least three body lines with
     it on its page. Every section head (eyebrow, h2, h3, intro, score line)
     refuses a break after it, and the blocks that follow a head (an item
     group, the playback tiles, a factor list) refuse a break inside, so
     Chromium moves the whole head to the next page rather than stranding it. */
  #pv-report .eyebrow, #pv-report h2, #pv-report h3, #pv-report .intro,
  #pv-report .score, #pv-report .report-section > .muted { break-after: avoid; page-break-after: avoid; }
  #pv-report .ready, #pv-report .facts, #pv-report .factor-list,
  #pv-report .happens__part { break-inside: avoid; page-break-inside: avoid; }
  #pv-report h3 + .ready, #pv-report .score + h3, #pv-report .eyebrow + .facts,
  #pv-report .ready + .note { break-before: avoid; page-break-before: avoid; }
  /* Chromium split the playback tiles between their rows whatever
     break-inside said, as a grid and as a wrapping flex row alike. As inline
     blocks they are lines of text, so widows and orphans hold the rows
     together. */
  #pv-report .facts { display: block; orphans: 4; widows: 4; }
  #pv-report .fact { display: inline-block; vertical-align: top; width: calc(25% - 8px); margin: 0 6px 6px 0; }
  /* The printed order: headline, factors, market conditions, next steps,
     then what actually happens and readiness, then the reference group. */
  #pv-report { display: flex; flex-direction: column; }
  #pv-report > [data-section="masthead"] { order: 0; }
  #pv-report > [data-section="headline"] { order: 1; }
  #pv-report > [data-section="factors"] { order: 2; }
  #pv-report > [data-section="conditions"] { order: 3; }
  #pv-report > [data-section="next"] { order: 4; }
  #pv-report > [data-section="what-happens"] { order: 5; }
  #pv-report > [data-section="readiness"] { order: 6; }
  #pv-report > .report-more { order: 7; }
  #pv-report > footer { order: 8; }
}

@media (prefers-reduced-motion: reduce) {
  .progress__fill { transition: none; }
}

/* ================================================================== PV-016
   Number fields, sticky offsets, age chips, follow-up blocks, the working
   estimate's per-step transition and the report finale. Existing tokens
   only; motion on transform and opacity (plus the finale icon's
   stroke-dashoffset, declared in the design brief). */

/* --- sticky offsets ----------------------------------------------------
   --header-h is where the stuck header ends plus an 8px breathing gap, and is
   the step bar's own sticky top. --progress-h is the stuck step bar's box.
   PV-020: the header is now a flat row (5rem + 1px rule = 81px from 1024, 4.75rem
   + 1px = 77px below), so the offsets are 89px and 85px; measured with the
   phone CTA on two lines. Bar 66px tall at every width (Mon 28th Sep 2026). */
:root { --header-h: 89px; --progress-h: 66px; }
@media (max-width: 767px) { :root { --header-h: 85px; } }
html:has(body.page-calculator) { scroll-padding-top: calc(var(--header-h) + var(--progress-h) + 12px); }

/* --- number fields: never narrower than their largest value -------------
   Sized in ch of the field's own font (Roboto, tabular lining figures).
   min() keeps each floor inside its column at 390px. */
.calc input[type="text"][data-money],
.calc input[type="text"][data-int],
.calc input[type="text"][data-decimal] { font-variant-numeric: tabular-nums lining-nums; }
.calc input[type="text"][data-money] { min-width: min(100%, calc(13ch + 32px)); }   /* £999,999,999 */
#pv2-households { min-width: min(100%, calc(6ch + 32px)); }                         /* 9,999 */
#pv2-charge { min-width: min(100%, calc(5ch + 58px)); }                             /* 2.00 + % */

/* --- age chips: two one-tap groups, the 73-and-over chips with a pound line.
   At most three columns, two on a phone, so six chips read as 3 x 2 or 2 x 3
   rather than one long list or a ragged row. */
.chips--age,
.chips.chips--age:has(.chip__sub) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(8.5rem, calc((100% - 16px) / 3)), 1fr));
}
.chips--age .chip {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  text-align: left;
}
.chips--age .chip__sub {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-2);
}
/* The overlap note: calm information under the second question, never an
   error colour or a banner. */
.age-note {
  margin: 12px 0 0;
  padding: 2px 0 2px 12px;
  border-left: 2px solid var(--edge);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 62ch;
}

/* --- follow-up blocks: staff (step 1) and part sale (step 5) ------------
   Inset under the question that opened them, on a quiet rule. */
.staff-more, .part-more {
  margin: -8px 0 25px;
  padding-left: 16px;
  border-left: 2px solid var(--line);
}
.staff-more > .field:last-child, .part-more > .field:last-child { margin-bottom: 0; }

/* --- working estimate: the figure settles in when Continue commits ------ */
.estimate__range.is-updating { animation: pv-estimate-in 240ms ease-out; }
@keyframes pv-estimate-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.estimate__updated { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.estimate__updated:empty { display: none; }
.estimate__updated + .estimate__note { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) {
  .estimate__range.is-updating { animation: none; }
}

/* --- report finale ------------------------------------------------------ */
.finale-host { margin-top: 40px; }
/* While it plays, the phone's fixed estimate bar would sit over it. */
.page-calculator:has(.finale-host:not([hidden])) .estimate { display: none; }
.finale {
  max-width: 36rem;
  margin-inline: auto;
  padding: 40px 32px 32px;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 8px;
}
.finale__icon { display: block; width: 56px; height: 56px; margin: 0 auto; color: var(--text); }
.finale__icon .finale__page { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.finale__icon .finale__rule {
  fill: none; stroke: var(--text-2); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 600ms ease-out;
}
.finale__icon .finale__rule.is-drawn { stroke-dashoffset: 0; }
.finale__icon .finale__seal { fill: var(--surface); stroke: var(--accent); stroke-width: 2; opacity: 0; transition: opacity 150ms ease-out; }
.finale__icon .finale__tick {
  fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 200ms ease-out;
}
.finale.is-complete .finale__seal { opacity: 1; }
.finale.is-complete .finale__tick { stroke-dashoffset: 0; }
.finale__heading {
  margin: 16px 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text);
}
.finale__bar {
  position: relative;
  height: 6px;
  margin: 20px 0 16px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.finale__fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
}
.finale__lines { list-style: none; margin: 0; padding: 0; }
.finale__line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-2);
  animation: pv-finale-in 240ms ease-out both;
}
.finale__line.is-current { color: var(--text); font-weight: 500; }
.finale__text { min-width: 0; overflow-wrap: anywhere; }
.finale__mark {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  border: 1.5px solid var(--edge);
  border-radius: 50%;
}
.finale__line.is-done .finale__mark { border-color: var(--accent); background: var(--accent-wash); }
.finale__line.is-done .finale__mark::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
@keyframes pv-finale-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
/* Reduced motion (finale.js adds .finale--static from the owner's setting):
   nothing draws, slides or eases; states change in place. */
.finale--static .finale__rule { stroke-dashoffset: 0; }
.finale--static, .finale--static * { transition: none !important; animation: none !important; }
@media (max-width: 767px) {
  .finale-host { margin-top: 24px; }
  .finale { padding: 28px 20px 24px; }
}
@media print {
  .finale-host { display: none !important; }
}

/* --- report: "Your team" and "Selling part of your practice" -------------
   Top-level report sections, so they already take the white panel and ruled
   h2 of every other section. Their inner rhythm and small print follow the
   factors and conditions panels. */
#pv-report [data-section="team"] h3 { margin: 20px 0 6px; font-size: 1.0625rem; letter-spacing: 0; color: var(--text); }
#pv-report [data-section="team"] > p:not([class]),
#pv-report [data-section="part-sale"] > p:not([class]) { margin: 0 0 12px; max-width: 68ch; line-height: 1.6; color: var(--text); }
#pv-report [data-section="team"] > .small.muted,
#pv-report [data-section="part-sale"] > .small.muted {
  margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.5; color: var(--text-2);
}
@media print {
  /* Printed straight after the factors, as on screen (DOM order within order 2). */
  #pv-report > [data-section="team"], #pv-report > [data-section="part-sale"] { order: 2; }
  #pv-report [data-section="team"] h3 + p,
  #pv-report [data-section="part-sale"] > .small.muted { break-before: avoid; page-break-before: avoid; }
}

/* PV-018X: supplied Brand Pack 1.0. Both route headlines share these rules. */
:root { --radius: 12px; --radius-lg: 12px; --radius-btn: 8px; }
.site-header { top: 0; margin: 0; background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header__inner { border: 0; border-radius: 0; background: var(--surface); }
.nav-cta, .nav-toggle, .btn, .chip, .calc input, .calc select { border-radius: 8px; }
.page-calculator .progress__step, .page-calculator .progress__left { min-height: 1.61em; }
/* calc.js appends its accessible legend; retire the pre-rendered text as
   soon as that existing enhancement lands, keeping one visible label. */
.step__legend:has(> .sr-only) > .step__initial { display: none; }
.breadcrumbs { padding-block: 20px 0; font-size: .875rem; color: var(--text-2); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li + li::before { content: "/"; margin-right: 8px; }
.article__byline { font-size: .875rem; color: var(--text-2); }
.article__bio { max-width: 720px; margin-top: 32px; padding-block: 24px; border-top: 1px solid var(--line); }
@media print { .breadcrumbs { display: none; } }
body { font-size: 18px; line-height: 1.61; }
.site-header__inner { box-shadow: none; }
.site-header .wordmark { width: 220px; min-width: 180px; flex-shrink: 0; }
.brand-logo { display: block; width: 100%; height: auto; }
.wordmark--footer { width: 240px; max-width: 100%; }
.wordmark--footer::before { content: none; }
.site-header .nav-toggle { width: 44px; min-width: 44px; height: 44px; margin-left: auto; }
.article__body, .prose { max-width: 720px; }
.page-inner .hero h1, .home-hero h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1.14; letter-spacing: -.025em; }
.section { padding-block: 96px; }
.report-logo { display: block; width: 220px; max-width: 100%; height: auto; margin-bottom: 20px; }
.hl-card > .v { font-size: clamp(1.375rem, 2.2vw, 2.25rem); font-weight: 500; }
.hl-card__label { min-height: 3em; }
.hl-age-note { margin: 12px 0 0; color: var(--text-2); font-size: .875rem; }
.hl-sale-price { margin-top: 4px; }
.cookie-settings { min-height: 44px; padding: 8px 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.consent-notice { position: fixed; z-index: 50; inset: auto 16px 16px; display: flex; align-items: center; gap: 24px; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px; border: 1px solid var(--edge); border-radius: 12px; background: var(--bg); color: var(--text); }
.consent-notice__copy { flex: 1; min-width: 0; }
.consent-notice h2 { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.3; }
.consent-notice p { margin: 0 0 8px; max-width: 76ch; font-size: 1rem; line-height: 1.5; }
.consent-notice__status:empty { display: none; }
.consent-notice__actions { display: flex; flex: 0 0 192px; flex-direction: column; gap: 8px; }
.consent-notice__actions .btn { width: 100%; min-height: 44px; justify-content: center; }
@media (max-width: 767px) {
  .consent-notice { inset: auto 12px 12px; display: block; padding: 16px; }
  .consent-notice__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
  .consent-notice__actions .btn { padding: 10px 8px; white-space: normal; font-size: 1rem; }
  .consent-notice__actions [data-consent-close] { grid-column: 1 / -1; }
}
@media print { .consent-notice, [data-consent-open], [data-consent-close] { display: none !important; } }
@media (max-width: 767px) {
  body { font-size: 17px; line-height: 1.59; }
  .site-header .wordmark { width: 180px; }
  .site-header .nav-cta {
    display: inline-flex; flex: 0 0 76px; width: 76px;
    padding: 8px 6px; font-size: 16px; line-height: 1.25;
    white-space: normal; text-align: center;
  }
  .section { padding-block: 56px; }
  .hl-card { padding: 20px; }
}
@media print {
  body { background: #fff; font-size: 10.5pt; }
  .wrap { width: 100%; max-width: none; margin: 0; padding: 0; }
  .page-calculator .section { padding: 0; }
  .report-logo { width: 48mm; margin-bottom: 8pt; }
  .hl-card > .v { font-size: 19pt; font-weight: 500; }
  .hl-card__label { min-height: 2.8em; }
  .hl-age-note { font-size: 9pt; }
}
/* @@PV020-GENERATED-BELOW@@ Generated by website/assemble_css.py from website/css-pv020/*.css. Edit the fragments, not this tail. */

/* ==== 10-system.css ==== */
/* PV-020 system layer, owned by the lead run.
   What lives here: the header row, the breadcrumb, the page rhythm (section
   and hero spacing, heading spacing), the footer, and the homepage hero and
   blocks. The container itself is .wrap and the tokens are in :root at the top
   of this file (--container, --gutter, --section-y, --gap-*, --measure).
   Rules of the system, in order of importance:
   1. Every block in <main> is a .wrap or contains one. No other page width.
   2. Space comes from the --gap-* and --section-y tokens. A one-off px margin
      is a defect.
   3. Related things sit closer than unrelated ones: --gap-tight inside a
      group, --gap-loose from a heading to its content, --gap-block between
      blocks, --section-y between sections. Space above a heading is larger
      than the space below it.
   4. A paragraph never runs wider than --measure-lg (72ch) or narrower than
      45ch except inside a table cell or a control. */

/* ------------------------------------------------------------- header row */

.site-header__inner {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: var(--header-row);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--surface);
  gap: var(--gap-loose);
}
@media (min-width: 1024px) {
  .site-header__inner { min-height: 5rem; gap: var(--gap-group); }
}
/* On a phone the CTA is two lines ("Value my / practice") and the logo is a
   little narrower, so the row is one 76px height at every phone width and the
   sticky offsets (--header-h 85px) are true. It was three lines at 76px wide,
   which made the header 103px and covered the calculator's step bar. */
@media (max-width: 767px) {
  .site-header .wordmark { width: 9.5rem; min-width: 0; }
  .site-header .nav-cta { flex: 0 0 auto; width: 6.75rem; padding: 6px 8px; font-size: .9375rem; line-height: 1.2; }
}

/* -------------------------------------------------------------- breadcrumb */

.breadcrumbs { padding-block: var(--gap-loose) 0; }
/* Stand-alone links are 44px targets on a phone (the inline links inside a
   paragraph are exempt, as WCAG 2.5.5 exempts them). */
@media (max-width: 1023px) {
  .breadcrumbs li { display: flex; align-items: center; }
  .breadcrumbs ol { align-items: center; }
  .breadcrumbs a, .home-block .text-link { display: inline-flex; align-items: center; min-height: 2.75rem; }
}

/* -------------------------------------------------------------- page rhythm */

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--gap-group); }

/* A page header: title, then one standfirst, then the content. The h1 is
   always clear of the standfirst (it was margin-collapsed to nothing on
   hubs), and the standfirst is a reading column, not a strip. */
.hero { padding-block: clamp(2rem, 1.2rem + 2.6vw, 4rem) var(--gap-block); }
.page-inner .hero { padding-block: clamp(2rem, 1.2rem + 2.6vw, 4rem) var(--gap-block); }
.hero h1, .page-inner .hero h1 { margin-bottom: var(--gap-loose); }
.hero .standfirst, .page-inner .hero .standfirst { max-width: var(--measure); margin-bottom: 0; }
.hero + .section, .page-inner .hero + .section { padding-top: 0; }

/* Headings in running text: more space above than below, always. */
.prose > * + h2, .prose > * + h3 { margin-top: var(--gap-block); }
.prose h2 { margin-bottom: var(--gap); }
.prose h3 { margin-bottom: var(--gap-tight); }
.prose > * + p, .prose > * + ul, .prose > * + ol { margin-top: var(--gap); }
.prose > :first-child { margin-top: 0; }

/* ----------------------------------------------------------------- footer */

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  margin-top: 0;
  padding-block: var(--section-y) var(--gap-group);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-block) var(--gap-group);
  align-items: start;
}
.site-footer__brand { grid-column: 1 / -1; }
.wordmark--footer { width: 12rem; margin: 0 0 var(--gap); }
.site-footer__blurb { max-width: 32ch; font-size: 1rem; line-height: 1.6; color: var(--text-2); }
.site-footer__h { margin: 0 0 var(--gap); font-size: .8125rem; letter-spacing: .06em; color: var(--text-2); }
.site-footer__col ul { display: grid; gap: 0; }
.site-footer__col a, .site-footer__policy a, .site-footer__policy .cookie-settings {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: 0; font-size: .9375rem; line-height: 1.4; color: var(--text-2);
}
.site-footer__policy .cookie-settings { font-size: .9375rem; }
@media (min-width: 640px) {
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); column-gap: var(--gap-block); }
  .site-footer__brand { grid-column: auto; }
  .site-footer__col a, .site-footer__policy a, .site-footer__policy .cookie-settings { min-height: 2.25rem; }
}
/* The legal row sits inside the same container, so its rule stops where the
   text does, and its two paragraphs sit at the container's two edges. */
.site-footer__base {
  display: grid;
  gap: var(--gap-loose) var(--gap-block);
  margin-top: var(--gap-block);
  padding-top: var(--gap-loose);
  border-top: 1px solid var(--line);
}
.site-footer__base p { max-width: none; font-size: .875rem; line-height: 1.6; color: var(--text-2); margin: 0; }
.site-footer__legal { display: grid; gap: var(--gap-tight); align-content: start; }
.site-footer__policy { display: flex; flex-wrap: wrap; column-gap: var(--gap-group); align-items: center; }
@media (min-width: 1024px) {
  .site-footer__base { grid-template-columns: repeat(2, minmax(0, 34rem)); justify-content: space-between; }
  .site-footer__policy { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------- homepage */

/* The hero is the calculator. Below 1024: headline, a short intro, the card
   (above the fold at 390 by 844), then the reassurance. From 1024: the text
   column on the left, the card top-aligned with the headline on the right. */
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-loose);
  align-items: start;
  padding-block: var(--gap-loose) var(--section-y);
}
.home-hero__intro { display: grid; gap: var(--gap); }
.home-hero__intro .eyebrow { margin: 0; color: var(--text-2); }
.home-hero__intro h1 {
  margin: 0;
  max-width: none;
  font-size: clamp(2rem, 1.1rem + 2.3vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.home-hero .standfirst {
  max-width: var(--measure);
  margin: 0;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.125rem);
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--text-2);
}
.home-hero__promise {
  max-width: var(--measure);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  padding: 0;
  border: 0;
  margin: 0;
}
.home-hero__promise p { margin: 0; }
.home-hero__promise p + p { margin-top: var(--gap-tight); }
.home-hero__terms { color: var(--text-2); font-size: 1rem; }
.hero-calc { padding: var(--gap-loose) var(--gap-loose); }
@media (min-width: 1024px) {
  .home-hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "intro card" "promise card";
    column-gap: var(--gap-block);
    row-gap: var(--gap-group);
    padding-block: var(--gap-group) var(--section-y);
  }
  .home-hero__intro { grid-area: intro; }
  .hero-calc { grid-area: card; align-self: start; padding: var(--gap-group); }
  .home-hero__promise { grid-area: promise; align-self: start; }
}

/* On a phone the card is the point: the eyebrow and the second intro sentence
   step aside so the whole card, Continue included, is above the fold at
   390 by 844. Both are back from 640 up. */
@media (max-width: 639px) {
  .home-hero { gap: var(--gap); padding-top: var(--gap); }
  .home-hero__intro { gap: var(--gap-tight); }
  .home-hero__intro .eyebrow, .standfirst__more { display: none; }
  .hero-calc { gap: var(--gap); padding: var(--gap); }
  .hero-calc input[type=text] { min-height: 3rem; }
}

/* Three blocks under the hero, as equal ruled columns: no fill, no shadow, no
   radius. One column each from 1200 (a column is then 45ch or more at 17px);
   below that, one row each, heading left and text right, and on a phone a
   plain stack. */
.home-blocks { display: grid; gap: var(--gap-block); padding-block: 0 var(--section-y); }
.home-block {
  display: grid;
  align-content: start;
  gap: var(--gap-tight);
  padding: var(--gap-loose) 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.home-block h2 { margin: 0; font-size: clamp(1.375rem, 1.2rem + .6vw, 1.625rem); line-height: 1.2; letter-spacing: -.02em; }
.home-block p { margin: 0; max-width: var(--measure); font-size: 1.0625rem; line-height: 1.6; color: var(--text); }
.home-block .text-link { justify-self: start; margin-top: var(--gap-tight); color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 768px) and (max-width: 1199px) {
  .home-block { grid-template-columns: minmax(12rem, 1fr) 2fr; column-gap: var(--gap-block); }
  .home-block h2 { grid-column: 1; grid-row: 1 / span 2; }
  .home-block p, .home-block .text-link { grid-column: 2; }
}
@media (min-width: 1200px) {
  .home-blocks { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap-block); row-gap: 0; }
}

/* ==== 20-hub-article.css ==== */
/* PV-020 group A: the eight pillar hubs, the article template and the guides
   library. Loads after 10-system.css and wins ties.

   Spatial thesis. The reader arrives to read, so the page has one reading
   column and one thing beside it that earns its place. Every block sits in
   the container (.wrap); nothing centres a narrow column inside it. A hub and
   an article open the same way: text on the left, the photograph on the
   right, tops aligned. Below that a reading column at the left edge with a
   sticky aside (the guide's scale on a hub, "On this page" on an article) at
   the right edge. Lists and related blocks run the full container, title left
   and date right, so the two edges stay in use all the way down.

   Earlier layers (PV-008, PV-011, PV-015) set widths in px and margin-inline
   auto on the article's children; this file replaces them rather than adding
   a third opinion. --read and --read-article are the reading columns, set
   from measured line lengths and not from the token: --measure (66ch) counts
   the width of a zero, which runs to 74 characters a line in 18px body text,
   so the article column is 54ch (about 67 a line) and the hub column 60ch of
   the larger hub face (about 65). */

:root { --read: 60ch; --read-article: 54ch; --split: minmax(0, 7fr) minmax(0, 5fr); }

/* ------------------------------------------------------------ hub heroes */

.hub-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-group);
  align-items: start;
}
.page-inner .hero--hub { padding-bottom: var(--gap-block); }
.page-inner .hero--hub h1 { max-width: none; }
.hub-hero__text { min-width: 0; }
.hub-hero__text .kicker { margin-bottom: var(--gap); }
.page-inner .hero--hub .standfirst { max-width: 54ch; }
.hub-hero__figure { margin: 0; }
.hub-hero__figure img { aspect-ratio: 16 / 10; }
.hub-hero__figure figcaption { margin-top: var(--gap-tight); }
@media (min-width: 640px) and (max-width: 1023px) {
  .hub-hero__figure img { aspect-ratio: 21 / 9; }
}
@media (min-width: 1024px) {
  .hub-hero {
    grid-template-columns: var(--split);
    column-gap: var(--gap-block);
  }
  .hub-hero__figure img { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------------------- hub body */

/* Prose, then (from 1024) the scale aside in the second column, then the
   list at full width. The scale is sticky inside its own row, so it travels
   with the reading instead of sitting alone at the first paragraph. */
.page-inner .section .wrap:has(> .alist__scale) > .prose { max-width: var(--read); margin-inline: 0; }
.page-inner .section .wrap:has(> .alist__scale) > h2 {
  margin: var(--gap-block) 0 var(--gap-loose);
}
.page-inner .section .wrap:has(> .alist__scale) > .alist__scale {
  margin: var(--gap-block) 0 0;
  font-size: .9375rem;
  color: var(--text-2);
}
.page-inner .section .wrap:has(> .alist__scale) > .alist__scale + .alist { margin-top: var(--gap-loose); }
@media (min-width: 1024px) {
  .page-inner .section .wrap:has(> .alist__scale) {
    grid-template-columns: var(--split);
    column-gap: var(--gap-block);
  }
  .page-inner .section .wrap:has(> .alist__scale) > .alist__scale {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    position: sticky;
    top: 7.5rem;
    margin: 0;
    padding: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
    font-size: 1rem;
  }
  .page-inner .section .wrap:has(> .alist__scale) > .alist__scale + .alist { margin-top: 0; }
}
/* The scale as two ruled facts. The numbers are the counted ones the build
   already printed, set larger so the panel reads as a fact and not as a
   caption. */
.alist__scale { display: grid; gap: 0; }
.alist__scale-part { display: flex; align-items: baseline; padding-block: var(--gap) var(--gap); border-bottom: 1px solid var(--line); color: var(--text-2); }
.alist__scale-part + .alist__scale-part::before { content: none; }
.alist__num { display: inline; margin-right: var(--gap-tight); font-family: var(--font-display); font-weight: 500; font-size: 2rem; line-height: 1; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }

/* When the scale moves beside the prose the hub's list heading needs the
   scale's row out of its way, which the grid already gives it. */

/* ------------------------------------------------------ ruled lists (alist) */

.alist { margin: var(--gap-loose) 0 0; }
.alist a {
  gap: var(--gap-tight) var(--gap-group);
  padding: var(--gap-loose) var(--gap-tight);
  margin: 0 calc(var(--gap-tight) * -1);
}
.alist--compact a { padding: var(--gap) var(--gap-tight); }
.alist__standfirst { max-width: var(--read); margin-top: var(--gap-tight); }
.alist__meta { gap: var(--gap-tight) var(--gap); }
@media (min-width: 720px) {
  .alist a { grid-template-columns: minmax(0, 1fr) 9.5rem; }
}

/* ----------------------------------------------------------------- article */

/* The article IS the container. Its children carry no width of their own. */
.article.wrap {
  padding-block: 0 var(--section-y);
  padding-inline: var(--gutter);
}
.article__hero,
.article__header,
.article__figure,
.article__layout,
.article__foot,
.article__sources,
.article__bio,
.article__more {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

.article__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-group);
  align-items: start;
  padding-block: var(--gap-block);
}
.article__header { min-width: 0; }
.article__header .kicker { margin-bottom: var(--gap); }
.article__header h1 {
  max-width: none;
  margin-bottom: var(--gap-loose);
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -.025em;
}
.article__header .standfirst { max-width: 54ch; margin: 0; }
.article .dateline {
  margin: var(--gap-loose) 0 var(--gap-tight);
  padding: 0;
}
.article__byline { margin: 0; }
.article__figure { margin: 0; }
.article__figure img { aspect-ratio: 16 / 10; }
.article__figure figcaption { margin-top: var(--gap-tight); }
@media (min-width: 640px) and (max-width: 1023px) {
  .article__figure img { aspect-ratio: 21 / 9; }
}
@media (min-width: 1024px) {
  .article__hero {
    grid-template-columns: var(--split);
    column-gap: var(--gap-block);
    padding-block: var(--gap-block) var(--gap-block);
  }
  .article__figure img { aspect-ratio: 4 / 3; }
}

/* Reading column and contents rail. */
.article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-group);
  align-items: start;
}
.article__layout > .article__body { max-width: var(--read-article); margin: 0; padding: 0; min-width: 0; }
.article__body > * { max-width: none; }
.article__body p, .article__body ul, .article__body ol { margin: 0 0 var(--gap-loose); }
.article__body > :last-child { margin-bottom: 0; }
.article__body h2 {
  margin: var(--gap-block) 0 var(--gap);
  padding-top: var(--gap-loose);
}
.article__body h3 { margin: var(--gap-group) 0 var(--gap-tight); }
.article__body li + li { margin-top: var(--gap-tight); }
.article__body blockquote { margin: var(--gap-group) 0; padding: var(--gap) var(--gap-loose); }
.article__lede { max-width: none; margin: 0 0 var(--gap-group); padding: var(--gap-loose); }
.article__lede-label { margin: 0 0 var(--gap-tight); }
.article__body .article__lede-label { margin: 0 0 var(--gap-tight); }
@media (min-width: 1024px) {
  .article__layout {
    grid-template-columns: var(--split);
    column-gap: var(--gap-block);
    padding-inline: 0;
  }
  .article__toc { position: sticky; top: 7.5rem; padding-left: var(--gap-loose); }
}
.article__toc li { margin-bottom: var(--gap); }
.article__toc-label { margin-bottom: var(--gap); }

/* Sources and author: the same two columns as the body above them, so the
   reading column's left edge and the rail's right edge hold to the bottom. */
.article__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-group);
  margin-top: var(--gap-block);
}
.article__foot > * {
  margin: 0;
  padding-block: var(--gap-loose) 0;
  border-top: 1px solid var(--line);
}
.article__sources h2 {
  margin: 0 0 var(--gap);
  padding: 0;
  border-top: 0;
}
.article__sources ul { margin: 0; }
.article__bio p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--text-2); }
.article__bio p + p { margin-top: var(--gap); }
@media (min-width: 1024px) {
  .article__foot {
    grid-template-columns: var(--split);
    column-gap: var(--gap-block);
  }
  .article__bio { grid-column: 2; }
}

/* More in this guide: a ruled list across the container. */
.article__more { margin: var(--gap-block) 0 0; }
.article__more-head { padding-top: var(--gap-loose); gap: var(--gap-tight) var(--gap-loose); }
.article__more ul { margin: var(--gap) 0 0; }
.article__more li a { padding: var(--gap) var(--gap-tight); margin: 0 calc(var(--gap-tight) * -1); gap: var(--gap); }

/* ----------------------------------------------------------------- guides */

.library__scale { margin: 0 0 var(--gap-loose); }
.jumpnav { margin: 0 0 var(--gap-block); padding: var(--gap-loose); }
.jumpnav ul { margin: 0; }

.guidegroup { margin: 0; padding: 0; scroll-margin-top: 7.5rem; }
.guidegroup + .guidegroup {
  margin-top: var(--gap-block);
  padding-top: var(--gap-block);
  border-top: 1px solid var(--line);
}
.guidegroup__head { margin-bottom: var(--gap-loose); gap: var(--gap-tight) var(--gap-loose); }
.guidegroup__meta { gap: var(--gap-tight) var(--gap-loose); }
.guidegroup__lead {
  gap: var(--gap-loose) var(--gap-group);
  padding: var(--gap);
  margin-bottom: var(--gap-tight);
}
.guidegroup__lead-body { padding: var(--gap-tight) var(--gap-tight) var(--gap-tight) 0; }
.guidegroup__lead-kicker { margin-bottom: var(--gap-tight); }
.guidegroup__lead-standfirst { max-width: var(--read); margin-top: var(--gap-tight); }
.guidegroup__lead .alist__meta { margin-top: var(--gap); }
@media (min-width: 800px) {
  .guidegroup__lead { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); padding: var(--gap-loose); }
}
.guidegroup .alist { margin-top: 0; }

/* Closing block: heading left, the one paragraph beside it, so the row uses
   both edges instead of a heading and a line of text at the left. */
.section--tight .prose.guides-next { max-width: none; margin: 0; padding-top: var(--gap-loose); border-top: 1px solid var(--line); }
.guides-next h2 { margin: 0 0 var(--gap); }
.guides-next p { max-width: var(--read); margin: 0; }
@media (min-width: 1024px) {
  .section--tight .prose.guides-next {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--read));
    column-gap: var(--gap-block);
    align-items: start;
  }
  .guides-next h2 { margin: 0; }
}

/* Links that are a row's only target are 44px high at every width. */
.article__more-hub, .guidegroup__meta a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
}
.guidegroup__meta a { margin-left: 0; }

/* ==== 30-utility.css ==== */
/* PV-020 group B: utility pages. Owned by agent B.
   Tools index and the three tools, methodology, glossary, about, contact,
   questions, start, site index, the four legal and policy pages, 404.
   Spatial thesis: every page is the one .wrap container (never re-centred
   here); prose is a reading column on the container's LEFT edge with
   something useful beside it from 1024 (an "On this page" list, the
   portrait, the contact panel, the tool's own notes), or it is a two-column
   list where the content is a list. Nothing here declares a page width;
   columns are set by measure (--measure, --measure-lg) and by grid tracks
   with minmax(0, ...). Space comes from the --gap-* tokens only. */

/* The reading measure for this group, in rem so it is the same width whatever
   the element's own font size makes a "ch" (the system's ch measures ran to
   82 to 91 real characters on a 19px paragraph). 36rem is 72 to 78 real
   characters of the 19px body text, which is inside the 45 to 80 rule. */
.page-inner { --pvb-read: 36rem; }

/* ---------------------------------------------- reading column + companion */

/* Legal, policy, methodology and checklist pages: the prose on the left, a
   sticky list of the page's own section names on the right (from 1024). Below
   1024 the list is hidden: those pages are one column and short enough to
   scroll. The list is built in the content file from the page's own h2s. */
.page-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-group); }
.page-split > .prose { max-width: var(--pvb-read); margin-inline: 0; }
.page-split > .prose li, .page-split > .prose dd {
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.65;
  color: var(--text-2);
}
/* The reset removes list markers site-wide; a list inside running text needs
   them back, with its items closer to each other than to the paragraph. */
.page-split > .prose ul:not(.checklist) { list-style: disc; padding-left: 1.25em; }
.page-split > .prose ul:not(.checklist) li + li { margin-top: var(--gap-tight); }
.page-split > .prose li::marker { color: var(--text-3); }
.page-split .checklist li::before { top: 1.5rem; }
.page-toc { display: none; }
@media (min-width: 1024px) {
  .page-split {
    grid-template-columns: minmax(0, var(--pvb-read)) minmax(0, 18rem);
    justify-content: space-between;
    column-gap: var(--gap-block);
    align-items: start;
  }
  .page-split > .prose { grid-column: 1; grid-row: 1; max-width: none; }
  .page-split > .page-toc {
    grid-column: 2; grid-row: 1;
    display: block;
    position: sticky;
    top: calc(5rem + var(--gap-group));
    padding-top: var(--gap-loose);
    border-top: 1px solid var(--line);
  }
  .page-toc__t {
    margin: 0 0 var(--gap-tight);
    font-size: .8125rem;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-2);
  }
  .page-toc ul { display: grid; gap: 0; }
  .page-toc a {
    display: block;
    padding-block: var(--gap-tight);
    font-size: .9375rem;
    line-height: 1.4;
    color: var(--text-2);
    text-decoration: none;
  }
  .page-toc a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
}

/* ------------------------------------------------------------------- about */

.about-grid { grid-template-columns: minmax(0, 1fr); gap: var(--gap-group); align-items: start; }
.about-grid > .prose { max-width: var(--pvb-read); margin-inline: 0; }
/* On a phone the portrait leads, small, so the person is met before the text. */
.about-grid > div:last-child { order: -1; }
.about-grid .portrait--photo { max-width: 12rem; padding: var(--gap-tight); }
@media (min-width: 1024px) {
  .about-grid {
    grid-template-columns: minmax(0, var(--pvb-read)) minmax(0, 20rem);
    justify-content: space-between;
    column-gap: var(--gap-block);
  }
  .about-grid > .prose { max-width: none; }
  .page-inner .about-grid > div:last-child { order: 0; position: sticky; top: calc(5rem + var(--gap-group)); }
  .about-grid .portrait--photo { max-width: none; padding: var(--gap); }
}

/* ----------------------------------------------------------------- contact */

/* The panel (how to reach Martin) beside the two notes that go with it. */
.contact-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-group); align-items: start; }
.contact-split > .prose { max-width: var(--pvb-read); margin-inline: 0; }
.contact-panel { padding: var(--gap-loose); }
.contact-panel .kicker { margin: 0 0 var(--gap-tight); font-size: .8125rem; }
.contact-panel > * + h2 { margin-top: 0; margin-bottom: var(--gap); }
.contact-notes { padding-top: var(--gap-loose); border-top: 1px solid var(--line); }
@media (min-width: 768px) and (max-width: 1023px), (min-width: 1200px) { .contact-panel { padding: var(--gap-group); } }
@media (min-width: 1024px) {
  .contact-split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--gap-group); }
  .contact-split > .prose { max-width: none; }
  .contact-notes { border-top: 0; padding-top: 0; }
}

/* --------------------------------------------------------- start, questions */

/* A list of routes, not one long column: two columns from 1024, each block
   opened by a rule (the homepage blocks' grammar). */
.start-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-block); }
.start-grid > .prose {
  max-width: var(--pvb-read);
  margin-inline: 0;
  padding-top: var(--gap-loose);
  border-top: 1px solid var(--line);
}
.start-grid > .prose h2 { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.625rem); line-height: 1.2; letter-spacing: -.02em; }
@media (min-width: 1024px) {
  .start-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-block); align-items: start; }
  .start-grid > .prose { max-width: none; }
}

/* Questions: each one is a ruled block; two balanced columns from 1024. */
.qa-list { max-width: var(--pvb-read); margin-inline: 0; }
.qa {
  padding-top: var(--gap-loose);
  border-top: 1px solid var(--line);
  margin-bottom: var(--gap-block);
  break-inside: avoid;
}
.qa h2 {
  margin: 0 0 var(--gap);
  font-size: clamp(1.375rem, 1.2rem + .6vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: -.02em;
}
.qa p + p { margin-top: var(--gap); }
@media (min-width: 1024px) {
  .qa-list { max-width: none; columns: 2; column-gap: var(--gap-block); }
}

/* ---------------------------------------------------------------- glossary */

/* One definition list at a reading measure. From 1024 the term sits in the
   left column and the definition in the right, the rule running the full
   width of the container; the definition's own padding holds it to the
   measure so the rule, not the text, meets the container's right edge. */
.glossary { margin: 0; }
.glossary dt, .glossary dd { margin: 0; }
.glossary dt {
  padding-top: var(--gap-loose);
  border-top: 1px solid var(--line);
  line-height: 1.3;
}
.glossary dd {
  margin-top: var(--gap-tight);
  padding-bottom: var(--gap-group);
  max-width: var(--pvb-read);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.65;
}
@media (min-width: 1024px) {
  .glossary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .glossary dt { grid-column: 1; padding-right: var(--gap-block); padding-bottom: var(--gap-group); }
  .glossary dd {
    grid-column: 2;
    margin: 0;
    padding-top: var(--gap-loose);
    padding-right: max(0px, calc(100% - var(--pvb-read)));
    border-top: 1px solid var(--line);
    max-width: none;
  }
}

/* ------------------------------------------------------------------- tools */

/* The tool is the panel; its notes sit beside it from 1024. Panels are never
   a centred narrow box: they take the container's column. */
.tool-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-group); }
.tool-split > .tool-panel { margin: 0; padding: var(--gap-loose); }
.tool-split > .prose { max-width: var(--pvb-read); margin-inline: 0; }
.tool-panel .calc { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
.tool-panel .calc-result { margin-top: var(--gap-group); }
@media (min-width: 768px) { .tool-split > .tool-panel { padding: var(--gap-group); } }
@media (min-width: 1024px) {
  .tool-split { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); column-gap: var(--gap-block); align-items: start; }
  .tool-split > .prose {
    max-width: none;
    position: sticky;
    top: calc(5rem + var(--gap-group));
    padding-top: var(--gap-loose);
    border-top: 1px solid var(--line);
  }
  .tool-split > .prose p { font-size: 1rem; }
}
/* Scorecard: from 1200 the question and its three answers share a row. */
@media (min-width: 1200px) {
  .tool-panel .q {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(3, 4.75rem);
    column-gap: var(--gap);
    align-items: center;
  }
  .tool-panel .q p { margin: 0; }
  .tool-panel .q label { margin-right: 0; }
}

/* ---------------------------------------------------------------- site index */

@media (max-width: 767px) {
  .sitemap__list a { display: flex; align-items: center; min-height: 2.75rem; }
}

/* --------------------------------------------------------------------- 404 */

.notfound { min-height: min(55vh, 30rem); padding-bottom: var(--section-y); }
.notfound .standfirst { margin-bottom: var(--gap-group); font-size: 1.25rem; }
.notfound__links { display: grid; justify-items: start; gap: 0; }
.notfound__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 1.125rem;
}
.notfound__links li:first-child a { font-weight: 500; }
.notfound__links li:not(:first-child) a { color: var(--text-2); }

/* ==== 40-calculator.css ==== */
/* PV-020 group C: the calculator page (/valuation-calculator/, body.page-calculator).
   Spatial thesis. The page is one task: read one promise, fill five short steps,
   press Continue. So the hero is the homepage hero's rhythm (h1 left, one
   standfirst right, tops aligned, the three reassurances as one quiet line), the
   form card leads at the container's left edge with the "Before you start" panel
   top-aligned and sticky beside it, and the closing reassurance is a ruled block
   with its heading left and its paragraph right, not a centred strip.
   What is deliberately NOT here: number fields, chips, steppers, the sticky step
   bar and the phone's fixed estimate sheet keep exactly the PV-016 / PV-011
   sizing and behaviour (they are gated). Nothing new moves.
   Specificity: the older calculator rules are .page-calculator / .stepsplit
   selectors in styles.css, so each override here carries the same or a longer
   selector and wins by coming later. */

/* ------------------------------------------------------------------- hero */

/* Kicker above; h1 left and standfirst right on one row from 1024, tops
   aligned; the three checks as one line under both. Below 1024 it is one
   column in the same order. */
.page-calculator .hero { padding-block: clamp(2rem, 1.2rem + 2.6vw, 4rem) var(--gap-block); border: 0; background: none; }
.page-calculator .hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}
.page-calculator .hero .kicker { grid-column: 1 / -1; margin: 0; }
.page-calculator .hero h1 { margin: 0; }
.page-calculator .hero .standfirst {
  max-width: var(--measure);
  margin: 0;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.125rem);
  line-height: 1.6;
  color: var(--text-2);
}
.page-calculator .calc-intro-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-tight) var(--gap-loose);
  margin: var(--gap-tight) 0 0;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--text-2);
}
@media (min-width: 1024px) {
  .page-calculator .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap-block); }
}
.page-calculator .hero + .section { padding-top: 0; }

/* -------------------------------------------------- form card and companion */

/* One card for the five steps, at the container's left edge, and the panel
   beside it in a fixed 22rem column from 1024. Both columns start on the same
   line; the panel (and the live estimate, which takes its slot once there is
   one) is sticky under the header, so it stays beside the fields as the card
   scrolls instead of leaving the column empty. */
.page-calculator .stepsplit { grid-template-columns: minmax(0, 1fr); gap: var(--gap-group); align-items: start; }
.page-calculator .stepsplit__form { padding: var(--gap-loose) var(--gap); }
@media (min-width: 768px) {
  .page-calculator .stepsplit__form { padding: var(--gap-group); }
}
@media (min-width: 1024px) {
  .page-calculator .stepsplit { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); }
  .page-calculator .stepsplit__form { grid-column: 1; grid-row: 1; }
  .page-calculator .calc-companion,
  .page-calculator .estimate {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--header-h) + var(--gap-loose));
    padding: var(--gap-loose);
  }
}

/* Below 1024 the panel follows the card. The grid gap already spaces them. */
@media (max-width: 1023px) {
  .page-calculator .calc-companion { margin-top: 0; padding: var(--gap-loose); border-radius: var(--radius); }
}

.page-calculator .calc-companion h2 { margin: var(--gap-tight) 0 var(--gap); }
.page-calculator .calc-companion > p { margin: 0; }
.page-calculator .calc-companion__block,
.page-calculator .calc-companion__block:first-of-type { margin-top: var(--gap-group); }
.page-calculator .calc-companion__label { margin: 0; }
.page-calculator .calc-companion ul { margin: var(--gap-tight) 0 0; }
/* Flex, so the tick stays beside a list item whose text is wrapped in a <p>
   (the item carrying the privacy link: a link inside a paragraph is exempt from
   the 44px target rule, as WCAG 2.5.5 exempts it). */
.page-calculator .calc-companion li { display: flex; gap: var(--gap-tight); padding-block: var(--gap-tight); }
.page-calculator .calc-companion li::before { margin-right: 0; flex: none; }
.page-calculator .calc-companion li > p { flex: 1; min-width: 0; }
.page-calculator .calc-companion > a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: var(--gap-loose);
}

/* --------------------------------------------------------------- inside a step */

.page-calculator .step__intro { margin-bottom: var(--gap-loose); }
.page-calculator .step .field { margin-bottom: var(--gap-loose); }
.page-calculator .step .field:last-child { margin-bottom: 0; }
/* Label to its control is the tightest gap on the page. Direct children only,
   so a label that IS a chip is untouched. */
.page-calculator .calc .field > label,
.page-calculator .calc .field > .field__label { margin-bottom: var(--gap-tight); }
.page-calculator .progress__time { margin: var(--gap-tight) 0 var(--gap-loose); }

/* Helper and status lines are 14 to 16px reading text: a column, not the card's
   width. --measure-lg, because at these sizes 60ch would strand a last word. */
.page-calculator .calc .helper,
.page-calculator .step__intro,
.page-calculator .gate__intro,
.page-calculator .resume__body { max-width: var(--measure-lg); }

/* The report gate is a group inside the card, not a second card: a rule above
   it, the same paper, no fill, no radius. */
.page-calculator .gate {
  margin-top: var(--gap-group);
  padding: var(--gap-loose) 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
}
.page-calculator .gate__heading { margin: 0 0 var(--gap-tight); }
.page-calculator .gate__intro { margin: 0 0 var(--gap); }

/* Step navigation: a rule, then the buttons. */
.page-calculator .stepnav { gap: var(--gap); padding-top: var(--gap-loose); margin-top: var(--gap-group); }
.page-calculator .stepnav + .helper { margin: var(--gap) 0 0; font-size: .875rem; line-height: 1.6; }
@media (max-width: 767px) {
  .page-calculator .stepnav { gap: var(--gap-tight); }
}

/* ----------------------------------------------- resume block and hand-offs */

.page-calculator .resume { padding: var(--gap-loose); margin-bottom: var(--gap-loose); border-radius: var(--radius); }
.page-calculator .resume__heading { margin: 0 0 var(--gap-tight); }
.page-calculator .resume__body { margin: 0 0 var(--gap); }
.page-calculator .resume__actions { gap: var(--gap); }

/* Once the report renders, the form gives way to one quiet way back, at the
   container's left edge like everything else. */
.page-calculator .calc-edit { max-width: none; margin: var(--gap-loose) 0 0; }
/* The finale is a transient status card: left-aligned in the container, with
   the scale's padding, not centred inside it. */
.page-calculator .finale-host { margin-top: var(--gap-block); }
.page-calculator .finale { margin-inline: 0; padding: var(--gap-group); }

/* ------------------------------------------------------------ closing block */

/* "A starting point for your next decision": ruled off from the card, heading
   left and paragraph right from 1024 (paragraph at the reading measure), one
   column below. It was a 78ch box centred in the container. */
.page-calculator .prose.section--tight {
  max-width: none;
  margin: var(--gap-block) 0 0;
  padding: var(--gap-group) 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}
.page-calculator .prose.section--tight > * { margin: 0; }
.page-calculator .prose.section--tight > p { max-width: var(--measure); }
@media (min-width: 1024px) {
  .page-calculator .prose.section--tight { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap-block); }
}

/* ==== 50-report.css ==== */
/* PV-020 group D: the report on screen. Owner: the D agent; nothing else in
   the site writes here. The report is written into #pv-report by report.js
   after the form is submitted, so every rule keys on the markup that file
   produces (sections carry data-section, see report.js sectionOpen).

   Spatial thesis. The report is the one page of the site a person acts on, so
   it uses the whole container: its left and right edges are the header's. The
   headline is the heaviest thing on it and takes the full width, its two
   routes side by side at equal weight (same size, same weight, no badge, no
   colour difference, PV-018X). Sets of equivalent items (factors, market
   conditions, readiness checks, benchmark figures) sit in equal columns.
   Narrative sections (what actually happens, your team, part sale, taking
   this further, the other route) split into a heading column on the left and
   a 60ch reading column on the right, so no body text is left with a void
   beside it.

   Screen only. Every rule below is inside @media screen, so the print
   stylesheet (and the PV-018X blank-final-page fix in it) is untouched. All
   space comes from the --gap-* and --section-y tokens; heading space above is
   larger than below. */

@media screen {

  /* ---------------------------------------------------------- the report */

  #pv-report { max-width: none; width: 100%; margin: var(--gap-block) 0 0; }
  #pv-report .report-section { margin-top: var(--gap-group); }
  #pv-report .report-section:first-child { margin-top: 0; }
  #pv-report [data-section="masthead"] { margin-bottom: var(--gap-loose); }
  #pv-report .report-logo { margin-bottom: var(--gap-loose); }

  /* Panels: one padding, from the tokens. */
  #pv-report > .report-section:not([data-section="masthead"]):not(footer):not(.report-more) {
    padding: var(--gap-loose) var(--gap);
  }
  @media (min-width: 768px) {
    #pv-report > .report-section:not([data-section="masthead"]):not(footer):not(.report-more) {
      padding: var(--gap-group);
    }
  }

  /* A section opens eyebrow, ruled heading, then its content. Space above the
     heading (the eyebrow, the panel edge) is smaller than the space that
     separates this section from the last; below the heading is one
     --gap-loose. */
  #pv-report .eyebrow { margin: 0 0 var(--gap-tight); }
  #pv-report > .report-section > h2 { padding-bottom: var(--gap); margin-bottom: var(--gap-loose); }
  #pv-report .intro, #pv-report .report-lede { max-width: var(--measure); margin: 0 0 var(--gap-loose); }
  #pv-report .report-section h3 { margin-bottom: var(--gap-tight); }
  #pv-report .report-section h3:not(:first-child) { margin-top: var(--gap-group); }
  #pv-report .note { margin-top: var(--gap); padding-left: var(--gap); max-width: var(--measure); }
  #pv-report .fee { margin-top: var(--gap); }
  .report-meta { margin: var(--gap) 0 0; }

  /* ------------------------------------------------------------ headline */

  .hl-cards { gap: var(--gap-loose); margin-top: 0; }
  /* One card per row until 1024: two side by side under that leave a payment
     row wrapping onto two lines. */
  .cards { grid-template-columns: minmax(0, 1fr); }
  .cards:has(> .card:only-child) { max-width: none; }
  .hl-card { padding: var(--gap-loose); }
  .hl-card > .k { margin-bottom: var(--gap); }
  .hl-card > .v { margin: var(--gap-tight) 0 var(--gap-tight); }
  .hl-card .basis, .hl-card__note, .hl-own { margin: 0 0 var(--gap); max-width: var(--measure); }
  .card .basis { max-width: var(--measure); }
  #pv-report .hl-card .hl-card__heading { margin: var(--gap-loose) 0 var(--gap-tight) !important; }
  .hl-parts, .hl-income { margin: 0 0 var(--gap); }
  .hl-part, .hl-income > div { padding: var(--gap-tight) 0; gap: 0 var(--gap); }
  .hl-total { padding-top: var(--gap); gap: 0 var(--gap); }
  .hl-card__label { min-height: 0; }
  .hl-tax { margin: var(--gap-group) 0 0; }
  .hl-terms, .hl-age-note, #pv-report [data-section="headline"] > p { max-width: var(--measure); }
  .hl-terms { margin-top: var(--gap-tight); }
  .hl-age-note { margin-top: var(--gap); }
  #pv-report [data-section="headline"] .report-lede { margin: var(--gap-group) 0 0; }

  @media (max-width: 719px) {
    #pv-report > .report-section > h2 { margin-bottom: var(--gap); }
    .hl-card { padding: var(--gap); }
  }

  @media (min-width: 1024px) {
    .hl-card__label { min-height: 3em; }
    .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* The headline is a two-column grid whose columns are the cards' columns:
       heading, intro and the two cards run the full width; the notes under
       the cards sit in the left column and the lede and the date in the
       right, so the small print lines up with the card above it. */
    #pv-report [data-section="headline"] {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--gap-loose);
      row-gap: 0;
      align-content: start;
    }
    #pv-report [data-section="headline"] > * { grid-column: 1; min-width: 0; margin-block: var(--gap) 0; }
    #pv-report [data-section="headline"] > .eyebrow { grid-column: 1 / -1; grid-row: 1; margin: 0 0 var(--gap-tight); }
    #pv-report [data-section="headline"] > h2 { grid-column: 1 / -1; grid-row: 2; margin: 0 0 var(--gap-loose); }
    #pv-report [data-section="headline"] > .intro { grid-column: 1 / -1; grid-row: 3; margin: 0 0 var(--gap-loose); }
    #pv-report [data-section="headline"] > .cards { grid-column: 1 / -1; grid-row: 4; margin: 0; }
    #pv-report [data-section="headline"] > .hl-tax,
    #pv-report [data-section="headline"] > .report-lede { margin-top: var(--gap-group); }
    #pv-report [data-section="headline"] > .report-lede { grid-column: 2; grid-row: 5; margin-bottom: 0; }
    #pv-report [data-section="headline"] > .report-meta { grid-column: 2; grid-row: 6; margin-top: var(--gap); }
    #pv-report [data-section="headline"] > .hl-terms,
    #pv-report [data-section="headline"] > .hl-age-note { margin-top: var(--gap); }
    #pv-report [data-section="headline"] > .note { margin-top: var(--gap); }

    /* One route only: the card takes the left column and everything that
       follows sits beside it in the right, from the card's top edge. The
       last row is 1fr so the card's height is absorbed there and the notes
       are sized by their own content, not stretched to the card. */
    #pv-report [data-section="headline"]:has(.hl-cards > .card:only-child) {
      grid-template-rows: repeat(3, auto) repeat(12, auto) 1fr;
    }
    #pv-report [data-section="headline"]:has(.hl-cards > .card:only-child) > .cards { grid-column: 1; grid-row: 4 / -1; }
    #pv-report [data-section="headline"]:has(.hl-cards > .card:only-child) > :not(.eyebrow):not(h2):not(.intro):not(.cards) {
      grid-column: 2; grid-row: auto; margin-top: var(--gap);
    }
    #pv-report [data-section="headline"]:has(.hl-cards > .card:only-child) > .hl-tax.hl-tax { margin-top: 0; }
  }

  /* ------------------------------------------------------------- factors */

  .factors { gap: var(--gap-group); }
  .factors__group > h2 { margin: 0 0 var(--gap); padding-bottom: var(--gap); }
  .factor { padding: var(--gap) 0; gap: var(--s1) var(--gap); }
  .factors__unsure { margin: var(--gap) 0 0; max-width: var(--measure); }
  .factors__call { margin: var(--gap-group) 0 0; max-width: var(--measure); }
  .factor__label { max-width: var(--measure); }
  /* Two lists side by side only from 1200: under that a label (with its size
     mark beside it) falls below 45 characters a line. */
  @media (min-width: 768px) and (max-width: 1199px) { .factors { grid-template-columns: minmax(0, 1fr); } }
  @media (min-width: 1200px) {
    .factors { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-block); row-gap: var(--gap-group); }
  }

  /* --------------------------------------------------- market conditions */

  .conditions { gap: var(--gap); margin-top: 0; }
  .condition { padding: var(--gap) var(--gap-loose); }
  .condition p { max-width: var(--measure); }
  #pv-report .condition h3 { margin: 0 0 var(--gap-tight); }
  @media (min-width: 768px) and (max-width: 1023px) { .conditions { grid-template-columns: minmax(0, 1fr); } }
  @media (min-width: 1024px) { .conditions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-loose); } }

  /* ----------------------------------------------------------- readiness */

  .score { margin-bottom: var(--gap-tight); gap: var(--s1); }
  .ready { gap: var(--gap-tight); margin-top: 0; }
  .check { padding: var(--gap) var(--gap); gap: var(--gap); }
  .check__lines { gap: var(--s1) var(--gap); margin: var(--gap-tight) 0 0; }
  .check__lines dd { max-width: var(--measure); }
  /* Two checks side by side only where a check's text stays over 45
     characters a line; under that they run one to a row. */
  @media (min-width: 1200px) {
    .ready { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
  }

  /* --------------------------------------------------------- the narrative
     sections (your team, part sale, taking this further, the other route).
     Heading column left, reading column right (from 1024). The
     first block after the heading spans every row so the eyebrow and the
     heading keep their own height whatever the body does; the rest stack
     under it in the right column. */
  .happens__part { grid-template-columns: minmax(0, 1fr); gap: var(--gap-tight); padding: var(--gap-loose) 0; }
  .happens__part:last-child { border-bottom: 0; padding-bottom: 0; }
  .happens__part p { margin: 0 0 var(--gap); max-width: var(--measure); }
  #pv-report [data-section="team"] > p:not([class]),
  #pv-report [data-section="part-sale"] > p:not([class]),
  #pv-report [data-section="other-route"] p { margin: 0 0 var(--gap); max-width: var(--measure); }
  #pv-report [data-section="team"] h3 { margin: var(--gap-group) 0 var(--gap-tight); }
  #pv-report [data-section="team"] > .small.muted,
  #pv-report [data-section="part-sale"] > .small.muted { margin: var(--gap-loose) 0 0; padding-top: var(--gap); max-width: var(--measure); }
  #pv-report [data-section="other-route"] { padding: var(--gap-loose) var(--gap); }
  @media (min-width: 768px) { #pv-report [data-section="other-route"] { padding: var(--gap-group); } }
  .next-action { display: grid; justify-items: start; gap: var(--gap); margin-top: 0; padding: var(--gap-loose); }
  .next-action__note { max-width: var(--measure); }

  @media (min-width: 1024px) {
    /* What actually happens keeps its own rows: each part's label on the
       left, its text in the reading column on the right, so the labels use
       the left column instead of a heading standing alone in it. */
    .happens__part { grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure)); column-gap: var(--gap-block); }
    #pv-report [data-section="team"],
    #pv-report [data-section="part-sale"],
    #pv-report [data-section="next"],
    #pv-report [data-section="other-route"] {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure));
      grid-template-rows: auto 1fr;
      column-gap: var(--gap-block);
      row-gap: 0;
      align-content: start;
    }
    #pv-report [data-section="team"] > *,
    #pv-report [data-section="part-sale"] > *,
    #pv-report [data-section="next"] > *,
    #pv-report [data-section="other-route"] > * { grid-column: 2; min-width: 0; }
    #pv-report [data-section="team"] > .eyebrow,
    #pv-report [data-section="part-sale"] > .eyebrow,
    #pv-report [data-section="next"] > .eyebrow,
    #pv-report [data-section="other-route"] > .eyebrow { grid-column: 1; grid-row: 1; }
    #pv-report [data-section="team"] > h2,
    #pv-report [data-section="part-sale"] > h2,
    #pv-report [data-section="next"] > h2,
    #pv-report [data-section="other-route"] > h2 { grid-column: 1; grid-row: 2; align-self: start; margin-bottom: 0; }
    /* The block right after the heading runs alongside both heading rows. */
    #pv-report [data-section="team"] > h2 + *,
    #pv-report [data-section="part-sale"] > h2 + *,
    #pv-report [data-section="next"] > h2 + *,
    #pv-report [data-section="other-route"] > h2 + * { grid-row: 1 / -1; }
    #pv-report [data-section="team"] > .intro,
    #pv-report [data-section="part-sale"] > .intro { margin-bottom: var(--gap-group); }
    #pv-report [data-section="next"] > .next-action { margin-bottom: 0; }
    #pv-report [data-section="next"] > .fee,
    #pv-report [data-section="other-route"] > .report-rerun-note { margin-top: var(--gap); }
    #pv-report [data-section="other-route"] .report-cta { justify-self: start; margin-top: var(--gap-tight); }
  }

  /* --------------------------------------------------------- more detail */

  #pv-report > .report-more { padding: var(--gap-group) 0 0; margin-top: var(--gap-block); }
  #pv-report > .report-more > h2 { margin-bottom: var(--gap); }
  #pv-report .report-more .report-section { margin-top: var(--gap-block); padding-top: var(--gap-loose); }
  #pv-report .report-more .report-section:first-of-type { margin-top: var(--gap-group); }
  #pv-report .report-more .report-section h2 { margin-bottom: var(--gap); }
  #pv-report footer.report-section { margin-top: var(--gap-group); padding-top: var(--gap); }
  #pv-report footer .calc-disclaimer { max-width: var(--measure); margin: 0; padding-top: 0; border-top: 0; }
  /* Small print under a table or a section head is a line of text like any
     other: never wider than the measure. */
  #pv-report :where(.report-section > p, .bench-lead > p) { max-width: var(--measure); }
  #pv-report .scroll + p { margin-top: var(--gap-tight); }

  .tbl, .mix { margin-top: var(--gap-tight); }
  .tbl th, .tbl td, .mix th, .mix td { padding: var(--gap-tight) var(--gap); }
  .facts { gap: var(--gap-tight); margin-top: var(--gap); }
  .fact { padding: var(--gap) var(--gap); }
  .market { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--gap); margin-top: var(--gap-tight); }
  .stat { padding: var(--gap); }
  .bench { margin-bottom: var(--gap-loose); }
  #pv-report .eyebrow.bench-published { margin-top: var(--gap-group); }
  .worked { margin-top: var(--gap); }
  .cards.worked { gap: var(--gap-loose); }
  .card { padding: var(--gap-loose); }
  .glance { gap: var(--gap-loose) var(--gap-group); margin-top: var(--gap); }
  .legend { gap: var(--gap-tight); }
  .legend li { gap: var(--gap-tight) var(--gap); }
  .pills { gap: var(--gap-tight); margin-top: var(--gap); }
  .bar { margin-top: var(--gap-loose); }

  @media (min-width: 1024px) {
    .cards.worked { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* The at-a-glance block is three parts: chart, key, and the bar with its
       pills. The key sits beside the chart and the bar and pills beside the
       key, so the row uses the container instead of leaving its right half
       empty. */
    .glance { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
    .glance__key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-loose) var(--gap-group); align-items: start; }
    .glance__key > .legend { grid-column: 1; grid-row: 1 / span 2; }
    .glance__key > .bar { grid-column: 2; grid-row: 1; margin: 0; }
    .glance__key > .pills { grid-column: 2; grid-row: 2; margin: 0; }
  }

  /* ------------------------------------------------------------- actions */

  .report-actions { justify-content: flex-start; margin-top: var(--gap-group); gap: var(--gap); }
}

/* ==== 60-integration.css ==== */
/* PV-020 integration layer, owned by the lead run. Loads last.
   Applied after the independent critics' round: the reading templates (article,
   hub, legal and policy pages, methodology, checklist, about) left a 550 to 580px
   reading column at the container's left edge with a thin rail at its far right
   and 330px of paper between. Two answers, one per shape of page:
   - a LONG reading page (article, legal, policy, methodology, checklist, about) is
     a PAIR: the reading column and its rail sit together (one gap apart) and the
     pair is centred in the container, so the paper left over is a margin on each
     side and not a hole on one;
   - a SHORT introduction (the guide hubs' five paragraphs) runs in two columns
     across the container, which is what a short essay is at that width.
   The header, hero, lists and footer stay on the container's own edges. */

@media (min-width: 1024px) {
  /* long reading pages: the pair */
  .article__layout,
  .article__foot {
    grid-template-columns: minmax(0, var(--read-article)) minmax(12rem, 20rem);
    justify-content: center;
    column-gap: var(--gap-block);
  }
  .page-split {
    grid-template-columns: minmax(0, var(--pvb-read)) minmax(12rem, 16rem);
    justify-content: center;
  }
  .about-grid {
    grid-template-columns: minmax(0, var(--pvb-read)) minmax(12rem, 18rem);
    justify-content: center;
  }

  /* hub: the introduction in two columns, the scale as a strip above the list */
  .page-inner .section .wrap:has(> .alist__scale) { grid-template-columns: minmax(0, 1fr); }
  .page-inner .section .wrap:has(> .alist__scale) > .prose {
    max-width: none;
    columns: 2;
    column-gap: var(--gap-block);
  }
  .page-inner .section .wrap:has(> .alist__scale) > .prose p { break-inside: avoid; }
  .page-inner .section .wrap:has(> .alist__scale) > .prose p:first-child { margin-top: 0; }
  .page-inner .section .wrap:has(> .alist__scale) > .alist__scale {
    grid-column: 1;
    grid-row: auto;
    position: static;
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--gap-block);
    margin: 0;
    padding: 0;
    border-top: 0;
  }
  .page-inner .section .wrap:has(> .alist__scale) > .alist__scale .alist__scale-part { flex: 0 0 auto; border-bottom: 0; padding-block: 0; }
  .page-inner .section .wrap:has(> .alist__scale) > h2 { margin: var(--gap-block) 0 var(--gap); }
}

/* Where a page has one wide column that is not text, the article figures and hero
   images keep their own sizes; only the reading pair moves. */

/* the reading size steps up where the column has room (about 70 characters a line) */
@media (min-width: 1200px) {
  :root { --read-article: 56ch; --pvb-read: 38rem; }
  .article__body { font-size: 1.1875rem; line-height: 1.75; }
}

/* footer: the legal row's two columns sit on the link grid above (the Tools column line) */
@media (min-width: 1024px) {
  .site-footer__base {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    justify-content: normal;
  }
  .site-footer__policy { grid-column: 1 / -1; }
  .site-footer__disclaimer { grid-column: 1 / span 2; }
  .site-footer__legal { grid-column: 3 / span 2; }
}
.site-footer__base p { max-width: 62ch; }

/* three home blocks: the link sits on one line across the row */
@media (min-width: 1200px) {
  .home-block { grid-template-rows: auto 1fr auto; }
}

/* captions are 13px at the least */
.article__figure figcaption, .hub-hero__figure figcaption, .library-figure figcaption, figure figcaption small { font-size: .8125rem; }
.wrap figcaption small { font-size: inherit; }
.guidegroup__lead-media small { font-size: .8125rem; }

/* first visit on a phone: the analytics sheet is compact, so it leaves the calculator's card readable */
@media (max-width: 639px) {
  .consent-notice { padding: var(--gap); }
  .consent-notice h2 { margin: 0 0 var(--gap-tight); font-size: 1rem; }
  .consent-notice p { margin: 0 0 var(--gap-tight); font-size: .875rem; line-height: 1.45; }
  .consent-notice__actions { margin-top: var(--gap-tight); }
}