/* ============================================
   SEND Experts at Hand — Design System
   Two registers, one voice.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Color tokens — drawn directly from the brand logo */
  --ink:        #0F2F55;   /* logo navy — settings anchor, authority */
  --ink-deep:   #0A1F3A;   /* deeper navy, for max contrast text */
  --paper:      #F7F5F0;   /* warm paper — families anchor, warmth */
  --paper-deep: #EDE9E0;   /* slightly deeper paper for cards on paper bg */
  --clay:       #5FA694;   /* logo sage-teal, deepened for AA contrast — bridges both halves */
  --clay-deep:  #468576;   /* hover/active state, darker sage */
  --sage:       #8FC2B4;   /* logo sage — secondary, calm, used in family contexts */
  --sage-deep:  #5FA694;   /* sage for backgrounds/hovers (not text — fails AA on light bg) */
  --sage-text:  #2F6B5C;   /* darker sage for text on light backgrounds, AA-compliant */
  --sprout:     #C9CB4F;   /* logo star yellow-green — sparing highlight only */
  --sage-eyebrow: #0A3B2E; /* deep green eyebrow on sage backgrounds (split hero) */
  --teal:       #2F6B5C;   /* legacy alias still referenced by inline styles — matches sage-text */
  --teal-deep:  #468576;   /* legacy alias — matches clay-deep */
  --white:      #FFFFFF;
  --line:       rgba(15, 47, 85, 0.14);
  --line-soft:  rgba(15, 47, 85, 0.08);

  /* Type */
  --serif: "Source Serif 4", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing scale */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 6.5rem;
  --sp-7: 9rem;

  --radius: 3px;
  --max-width: 1180px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink-deep);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

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

:focus-visible {
  outline: 2.5px solid var(--clay);
  outline-offset: 3px;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--sp-3);
}

/* ============ Typography ============ */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
  color: var(--ink-deep);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
h4 { font-size: 1.1rem; font-weight: 600; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--ink);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--clay-deep);
  display: block;
  margin-bottom: var(--sp-2);
}

.eyebrow.on-dark { color: #E8A98B; }
.eyebrow.sage-tone { color: var(--sage-text); }

small, .small { font-size: 0.88rem; }

.serif-num {
  font-family: var(--serif);
  font-weight: 600;
}

/* ============ Buttons ============ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.85em 1.6em;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-clay {
  background: var(--clay-deep);
  color: var(--white);
}
.btn-clay:hover { background: #3A6B5E; }

.btn-ink {
  background: var(--ink);
  color: var(--paper);
}
.btn-ink:hover { background: var(--ink-deep); }

.btn-sage {
  background: #357065;
  color: var(--white);
}
.btn-sage:hover { background: #2B5B52; }

.btn-outline {
  background: transparent;
  border-color: currentColor;
}
.btn-outline.on-paper { color: var(--ink); }
.btn-outline.on-paper:hover { background: var(--ink); color: var(--paper); }
.btn-outline.on-dark { color: var(--paper); border-color: rgba(246,242,234,0.5); }
.btn-outline.on-dark:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ============ Header / Nav ============ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

/* Anchor targets scroll to below the 78px sticky header instead of under it */
[id] { scroll-margin-top: 94px; }

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink-deep);
  flex-shrink: 0;
}
.brand .mark {
  color: var(--clay);
  font-size: 1.4rem;
  line-height: 1;
}
.brand img.mark-icon {
  height: 54px;
  width: auto;
  display: block;
}

/* Two-line stacked wordmark */
.brand-stack {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.brand-stack .wordmark {
  font-family: var(--sans);
  font-weight: 800;
  line-height: 1.05;
  font-size: 1.15rem;
  color: var(--ink-deep);
  letter-spacing: -0.01em;
}
.brand-stack .wordmark span {
  display: block;
  white-space: nowrap;
}
.brand-stack .wordmark .line2 {
  position: relative;
  padding-top: 0.18em;
  margin-top: 0.18em;
}
.brand-stack .wordmark .line2::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  border-top: 1.5px solid var(--ink-deep);
}
.footer-brand .brand-stack .wordmark { color: var(--paper); }
.footer-brand .brand-stack .wordmark .line2::before { border-color: var(--paper); }
.mobile-drawer .brand-stack .wordmark { color: var(--paper); font-size: 1.2rem; }
.mobile-drawer .brand-stack .wordmark .line2::before { border-color: var(--paper); }

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.main-nav ul {
  display: flex;
  gap: 0.8rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.88rem;
  font-weight: 500;
}

.main-nav a {
  position: relative;
  padding: 0.4em 0;
  white-space: nowrap;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--clay);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.main-nav a:hover::after,
.main-nav a.active::after { transform: scaleX(1); }
.main-nav a.active { color: var(--clay-deep); }

.nav-cta { display: flex; gap: 0.6rem; }
.nav-cta.desktop-only { flex-shrink: 0; }
.nav-cta .btn { white-space: nowrap; }
/* Compact header CTAs — the header row carries 7 nav items + translate +
   two buttons inside the 1180px wrap; full-size buttons overflow it. */
.site-header .nav-cta .btn { font-size: 0.85rem; padding: 0.6em 1.05em; }

/* Header row spacing between the flex groups */
.site-header .wrap { gap: 0.6rem; }

/* Progressive trimming below full desktop: drop the secondary outline CTA,
   then the translate widget, before the 880px drawer breakpoint. */
@media (max-width: 1250px) {
  .site-header .nav-cta .btn-outline { display: none; }
}
@media (max-width: 1080px) {
  #google_translate_element.desktop-only { display: none; }
  .main-nav ul { font-size: 0.84rem; }
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
}
.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink-deep);
  margin: 5px 0;
}

@media (max-width: 940px) {
  .main-nav { display: none; }
  .menu-toggle { display: block; }
  .nav-cta.desktop-only { display: none; }
  #google_translate_element.desktop-only { display: none; }
}

/* Mobile drawer */
.mobile-drawer {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--ink-deep);
  z-index: 200;
  padding: var(--sp-4) var(--sp-3);
  overflow-y: auto;
}
.mobile-drawer.open { display: block; }
.mobile-drawer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-5);
}
.mobile-drawer .brand { color: var(--paper); }
.mobile-drawer .close-btn {
  background: none; border: none; color: var(--paper);
  font-size: 2rem; cursor: pointer; line-height: 1;
}
.mobile-drawer ul {
  list-style: none; padding: 0; margin: 0 0 var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.mobile-drawer a {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--paper);
}
.mobile-drawer .nav-cta { flex-direction: column; }


/* ── Translate consent button ─────────────────────────────────
   Shown in place of the Google Translate picker until the visitor
   asks for translation. See the click-to-load block in js/main.js. */
