/* ============================================================
   Simple Roots Therapy — design tokens and components

   Zero JavaScript. Zero external requests. No build step.
   Light theme only, for every visitor, on every device.

   Token layers, in order:
     1. brand      — the supplied palette, named as supplied
     2. role       — what a colour is FOR, mapped from layer 1
     3. scale      — spacing, type, radii, borders, motion, layout

   Components below reference layer 2 and 3 only. Nothing outside
   the :root block should contain a raw hex, length or duration.
   ============================================================ */

:root{
  /* ---- 1. BRAND PALETTE (as supplied) ------------------- */
  --brand-sage:   #6A8D95;   /* Calming Eucalyptus Green */
  --brand-slate:  #2B3A4A;   /* Clinical Trust Slate     */
  --brand-linen:  #F7F5F0;   /* Soothing Warm Neutral    */
  --brand-ochre:  #D4A373;   /* Gentle Warmth Accent     */
  --brand-plum:   #825358;   /* Accent                   */
  --brand-white:  #FFFFFF;   /* Card background          */

  /* Darker steps on the same hues. Sage measures 3.29:1 on linen,
     below the 4.5:1 text floor; ochre 2.08:1, below even the 3:1
     graphics floor. These are the compliant variants. */
  --brand-sage-deep:   #58757C;  /* 4.53:1 linen / 4.94:1 white */
  --brand-sage-deeper: #496167;  /* 6.04:1 linen                */
  --brand-ochre-deep:  #8A6A4B;

  /* The logo's own colour, sampled from the supplied artwork rather than
     chosen. It sits outside the sage/slate/linen/ochre kit deliberately —
     the logo keeps its colour and is not redrawn in the palette. 7.44:1 on
     linen. Reaches the masthead logo and the browser icons through
     --logo-ink and must not be used for anything else; see the README. */
  --brand-maroon: #7A3B43;  /* 4.54:1 linen — text-safe    */

  color-scheme: light;

  /* ---- 2. ROLE TOKENS ----------------------------------- */
  /* surfaces */
  --surface-page:      var(--brand-linen);
  --surface-raised:    var(--brand-white);
  --surface-card:      var(--brand-white);

  /* text — three steps, never pure black on a light ground */
  --text-strong:       var(--brand-slate);   /* headings        */
  --text-body:         #4A5568;              /* prose           */
  --text-muted:        #55636F;              /* secondary prose */
  --text-subtle:       #5F6E79;              /* eyebrows, captions */

  /* lines */
  --border-strong:     #E0DCD2;
  --border-subtle:     #EBE7DE;

  /* interactive */
  --action:            var(--brand-sage-deep);
  --action-hover:      var(--brand-sage-deeper);
  --action-on:         var(--brand-white);

  /* accent — the brand kit's #825358, measured at 5.79:1 on linen and
     6.31:1 on white, so unlike sage and ochre it can carry text. It is
     given the small uppercase labels, the diagram centre and the icons,
     which puts it on every page without competing with the sage that
     signals "this is a link". */
  --accent:            var(--brand-plum);
  --label-accent:      var(--accent);

  /* graphics — 3:1 non-text threshold, never carries text */
  --graphic-primary:   var(--brand-sage);
  --graphic-warm:      var(--brand-ochre);
  --graphic-line:      var(--brand-slate);
  --graphic-band:      #E4EAEA;
  /* Diagram emblems: the ring colour two steps darker, so fine line work —
     the fingerprint ridges, the tree's leaf stipple — still reads at the
     size the circles allow. 6.04:1 on linen. */
  --graphic-motif:     var(--brand-sage-deeper);

  /* brand marks */
  --logo-ink:          var(--brand-maroon);

  /* ---- 3a. SPACING SCALE -------------------------------- */
  --space-3xs: 0.125rem;  --space-2xs: 0.25rem;  --space-xs:  0.375rem;
  --space-sm:  0.5rem;    --space-md:  0.75rem;  --space-lg:  1rem;
  --space-xl:  1.25rem;   --space-2xl: 1.5rem;   --space-3xl: 2rem;
  --space-4xl: 2.5rem;    --space-5xl: 3rem;     --space-6xl: 3.5rem;
  --space-7xl: 4rem;      --space-8xl: 5rem;

  /* section rhythm — one token, not ad hoc values */
  --space-section:      var(--space-5xl);
  --space-section-tight:var(--space-4xl);

  /* ---- 3b. TYPE ----------------------------------------- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
                "Times New Roman", serif;

  /* Every step is fluid: the middle term is viewport-relative, so the
     scale interpolates continuously rather than stepping at breakpoints. */
  --type-h1:      clamp(2rem, 1.2rem + 4vw, 3.5rem);            /* 32 → 56 */
  --type-h2:      clamp(1.75rem, 1.4rem + 1.75vw, 2.125rem);    /* 28 → 34 */
  --type-h3:      clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);      /* 17 → 20 */
  --type-lead:    clamp(1.25rem, 1.15rem + 0.5vw, 1.375rem);    /* 20 → 22 */
  --type-body:    clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);     /* 16 → 17 */
  --type-caption: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem); /* 14 → 15 */
  --type-eyebrow: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);   /* 12 → 13 */
  --type-label:   clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem);   /* 12 → 14 */
  --type-button:  clamp(0.9375rem, 0.92rem + 0.15vw, 1rem);     /* 15 → 16 */

  /* unitless throughout, so they inherit proportionally */
  --leading-tight: 1.1;   --leading-snug: 1.2;   --leading-heading: 1.35;
  --leading-lead: 1.55;   --leading-body: 1.6;   --leading-caption: 1.5;

  --tracking-tight: -0.02em;  --tracking-snug: -0.015em;
  --tracking-label: 0.08em;   --tracking-eyebrow: 0.14em;

  --weight-regular: 400;  --weight-semi: 600;  --weight-bold: 700;

  /* ---- 3c. RADII (three steps) -------------------------- */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-pill: 50%;

  /* ---- 3d. BORDER WIDTHS (three steps) ------------------ */
  --border-hairline: 1px;
  --border-medium:   1.5px;
  --border-thick:    3px;

  /* ---- 3e. MOTION --------------------------------------- */
  --dur-instant: 0ms;
  --dur-fast:    160ms;
  --dur-base:    320ms;
  --dur-slow:    640ms;
  --ease-entrance: cubic-bezier(0.2, 0.9, 0.3, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --ease-emphasis: cubic-bezier(0.33, 0.68, 0.42, 1);

  /* ---- 3f. ELEVATION (two steps, deliberately subtle) --- */
  --elevation-none: none;
  --elevation-raised: 0 1px 2px rgb(43 58 74 / 0.04);

  /* ---- 3g. LAYOUT --------------------------------------- */
  --measure-prose: 34rem;   /* body copy never exceeds this */
  --measure-wide:  42rem;   /* lists, tables, definition rows */
  --container:     64rem;
  --container-gutter: var(--space-4xl);

  /* Icons are masks rather than <img>, so one declaration draws them in
     the accent colour and forced-colours mode can repaint them. */
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 11.3a9.4 9.4 0 1 1-3.4-6.4'/%3E%3Cpath d='M7.2 12.3l4.3 4.3L22 5.6'/%3E%3C/svg%3E");

  --layer-base:    0;
  --layer-raised:  10;
  --layer-sticky:  50;
  --layer-skip:    100;
}

