/* parentready Guides: editorial content pages.
   Self-contained and lightweight (perf matters for SEO); shares the app's brand tokens. */
/* The brand faces, served from this domain. Declared here as well as in styles.css because a
   guide page loads this sheet on its own: an @import would add a round trip before any text
   could be styled, and the browser downloads each file once no matter which sheet asked.
   Both are SIL Open Font License and variable across 400 to 700, so the weight 600 used by the
   headings below is a real cut and not a synthesised one. Nothing is fetched from a third party,
   so no consent is required. Full reasoning in prototype/styles.1e337cad.css. */
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dm-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink-950: oklch(23% 0.018 160);
  --ink-850: oklch(31% 0.020 160);
  --ink-700: oklch(44% 0.018 162);
  --ink-500: oklch(53% 0.015 163);
  --ink-300: oklch(79% 0.012 165);
  --ink-150: oklch(90% 0.008 165);
  --ink-075: oklch(95.5% 0.006 165);

  --paper: oklch(97.6% 0.006 165);
  --paper-raised: oklch(99.5% 0.002 165);
  --primary: oklch(50% 0.085 167);
  --primary-hover: oklch(42% 0.075 167);
  --terracotta: oklch(67% 0.115 47);
  --terracotta-deep: oklch(51% 0.13 41);
  --terracotta-soft: oklch(93% 0.038 47);
  --moss: oklch(52% 0.095 152);
  --moss-soft: oklch(93% 0.030 152);
  --amber-soft: oklch(93% 0.035 84);
  --danger: oklch(52% 0.150 25);
  --danger-soft: oklch(94% 0.025 25);

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Constantia, Cambria, Georgia, serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.4rem;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --measure: 40rem;
}

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

html {
  background: var(--paper);
  color: var(--ink-950);
  font-family: var(--font-body);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 92% 4%, oklch(94% 0.022 168) 0, transparent 24rem),
    var(--paper);
  color: var(--ink-950);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

a { color: var(--primary); text-underline-offset: 0.18em; }
a:hover { color: var(--primary-hover); }
img { max-inline-size: 100%; height: auto; }

:where(a, button):focus-visible {
  outline: 3px solid var(--terracotta-deep);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  inset-block-start: -3rem;
  inset-inline-start: var(--space-md);
  padding: var(--space-xs) var(--space-md);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--ink-950);
  color: var(--paper-raised);
  z-index: 20;
  transition: inset-block-start 150ms var(--ease-out);
}
.skip-link:focus { inset-block-start: 0; }