.translate-consent-btn {
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.translate-consent-btn:hover,
.translate-consent-btn:focus-visible {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.translate-consent-note {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink);
  opacity: 0.7;
}
/* ============ Path badge (settings/families signal) ============ */

.path-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.45em 0.9em;
  border-radius: 999px;
  margin-bottom: var(--sp-3);
}
.path-pill.settings { background: rgba(27,43,58,0.08); color: var(--ink); }
.path-pill.settings.on-dark { background: rgba(246,242,234,0.14); color: #CBD8E2; }
.path-pill.families { background: rgba(91,112,101,0.12); color: var(--sage-text); }
.path-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ============ Sections ============ */

section { padding: var(--sp-6) 0; }
.section-tight { padding: var(--sp-5) 0; }

.bg-ink { background: var(--ink); color: var(--paper); }
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4 { color: var(--white); }
.bg-ink .line { border-color: rgba(246,242,234,0.18); }

.bg-paper-deep { background: var(--paper-deep); }
.bg-white { background: var(--white); }

.bg-sage { background: var(--sage); color: var(--paper); }
.bg-sage h1, .bg-sage h2, .bg-sage h3 { color: var(--white); }

.divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: var(--sp-5) 0;
}

/* ============ Homepage Fork ============ */

.fork-hero {
  background: var(--paper);
  padding: var(--sp-6) 0 var(--sp-6);
  overflow: hidden;
  position: relative;
}
.fork-hero::before {
  content: "";
  position: absolute;
  top: -60px; right: -80px;
  width: 480px; height: 480px;
  background: url('images/node-pattern.svg') no-repeat center / contain;
  opacity: 0.5;
  pointer-events: none;
}
.fork-hero::after {
  content: "";
  position: absolute;
  bottom: -120px; left: -100px;
  width: 360px; height: 360px;
  background: url('images/node-pattern.svg') no-repeat center / contain;
  opacity: 0.3;
  pointer-events: none;
}

.hero-intro {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--sp-5);
  align-items: center;
  max-width: 980px;
  margin: 0 auto var(--sp-6);
  position: relative;
  z-index: 1;
}
.hero-photo {
  width: 240px;
  height: 300px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--sage) 0%, var(--clay) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 12px 36px rgba(15,47,85,0.18);
  border: 5px solid var(--white);
  overflow: hidden;
}
.hero-photo img {
  width: 100%; height: 100%;
  border-radius: 16px;
  object-fit: cover;
}
.hero-photo .placeholder-icon {
  width: 56px; height: 56px;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
.hero-intro-text h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  margin-bottom: var(--sp-2);
  color: var(--ink-deep);
}
.hero-intro-text .lede {
  color: var(--ink);
  font-size: 1.08rem;
  max-width: 560px;
}

@media (max-width: 700px) {
  .hero-intro { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .hero-photo { width: 200px; height: 250px; }
  .hero-intro-text .lede { max-width: 100%; }
}

.fork-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
}

.fork-panel {
  padding: var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  background: var(--white);
  border-radius: 16px;
  border: 1px solid var(--line-soft);
  box-shadow: 0 4px 20px rgba(15,47,85,0.06);
}
.fork-panel.settings { border-top: 4px solid var(--ink); }
.fork-panel.families { border-top: 4px solid var(--sage); }
.fork-panel:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(15,47,85,0.12); }

.fork-panel .path-pill { align-self: flex-start; }
.fork-panel h2 { margin-bottom: var(--sp-3); font-size: clamp(1.5rem, 2.4vw, 1.9rem); color: var(--ink-deep); }
.fork-panel p.fork-desc { color: var(--ink); margin-bottom: var(--sp-4); font-size: 1rem; opacity: 0.85; }
.fork-panel .btn { font-size: 0.96rem; padding: 0.9em 1.7em; }

@media (max-width: 820px) {
  .fork-split { grid-template-columns: 1fr; }
}

.fork-stat-row {
  display: flex;
  gap: var(--sp-4);
  margin: var(--sp-3) 0 var(--sp-4);
  flex-wrap: wrap;
}
.fork-stat { }
.fork-stat .num {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 700;
  display: block;
  color: var(--white);
}
.fork-stat .label {
  font-size: 0.78rem;
  color: rgba(246,242,234,0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fork-panel .btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 700px) {
  .fork-panel { padding: var(--sp-4) var(--sp-3); }
}

/* ============ Ledger (credibility stats) ============ */

.ledger {
  border-top: 1.5px solid var(--ink);
}
.ledger-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
.ledger-row .num {
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--clay-deep);
  line-height: 1;
}
.ledger-row .num.icon-slot {
  display: flex;
  align-items: center;
  width: 42px;
  height: 42px;
}
.ledger-row .num.icon-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ledger-row .desc h4 { margin-bottom: 0.2em; }
.ledger-row .desc p { color: var(--ink); font-size: 0.96rem; }
.ledger-row .tag {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
  opacity: 0.55;
  white-space: nowrap;
  align-self: center;
}

@media (max-width: 700px) {
  .ledger-row { grid-template-columns: 70px 1fr; }
  .ledger-row .tag { grid-column: 2; padding-top: 0.3em; }
  .ledger-row .num { font-size: 1.6rem; }
  .ledger-row .num.icon-slot { width: 32px; height: 32px; }
}

/* ============ Cards ============ */