@media (prefers-contrast: more){
  :root{
    --text-body: var(--text-strong);
    --text-muted: var(--text-strong);
    --text-subtle: var(--text-strong);
    --border-strong: var(--text-subtle);
    /* the accent clears AA at 5.79:1, but this mode asks for more than AA */
    --label-accent: var(--text-strong);
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-body);
  font-family:var(--font-serif);
  font-size:var(--type-body);
  line-height:var(--leading-body);
}
.wrap{ width:min(100% - var(--container-gutter), var(--container)); margin-inline:auto; }

/* A long unbreakable token — an email address, a URL — must wrap rather than
   push the whole page sideways. 'anywhere' rather than 'break-word' on the
   links: only 'anywhere' reduces min-content width, which is the figure a
   grid or flex track actually measures when deciding how wide to be. */
body{ overflow-wrap:break-word; }
a[href^="mailto:"], a[href^="http"]{ overflow-wrap:anywhere; }

.skip{
  position:absolute; inset-inline-start:-9999px; inset-block-start:0;
  z-index:var(--layer-skip);
  background:var(--action); color:var(--action-on);
  font-family:var(--font-sans); font-size:var(--type-caption);
  font-weight:var(--weight-semi);
  padding-block:var(--space-md); padding-inline:var(--space-xl);
  text-decoration:none;
}
.skip:focus{ inset-inline-start:var(--space-md); inset-block-start:var(--space-md); }

/* ---------- Type ----------
   Sans for functional UI — headings, buttons, labels.
   Serif for narrative — leads, prose, captions. */
h1,h2,h3{
  font-family:var(--font-sans); font-weight:var(--weight-semi);
  color:var(--text-strong); text-wrap:balance;
}
h1{ font-size:var(--type-h1); line-height:var(--leading-tight); letter-spacing:var(--tracking-tight); margin:0 0 var(--space-xl); max-width:22ch; }
h2{ font-size:var(--type-h2); line-height:var(--leading-snug); letter-spacing:var(--tracking-snug); margin:0 0 var(--space-lg); }
h3{ font-size:var(--type-h3); line-height:var(--leading-heading); margin:0 0 var(--space-xs); }
p{ margin:0 0 var(--space-lg); max-width:var(--measure-prose); text-wrap:pretty; }

.lede{
  font-family:var(--font-serif); font-size:var(--type-lead);
  line-height:var(--leading-lead); color:var(--text-body);
  max-width:var(--measure-wide);
}

/* Any sans below 14px is uppercase with tracking — baked into the
   utility so it cannot be applied incorrectly. */
.eyebrow{
  font-family:var(--font-sans); font-size:var(--type-eyebrow);
  font-weight:var(--weight-semi); letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:var(--label-accent);
  margin:0 0 var(--space-md);
}
.section-lead{
  font-family:var(--font-sans); font-size:var(--type-label);
  font-weight:var(--weight-bold); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--label-accent);
  margin:0 0 var(--space-2xl);
}

/* Figures align: fees, durations, phone numbers, dates. */
.creds dd, .contact-lines li, .updated, .day-marks dd{ font-variant-numeric:tabular-nums; }

a{
  color:var(--action); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:0.16em;
  text-decoration-color:color-mix(in srgb, currentColor 45%, transparent);
  transition:color var(--dur-fast) var(--ease-exit),
             text-decoration-color var(--dur-fast) var(--ease-exit);
}
a:hover{ color:var(--action-hover); text-decoration-color:currentColor; }
:focus-visible{ outline:var(--border-medium) solid var(--action); outline-offset:3px; border-radius:var(--radius-sm); transition:none; }

/* WCAG 2.2 SC 2.5.8 — standalone controls need a 24x24 target.
   Links inside a sentence are exempt and left alone. */
.nav a, .foot-nav a, .foot-meta a, .crumbs a, .next a, .back,
.contact-lines a, .ticks li > a{
  display:inline-block; min-block-size:24px; padding-block:var(--space-3xs);
}

/* ---------- Header ---------- */
.masthead{
  border-block-end:var(--border-hairline) solid var(--border-strong);
  padding-block:var(--space-xl); background:var(--surface-page);
}
.masthead .wrap{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-lg); }
.brand{ display:flex; }
.wordmark{
  display:flex; align-items:center; gap:var(--space-lg);
  text-decoration:none; color:var(--text-strong);
}

/* The logo is a mask, not an <img>: the artwork supplies the shape and
   --logo-ink supplies the colour, so the mark follows the palette and
   forced-colours mode can substitute its own. It sits on the inline-start
   side of the wordmark text, sized to the bar rather than the other way
   round. aspect-ratio holds the box open before the mask loads, which is
   what keeps CLS at zero. */
