/* Borrow ONLY the letter "f" from Source Serif 4 (owner, 21 Oct 2026): Fraunces' f curls over
   the next letter. unicode-range limits this face to U+0066, so every other letter stays Fraunces. */
@font-face {
  font-family: 'HBSerifF';
  src: url('/static/fonts/sourceserif4-latin.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0066;
}

/* ── One heading family site-wide (owner, 21 Oct 2026) ──────────────────────
   Every h1 and h2 (and .font-display / card titles) is Fraunces; body text stays DM Sans.
   'opsz' 24 pins the optical size; 'WONK' 0 / 'SOFT' 0 give the upright classic forms.
   (Newsreader was tried and reverted at the owner's request.) :where() keeps specificity
   at zero so page classes still set size and weight. */
:where(h1, h2:not(.uppercase):not(.text-xs):not(.text-sm)), .font-display, .sp-title {
  font-family: 'HBSerifF', 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 24, 'WONK' 0, 'SOFT' 0;
  /* No fi/ff/fl ligatures: the joined "fi" in "first" looked wrong to the owner. */
  font-variant-ligatures: no-common-ligatures no-discretionary-ligatures;
  font-feature-settings: 'liga' 0, 'clig' 0, 'dlig' 0;
}

/* Custom styles beyond Tailwind */

html {
  scroll-behavior: smooth;
}

/* Brand colour fallbacks — ensures custom colours render even if Tailwind CDN
   doesn't process the config (e.g. cold starts, CDN race conditions). */
.bg-brand-bg           { background-color: #FAFAF8; }
.bg-brand-surface      { background-color: #FFFFFF; }
.bg-brand-surface-alt  { background-color: #F5F4F0; }
.bg-brand-accent       { background-color: #1B6B6B; }
.bg-brand-accent-light { background-color: #E8F5F5; }
.bg-brand-accent-hover { background-color: #155A5A; }
.bg-brand-warm         { background-color: #C4842D; }
.bg-brand-warm-light   { background-color: #FFF8F0; }
.bg-brand-success      { background-color: #2D7D46; }
.bg-brand-success-light{ background-color: #E8F5EE; }
.bg-brand-error        { background-color: #C53030; }
.bg-brand-error-light  { background-color: #FFF5F5; }
.bg-brand-border       { background-color: #E8E6E1; }

.text-brand-text       { color: #1A1A18; }
.text-brand-secondary  { color: #6B6860; }
.text-brand-tertiary   { color: #9C9890; }
.text-brand-accent     { color: #1B6B6B; }
.text-brand-warm       { color: #C4842D; }
.text-brand-success    { color: #2D7D46; }
.text-brand-error      { color: #C53030; }

.border-brand-border   { border-color: #E8E6E1; }
.border-brand-accent   { border-color: #1B6B6B; }
.border-brand-warm     { border-color: #C4842D; }
.border-brand-error    { border-color: #C53030; }

/* main pack amber. The public base.html sets tailwind.config before the CDN
   loads, so brand-warning classes were never generated there and pack badges
   rendered uncoloured. Text uses a darker amber than the #D4963C swatch so small
   labels stay readable (about 4.9:1 on white). */
.bg-brand-warning        { background-color: #D4963C; }
.bg-brand-warning-light  { background-color: #FFF3EB; }
.text-brand-warning      { color: #9A6518; }
.border-brand-warning    { border-color: #D4963C; }
.hover\:bg-brand-warning\/10:hover { background-color: rgba(212, 150, 60, 0.10); }
.hover\:text-brand-warning:hover   { color: #9A6518; }
.hover\:bg-brand-accent-hover:hover { background-color: #155A5A; }
.hover\:bg-brand-accent-light:hover  { background-color: #E8F5F5; }
.hover\:text-brand-accent:hover      { color: #1B6B6B; }
.hover\:border-brand-accent:hover    { border-color: #1B6B6B; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fraunces/DM Sans set wider than the system fallback: balance headings and stop
   one-word last lines so the real fonts don't leave orphans (e.g. "death", "needed."). */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }


/* Cookie banner slide-up */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-slide-up {
  animation: slideUp 0.3s ease forwards;
}

/* Assessment step transitions */
.step-enter {
  animation: stepIn 0.25s ease forwards;
}

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

/* FAQ accordion */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-answer.open {
  max-height: 600px;
}

/* Guide article typography */
.guide-body h2 {
  font-family: 'HBSerifF', 'Fraunces', Georgia, serif;
  font-size: 1.375rem;
  font-weight: 600;
  color: #1A1A18;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

.guide-body h3 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1A1A18;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.guide-body p {
  color: #6B6860;
  line-height: 1.72;
  margin-bottom: 1rem;
}

.guide-body ul, .guide-body ol {
  color: #6B6860;
  line-height: 1.72;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.guide-body li {
  margin-bottom: 0.4rem;
}

.guide-body ul li {
  list-style-type: disc;
}

.guide-body ol li {
  list-style-type: decimal;
}

.guide-body a:not([class*="bg-"]) {
  color: #1B6B6B;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.guide-body a:not([class*="bg-"]):hover {
  color: #155A5A;
}

.guide-body strong {
  color: #1A1A18;
  font-weight: 600;
}

.guide-body .callout {
  background: #E8F5F5;
  border-left: 3px solid #1B6B6B;
  padding: 1rem 1.25rem;
  border-radius: 0 0.5rem 0.5rem 0;
  margin: 1.5rem 0;
}

.guide-body .callout p {
  margin: 0;
  color: #1A1A18;
}

.guide-body .warning-callout {
  background: #FFF3EB;
  border-left: 3px solid #D4963C;
  padding: 1rem 1.25rem;
  border-radius: 0 0.5rem 0.5rem 0;
  margin: 1.5rem 0;
}

.guide-body .warning-callout p {
  margin: 0;
  color: #1A1A18;
}

/* Lead paragraph (larger intro under the takeaways) */
.guide-body .guide-lead {
  font-size: 1.075rem;
  line-height: 1.7;
  color: #4A4842;
  margin-bottom: 1.25rem;
}

/* Key takeaways box (green ticks) */
.guide-takeaways {
  background: #E8F5EE;
  border: 1px solid #B8DFC8;
  border-radius: 0.75rem;
  padding: 1.1rem 1.35rem;
  margin: 0 0 1.75rem;
}
.guide-takeaways-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #2D7D46;
  margin-bottom: 0.6rem;
}
.guide-takeaways ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.guide-takeaways li {
  position: relative;
  padding-left: 1.6rem;
  color: #1A1A18;
  line-height: 1.55;
  font-size: 0.925rem;
  margin: 0;
  list-style: none;
}
.guide-takeaways li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #2D7D46;
  font-weight: 700;
}

/* Worked-example figure table */
.guide-figtable {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.925rem;
}
.guide-figtable td {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid #E8E6E1;
  color: #6B6860;
}
.guide-figtable td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #1A1A18;
}
.guide-figtable tr.figtable-sub td {
  font-weight: 600;
  color: #1A1A18;
  background: rgba(0, 0, 0, 0.015);
}
.guide-figtable tr.figtable-total td {
  font-weight: 700;
  color: #1A1A18;
  border-top: 2px solid #D4D1C9;
  border-bottom: none;
}
.guide-figtable tr.figtable-total td:last-child {
  color: #1B6B6B;
}
.guide-figtable caption {
  caption-side: top;
  text-align: left;
  font-size: 0.78rem;
  color: #9C9890;
  margin-bottom: 0.4rem;
}

/* Inline [n] citation markers */
.gp-cite {
  font-size: 0.62em;
  line-height: 0;
  vertical-align: super;
  margin-left: 1px;
  white-space: nowrap;
  font-weight: 600;
}
.gp-cite a {
  color: #1B6B6B;
  text-decoration: none;
}
.gp-cite a::before { content: "["; opacity: 0.55; }
.gp-cite a::after  { content: "]"; opacity: 0.55; }
.gp-cite a:hover { text-decoration: underline; }

/* Sources & references list */
.guide-refs {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #E8E6E1;
}
.guide-refs h2 {
  font-family: 'HBSerifF', 'Fraunces', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #1A1A18;
  margin: 0 0 0.4rem;
}
.guide-refs-lede {
  font-size: 0.86rem;
  color: #6B6860;
  line-height: 1.6;
  margin-bottom: 1rem;
  max-width: 68ch;
}
.guide-refs-list {
  margin: 0;
  padding-left: 1.4rem;
}
.guide-refs-list li {
  font-size: 0.875rem;
  color: #6B6860;
  line-height: 1.55;
  margin-bottom: 0.55rem;
}
.guide-refs-list li a {
  color: #1B6B6B;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.guide-refs-official {
  display: block;
  margin-top: 1rem;
  font-size: 0.78rem;
  color: #9C9890;
}

/* Assessment option buttons */
.option-btn {
  transition: all 0.15s ease;
}

.option-btn:hover {
  border-color: #1B6B6B;
  background-color: #E8F5F5;
}

.option-btn.selected {
  border-color: #1B6B6B;
  background-color: #E8F5F5;
  color: #1B6B6B;
}

/* Progress bar */
.progress-fill {
  transition: width 0.4s ease;
}

/* Checklist items */
.checklist-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 0;
  border-bottom: 1px solid #E8E6E1;
}

.checklist-item:last-child {
  border-bottom: none;
}

/* ── Homepage hero (owner refinement, 21 Oct 2026) ─────────────────────────
   Natural height (no forced 100vh). Fraunces headline, regular weight. */

.hh { padding-top: 44px; padding-bottom: 40px; }
.hh__inner { max-width: 56rem; margin: 0 auto; }
.hh__badge {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px;
  border-radius: 999px; background: #E8F5F5; color: #1B6B6B;
  font-size: .90625rem; font-weight: 500; line-height: 1; letter-spacing: .005em;
}
.hh__dot { width: 7px; height: 7px; border-radius: 50%; background: #1B6B6B; flex-shrink: 0; }
.hh__title {
  margin: 24px auto 0; max-width: 16ch; color: #1A1A18;
  font-weight: 400;
  font-size: clamp(2.625rem, 1rem + 4.8vw, 5rem); line-height: 1.05; letter-spacing: -0.025em;
}
.hh__lede {
  margin: 24px auto 0; max-width: 730px; color: #6B6860;
  font-size: clamp(1.0625rem, .9rem + .6vw, 1.375rem); font-weight: 400; line-height: 1.48;
  text-wrap: balance;
}
.hh__ctas { margin-top: 30px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; max-width: 440px; margin-left: auto; margin-right: auto; }
.hh__btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 28px;
  border-radius: 13px; border: 1px solid transparent; font-size: 1.0625rem; line-height: 1.2; text-align: center;
  text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.hh__btn:focus { outline: none; }
.hh__btn:focus-visible { outline: 3px solid rgba(27,107,107,.38); outline-offset: 3px; }
.hh__btn--primary { background: #1B6B6B; border-color: #1B6B6B; color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(14,74,71,.18); }
.hh__btn--primary:hover { background: #155A5A; border-color: #155A5A; box-shadow: 0 2px 6px -1px rgba(14,74,71,.28); }
.hh__btn--secondary { background: #fff; border-color: #D9D5CC; color: #3F3D38; font-weight: 500; }
.hh__btn--secondary:hover { border-color: #B9B4A9; background: #FCFBF9; color: #1A1A18; }
.hh__reassure { margin: 18px 0 0; font-size: .8125rem; line-height: 1.4; color: #75716A; }
@media (min-width: 640px) {
  .hh__ctas { flex-direction: row; justify-content: center; align-items: stretch; max-width: none; gap: 15px; }
}
@media (min-width: 768px) {
  .hh { padding-top: 64px; padding-bottom: 48px; }
  .hh__title { margin-top: 26px; line-height: 1.05; }
  .hh__lede { margin-top: 26px; }
  .hh__ctas { margin-top: 32px; }
  .hh__btn { min-height: 60px; padding: 0 32px; font-size: 1.125rem; }
  .hh__reassure { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) { .hh__btn { transition: none; } }
/* Phones (owner, 21 Oct 2026): the hero fills the first screen on its own, so the secondary product strip
   below starts under the fold instead of peeking in. 64px = .site-nav__bar. Desktop unchanged. */
@media (max-width: 767px) { .hh { min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); } }

/* ── Site nav (owner refinement, 21 Oct 2026) ── 64px on phones, 72px from 768px */
.site-nav__bar { height: 64px; }
.site-nav__links { gap: 18px; }
.site-nav__link { font-size: .9375rem; font-weight: 500; line-height: 1.2; padding: 6px 0; border-radius: 6px; }
.site-nav__cta {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 12px;
  font-size: .9375rem; font-weight: 600; line-height: 1; box-shadow: 0 1px 2px rgba(14,74,71,.18);
}
.site-nav__link:focus-visible, .site-nav__cta:focus-visible { outline: 3px solid rgba(27,107,107,.38); outline-offset: 3px; }
@media (min-width: 768px) { .site-nav__bar { height: 72px; } }
@media (min-width: 1024px) and (max-width: 1279px) { .site-nav__cta { padding: 0 16px; } }
@media (min-width: 1280px) { .site-nav__links { gap: 28px; } }

/* Trustpilot invitation under the hero buttons (owner, 21 Oct 2026) */
.hh__tp { display: inline-flex; align-items: center; gap: .5rem; margin-top: 20px; font-size: .9375rem; color: #5F5B54; text-decoration: none; }
.hh__tp span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.hh__tp:hover { color: #1B6B6B; }
.hh__stars { color: #00b67a; font-size: 1.125rem; letter-spacing: .02em; }
.hh__tp + .hh__reassure { margin-top: 8px; }