.card-grid {
  display: grid;
  gap: var(--sp-3);
}
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) {
  .cols-2, .cols-3 { grid-template-columns: 1fr; }
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.card:hover {
  border-color: var(--clay);
  box-shadow: 0 6px 24px rgba(27,43,58,0.07);
}
.card .eyebrow { margin-bottom: var(--sp-1); }
.card h3 { margin-bottom: var(--sp-2); }
.card p { color: var(--ink); font-size: 0.97rem; }
.card .price-tag {
  display: inline-block;
  margin-top: var(--sp-2);
  font-family: var(--serif);
  font-weight: 600;
  color: var(--clay-deep);
}

.card.on-ink {
  background: rgba(255,255,255,0.04);
  border-color: rgba(246,242,234,0.14);
}
.card.on-ink:hover { border-color: var(--clay); }
.card.on-ink h3 { color: var(--white); }
.card.on-ink p { color: rgba(246,242,234,0.75); }

/* ============ AISK tier labels ============ */

.tier-pill {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2em 0.55em;
  border-radius: 4px;
  margin-bottom: 0.4em;
}
.tier-universal   { background: #E1F5EE; color: #085041; }
.tier-targeted    { background: #9FE1CB; color: #085041; }
.tier-targeted-plus { background: #5DCAA5; color: #fff; }
.tier-specialist  { background: #1D9E75; color: #fff; }

/* "Coming soon" state — topic is listed but no guide is published yet.
   Deliberately not a tier colour: it reads as a status, not a tier. */
.pill-soon {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2em 0.55em;
  border-radius: 4px;
  margin-bottom: 0.4em;
  margin-left: 0.4em;
  background: rgba(15,47,85,0.82);
  border: 1px solid rgba(246,242,234,0.45);
  color: #F6F2EA;
}
.img-tile.is-coming-soon { cursor: pointer; }
.img-tile.is-coming-soon:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

/* ============ Image tile with overlay (AISK topics) ============ */

.img-tile {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--paper-deep);
  text-decoration: none;
  border: 1px solid var(--line-soft);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.img-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(15,47,85,0.16);
}
.img-tile .tile-art {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14%;
}
.img-tile .tile-art svg {
  width: 100%;
  height: 100%;
}
.img-tile .tile-scrim {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 70%;
  background: linear-gradient(to top, rgba(15,47,85,0.95) 0%, rgba(15,47,85,0.82) 52%, rgba(15,47,85,0) 100%);
  pointer-events: none;
}
.img-tile .tile-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--sp-3);
  color: var(--white);
}
.img-tile .tile-caption h3 {
  color: var(--white);
  font-size: 1.05rem;
  margin-bottom: 0.3em;
  line-height: 1.25;
}
.img-tile .tile-caption p {
  color: rgba(246,242,234,0.82);
  font-size: 0.86rem;
  margin: 0;
}
.img-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
@media (max-width: 880px) {
  .img-tile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .img-tile-grid { grid-template-columns: 1fr; }
}

/* ============ Footer ============ */

.site-footer {
  background: var(--ink-deep);
  color: rgba(246,242,234,0.7);
  padding: 0 0 var(--sp-4);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid rgba(246,242,234,0.12);
}
.footer-grid h4 {
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: var(--sp-2);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6em; }
.footer-grid a:hover { color: var(--paper); }
.footer-brand .brand { color: var(--paper); margin-bottom: var(--sp-2); }
.footer-brand p { font-size: 0.92rem; max-width: 280px; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-3);
  font-size: 0.85rem;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* Statutory trading disclosure — registered name, number, place of
   registration and registered office. Required on a limited company's
   website; kept deliberately quiet, since the brand is the trading name. */
.footer-legal {
  flex-basis: 100%;
  font-size: 0.78rem;
  opacity: 0.62;
  line-height: 1.5;
}
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

.distinction-note {
  background: rgba(246,242,234,0.05);
  border: 1px solid rgba(246,242,234,0.14);
  border-radius: var(--radius);
  padding: var(--sp-3);
  font-size: 0.86rem;
  line-height: 1.55;
  margin-top: var(--sp-4);
  color: rgba(246,242,234,0.65);
}
.distinction-note strong { color: rgba(246,242,234,0.9); }

/* ============ Generic page hero ============ */

.page-hero {
  padding: var(--sp-6) 0 var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.page-hero.dark { background: var(--ink); border-bottom: none; }
.page-hero .lede { max-width: 640px; }

/* About hero — lede left, large founder photo right */
.about-hero-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--sp-5);
  align-items: center;
  margin-top: var(--sp-2);
}
.about-hero-photo {
  width: 340px;
  height: 420px;
  border-radius: 20px;
}
@media (max-width: 880px) {
  .about-hero-grid { grid-template-columns: 1fr; }
  .about-hero-photo { width: 260px; height: 320px; justify-self: center; }
}

/* Families page hero — photographic background with a warm paper→sage wash
   that keeps the ink text readable on the left and reveals the image right. */
.families-hero {
  position: relative;
  border-bottom: none;
  background-image:
    linear-gradient(100deg,
      rgba(247, 245, 240, 0.97) 0%,
      rgba(247, 245, 240, 0.90) 40%,
      rgba(143, 194, 180, 0.62) 78%,
      rgba(95, 166, 148, 0.55) 100%),
    url('../images/families-hero-bg.jpg');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
@media (max-width: 700px) {
  .families-hero {
    background-image:
      linear-gradient(175deg,
        rgba(247, 245, 240, 0.96) 0%,
        rgba(247, 245, 240, 0.88) 55%,
        rgba(143, 194, 180, 0.60) 100%),
      url('../images/families-hero-bg.jpg');
  }
}

.breadcrumb {
  font-size: 0.85rem;
  color: var(--ink);
  opacity: 0.6;
  margin-bottom: var(--sp-3);
}
.breadcrumb a:hover { text-decoration: underline; }

/* ============ Two-column layout ============ */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  align-items: start;
}
.split.center { align-items: center; }
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; gap: var(--sp-4); }
}

.aisk-cta-col { text-align: right; }
@media (max-width: 880px) {
  .aisk-cta-col { text-align: left; }
}

/* ============ Email-capture modal (AISK PDF downloads) ============ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,47,85,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
  z-index: 1000;
}
.modal-overlay.open { display: flex; }

.modal-box {
  background: var(--white);
  border-radius: 16px;
  max-width: 460px;
  width: 100%;
  padding: var(--sp-4);
  position: relative;
  box-shadow: 0 24px 60px rgba(15,47,85,0.3);
  max-height: 90vh;
  overflow-y: auto;
}
.modal-close {
  position: absolute;
  top: var(--sp-2); right: var(--sp-2);
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink);
  opacity: 0.5;
  cursor: pointer;
  padding: 0.3em;
}
.modal-close:hover { opacity: 1; }

.modal-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--clay-deep);
  margin-bottom: 0.4em;
  display: block;
}
.modal-box h3 {
  font-size: 1.35rem;
  margin-bottom: 0.5em;
  color: var(--ink-deep);
  padding-right: var(--sp-3);
}
.modal-box p.modal-desc {
  color: var(--ink);
  font-size: 0.95rem;
  margin-bottom: var(--sp-3);
}
.modal-form label {
  font-size: 0.85rem;
}
.modal-form .btn {
  width: 100%;
  justify-content: center;
  margin-top: var(--sp-2);
}
.modal-fineprint {
  font-size: 0.78rem;
  color: var(--ink);
  opacity: 0.55;
  margin-top: var(--sp-2);
  text-align: center;
}
.modal-success {
  display: none;
  text-align: center;
  padding: var(--sp-2) 0;
}
.modal-success.show { display: block; }
.modal-success .success-icon {
  font-size: 2.2rem;
  margin-bottom: 0.3em;
}
.modal-form.hide { display: none; }

/* ============ Quote / pull ============ */

.pull-quote {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink-deep);
  border-left: 3px solid var(--clay);
  padding-left: var(--sp-3);
  margin: var(--sp-4) 0;
}

/* ============ Testimonial cards ============ */

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
@media (max-width: 880px) {
  .testimonial-grid { grid-template-columns: 1fr; }
}
.testimonial-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  position: relative;
}
.testimonial-card::before {
  content: '\201C';
  font-family: var(--serif);
  font-size: 4rem;
  line-height: 1;
  color: var(--clay);
  opacity: 0.35;
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-3);
}
.testimonial-card blockquote {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-deep);
  margin: 0 0 var(--sp-3);
  padding-top: var(--sp-3);
  white-space: pre-line;
}
.testimonial-card .attribution {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--teal-deep, var(--teal));
}
.testimonial-card .attribution span {
  display: block;
  font-weight: 400;
  color: var(--ink);
  opacity: 0.65;
  margin-top: 0.2em;
}
.testimonial-placeholder {
  background: var(--paper-deep);
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  color: var(--ink);
  opacity: 0.45;
  font-family: var(--sans);
  font-size: 0.9rem;
  text-align: center;
}