.wordmark .logo{
  display:block; flex:none; inline-size:clamp(4.75rem, 24vw, 7.5rem);
  block-size:auto; aspect-ratio:520 / 295; fill:var(--logo-ink);
}
.brand-text{ display:flex; flex-direction:column; gap:var(--space-2xs); }
.brand-name{
  font-family:var(--font-sans); font-weight:var(--weight-semi);
  font-size:clamp(1.125rem, 1rem + 0.8vw, 1.5rem);
  line-height:var(--leading-snug); letter-spacing:var(--tracking-snug);
}
.masthead .role{
  font-family:var(--font-sans); font-size:var(--type-eyebrow);
  font-weight:500; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--label-accent);
}
.nav{
  display:flex; flex-wrap:wrap; gap:var(--space-2xs) var(--space-xl);
  font-family:var(--font-sans); font-size:var(--type-caption); font-weight:500;
}
.nav a{ color:var(--text-muted); text-decoration:none; }
.nav a:hover{ color:var(--action); }
/* current page is marked by weight and a rule, not colour alone */
.nav a[aria-current="page"]{
  color:var(--text-strong); font-weight:var(--weight-semi);
  border-block-end:var(--border-medium) solid var(--action);
}

/* ---------- Hero ---------- */
.hero{ padding-block:var(--space-7xl) var(--space-5xl); }
.hero .lede{ margin-block-end:var(--space-2xl); }

/* Brand lockup: the wide logo sits beside the headline. width/height are
   on the <img> so the box is reserved before the image arrives and CLS
   stays at zero. */
.hero-lockup{ display:flex; align-items:center; gap:var(--space-4xl); flex-wrap:wrap; }
.hero-logo{ flex:none; display:block; }
.hero-logo img{ display:block; inline-size:240px; block-size:auto; }
.hero-text{ flex:1 1 22rem; min-inline-size:0; }

/* ============================================================
   THREE ROOTS — the practice's conceptual model, as a component.

   One geometry, used at every size. The full diagram and the three
   single-root marks share the identical circle coordinates
   (280,150 / 200,285 / 360,285, r=110); the marks are simply a
   cropped viewBox over the same drawing, so they are the same
   family by construction rather than by resemblance.

   Strokes use vector-effect:non-scaling-stroke, so optical weight
   is constant whether the mark renders at 20px or the diagram at
   900px. No hardcoded colour — everything comes from tokens, so a
   palette change propagates without touching the markup.
   ============================================================ */
.pillars{ margin-block-start:var(--space-4xl); }
.pillars svg{
  display:block; inline-size:100%;
  /* min(280px, 100%) so the floor never exceeds the space available. A bare
     280px floor overflowed a 320px phone whose owner had raised the default
     font size, because the gutter scales with the root font and the column
     drops below 280px. An illegibly small diagram is a much smaller problem
     than a page that scrolls sideways. */
  min-inline-size:min(280px,100%);
  /* Capped at the 660-unit viewBox width, so the type inside the diagram
     renders at the size it was drawn at rather than scaling up past the
     prose beside it. The emblem sizes in scripts/prepare-images.py are
     derived from this number — change it and they need recomputing. */
  max-inline-size:41.25rem;
  block-size:auto; margin-inline:auto; overflow:visible;
  /* No emblem can be selected or dragged out of the diagram. The rest of
     that story — why there is no <img> on the site — is in docs/IMAGES.md. */
  -webkit-user-select:none; user-select:none; -webkit-user-drag:none;
}
/* These rest translucent so the circles read as overlapping sets rather
   than one solid shape. The value lives in a token because it is needed in
   three places — here, the entrance keyframes, and the reduced-motion
   fallback — and a shared fadeIn to opacity:1 silently flattened the
   diagram once already. */
.pillars{ --pl-fill-rest:0.10; --pl-core-rest:0.22; --pl-ring-rest:0.45; }
.pl-ring{ fill:none; stroke:var(--graphic-primary); stroke-width:1.6; }
.pl-fill{ fill:var(--graphic-primary); opacity:var(--pl-fill-rest); }
.pl-core{ fill:var(--graphic-warm); opacity:var(--pl-core-rest); }
.pl-core-ring{ fill:none; stroke:var(--accent); stroke-width:1.4; opacity:var(--pl-ring-rest); }
/* The emblems. Each is a plain rectangle wearing an artwork mask, so the
   colour is set here rather than baked into the file — which is what lets
   forced-colours mode substitute its own ink. */
.pl-motif{ fill:var(--graphic-motif); }

/* Home page: each circle is a link to the page it stands for. */
.pl-hit{ fill:transparent; cursor:pointer; }
.pl-link:focus-visible{ outline:none; }
.pl-link:focus-visible .pl-hit,
.pl-link:hover .pl-hit{ fill:var(--graphic-primary); fill-opacity:0.12; }
.pl-link:focus-visible .pl-ring{ stroke:var(--action); stroke-width:3; }

/* ---------- Single-root marks, derived from the same geometry ---------- */
.root-mark{
  display:inline-block; vertical-align:middle;
  inline-size:var(--mark-size, 1.5rem); block-size:var(--mark-size, 1.5rem);
  flex:none;
}
.rm-dim{
  fill:none; stroke:var(--graphic-primary); stroke-width:1;
  vector-effect:non-scaling-stroke; opacity:0.32;
}
.rm-on{
  fill:var(--graphic-primary); fill-opacity:0.16;
  stroke:var(--graphic-primary); stroke-width:1.75;
  vector-effect:non-scaling-stroke;
}
/* A section heading marked with the root it belongs to. */
.rooted{ display:flex; align-items:center; gap:var(--space-md); }
.rooted h2, .rooted h3{ margin-block-end:0; }
.pl-label{ font-family:var(--font-sans); font-size:17px; font-weight:var(--weight-semi); fill:var(--text-strong); text-anchor:middle; }
.pl-sub{ font-family:var(--font-sans); font-size:12px; font-weight:500; letter-spacing:0.06em; fill:var(--label-accent); text-anchor:middle; text-transform:uppercase; }
.pl-centre{ font-family:var(--font-sans); font-size:15px; font-weight:var(--weight-semi); fill:var(--text-strong); text-anchor:middle; }
.pl-centre-sub{ font-family:var(--font-sans); font-size:12.5px; font-weight:500; fill:var(--text-muted); text-anchor:middle; }