/* ---- Top bar ---- */
.guide-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  max-inline-size: 72rem;
  margin-inline: auto;
  padding: var(--space-md) clamp(var(--space-md), 5vw, var(--space-2xl));
}
.guide-wordmark {
  color: var(--ink-950);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.guide-wordmark span { color: var(--primary); }
.guide-topnav {
  display: flex;
  gap: var(--space-lg);
  font-size: 0.9rem;
  font-weight: 650;
}
.guide-topnav a { text-decoration: none; }
@media (hover: hover) { .guide-topnav a:hover { text-decoration: underline; } }

/* ---- Draft banner ---- */
.draft-note {
  max-inline-size: 72rem;
  margin: 0 auto var(--space-lg);
  padding: var(--space-sm) clamp(var(--space-md), 5vw, var(--space-2xl));
  color: var(--terracotta-deep);
  font-size: 0.85rem;
  font-weight: 650;
}

/* ---- Article hero: title on the left, full illustration on the right (never cropped) ---- */
.guide-hero {
  display: grid;
  gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
  align-items: center;
  max-inline-size: 66rem;
  margin: 0 auto var(--space-2xl);
  padding-inline: clamp(var(--space-md), 5vw, var(--space-2xl));
}
.guide-hero-img {
  inline-size: 100%;
  max-inline-size: 22rem;
  height: auto;
  justify-self: center;
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
}
.guide-hero-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
@media (min-width: 52rem) {
  .guide-hero { grid-template-columns: 1.05fr 0.95fr; }
}
.guide-eyebrow {
  margin: 0;
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.guide-hero-inner h1 {
  margin: 0;
  max-inline-size: 18ch;
  color: var(--ink-950);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5.5vw, 3rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.guide-hero-sub {
  margin: 0;
  max-inline-size: 42ch;
  color: var(--ink-850);
  font-size: 1.05rem;
  line-height: 1.5;
}

/* ---- Article body ---- */
.guide-article {
  max-inline-size: 46rem;
  margin-inline: auto;
  padding: 0 clamp(var(--space-md), 5vw, var(--space-xl)) var(--space-3xl);
}
.guide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin-block-end: var(--space-xl);
  color: var(--ink-500);
  font-size: 0.85rem;
}
.guide-prose { max-inline-size: none; }
.guide-prose > * + * { margin-block-start: var(--space-lg); }
.guide-prose h2 {
  margin-block-start: var(--space-2xl);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.5vw, 1.85rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.guide-prose h3 {
  margin-block-start: var(--space-xl);
  font-size: 1.15rem;
  font-weight: 750;
}
.guide-prose p { color: var(--ink-850); }
.guide-prose a { font-weight: 600; }
.guide-prose ul, .guide-prose ol { padding-inline-start: 1.25rem; }
.guide-prose li { margin-block-start: var(--space-xs); color: var(--ink-850); }
.guide-prose strong { color: var(--ink-950); }

/* TL;DR / key-facts card */
/* Shared read-only plan (feature 003), used by /shared. Screen styles: the pp-* printable rules
   live inside @media print and do not apply here. */
.shared-stage { margin-block-start: var(--space-xl); }

.shared-step {
  margin-block-start: var(--space-md);
  padding: var(--space-lg);
  border: 1px solid var(--ink-150);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
}

.shared-step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}

.shared-step-head h3 { margin: 0; }
.shared-step p { margin-block-start: var(--space-xs); }

.shared-status {
  flex: 0 0 auto;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--ink-075);
  color: var(--ink-700);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.shared-deadline { font-weight: 600; color: var(--ink-950); }

/* Blocks inside a shared step: what to do, what happens next, important exceptions. Same labelling
   treatment as the drawer headings in the owner's own card, small and uppercase rather than large,
   because on this page they separate parts of one step and must not compete with the step title. */
.shared-block-heading {
  margin-block: var(--space-md) var(--space-2xs);
  color: var(--ink-850);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shared-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding-inline-start: 1.25rem;
  color: var(--ink-700);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.shared-source { font-size: var(--text-sm); margin-block-start: var(--space-md); }
.shared-updated {
  margin-block-start: var(--space-xl);
  font-size: var(--text-sm);
  color: var(--ink-500);
}

.guide-keyfacts {
  margin-block: var(--space-xl);
  padding: clamp(var(--space-lg), 3vw, var(--space-xl));
  border: 1px solid var(--ink-150);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
}
.guide-keyfacts h2 {
  margin: 0 0 var(--space-md);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}
.guide-keyfacts dl { margin: 0; display: grid; gap: var(--space-sm); }
.guide-keyfacts div {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: var(--space-sm) var(--space-md);
  padding-block: var(--space-sm);
  border-block-start: 1px solid var(--ink-150);
}
.guide-keyfacts div:first-child { border-block-start: 0; }
.guide-keyfacts dt { color: var(--ink-500); font-size: 0.9rem; font-weight: 650; }
.guide-keyfacts dd { margin: 0; color: var(--ink-950); font-weight: 650; }

/* On a narrow screen the two columns stop being two columns. Without this the label column holds its
   8rem minimum, which on a 375px phone leaves the value about 130px, and values wrap after one or two
   words: "A childminder / minds / children / in / the / minder's / own / home". Measured on 18
   September 2026 on a new guide and on one published in August, so it was every guide on the site and
   not a fault of either page. The card is the most-read block on a guide, and the scoring line it
   fails is the literal one, readable on a phone at 2am with a baby in the other arm.

   40rem rather than a device width: it is the point where minmax(8rem, 12rem) plus the card padding
   stops leaving a sensible measure for the value, which is a property of this component and not of
   any particular handset. */
@media (max-width: 40rem) {
  .guide-keyfacts div { grid-template-columns: 1fr; gap: 0.15rem; }
  /* The label keeps its muted, smaller style so it still reads as a label once it sits above rather
     than beside. Nothing else changes: same order in the DOM, same borders between rows. */
  .guide-keyfacts dt { font-size: 0.82rem; }
}

/* Data table. The wrapper scrolls rather than the page, so a wide table on a narrow phone
   never forces the whole article sideways. It is focusable so a keyboard user can scroll it. */
.guide-table-wrap {
  margin-block: var(--space-xl);
  max-inline-size: var(--measure);
  overflow-x: auto;
  border: 1px solid var(--ink-150);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
}
.guide-table-wrap:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.guide-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}
.guide-table caption {
  padding: var(--space-md) var(--space-md) 0;
  color: var(--ink-500);
  font-size: 0.82rem;
  text-align: start;
}
.guide-table th,
.guide-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: start;
  border-block-start: 1px solid var(--ink-150);
  white-space: nowrap;
}
.guide-table thead th {
  border-block-start: 0;
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: normal;
}
.guide-table tbody th { font-weight: 650; color: var(--ink-950); }
.guide-table td { color: var(--ink-850); font-variant-numeric: tabular-nums; }
.guide-table .num { font-weight: 700; color: var(--ink-950); }

/* Inline figure / mini-image */
.guide-figure {
  margin-block: var(--space-2xl);
  max-inline-size: var(--measure);
}
.guide-figure img { inline-size: 100%; border-radius: var(--radius-md); }
.guide-figure figcaption {
  margin-block-start: var(--space-xs);
  color: var(--ink-500);
  font-size: 0.82rem;
}

/* Callout */
.guide-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-block: var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--amber-soft);
  color: oklch(38% 0.06 70);
  font-size: 0.95rem;
}
/* The icon sits before the text and lines up with its first line: its line box is pinned to the
   same height as the paragraph's first line (0.95rem text at the body's 1.65 line height), so the
   larger emoji centres on that line instead of floating above it. */