/* ============ Form ============ */

.form-grid {
  display: grid;
  gap: var(--sp-3);
}
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 700px) { .form-row-2 { grid-template-columns: 1fr; } }

label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.4em;
  color: var(--ink-deep);
}
input, select, textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.97rem;
  padding: 0.6em 0.1em;
  border: none;
  border-bottom: 1.5px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink-deep);
  transition: border-color 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--clay);
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}
textarea { resize: vertical; min-height: 120px; border: 1.5px solid var(--line); padding: 0.7em 0.9em; border-radius: var(--radius); }

/* ============ Blog/resource list ============ */

.resource-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
}
/* Cards without a chapter tag (homepage) span both columns — otherwise the
   lone child sits in the 160px tag column and the text is crushed. */
.resource-card > div:only-child { grid-column: 1 / -1; }
.resource-card .chapter-tag {
  font-family: var(--serif);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--clay-deep);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
@media (max-width: 700px) {
  .resource-card { grid-template-columns: 1fr; gap: var(--sp-1); }
}

/* ============ Utility ============ */

.center-text { text-align: center; }
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mb-0 { margin-bottom: 0; }
.tag-list { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tag {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3em 0.7em;
  border-radius: 999px;
  background: var(--paper-deep);
  color: var(--ink);
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Homepage "Two Registers" (redesign 1b)
   ============================================ */

/* -- 1. Split hero -- */
.split-hero {
  position: relative;
  padding: 0;
}
.split-hero .halves {
  display: flex;
  min-height: 440px;
}
.hero-half {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  color: var(--white);
}
/* Content block inside each half — keeps the eyebrow/h1/p/button aligned
   as one unit. The half's outer padding (below) does the horizontal
   positioning so both halves sit within the page's 1180px wrap column. */
.hero-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.hero-half .node {
  position: absolute;
  background: url('../images/node-pattern.svg') no-repeat center / contain;
  pointer-events: none;
}
.hero-half .eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}
.hero-half h1,
.hero-half h2 {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.6vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  color: var(--white);
  letter-spacing: -0.01em;
}

/* Visually hidden, available to screen readers & crawlers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.hero-half p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  max-width: 400px;
}
.hero-half .btn {
  align-self: flex-start;
  margin-top: 8px;
  font-size: 15px;
  padding: 12px 24px;
}

/* Families (sage) half — outer (left) padding grows with viewport so
   content aligns with the page wrap on wide monitors. */
.hero-half.families {
  background: linear-gradient(160deg, var(--sage) 0%, var(--clay) 100%);
  padding: 72px 110px 56px max(48px, calc((100vw - var(--max-width)) / 2 + var(--sp-3)));
}
.hero-half.families .eyebrow { color: var(--sage-eyebrow, #0A3B2E); }
.hero-half.families p { color: rgba(255, 255, 255, 0.92); }
.hero-half.families .btn { background: var(--white); color: var(--sage-text); }
.hero-half.families .btn:hover { background: var(--paper-deep); }
.hero-half.families .node {
  top: -30px; left: -40px;
  width: 280px; height: 280px;
  opacity: 0.25;
  animation: heroDriftL 14s ease-in-out infinite alternate;
}

/* Settings (navy) half — outer (right) padding grows with viewport. */
.hero-half.settings {
  background: linear-gradient(200deg, var(--ink) 0%, var(--ink-deep) 100%);
  padding: 72px max(48px, calc((100vw - var(--max-width)) / 2 + var(--sp-3))) 56px 110px;
}
.hero-half.settings .eyebrow { color: var(--sage); }
.hero-half.settings p { color: rgba(246, 242, 234, 0.85); }
.hero-half.settings .btn { background: var(--clay); color: var(--white); }
.hero-half.settings .btn:hover { background: var(--clay-deep); }
.hero-half.settings .node {
  bottom: -40px; right: -50px;
  width: 300px; height: 300px;
  opacity: 0.2;
  filter: brightness(2);
  animation: heroDriftR 16s ease-in-out infinite alternate;
}

.hero-medallion {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--paper);
  border: 4px solid var(--white);
  box-shadow: 0 8px 28px rgba(15, 47, 85, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-medallion img { height: 62px; width: auto; }

@keyframes heroDriftL {
  from { transform: translate(0, 0) rotate(0); }
  to   { transform: translate(-40px, 30px) rotate(6deg); }
}
@keyframes heroDriftR {
  from { transform: translate(0, 0) rotate(0); }
  to   { transform: translate(30px, -24px) rotate(-4deg); }
}

/* -- 2. Specialism marquee -- */
.spec-marquee {
  background: var(--ink-deep);
  border-top: 1px solid rgba(246, 242, 234, 0.12);
  padding: 20px 0;
  overflow: hidden;
}
.spec-marquee .marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.spec-marquee:hover .marquee-track { animation-play-state: paused; }
.spec-marquee .marquee-group {
  display: flex;
  gap: 48px;
  padding-right: 48px;
  white-space: nowrap;
  align-items: center;
  font-family: var(--serif);
  font-size: 19px;
  color: rgba(246, 242, 234, 0.75);
}
.spec-marquee .marquee-group .sep { color: var(--clay); }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* -- 3. Audience tabs -- */
.audience-tabs {
  background: var(--paper);
  padding: 64px 0;
}
.audience-tabs h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 28px);
  color: var(--ink-deep);
  margin: 0 0 24px;
}
.seg-control {
  display: inline-flex;
  align-self: flex-start;
  border: 1.5px solid rgba(15, 47, 85, 0.2);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 24px;
}
.seg-control button {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 22px;
  border: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.seg-control button.active {
  background: var(--ink);
  color: var(--paper);
}
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.audience-grid[hidden] { display: none; }
.audience-cta { margin-top: 20px; }
.audience-cta[hidden] { display: none; }
.audience-card {
  background: var(--white);
  border: 1px solid rgba(15, 47, 85, 0.14);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

/* The cards are links, so they need to look and behave like them:
   a hover lift, a visible keyboard focus ring, and an arrow that
   moves on hover to signal the card goes somewhere. */
.audience-card:hover {
  border-color: var(--clay);
  box-shadow: 0 6px 20px rgba(15, 47, 85, 0.10);
  transform: translateY(-2px);
}
.audience-card:focus-visible {
  outline: 2px solid var(--clay-deep);
  outline-offset: 3px;
}
.audience-card-go {
  margin-top: auto;
  padding-top: 6px;
  font-size: 18px;
  line-height: 1;
  color: var(--clay-deep);
  transition: transform 0.18s ease;
}
.audience-card:hover .audience-card-go { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .audience-card, .audience-card-go { transition: none; }
  .audience-card:hover { transform: none; }
  .audience-card:hover .audience-card-go { transform: none; }
}
.audience-card h3 {
  font-family: var(--serif);
  font-size: 19px;
  margin: 0;
  color: var(--ink-deep);
}
.audience-card p {
  margin: 0;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.55;
}
.audience-grid:not([hidden]) .audience-card { animation: fadeUp 0.4s ease both; }
.audience-grid .audience-card:nth-child(2) { animation-delay: 0.08s; }
.audience-grid .audience-card:nth-child(3) { animation-delay: 0.16s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -- 4. Count-up stats ledger -- */
.stats-ledger {
  background: var(--ink);
  color: var(--paper);
  padding: 56px 0;
}
.stats-ledger h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 26px);
  color: var(--white);
  margin: 0 0 28px;
}
.stats-ledger .stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.stat-item {
  border-top: 2px solid var(--clay);
  padding-top: 18px;
}
.stat-item .stat-num {
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 700;
  color: var(--white);
  display: block;
  line-height: 1;
}
.stat-item .stat-label {
  font-size: 14px;
  color: rgba(246, 242, 234, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* -- Responsive (site breakpoints 880 / 700) -- */
@media (max-width: 880px) {
  .split-hero .halves { flex-direction: column; min-height: 0; }
  .hero-half { flex: 0 0 auto; justify-content: flex-start; }
  .hero-half .hero-content { gap: 12px; max-width: 100%; }
  .hero-half.families { padding: 48px 40px; }
  .hero-half.settings { padding: 48px 40px; }
  .hero-medallion { display: none; }
  .audience-grid { grid-template-columns: 1fr; }
  .stats-ledger .stat-grid { grid-template-columns: 1fr; }
  .stat-item .stat-num { font-size: 2.4rem; }
}
@media (max-width: 700px) {
  .hero-half.families, .hero-half.settings { padding: 48px 24px; }
  .stat-item .stat-num { font-size: 1.9rem; }
}
/* ── AISK Search ────────────────────────────────────────────── */
.aisk-search-wrap {
  background: var(--paper);
  border-bottom: 2px solid var(--teal);
  padding: var(--sp-4) 0;
}
.aisk-search-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: #fff;
  border: 2px solid var(--teal);
  border-radius: 8px;
  padding: var(--sp-2) var(--sp-3);
}
.aisk-search-icon {
  width: 20px;
  height: 20px;
  color: var(--teal);
  flex-shrink: 0;
}
.aisk-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink-deep);
  background: transparent;
  padding: 0.3em 0;
}
.aisk-search-input::placeholder { color: #aaa; }
.aisk-search-input::-webkit-search-cancel-button { display: none; }
.aisk-search-clear {
  border: none;
  background: none;
  cursor: pointer;
  color: #999;
  font-size: 1rem;
  padding: 0 0.2em;
  line-height: 1;
}
.aisk-search-clear:hover { color: var(--ink); }
.aisk-search-status {
  font-size: 0.875rem;
  color: var(--teal);
  min-height: 1.4em;
  margin-top: var(--sp-1);
}

/* Results panel */
#aisk-search-results {
  border-top: 3px solid var(--sprout);
}
#aisk-search-results h2 {
  font-size: 1.4rem;
}

@media (max-width: 640px) {
  .aisk-search-inner { padding: var(--sp-2); }
  .aisk-search-input { font-size: 0.95rem; }
}

/* ── Google Translate widget ─────────────────────────────── */
#google_translate_element {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
#google_translate_element .goog-te-gadget {
  font-family: var(--font-body);
  font-size: 0; /* hides the "Powered by" text nodes; select gets its own size */
  color: transparent;
}
#google_translate_element select {
  font-family: var(--font-body);
  font-size: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 6px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  max-width: 94px;
}
#google_translate_element select:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}
/* Hide Google's branding and banner */
.goog-te-banner-frame { display: none !important; }
body { top: 0 !important; }
.goog-logo-link { display: none !important; }
#google_translate_element .goog-te-gadget > span { display: none !important; }
#google_translate_element img { display: none !important; }