/* min(14rem, 100%) for the same reason as .cards — a bare rem minimum in an
   auto-fit track is a fixed floor that does not know how much room it has,
   and rem grows with the visitor's font setting. */
.pillar-notes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr)); gap:var(--space-2xl); margin-block-start:var(--space-3xl); }
.pillar-notes h3{ font-size:var(--type-label); font-weight:var(--weight-bold); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--label-accent); margin-block-end:var(--space-xs); }
.pillar-notes p{ font-size:var(--type-caption); color:var(--text-muted); margin:0; max-width:none; }

/* ---------- Demand vs capacity graphic ---------- */
.day{ margin-block-end:var(--space-lg); }
.day svg{ display:block; inline-size:100%; block-size:auto; overflow:visible; }
.cap-band{ fill:var(--graphic-band); }
.cap-edge{ stroke:var(--border-strong); stroke-width:1; stroke-dasharray:3 5; fill:none; }
.demand-line{ fill:none; stroke:var(--graphic-line); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.node{ fill:var(--surface-page); stroke:var(--graphic-line); stroke-width:2; }
.stem{ stroke:var(--border-strong); stroke-width:1; }
.cap-tag{ font-family:var(--font-sans); font-size:11px; font-weight:var(--weight-semi); letter-spacing:0.1em; text-transform:uppercase; fill:var(--label-accent); }

.day-marks{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--space-lg); margin-block-start:var(--space-2xs); }
.day-marks dt{
  font-family:var(--font-sans); font-size:var(--type-label);
  font-weight:var(--weight-bold); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--label-accent); margin-block-end:var(--space-2xs);
}
.day-marks dd{ margin:0; font-size:var(--type-caption); line-height:var(--leading-caption); color:var(--text-muted); }

.legend{
  font-family:var(--font-sans); font-size:var(--type-caption);
  color:var(--text-subtle); margin-block:var(--space-2xl) 0;
  max-width:var(--measure-wide); line-height:1.9;
}
/* No white-space:nowrap. It kept each swatch beside its whole label, but a
   label like "What you have available that day" cannot fit on one line at a
   large default font size and pushed the page sideways instead. Wrapping the
   label is the lesser cost; inline-flex keeps the swatch attached to it. */
.legend .key{ display:inline-flex; align-items:baseline; margin-inline-end:var(--space-3xl); }
.legend b{ display:inline-block; vertical-align:middle; inline-size:var(--space-2xl); margin-inline-end:var(--space-sm); }
.legend .sw-line{ block-size:2.5px; background:var(--graphic-line); border-radius:var(--radius-sm); }
.legend .sw-band{ block-size:var(--space-md); background:var(--graphic-band); border:var(--border-hairline) solid var(--border-strong); }
.legend .note{ display:block; margin-block-start:var(--space-2xs); color:var(--text-muted); }

/* ---------- Buttons ---------- */
.actions{ display:flex; flex-wrap:wrap; gap:var(--space-md); }
.btn{
  font-family:var(--font-sans); font-size:var(--type-button);
  font-weight:var(--weight-semi);
  padding-block:var(--space-md); padding-inline:var(--space-2xl);
  border-radius:var(--radius-md); border:var(--border-medium) solid var(--action);
  display:inline-block; text-decoration:none;
  transition:background-color var(--dur-fast) var(--ease-exit),
             color var(--dur-fast) var(--ease-exit),
             transform var(--dur-fast) var(--ease-entrance);
}
.btn-solid{ background:var(--action); color:var(--action-on); }
.btn-solid:hover, .btn-solid:focus-visible{ background:var(--action-hover); color:var(--action-on); transform:translateY(-1px); }
.btn-line{ background:transparent; color:var(--action); }
.btn-line:hover, .btn-line:focus-visible{ background:var(--surface-raised); color:var(--action); transform:translateY(-1px); }
.btn-lg{ font-size:var(--type-body); padding-block:var(--space-lg); padding-inline:var(--space-3xl); }

/* ---------- Sections ---------- */
.band{ border-block-start:var(--border-hairline) solid var(--border-strong); padding-block:var(--space-section); }
/* Linen on Snow is only 1.14:1 apart, so a filled block needs a border
   to read as a container rather than a colour shift. */
.band-fill{ background:var(--surface-raised); }
.cols{ display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:var(--space-4xl); }
.cols > :last-child > :last-child{ margin-block-end:0; }

/* Life-stage beliefs on the home page. Same rhythm as .ticks, but no
   rules between items — it reads as one statement, not a checklist. */
.beliefs{ list-style:none; margin:0 0 var(--space-lg); padding:0; max-width:var(--measure-prose); }
.beliefs li{ position:relative; padding-block:var(--space-2xs); padding-inline-start:var(--space-2xl); }
.beliefs li::before{ content:""; position:absolute; inset-inline-start:0; inset-block-start:1.05em; inline-size:var(--space-md); block-size:1px; background:var(--accent); }
.beliefs strong{ color:var(--text-strong); font-weight:var(--weight-semi); }

.ticks{ list-style:none; margin:0 0 var(--space-lg); padding:0; max-width:var(--measure-prose); }
.ticks li{ padding-block:var(--space-sm); padding-inline-start:var(--space-2xl); position:relative; border-block-end:var(--border-hairline) solid var(--border-subtle); }
.ticks li:last-child{ border-block-end:0; }
.ticks li::before{ content:""; position:absolute; inset-inline-start:0; inset-block-start:1.05em; inline-size:var(--space-md); block-size:1px; background:var(--graphic-primary); }