.guide-callout > span {
  flex: 0 0 auto;
  font-size: 1.25rem;
  line-height: calc(0.95rem * 1.65);
}
.guide-callout p { margin: 0; }
.guide-callout strong { color: oklch(30% 0.07 60); }

/* In-app CTA */
.guide-cta {
  display: grid;
  gap: var(--space-md);
  margin-block: var(--space-3xl);
  padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
  border-radius: var(--radius-lg);
  background: var(--primary);
  color: var(--paper-raised);
}
.guide-cta h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 600; }
.guide-cta p { margin: 0; max-inline-size: 46ch; color: color-mix(in oklch, var(--paper-raised) 84%, var(--primary)); }
.guide-cta-button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-block-size: 2.9rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-pill);
  background: var(--paper-raised);
  color: var(--primary);
  font-weight: 750;
  text-decoration: none;
}
@media (hover: hover) { .guide-cta-button:hover { background: var(--paper); } }

/* In-article estimator */
.guide-calc {
  margin-block: var(--space-2xl);
  padding: clamp(var(--space-lg), 3vw, var(--space-xl));
  border: 1px solid var(--ink-150);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
}
.guide-calc h2 { margin: 0 0 var(--space-xs); font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; }
.guide-calc > p { margin: 0 0 var(--space-lg); color: var(--ink-700); font-size: 0.95rem; }
.guide-calc form { display: grid; gap: var(--space-md); }
.calc-field { display: flex; flex-direction: column; gap: var(--space-2xs); }
.calc-field label { font-size: 0.9rem; font-weight: 650; color: var(--ink-850); }
.calc-field label span { color: var(--ink-500); font-weight: 400; }
.calc-check label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  font-weight: 400;
  line-height: 1.45;
}
.calc-check input[type="checkbox"] {
  min-block-size: auto;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin-block-start: 0.15rem;
  padding: 0;
  flex: none;
  accent-color: var(--primary);
}
.calc-field select, .calc-field input {
  min-block-size: 2.9rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink-950);
  font: inherit;
}
.calc-field select:focus-visible, .calc-field input:focus-visible {
  outline: 3px solid var(--terracotta-deep);
  outline-offset: 1px;
}
.calc-button {
  justify-self: start;
  min-block-size: 2.9rem;
  padding: 0.6rem 1.4rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--paper-raised);
  font-weight: 750;
  cursor: pointer;
}
@media (hover: hover) { .calc-button:hover { background: var(--primary-hover); } }
.calc-result {
  display: block;
  margin-block-start: var(--space-lg);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--moss-soft);
}
/* Errors and warnings: a terracotta wash so they do not read as the green "sent" success. */
.calc-result-warn { background: var(--terracotta-soft); }
.calc-result[hidden] { display: none; }
/* While the bridge below is showing, the result gives up its bottom corners so the two read as one
   card: here is your date, here is what follows from it. plan-bridge.js puts the flag on the section
   rather than the sheet using :has(), because these pages are read on old phones and a selector they
   do not understand would take the whole rule with it. It goes on the SECTION and not on the result
   itself for a reason worth keeping: the result is the element the script's MutationObserver
   watches, and writing a class onto a watched element calls the observer straight back. */