/* ── Book a session dropdown ────────────────────────────────── */
.book-dropdown {
  position: relative;
  display: inline-block;
}
.book-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15,47,85,0.12);
  min-width: 200px;
  z-index: 200;
  overflow: hidden;
}
.book-dropdown-menu a {
  display: flex;
  flex-direction: column;
  padding: 14px 18px;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s;
}
.book-dropdown-menu a:last-child { border-bottom: none; }
.book-dropdown-menu a:hover { background: var(--paper); }
.book-dropdown-menu .drop-label {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-deep);
}
.book-dropdown-menu .drop-sub {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--grey);
  margin-top: 2px;
}
.book-dropdown.open .book-dropdown-menu { display: block; }
.book-dropdown-toggle::after {
  content: ' ▾';
  font-size: 0.7em;
  opacity: 0.7;
}

/* ============ Training packages (settings.html #training) ============ */

.training-tier { margin-bottom: var(--sp-4); }

.tier-header { display: flex; align-items: baseline; gap: var(--sp-3); }
.tier-label {
  display: inline-block;
  background: var(--ink);
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.tier-header h3 {
  font-family: var(--sans);
  font-size: 1.15rem;
  color: var(--ink-deep);
  margin: 0;
}

.training-table {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.training-row {
  display: flex;
  flex-direction: column;
  flex: 1 1 280px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--sp-3);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.training-row:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15,47,85,0.10);
}
.training-title { padding: 0; background: none; border: none; }
.training-title h4 {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--ink-deep);
  margin: 0 0 var(--sp-1);
}
.chapter-ref {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--teal-deep, var(--teal));
  background: var(--paper-deep);
  border-radius: 4px;
  padding: 0.2em 0.5em;
}
.delivery-chip {
  display: inline-block;
  margin-left: 0.35em;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.2em 0.5em;
}
.delivery-chip.in-person {
  color: var(--clay-deep);
  border-color: var(--clay-deep);
}
.training-row > p {
  padding: var(--sp-2) 0 0;
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.55;
  margin: 0;
}
.training-meta {
  font-size: 0.85rem;
  color: var(--ink);
  opacity: 0.7;
  font-style: italic;
  margin-bottom: var(--sp-2);
}
.training-detail { list-style: none; padding: 0; margin: var(--sp-2) 0 0; }
.training-detail li {
  font-size: 0.88rem;
  color: var(--ink);
  padding: 3px 0 3px 14px;
  position: relative;
}
.training-detail li::before { content: '\2192'; position: absolute; left: 0; color: var(--teal); }

@media (max-width: 600px) {
  .tier-header { flex-wrap: wrap; }
}

/* ============ Animated logo build (about.html) ============
   Polished build from the Claude Design handoff (Aug 2026). Layers are
   real files in images/logo-anim/ (rasters at 2x, rays/leaves as SVG).
   Plays once when scrolled into view; sequencing lives in js/main.js
   (cues 1400ms apart, 5600ms total). Timing custom properties are
   scoped here so they cannot collide with site tokens. */