/* ---------- Process sequence ---------- */
.steps{ counter-reset:step; list-style:none; margin:0 0 var(--space-2xl); padding:0; max-width:var(--measure-wide); }
.steps li{
  counter-increment:step; position:relative;
  padding-block-end:var(--space-2xl); padding-inline-start:var(--space-5xl);
  border-inline-start:var(--border-hairline) solid var(--border-strong);
  margin-inline-start:var(--space-md);
}
.steps li:last-child{ border-inline-start-color:transparent; padding-block-end:0; }
.steps li::before{
  content:counter(step); position:absolute; inset-inline-start:calc(var(--space-md) * -1); inset-block-start:0;
  inline-size:var(--space-2xl); block-size:var(--space-2xl); border-radius:var(--radius-pill);
  background:var(--surface-page); border:var(--border-medium) solid var(--action); color:var(--action);
  font-family:var(--font-sans); font-size:var(--type-eyebrow); font-weight:var(--weight-bold);
  display:flex; align-items:center; justify-content:center;
}
.band-fill .steps li::before{ background:var(--surface-raised); }
.steps h3{ margin-block-end:var(--space-2xs); }
.steps p{ margin:0; font-size:var(--type-caption); color:var(--text-muted); }

/* ---------- Definition rows ---------- */
.creds{ margin:0; max-width:var(--measure-wide); }
.creds > div{
  display:grid; grid-template-columns:minmax(0,13rem) minmax(0,1fr); gap:var(--space-lg);
  padding-block:var(--space-md); border-block-end:var(--border-hairline) solid var(--border-subtle);
}
.creds dt{ font-family:var(--font-sans); font-size:var(--type-label); font-weight:var(--weight-bold); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--label-accent); padding-block-start:var(--space-2xs); }
.creds dd{ margin:0; font-size:var(--type-caption); }

/* Check-marked variant. The tick is a mask rather than an <img> or a
   repeated inline SVG, so it is one declaration, it takes the accent
   colour from a token, and forced-colours mode can repaint it. */
.creds-check > div{ grid-template-columns:var(--space-2xl) minmax(0,12rem) minmax(0,1fr); }
.creds-check > div::before{
  content:""; inline-size:var(--space-xl); block-size:var(--space-xl);
  margin-block-start:0.15em; background-color:transparent;
}
@supports ((-webkit-mask-image:url("#i")) or (mask-image:url("#i"))){
  .creds-check > div::before{
    background-color:var(--accent);
    -webkit-mask:var(--ico-check) center/contain no-repeat;
            mask:var(--ico-check) center/contain no-repeat;
  }
}

/* ---------- Icons and illustration ---------- */
.with-icon{ display:flex; align-items:center; gap:var(--space-md); }
.ico{ flex:none; inline-size:1.1em; block-size:1.1em; fill:var(--accent); }

.illus{ margin:var(--space-3xl) 0; max-width:var(--measure-prose); }
.illus svg{ display:block; inline-size:100%; block-size:auto; border-radius:var(--radius-md); }
.illus figcaption{
  font-family:var(--font-sans); font-size:var(--type-caption);
  line-height:var(--leading-caption); color:var(--text-muted);
  margin-block-start:var(--space-md); max-width:var(--measure-prose);
}
.il-panel{ fill:var(--graphic-warm); opacity:0.13; }
.il-ground{ fill:none; stroke:var(--graphic-primary); stroke-width:2; stroke-linecap:round; opacity:0.5; }
.il-figure{ fill:var(--accent); }
.il-link{ fill:none; stroke:var(--accent); stroke-width:11; stroke-linecap:round; }
.il-play{ fill:var(--graphic-primary); opacity:0.55; }

/* ---------- Contact ---------- */
.contact-lines{ list-style:none; margin:0 0 var(--space-xl); padding:0; }
.contact-lines li{ padding-block:var(--space-sm); border-block-end:var(--border-hairline) solid var(--border-subtle); font-size:var(--type-body); }
.contact-lines span{
  font-family:var(--font-sans); font-size:var(--type-label); font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--label-accent);
  display:block; margin-block-end:var(--space-3xs);
}

/* ---------- Home cards ---------- */
/* min(16rem, 100%), not a bare 16rem: auto-fit still lays out a 16rem track
   when the container is narrower than that, and the grid overflows. The
   min() lets the track collapse to the container instead. It shows up when
   a visitor raises their default font size — 16rem is 384px at a 24px root,
   wider than the content column on a phone. */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr)); gap:var(--space-lg); }
.card{
  display:block; background:var(--surface-card);
  border:var(--border-hairline) solid var(--border-subtle);
  border-radius:var(--radius-md); padding:var(--space-2xl); text-decoration:none;
  box-shadow:var(--elevation-none);
  transition:border-color var(--dur-fast) var(--ease-exit),
             transform var(--dur-fast) var(--ease-entrance),
             box-shadow var(--dur-fast) var(--ease-exit);
}
.card:hover, .card:focus-visible{ border-color:var(--action); transform:translateY(-2px); box-shadow:var(--elevation-raised); }
.card h2{ font-size:var(--type-h3); margin-block-end:var(--space-xs); }
.card p{ font-size:var(--type-caption); color:var(--text-muted); margin:0 0 var(--space-md); max-width:none; }
.card-go{ font-family:var(--font-sans); font-size:var(--type-label); font-weight:var(--weight-semi); color:var(--action); }

/* ---------- FAQ ---------- */
/* ---------- FAQ disclosure ----------
   <details> carries the open/closed state natively, so this needs no
   JavaScript and keeps working with the CSP set to script-src 'none'.
   The <h2> stays inside <summary> so the document outline survives —
   one heading per question, as it was before the questions collapsed.
   Answers remain in the DOM when closed, so find-in-page reaches them
   (browsers auto-expand a details on a match) and so the FAQPage
   structured data still describes content that is genuinely present. */
.faq{ max-width:var(--measure-wide); }
.qa{ border-block-end:var(--border-hairline) solid var(--border-subtle); }
.qa:last-child{ border-block-end:0; }

.qa summary{
  display:flex; align-items:flex-start; gap:var(--space-md);
  padding-block:var(--space-lg); cursor:pointer;
  list-style:none;              /* Firefox */
  min-block-size:24px;          /* SC 2.5.8 target size */
}
.qa summary::-webkit-details-marker{ display:none; }  /* Safari */
.qa summary h2{
  font-size:var(--type-h3); margin:0; flex:1 1 auto; min-inline-size:0;
  text-wrap:pretty;
}
.qa summary:hover h2{ color:var(--action); }
.qa summary:focus-visible{ outline:var(--border-medium) solid var(--action); outline-offset:var(--space-2xs); }