.guide-calc.bridge-open .calc-result {
  padding-block-end: var(--space-md);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
/* The offer to carry this date into the planner, revealed by plan-bridge.js once a calculator has
   produced a real answer.
   This was a quiet line of text until 13 September 2026, on the reasoning that anything heavier
   would compete with the answer the reader came for. That was wrong in a specific way: it read as a
   footnote to the result, and a bridge nobody notices cannot be told apart from a bridge nobody
   wants. Since measuring exactly that is the point of it, it now carries a real button, sitting
   inside the same green card so it still belongs to the answer instead of interrupting it. */
.calc-bridge {
  display: grid;
  justify-items: start;
  gap: var(--space-md);
  margin-block: 0;
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  border-block-start: 1px solid color-mix(in oklch, var(--primary) 22%, transparent);
  border-end-start-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
  background: var(--moss-soft);
  color: oklch(30% 0.06 152);
  font-size: 0.95rem;
  line-height: 1.5;
}
.calc-bridge[hidden] { display: none; }
.calc-bridge a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.9rem;
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--paper-raised);
  font-weight: 750;
  text-decoration: none;
}
@media (hover: hover) { .calc-bridge a:hover { background: var(--primary-hover); } }

.calc-result p { margin: 0; color: oklch(30% 0.06 152); }
.calc-result p + p { margin-block-start: var(--space-sm); font-size: 0.9rem; }
.calc-result strong { color: oklch(24% 0.07 152); }
.guide-calc .calc-disclaimer {
  margin: var(--space-xl) 0 0;
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--ink-150);
  color: var(--ink-500);
  font-size: 0.75rem;
  line-height: 1.6;
}

/* Sources + related */
.guide-sources, .guide-related {
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-lg);
  border-block-start: 1px solid var(--ink-150);
}
.guide-sources h2, .guide-related h2 {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 800;
}
.guide-sources ol { padding-inline-start: 1.1rem; }
.guide-sources li { font-size: 0.9rem; color: var(--ink-700); }
.guide-disclaimer { margin-block-start: var(--space-md); color: var(--ink-500); font-size: 0.82rem; }
.guide-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.guide-related a { font-weight: 650; text-decoration: none; }
.guide-related a:hover { text-decoration: underline; }

/* ---- Index (hub) ---- */
.hub-hero {
  max-inline-size: 72rem;
  margin: var(--space-xl) auto var(--space-2xl);
  padding-inline: clamp(var(--space-md), 5vw, var(--space-2xl));
}
.hub-hero h1 {
  margin: 0;
  max-inline-size: 18ch;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 8vw, 3.8rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hub-hero p {
  margin-block-start: var(--space-md);
  max-inline-size: 46rem;
  color: var(--ink-700);
  font-size: 1.2rem;
}
.hub-section {
  margin-block-end: var(--space-3xl);
}
.hub-group-title {
  max-inline-size: 72rem;
  margin: 0 auto var(--space-lg);
  padding-inline: clamp(var(--space-md), 5vw, var(--space-2xl));
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.hub-list {
  max-inline-size: 72rem;
  margin: 0 auto;
  padding-inline: clamp(var(--space-md), 5vw, var(--space-2xl));
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}
.hub-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ink-150);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-raised);
  text-decoration: none;
  color: inherit;
  transition: border-color 150ms var(--ease-out), transform 150ms var(--ease-out);
}
@media (hover: hover) {
  .hub-card:hover { border-color: var(--primary); transform: translateY(-2px); }
}
.hub-card img { inline-size: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--paper); }
.hub-card-body { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-lg); }
/* Was 0.72rem at weight 800 tracked to 0.1em: three kinds of emphasis at once on the smallest
   text on the card, which is why it shouted over the title. Matches .home-guide-kicker now. */