.logo-anim {
  /* Layer entrance durations. Keep these under the 1400ms cue gap. */
  --dur-hand-opacity: 0.7s;
  --dur-hand-transform: 0.8s;
  --dur-star-opacity: 0.6s;
  --dur-star-transform: 0.7s;
  --dur-shoot-opacity: 0.65s;
  --dur-shoot-transform: 0.85s;
  --dur-caption: 0.7s;
  --dur-wordmark: 0.8s;
  /* Easing. The hands are structural: ease-out, no overshoot.
     The star and shoot are the living parts: slight overshoot. */
  --ease-hand: cubic-bezier(.2, .8, .2, 1);
  --ease-star: cubic-bezier(.34, 1.56, .64, 1);
  --ease-shoot: cubic-bezier(.22, .9, .3, 1.2);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
}
/* Fluid icon stack: 210px at desktop, never wider than half the
   viewport, never below 132px. Aspect ratio matches the artwork. */
.logo-anim .icon-wrap {
  position: relative;
  width: clamp(132px, 46vw, 210px);
  aspect-ratio: 440 / 433;
}
.logo-anim .icon-wrap img.lyr {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
.logo-anim .lyr { opacity: 0; }
/* Hands rise 10px into place; star and rays scale from the star's
   centre; the shoot grows from its base. */
.logo-anim .lyr-navy   { transform: translateY(-10px) scale(0.98); transition: opacity var(--dur-hand-opacity) ease, transform var(--dur-hand-transform) var(--ease-hand); }
.logo-anim .lyr-teal   { transform: translateY(10px) scale(0.98);  transition: opacity var(--dur-hand-opacity) ease, transform var(--dur-hand-transform) var(--ease-hand); }
.logo-anim .lyr-star   { transform: scale(0.82); transform-origin: 50% 36%; transition: opacity var(--dur-star-opacity) ease, transform var(--dur-star-transform) var(--ease-star); }
.logo-anim .lyr-rays   { transform: scale(0.7);  transform-origin: 48% 33%; transition: opacity var(--dur-star-opacity) ease, transform var(--dur-star-transform) ease; }
.logo-anim .lyr-leaves { transform: translateY(10px) scale(0.9); transform-origin: 51% 31%; transition: opacity var(--dur-shoot-opacity) ease, transform var(--dur-shoot-transform) var(--ease-shoot); }
.logo-anim .icon-wrap.show-hand  .lyr-navy   { opacity: 1; transform: translateY(0) scale(1); }
.logo-anim .icon-wrap.show-star  .lyr-star   { opacity: 1; transform: scale(1); }
.logo-anim .icon-wrap.show-star  .lyr-rays   { opacity: 1; transform: scale(1); }
.logo-anim .icon-wrap.show-teal  .lyr-teal   { opacity: 1; transform: translateY(0) scale(1); }
.logo-anim .icon-wrap.grow-shoot .lyr-leaves { opacity: 1; transform: translateY(0) scale(1); }

/* Settle pulse on the finished mark: a small landing beat so the
   build reads as arriving rather than stopping. */
.logo-anim .icon-wrap.settled { animation: logoSettlePulse 0.5s ease-out; }
@keyframes logoSettlePulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.035); }
  100% { transform: scale(1); }
}

.logo-anim .wordmark .title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 6vw, 2rem);
  line-height: 1.05;
  color: var(--ink);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-wordmark) ease, transform var(--dur-wordmark) ease;
}
.logo-anim .wordmark .tagline {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--ink);
  opacity: 0;
  border-top: 1.5px solid var(--ink);
  padding-top: 8px;
  display: inline-block;
  /* 0.15s stagger behind the title */
  transition: opacity var(--dur-wordmark) ease 0.15s;
}
.logo-anim.show-word .wordmark .title   { opacity: 1; transform: translateY(0); }
.logo-anim.show-word .wordmark .tagline { opacity: 1; }

/* The four single lines are stacked on top of each other and
   cross-fade; the summary block replaces them at the last cue. */