/* Marker: a chevron drawn from two borders, so it needs no image request
   and inherits currentColor under forced-colors. */
.qa summary::after{
  content:""; flex:none; align-self:flex-start;
  inline-size:0.5em; block-size:0.5em; margin-block-start:0.45em;
  border-inline-end:var(--border-medium) solid var(--action);
  border-block-end:var(--border-medium) solid var(--action);
  transform:rotate(45deg); transform-origin:center;
  transition:transform var(--dur-fast) var(--ease-emphasis);
}
.qa[open] summary::after{ transform:rotate(-135deg); }

.qa-a{ padding-block-end:var(--space-lg); }
.qa p{ margin:0; font-size:var(--type-caption); color:var(--text-muted); max-width:var(--measure-prose); }

.sub{ margin-block-start:var(--space-3xl); font-size:var(--type-caption); }

/* ---------- Breadcrumbs ---------- */
.crumbs{ font-family:var(--font-sans); font-size:var(--type-label); margin:0 0 var(--space-xl); }
.crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--space-sm); }
.crumbs li{ color:var(--text-subtle); }
.crumbs li + li::before{ content:"/"; margin-inline-end:var(--space-sm); color:var(--border-strong); }
.crumbs [aria-current="page"]{ color:var(--text-muted); }

/* ---------- Forward link ---------- */
.next{
  margin-block-start:var(--space-6xl); padding-block-start:var(--space-2xl);
  border-block-start:var(--border-hairline) solid var(--border-subtle);
  font-family:var(--font-sans); font-size:var(--type-caption);
  font-weight:var(--weight-semi); max-width:none;
}

/* ---------- Footer ---------- */
.foot{
  border-block-start:var(--border-hairline) solid var(--border-strong);
  padding-block:var(--space-4xl) var(--space-6xl);
  font-size:var(--type-caption); color:var(--text-muted); background:var(--surface-page);
}
.foot p{ max-width:var(--measure-prose); }
.foot-nav{
  display:flex; flex-wrap:wrap; gap:var(--space-sm) var(--space-2xl);
  font-family:var(--font-sans); font-size:var(--type-label); font-weight:500;
  padding-block-end:var(--space-2xl); margin-block-end:var(--space-2xl);
  border-block-end:var(--border-hairline) solid var(--border-subtle);
}
.foot-nav a{ color:var(--text-muted); text-decoration:none; }
.foot-nav a:hover{ color:var(--action); }
.foot-meta{ display:flex; flex-wrap:wrap; gap:var(--space-sm) var(--space-2xl); font-family:var(--font-sans); font-size:var(--type-label); }

/* ---------- Long-form pages ----------
   The reading measure is set wider here than on the home page. At 34rem
   inside a 64rem container the text stopped around halfway across a desktop
   screen and left a dead column beside it; 44rem still lands inside a
   comfortable line length while using the width the page actually has. */
.doc{
  --measure-prose: 44rem;
  --measure-wide:  52rem;
  padding-block:var(--space-6xl) var(--space-lg);
}
.doc h1{ max-width:24ch; margin-block-end:var(--space-md); }
.doc h2{ margin-block-start:var(--space-4xl); }

/* ---------- In-page contents ----------
   Only on the two legal pages. Eleven sections each, and they are read by
   someone looking for one clause rather than front to back. */
.toc{
  margin-block:var(--space-3xl);
  padding:var(--space-xl) var(--space-2xl);
  background:var(--surface-raised);
  border:var(--border-hairline) solid var(--border-subtle);
  border-radius:var(--radius-md);
  max-inline-size:var(--measure-wide);
}
.toc-title{
  font-size:var(--type-label); font-weight:var(--weight-semi);
  letter-spacing:var(--tracking-label); text-transform:uppercase;
  color:var(--text-subtle);
  margin:0 0 var(--space-md);
}
.doc .toc-title{ margin-block-start:0; }   /* beats .doc h2 */
.toc ol{
  margin:0; padding:0; list-style:none;
  /* column-width, not column-count: the browser fits one column on a phone
     and two on a wide screen with no breakpoint of its own. Column flow
     also keeps the list reading top-to-bottom, as a contents list should. */
  columns:16rem; column-gap:var(--space-3xl);
}
.toc li{ margin:0; break-inside:avoid; max-width:none; }
.toc a{
  display:block; padding-block:var(--space-2xs);
  min-block-size:24px;                     /* SC 2.5.8 */
  font-family:var(--font-sans); font-size:var(--type-caption);
  text-decoration-thickness:var(--border-hairline);
}

/* The heading a jump link lands on should not sit hard against the top of
   the window, and should say so for a moment when it is the target. */
.doc h2{ scroll-margin-block-start:var(--space-3xl); }
.doc h2:target{
  border-inline-start:var(--border-thick) solid var(--action);
  padding-inline-start:var(--space-md);
  margin-inline-start:calc(-1 * (var(--space-md) + var(--border-thick)));
}
.doc p{ max-width:var(--measure-prose); }
.doc li{ max-width:var(--measure-wide); }
.doc ul{ padding-inline-start:var(--space-xl); }
.doc li{ margin-block-end:var(--space-sm); }
.updated{ font-family:var(--font-sans); font-size:var(--type-label); color:var(--text-subtle); margin-block-end:var(--space-3xl); }
.back{ font-family:var(--font-sans); font-size:var(--type-caption); font-weight:var(--weight-semi); }

/* ---------- Sticky contact bar, small screens only ---------- */
.sticky-cta{ display:none; }

/* Hyphenation only where the measure is genuinely tight. */
@media (max-width: 46rem){
  .doc p, .doc li, .lede{ hyphens:auto; }
}