.hub-card-kicker { color: var(--primary); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.hub-card h2, .hub-card h3 { margin: 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; line-height: 1.2; }
.hub-card p { margin: 0; color: var(--ink-700); font-size: 0.95rem; }
.hub-card-date { margin-block-start: var(--space-2xs); color: var(--ink-500); font-size: 0.75rem; letter-spacing: 0.02em; }

/* ---- Footer ---- */
.guide-footer {
  max-inline-size: 72rem;
  margin-inline: auto;
  padding: var(--space-2xl) clamp(var(--space-md), 5vw, var(--space-2xl)) var(--space-3xl);
  border-block-start: 1px solid var(--ink-150);
  color: var(--ink-500);
  font-size: 0.85rem;
}
.guide-footer a { font-weight: 650; }
.guide-footer p { margin: 0; }
.guide-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin-block: var(--space-md);
}
.guide-footer-links a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
}
.guide-footer-trader {
  color: var(--ink-500);
  font-size: 0.8rem;
  line-height: 1.6;
}

/* Footer social buttons. The glyph inherits currentColor rather than carrying a fill attribute of
   its own, so the hover and focus states need one declaration instead of three, and no inline style
   is introduced anywhere (the CSP forbids them). 2.75rem matches the footer links above, which is
   the WCAG 2.2 target size, and the icons sit on the primary green rather than on brand colours:
   two different brand blues in a eucalyptus footer would be the loudest thing on the page. */
.footer-social {
  display: flex;
  gap: var(--space-sm);
  margin-block: var(--space-md);
  padding: 0;
  list-style: none;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  background-color: var(--primary);
  color: var(--paper);
  transition: background-color 120ms ease;
}
.footer-social a:hover,
.footer-social a:focus-visible {
  background-color: var(--primary-hover);
}
.footer-social svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  fill: currentColor;
}

@media (min-width: 48rem) {
  .guide-cta { grid-template-columns: 1fr auto; align-items: center; }
  .guide-cta-button { justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* ---- Account page ---- */
.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-block-start: var(--space-md); }
.account-actions .calc-button { margin: 0; text-decoration: none; }
.account-signout { background: none; border: 0; padding: 0; color: var(--ink-500); font: inherit; text-decoration: underline; cursor: pointer; }
@media (hover: hover) { .account-signout:hover { color: var(--ink-700); } }

/* ---- Back link on standalone pages (matches the planner's .back-link) ---- */
.guide-prose .back-link { display: inline-flex; align-items: center; gap: 0.35rem; margin-block-end: var(--space-md); padding: 0.4rem 0.9rem 0.4rem 0.5rem; border-radius: var(--radius-pill); background: transparent; color: var(--ink-700); font-weight: 750; font-size: 0.95rem; text-decoration: none; cursor: pointer; transition: color 150ms var(--ease-out), background-color 150ms var(--ease-out), transform 150ms var(--ease-out); }
.guide-prose .back-link svg { inline-size: 1.15em; block-size: 1.15em; }
@media (hover: hover) { .guide-prose .back-link:hover { color: var(--primary); background: rgba(0, 0, 0, 0.05); transform: translateX(-2px); } }
.guide-prose a.loss-cta { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--paper-raised); text-decoration: none; }
.guide-prose a.loss-cta svg { inline-size: 1.15em; block-size: 1.15em; }
.sync-consent { display: flex; gap: 0.6rem; align-items: flex-start; margin-block: var(--space-md); font-size: 0.95rem; color: var(--ink-700); line-height: 1.5; }
.sync-consent input { margin-block-start: 0.2rem; flex: none; }
.sync-consent[hidden] { display: none; }