.logo-anim .caption {
  min-height: 150px;
  max-width: 560px;
  margin: 0 auto;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-anim .caption .solo {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(calc(-50% + 6px));
  font-size: 1.08rem; font-weight: 500; line-height: 1.45; color: var(--ink);
  opacity: 0;
  transition: opacity var(--dur-caption) ease, transform var(--dur-caption) ease;
}
.logo-anim .caption .solo.on { opacity: 1; transform: translateY(-50%); }
.logo-anim .caption .stack {
  display: flex; flex-direction: column; gap: 7px; width: 100%;
  opacity: 0; transition: opacity var(--dur-caption) ease;
}
.logo-anim .caption .stack.on { opacity: 1; }
.logo-anim .caption .stack span { font-size: 1.05rem; font-weight: 500; color: var(--ink); line-height: 1.4; }
.logo-anim .caption .stack span.prev { color: var(--grey-ink, rgba(15,47,85,0.5)); font-size: 0.95rem; }

@media (max-width: 700px) {
  .logo-anim { gap: var(--sp-2); }
  .logo-anim .caption { min-height: 170px; }
  .logo-anim .caption .solo,
  .logo-anim .caption .stack span { font-size: 1rem; }
}

/* Reduced motion: no build at all — the finished mark and the full
   summary line appear immediately; the four single captions are
   never shown. */
@media (prefers-reduced-motion: reduce) {
  .logo-anim .lyr,
  .logo-anim .wordmark .title,
  .logo-anim .wordmark .tagline,
  .logo-anim .caption .stack {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .logo-anim .caption .solo { display: none; }
  .logo-anim .icon-wrap.settled { animation: none !important; }
}

/* ── Footer mark band ─────────────────────────────────────────
   The brand mark is a full-colour lockup whose hand is the same navy as
   the footer, so it disappeared against it. A pale full-bleed stripe
   carries the logo; the rest of the footer stays navy. */
.footer-mark-band {
  background: var(--paper);
  border-top: 2px solid var(--clay);
  padding: var(--sp-3) 0;
  margin-bottom: var(--sp-5);
}
.footer-mark-band .brand { color: var(--ink); margin: 0; }
.footer-mark-band .brand-stack .wordmark { color: var(--ink); }
.footer-mark-band .brand-stack .wordmark .line2::before { border-color: var(--ink); }

/* ── AISK guide pages ─────────────────────────────────────────
   The AISK guides also exist as designed PDFs in /guides. These HTML
   versions carry the same content as real, indexable, screen-readable
   pages; the persistent "Download PDF" bar calls window.print(), so the
   reader saves or prints from the browser and the HTML stays the single
   source of truth. Everything below the article is print-suppressed. */

/* AISK section band — sits above the guide hero so a reader landing straight
   on a guide from search knows which part of the site they are in. Shares the
   guide column width so the band, the H1 and the body all share one left edge. */
.aisk-band { background: var(--ink); padding: var(--sp-2) 0; }
.aisk-band .wrap {
  max-width: 760px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.aisk-band-mark { display: flex; align-items: center; gap: 0.75rem; }
.aisk-band-abbr {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: #fff;
  padding-right: 0.75rem;
  border-right: 1px solid rgba(246, 242, 234, 0.28);
}
.aisk-band-full {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  line-height: 1.4;
  color: var(--sage);
}
.aisk-band-mark:hover .aisk-band-abbr { color: var(--sage); }
.aisk-band-back {
  font-size: 0.8rem;
  color: rgba(246, 242, 234, 0.78);
  white-space: nowrap;
}
.aisk-band-back:hover { color: #fff; text-decoration: underline; }
@media (max-width: 640px) {
  .aisk-band .wrap { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
}

/* The hero no longer carries the site's full section padding — the band above
   it now does the work that empty space was doing badly. */
.guide-hero {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-4) 0 var(--sp-5);
}
.guide-hero .wrap { max-width: 760px; }
.guide-hero h1 { max-width: 20ch; }
.guide-hero .lede { max-width: 60ch; }

.guide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  margin-top: var(--sp-3);
  font-size: 0.85rem;
  color: var(--ink);
  opacity: 0.75;
}
.guide-meta .sep { opacity: 0.4; }

.guide-body { padding-bottom: var(--sp-6); }
.guide-body .wrap { max-width: 760px; }
.guide-body h2 {
  font-size: 1.5rem;
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 2px solid var(--line-soft);
}
.guide-body h2:first-of-type { margin-top: var(--sp-3); }
.guide-body h3 { font-size: 1.1rem; margin-top: var(--sp-4); margin-bottom: var(--sp-1); }
.guide-body p { margin-bottom: var(--sp-2); line-height: 1.75; }
.guide-body ul, .guide-body ol { margin: 0 0 var(--sp-2) var(--sp-3); }
.guide-body li { margin-bottom: var(--sp-1); line-height: 1.7; }
.guide-body li > strong:first-child { color: var(--ink-deep); }

/* A quiet aside for the "note for families / settings" sign-off */
.guide-note {
  background: var(--paper-deep);
  border-left: 3px solid var(--clay);
  padding: var(--sp-3);
  margin-top: var(--sp-4);
  font-size: 0.95rem;
}
.guide-note p:last-child { margin-bottom: 0; }

/* Definition list — the glossary. Term and definition read as one block,
   with a hairline between entries rather than heavy heading spacing. */
.guide-glossary { margin: var(--sp-3) 0 0; }
.guide-glossary dt {
  font-weight: 600;
  color: var(--ink-deep);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.guide-glossary dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.guide-glossary dd {
  margin: var(--sp-1) 0 0;
  line-height: 1.7;
}

/* Tables inside a guide. Wrapped in .guide-table-wrap so a wide table
   scrolls inside its own box rather than pushing the page sideways. */
.guide-table-wrap { overflow-x: auto; margin: var(--sp-3) 0; }
.guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 560px;
}
.guide-table th,
.guide-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--sp-2);
  border: 1px solid var(--line);
  line-height: 1.6;
}
.guide-table thead th {
  background: var(--paper-deep);
  color: var(--ink-deep);
  font-weight: 600;
}
.guide-table tbody th {
  width: 22%;
  color: var(--teal);
  font-weight: 600;
}

/* Persistent download bar — fixed to the viewport bottom */
.guide-dl-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--ink);
  border-top: 2px solid var(--clay);
  box-shadow: 0 -6px 24px rgba(15, 47, 85, 0.18);
}
.guide-dl-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
}
.guide-dl-bar .dl-label {
  color: rgba(246, 242, 234, 0.82);
  font-size: 0.9rem;
  line-height: 1.4;
}
.guide-dl-bar .dl-label strong { color: #fff; display: block; font-weight: 600; }
.guide-dl-bar .btn { flex: 0 0 auto; }
/* Keep the bar from covering the end of the article */
body.has-dl-bar { padding-bottom: 6.5rem; }

@media (max-width: 640px) {
  .guide-dl-bar .wrap { flex-direction: column; align-items: stretch; text-align: center; }
  .guide-dl-bar .dl-label { font-size: 0.82rem; }
  body.has-dl-bar { padding-bottom: 9rem; }
}

/* ── Print ────────────────────────────────────────────────────
   "Download PDF" opens the browser print dialogue, so the printed page
   IS the deliverable. Strip the site chrome and set the article in black
   on white with the brand mark and source URL as a header/footer. */
@media print {
  .site-header,
  .mobile-drawer,
  .site-footer,
  .guide-dl-bar,
  .breadcrumb,
  #google_translate_element,
  .skiplink,
  .goog-te-banner-frame { display: none !important; }

  body.has-dl-bar { padding-bottom: 0; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }

  .guide-hero,
  .guide-body { background: #fff !important; border: none !important; }
  .guide-hero { padding: 0 0 12pt 0 !important; }
  .guide-body { padding: 0 !important; }
  .wrap { max-width: none !important; padding: 0 !important; }

  .guide-print-head { display: block !important; margin-bottom: 12pt; }

  .guide-hero h1 { font-size: 20pt; margin: 0 0 4pt; color: #000 !important; }
  .guide-hero .lede { font-size: 11pt; color: #333 !important; }
  .guide-meta { font-size: 9pt; opacity: 1; color: #444 !important; }

  .guide-body h2 {
    font-size: 13pt;
    border-top: 1px solid #bbb;
    margin-top: 14pt;
    padding-top: 6pt;
    break-after: avoid;
    page-break-after: avoid;
  }
  .guide-body h3 { font-size: 11.5pt; break-after: avoid; page-break-after: avoid; }
  .guide-body p, .guide-body li { line-height: 1.5; orphans: 3; widows: 3; }
  .guide-note {
    background: #f4f4f4 !important;
    border-left: 2pt solid #666;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  a { color: #000 !important; text-decoration: none !important; }
  /* Spell out link targets that carry information */
  .guide-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #555; }

  @page { margin: 16mm 15mm; }
}

/* The printed-page masthead is hidden on screen */
.guide-print-head { display: none; }

/* Guide extras: side-by-side "don't / do" comparisons and tick-list summaries.
   Several AISK guides contrast weak and strong wording; the PDFs use dingbats,
   which don't survive as text, so the pair is rebuilt semantically here.
   Both sides stay on the existing token palette — the distinction is carried by
   the label and the mark, not by a red/green pairing (which colour-blind
   readers and greyscale printing would both lose). */
.guide-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
}
.guide-compare .cmp {
  padding: var(--sp-2);
  border-radius: var(--radius);
  font-size: 0.95rem;
}
.guide-compare .cmp p { margin-bottom: 0; line-height: 1.6; }
.guide-compare .cmp-label {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--sp-1) !important;
}
.guide-compare .cmp-no {
  background: var(--paper-deep);
  border-left: 3px solid var(--line);
}
.guide-compare .cmp-no .cmp-label { color: var(--ink); opacity: 0.75; }
.guide-compare .cmp-no p:not(.cmp-label) { opacity: 0.8; }
.guide-compare .cmp-yes {
  background: rgba(47, 107, 92, 0.08);
  border-left: 3px solid var(--sage-text);
}
.guide-compare .cmp-yes .cmp-label { color: var(--sage-text); }

@media (max-width: 640px) {
  .guide-compare { grid-template-columns: 1fr; }
}

.guide-checklist { list-style: none; margin-left: 0 !important; }
.guide-checklist li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: var(--sp-2);
}
.guide-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sage-text);
  font-weight: 700;
}

.guide-body .pull-quote cite {
  display: block;
  margin-top: var(--sp-1);
  font-style: normal;
  font-size: 0.85rem;
  opacity: 0.7;
}

@media print {
  .guide-compare { break-inside: avoid; page-break-inside: avoid; }
  .guide-compare .cmp-no { background: #f6f6f6 !important; border-left: 2pt solid #999; }
  .guide-compare .cmp-yes { background: #ececec !important; border-left: 2pt solid #333; }
  .guide-compare .cmp-no .cmp-label,
  .guide-compare .cmp-yes .cmp-label { color: #000 !important; opacity: 1; }
  .guide-compare .cmp-no p:not(.cmp-label) { opacity: 1; }
  .guide-checklist li::before { color: #000; }
}

/* ── AISK guide print furniture ────────────────────────────────────
   The AISK guides are read on screen and saved or printed as PDFs from
   the browser. These blocks add the source information a leaflet needs
   once it leaves the site: the AISK band, a line saying the guide belongs
   to a library, and a closing block with contact details and a call to
   action. All three are print-only — on screen the page already carries
   the section band, the breadcrumb and the site footer. */

.pdf-band, .pdf-serieslink, .pdf-close { display: none; }

@media print {
  @page { size: A4; margin: 14mm 15mm 16mm; }

  /* The website's section band is replaced by the print one */
  .aisk-band { display: none !important; }
  .path-pill .dot { display: none !important; }
  .path-pill { gap: 0 !important; }

  /* Masthead band, carried over from the guide pages on the site */
  .pdf-band {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10pt;
    background: #0F2F55 !important;
    color: #fff !important;
    padding: 5pt 9pt;
    margin: 0 0 10pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .pdf-band .left { display: flex; align-items: baseline; gap: 7pt; }
  .pdf-band .abbr {
    font-family: var(--serif);
    font-size: 11pt; font-weight: 600; color: #fff !important;
  }
  .pdf-band .full,
  .pdf-band .path {
    font-size: 6.5pt; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.09em; color: #8FC2B4 !important;
  }

  /* "Part of the AISK" line, under the title block */
  .pdf-serieslink {
    display: block !important;
    font-size: 8pt;
    color: #444 !important;
    border-top: 0.5pt solid #bbb;
    padding-top: 5pt;
    margin-top: 7pt;
  }
  .pdf-serieslink strong { color: #2F6B5C !important; }

  /* Closing block — kept whole, never split across a page break */
  .pdf-close {
    display: block !important;
    border: 0.5pt solid #bbb;
    border-top: 2pt solid #5FA694;
    margin-top: 16pt;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .pdf-close .head { padding: 9pt 11pt 8pt; }
  .pdf-close .head h4 {
    font-family: var(--serif);
    font-size: 11pt; font-weight: 600; margin: 0 0 4pt; color: #0F2F55 !important;
  }
  .pdf-close .head p { margin: 0 0 5pt; font-size: 8.5pt; color: #444 !important; line-height: 1.5; }
  .pdf-close .head p:last-child { margin-bottom: 0; }
  .pdf-close .head .also strong { color: #2F6B5C !important; }
  .pdf-close .split { display: flex; border-top: 0.5pt solid #bbb; }
  .pdf-close .cta { flex: 1.15; padding: 9pt 11pt; border-right: 0.5pt solid #bbb; }
  .pdf-close .contact {
    flex: 1; padding: 9pt 11pt;
    background: #F2F4F6 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .pdf-close h5 {
    margin: 0 0 5pt; font-size: 7pt; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.09em; color: #2F6B5C !important;
  }
  .pdf-close .split p { margin: 0 0 4pt; font-size: 8.5pt; color: #444 !important; line-height: 1.5; }
  .pdf-close .split p:last-child { margin-bottom: 0; }
  .pdf-close .row { display: flex; gap: 6pt; font-size: 8.5pt; margin-bottom: 2pt; }
  .pdf-close .row .k { color: #666 !important; min-width: 36pt; }
  .pdf-close .row .v { color: #0F2F55 !important; font-weight: 600; }
  /* the print stylesheet spells out link targets; not wanted in here */
  .pdf-close a::after { content: "" !important; }
}

/* ── AISK guide print: page-break behaviour ────────────────────────
   Everything here is about how the text falls across pages. The guides
   are long and structured, so the failure modes are specific: a heading
   stranded at the foot of a page, a table splitting away from its header
   row, a glossary term parted from its definition, a single line of a
   paragraph carried over alone. */

@media print {
  /* A heading always travels with what follows it */
  .guide-body h2,
  .guide-body h3 {
    break-after: avoid;
    page-break-after: avoid;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* …and is never left dangling at the foot of a page on its own */
  .guide-body h2 + p,
  .guide-body h3 + p,
  .guide-body h2 + ul,
  .guide-body h3 + ul,
  .guide-body h2 + .guide-table-wrap,
  .guide-body h3 + .guide-table-wrap { break-before: avoid; page-break-before: avoid; }

  /* No single line carried alone to the top or bottom of a page */
  .guide-body p,
  .guide-body li { orphans: 3; widows: 3; }
  .guide-body li { break-inside: avoid; page-break-inside: avoid; }

  /* Tables: repeat the header row if one has to split, and never split a row */
  .guide-table thead { display: table-header-group; }
  .guide-table tr { break-inside: avoid; page-break-inside: avoid; }
  .guide-table-wrap { overflow: visible !important; break-inside: auto; }
  .guide-table { min-width: 0 !important; font-size: 9pt; }
  .guide-table th, .guide-table td { padding: 4pt 5pt; border-color: #bbb !important; }
  .guide-table thead th { background: #f0f0f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Glossary: a term and its definition stay on the same page */
  .guide-glossary dt { break-after: avoid; page-break-after: avoid; }
  .guide-glossary dd { break-before: avoid; page-break-before: avoid; break-inside: avoid; page-break-inside: avoid; }

  /* Blocks that only make sense whole */
  .pull-quote,
  .guide-note,
  .guide-compare,
  .guide-checklist li { break-inside: avoid; page-break-inside: avoid; }

  /* The title block and the opening of the guide stay together */
  .guide-hero { break-after: avoid; page-break-after: avoid; }

  /* Rhythm: a little more air between sections than the screen needs,
     because a printed page has no scrollbar to signal structure */
  .guide-body h2 { margin-top: 16pt; padding-top: 7pt; }
  .guide-body h3 { margin-top: 12pt; }
  .guide-body p { margin-bottom: 7pt; }
  .guide-body ul, .guide-body ol { margin-bottom: 9pt; }
  .guide-body li { margin-bottom: 3pt; }
}