/* ============================================================
   MOTION — one entrance sequence, on load, once.

   Deliberately no scroll-linked reveals: content that fades in on
   scroll is unpredictable, easy to miss, and can strand text faded
   for anyone landing mid-page on an anchor link. A substantial part
   of this audience has attention differences, for whom movement
   during reading is a cost, not a delight. Do not reintroduce them.

   Everything below animates transform and opacity only, so it stays
   on the compositor. Every rule is disabled under reduced motion.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .cap-band,.cap-edge{ opacity:0; animation:fadeIn var(--dur-slow) var(--ease-entrance) 120ms forwards; }
  .cap-tag{ opacity:0; animation:fadeIn var(--dur-slow) var(--ease-entrance) 420ms forwards; }
  .demand-line{ stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1500ms var(--ease-emphasis) 380ms forwards; }
  .stem{ opacity:0; animation:fadeIn var(--dur-base) var(--ease-entrance) forwards; }
  .node{ opacity:0; transform-box:fill-box; transform-origin:center; animation:pop 480ms var(--ease-entrance) forwards; }

  /* Each stem draws 20ms before the node it carries pops. These live here
     rather than as inline style attributes so that style-src in _headers
     does not have to allow 'unsafe-inline'. */
  .s1{ animation-delay:1000ms; } .s2{ animation-delay:1160ms; }
  .s3{ animation-delay:1320ms; } .s4{ animation-delay:1480ms; }
  .s5{ animation-delay:1640ms; }

  .n1{ animation-delay:1020ms; } .n2{ animation-delay:1180ms; }
  .n3{ animation-delay:1340ms; } .n4{ animation-delay:1500ms; }
  .n5{ animation-delay:1660ms; }

  .pl-ring,.pl-motif,.pl-label,.pl-sub,.pl-centre,.pl-centre-sub{ opacity:0; animation:fadeIn var(--dur-slow) var(--ease-entrance) forwards; }
  .pl-fill{ opacity:0; animation:fadeToFill var(--dur-slow) var(--ease-entrance) forwards; }
  .pl-core{ opacity:0; animation:fadeToCore var(--dur-slow) var(--ease-entrance) forwards; }
  .pl-core-ring{ opacity:0; animation:fadeToRing var(--dur-slow) var(--ease-entrance) forwards; }
  .pl-core, .pl-core-ring{ animation-delay:120ms; }
  .p1{ animation-delay:320ms; } .p2{ animation-delay:520ms; } .p3{ animation-delay:720ms; }

  .hero .eyebrow{ animation:rise var(--dur-slow) var(--ease-entrance) both; }
  .hero h1{ animation:rise var(--dur-slow) var(--ease-entrance) 60ms both; }
  .hero .lede{ animation:rise var(--dur-slow) var(--ease-entrance) 140ms both; }
  .hero .actions{ animation:rise var(--dur-slow) var(--ease-entrance) 260ms both; }
}

@keyframes fadeIn{ to{ opacity:1; } }
/* The three translucent diagram layers land on their resting opacity, not on
   1. A var() in a keyframe end-state resolves at computed-value time, so the
   token stays the single source of truth. */
@keyframes fadeToFill{ to{ opacity:var(--pl-fill-rest); } }
@keyframes fadeToCore{ to{ opacity:var(--pl-core-rest); } }
@keyframes fadeToRing{ to{ opacity:var(--pl-ring-rest); } }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes pop{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:scale(1); } }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* ---------- Cross-document view transitions ----------
   Pure CSS. The JavaScript View Transition API is unavailable here by
   design — script-src is 'none' — but the declarative form needs no script
   at all, so the site gets the effect without weakening the policy.

   The value is not the fade. It is that the masthead, the footer and the
   sticky CTA are identical on every page, so naming them holds them still
   while the content beneath changes. Without the names the whole viewport
   cross-fades, including chrome that never moved, which reads as a page
   reload rather than as moving within one site.

   Unsupported browsers — Firefox at time of writing — simply navigate.
   There is nothing to fall back to and nothing to detect. */
@view-transition{ navigation:auto; }

.masthead{ view-transition-name:masthead; }
.foot{ view-transition-name:foot; }
.sticky-cta{ view-transition-name:sticky-cta; }

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:var(--dur-base);
  animation-timing-function:var(--ease-entrance);
}

@media (prefers-reduced-motion: reduce){
  /* navigation:none rather than animation:none. Suppressing the animation
     would still capture and composite the snapshots, doing the work and
     risking a flash; this turns the mechanism off. */
  @view-transition{ navigation:none; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .demand-line{ stroke-dasharray:none; stroke-dashoffset:0; }
  .cap-band,.cap-edge,.cap-tag,.stem,.node{ opacity:1; }
  .pl-ring,.pl-motif,.pl-label,.pl-sub,.pl-centre,.pl-centre-sub{ opacity:1; }
  .pl-fill{ opacity:var(--pl-fill-rest); } .pl-core{ opacity:var(--pl-core-rest); }
  .pl-core-ring{ opacity:var(--pl-ring-rest); }
}

/* ---------- Responsive ---------- */
@media (max-width: 52rem){
  .day svg{ min-block-size:200px; }
}
@media (max-width: 46rem){
  .masthead .wrap{ flex-direction:column; align-items:flex-start; gap:var(--space-sm); }
  .cols{ grid-template-columns:1fr; gap:var(--space-lg); }
  .day-marks{ grid-template-columns:1fr 1fr; gap:var(--space-sm) var(--space-lg); margin-block-start:var(--space-xl); }
  .day-marks div{ border-block-start:var(--border-hairline) solid var(--border-subtle); padding-block-start:var(--space-sm); }
  .creds > div{ grid-template-columns:1fr; gap:var(--space-3xs); }
  /* keep the tick in its own column, term and definition stacked beside it */
  .creds-check > div{ grid-template-columns:var(--space-2xl) minmax(0,1fr); column-gap:var(--space-md); }
  .creds-check dt, .creds-check dd{ grid-column:2; }

  /* The diagram is scaled down here, so its type is scaled up to compensate. */
  .pl-label{ font-size:20px; }
  .pl-sub{ font-size:13.5px; }
  .pl-centre{ font-size:17px; }
  .pl-centre-sub{ font-size:13.5px; }

  .hero{ padding-block:var(--space-5xl) var(--space-4xl); }
  .hero-lockup{ gap:var(--space-2xl); }
  .hero-logo img{ inline-size:180px; }
  .band{ padding-block:var(--space-section-tight); }

  .sticky-cta{
    display:flex; gap:var(--space-sm); position:fixed; z-index:var(--layer-sticky);
    inset-inline:0; inset-block-end:0;
    padding-block:var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom));
    padding-inline:var(--space-lg);
    background:var(--surface-page); border-block-start:var(--border-hairline) solid var(--border-strong);
  }
  .sticky-cta .btn{ flex:1 1 auto; text-align:center; padding-block:var(--space-md); padding-inline:var(--space-md); font-size:var(--type-caption); }
  body{ padding-block-end:var(--space-8xl); }
}
@media (max-width: 30rem){
  .day-marks{ grid-template-columns:1fr; }
  .actions .btn{ inline-size:100%; text-align:center; }
}

/* Windows High Contrast and other forced-colours modes. The OS palette
   replaces ours, which is correct — the job here is to make sure nothing
   disappears when it does. */
@media (forced-colors: active){
  .card, .band-fill{ background:Canvas; border:1px solid CanvasText; }
  .btn{ border:2px solid ButtonText; }
  .btn-solid{ background:ButtonFace; color:ButtonText; }
  .pl-ring{ stroke:CanvasText; }
  .pl-fill, .pl-core{ fill:transparent; }
  .pl-label, .pl-sub, .pl-centre, .pl-centre-sub, .cap-tag{ fill:CanvasText; }
  /* Masked shapes take the OS palette like any other fill. */
  .pl-motif{ fill:CanvasText; }
  .wordmark .logo{ fill:CanvasText; }
  .pl-core-ring{ stroke:CanvasText; opacity:1; }
  .il-panel{ fill:transparent; stroke:CanvasText; stroke-width:1; }
  .il-figure{ fill:CanvasText; }
  .il-link{ stroke:CanvasText; }
  .il-play{ fill:transparent; stroke:CanvasText; stroke-width:2; }
  .il-ground{ stroke:CanvasText; }
  .ico{ fill:CanvasText; }
  .creds-check > div::before{ background-color:CanvasText; }
  .beliefs li::before{ background:CanvasText; }
  .demand-line{ stroke:CanvasText; }
  .cap-band{ fill:transparent; stroke:CanvasText; stroke-width:1; }
  .node{ fill:Canvas; stroke:CanvasText; }
  .stem, .cap-edge{ stroke:CanvasText; }
  .legend .sw-line{ background:CanvasText; }
  .legend .sw-band{ background:transparent; border:1px solid CanvasText; }
  .ticks li::before{ background:CanvasText; }
  .nav a[aria-current="page"]{ border-block-end-color:Highlight; }
  .qa summary::after{ border-color:CanvasText; }
  :focus-visible{ outline:3px solid Highlight; }
}

/* ---------- Print ----------
   People do print from a health service site: a fee summary to discuss at
   home, an FAQ page for a support coordinator, a privacy policy for a file.
   The aim is a clean document, not a screenshot of a web page. */
@page{ margin:18mm 16mm; }

@media print{
  /* Paper is its own medium: white ground, ink-dark text, physical units.
     pt is the correct unit here — the fluid vw-based scale has no meaning
     when there is no viewport. */
  body{
    background:#fff; color:#000;
    font-size:11pt; line-height:1.45;
    padding-block-end:0;
  }
  .wrap{ width:auto; margin-inline:0; }
  p, .lede, .qa p{ max-width:none; color:#000; }
  h1{ font-size:20pt; } h2{ font-size:14pt; } h3{ font-size:12pt; }

  /* Interface chrome that cannot be used on paper. */
  .skip, .nav, .sticky-cta, .btn, .crumbs, .foot-nav, .card-go,
  .toc, .qa summary::after{ display:none; }

  /* Screen decoration that only costs toner. */
  .band, .band-fill, .card, .urgent{
    background:none; border:0; box-shadow:none;
    padding-block:0; margin-block:0 12pt;
  }
  /* background:none matters even though backgrounds are off by default —
     a reader who ticks "background graphics" should not get a full-width
     band of linen across the top of every sheet. */
  .masthead{
    background:none;
    border-block-end:0.5pt solid #000; padding-block-end:6pt; margin-block-end:12pt;
  }
  .hero{ padding-block:0 12pt; }
  .hero-logo img{ inline-size:36mm; }

  /* Every FAQ answer prints, whether or not it was open on screen.
     Two mechanisms because engines differ: older ones hide the closed
     children with display, current Chromium uses ::details-content. */
  details:not([open]) > *:not(summary){ display:block !important; }
  details::details-content{ content-visibility:visible !important; }

  /* Expand links that mean something off-screen. Internal page links are
     left alone — a bare path helps nobody holding a sheet of paper. */
  a[href^="mailto:"]::after,
  a[href^="http"]::after{
    content:" (" attr(href) ")";
    font-size:9pt; word-break:break-all;
  }
  /* …except where the link text is already the address, which is every
     link in the footer meta. Printing it twice helps nobody. */
  .foot-meta a::after{ content:none; }
  a{ color:#000; text-decoration:underline; }

  /* Keep units of meaning on one page. */
  .qa, .card, .urgent, .pillar-notes > div, .band{ break-inside:avoid; }
  h1, h2, h3{ break-after:avoid; break-inside:avoid; }
  p{ orphans:3; widows:3; }

  /* The safety notice and the contact details are the two things most worth
     having on the printed copy, so they are given a visible frame rather
     than being flattened with the rest. */
  .urgent{ border:0.5pt solid #000; padding:8pt; break-inside:avoid; }
  .foot{ border-block-start:0.5pt solid #000; padding-block-start:8pt; margin-block-start:12pt; }
  .foot-meta{ font-size:9pt; }

  /* The diagram is structural, not decorative — it carries the model the
     whole practice is built on, so it prints, but sized for paper. */
  .pillars svg{ max-inline-size:110mm; }
  .pl-fill{ opacity:0.10; } .pl-core{ opacity:0.18; }

  *, *::before, *::after{ animation:none !important; transition:none !important; }
}