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

:root {
  --ink: #0B110E;
  --ink-raise: #111A15;
  --line: #1E2C24;
  --line-soft: #17231C;
  --bone: #ECE7D9;
  --bone-dim: #9AA69B;
  --sage: #71806F;
  --living: #4FCF86;
  --living-deep: #2E7E52;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--ink);
  color: var(--bone);
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(79, 207, 134, 0.08), transparent 62%),
    linear-gradient(180deg, #0C1310 0%, var(--ink) 42%, #0A0F0C 100%);
  z-index: -2;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  opacity: 0.035;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 26px;
}

.eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage);
}

/* ---------- Nav ---------- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--bone);
}
.nav-brand img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--line);
  display: block;
}
.nav-brand span {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.nav-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--bone);
  text-decoration: none;
  border: 1px solid var(--line);
  padding: 9px 16px;
  border-radius: 10px;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.nav-cta:hover {
  border-color: var(--living);
  color: var(--living);
  background: rgba(79, 207, 134, 0.06);
}

/* ---------- Blog index ---------- */
.blog-hero { padding: 12px 0 36px; }
.blog-hero .eyebrow { margin-bottom: 14px; }
.blog-hero h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 380;
  font-size: clamp(32px, 6.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--bone);
  max-width: 16ch;
}
.blog-hero p {
  margin-top: 16px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--bone-dim);
  max-width: 46ch;
}

.post-list { display: flex; flex-direction: column; padding-bottom: 20px; }
.post-card {
  padding: 30px 0;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.post-list .post-card:last-child { border-bottom: 1px solid var(--line-soft); }
.post-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
}
.post-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(20px, 3.6vw, 25px);
  color: var(--bone);
  letter-spacing: -0.01em;
  line-height: 1.24;
  transition: color 0.15s ease;
}
.post-card:hover .post-title { color: var(--living); }
.post-excerpt {
  font-size: 15px;
  color: var(--bone-dim);
  line-height: 1.62;
  max-width: 58ch;
}
.post-meta { font-size: 12.5px; color: var(--sage); letter-spacing: 0.02em; }

.post-list-note {
  padding: 26px 0 8px;
  font-size: 14px;
  color: var(--sage);
  font-style: italic;
  font-family: 'Fraunces', Georgia, serif;
}

/* ---------- Article ---------- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--sage);
  text-decoration: none;
  margin-bottom: 30px;
  transition: color 0.15s ease;
}
.back-link:hover { color: var(--living); }

.article-head {
  padding: 4px 0 32px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 36px;
}
.article-head .eyebrow { margin-bottom: 16px; }
.article-head h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 380;
  font-size: clamp(30px, 5.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--bone);
  max-width: 22ch;
}
.article-meta {
  margin-top: 18px;
  font-size: 13px;
  color: var(--sage);
  letter-spacing: 0.02em;
}

.prose p { font-size: 16.5px; line-height: 1.72; color: var(--bone-dim); margin-bottom: 18px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--bone); font-weight: 600; }
.prose a { color: var(--living); text-decoration: underline; text-decoration-color: rgba(79,207,134,0.35); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--living); }
.prose h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(23px, 4vw, 29px);
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--bone);
  margin: 40px 0 16px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--bone);
  letter-spacing: -0.005em;
  margin: 28px 0 12px;
}
.prose ul, .prose ol {
  margin: 0 0 18px;
  padding-left: 22px;
  color: var(--bone-dim);
  font-size: 16.5px;
  line-height: 1.72;
}
.prose li { margin-bottom: 9px; }
.prose li::marker { color: var(--sage); }
.prose li strong { color: var(--bone); }

.callout {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--ink-raise);
  padding: 22px 24px;
  margin: 30px 0;
}
.callout p { margin: 0; color: var(--bone-dim); font-size: 15px; line-height: 1.62; }
.callout p + p { margin-top: 10px; }
.callout strong { color: var(--living); }

/* ---------- FAQ accordion ----------
   build.js wraps every question under "Common questions" in <details>. Styled
   as a bordered list rather than a stack of cards: the section is the last
   thing on the page and should read as an index, not compete with the prose
   above it. */
.prose details.faq { border-top: 1px solid var(--line-soft); }
.prose details.faq:last-of-type { border-bottom: 1px solid var(--line-soft); }
.prose details.faq summary {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 17px 0;
  cursor: pointer;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--bone);
  transition: color 0.15s ease;
  /* Both are needed: Safari honours the -webkit- marker, everything else
     needs list-style, and leaving either in double-renders the triangle. */
  list-style: none;
}
.prose details.faq summary::-webkit-details-marker { display: none; }
.prose details.faq summary:hover { color: var(--living); }
.prose details.faq summary::after {
  content: '';
  flex: none;
  margin: 6px 2px 0 auto;
  width: 7px;
  height: 7px;
  border-right: 1.6px solid var(--sage);
  border-bottom: 1.6px solid var(--sage);
  transform: rotate(45deg);
  transition: transform 0.18s ease, border-color 0.15s ease;
}
.prose details.faq[open] summary::after { transform: rotate(-135deg); margin-top: 10px; }
.prose details.faq summary:hover::after { border-color: var(--living); }
.prose details.faq[open] summary { color: var(--bone); }
.prose .faq-body { padding: 0 0 20px; }
.prose .faq-body p { font-size: 16px; margin-bottom: 12px; }
.prose .faq-body p:last-child { margin-bottom: 0; }
.prose h2 + details.faq { margin-top: 4px; }

/* ---------- Tables ----------
   Wrapped in .table-scroll by build.js so a wide comparison table scrolls in
   its own box instead of making the whole article scroll sideways on a phone. */
.table-scroll {
  overflow-x: auto;
  margin: 26px 0;
  -webkit-overflow-scrolling: touch;
}
.prose table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.6;
}
.prose thead th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
  padding: 0 16px 10px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.prose tbody td {
  padding: 14px 16px 14px 0;
  color: var(--bone-dim);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.prose tbody tr:last-child td { border-bottom: none; }
.prose th:last-child, .prose td:last-child { padding-right: 0; }
.prose tbody td strong { color: var(--bone); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .prose details.faq summary,
  .prose details.faq summary::after { transition: none; }
}

/* Reuse of homepage CTA button */
.cta-row {
  margin-top: 40px;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  background: var(--living);
  color: #06120B;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 16px 30px;
  border-radius: 13px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  box-shadow: 0 10px 30px -12px rgba(79, 207, 134, 0.55);
}
.cta svg { width: 19px; height: 19px; }
.cta:hover { transform: translateY(-2px); background: #5cd991; box-shadow: 0 16px 34px -12px rgba(79, 207, 134, 0.6); }
.cta:active { transform: translateY(0); }
.cta-note { font-size: 12.5px; color: var(--sage); letter-spacing: 0.04em; }

/* ---------- Top-of-article CTA ---------- */
/* Sits between the article header and the prose. Muted card, not a second
   green slab: the bottom .cta stays the loud one, this is the version a
   reader meets before they have decided the article is worth their time. */
.cta-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 30px 0 6px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(79, 207, 134, 0.055), rgba(79, 207, 134, 0.015));
}
.cta-top-mark {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.cta-top-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cta-top-copy strong {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bone);
  line-height: 1.3;
}
.cta-top-copy span { font-size: 13.5px; line-height: 1.45; color: var(--bone-dim); }
.cta-top-btn {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--living);
  color: #06120B;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 12px 20px;
  border-radius: 11px;
  white-space: nowrap;
  transition: transform 0.18s ease, background 0.18s ease;
}
.cta-top-btn svg { width: 16px; height: 16px; }
.cta-top-btn:hover { transform: translateY(-1px); background: #5cd991; }
.cta-top-btn:active { transform: translateY(0); }

/* Phones: the row cannot hold icon + two lines + button, and shrinking the
   button is the wrong trade on the surface this exists to fix. Stack it and
   let the button run full width so it is the largest tap target on screen. */
@media (max-width: 560px) {
  .cta-top {
    flex-wrap: wrap;
    gap: 13px;
    padding: 15px 16px;
  }
  .cta-top-copy { flex: 1 1 0; }
  .cta-top-btn {
    margin-left: 0;
    flex: 1 0 100%;
    padding: 13px 20px;
  }
}

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

/* ---------- Footer ---------- */
.foot {
  padding: 54px 0 60px;
  text-align: center;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.foot-links { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.foot-links a { color: var(--bone-dim); text-decoration: none; font-size: 13px; letter-spacing: 0.02em; transition: color 0.15s ease; }
.foot-links a:hover { color: var(--living); }
.foot-tag { font-family: 'Fraunces', Georgia, serif; font-size: 14px; color: var(--sage); font-style: italic; }

@media (max-width: 480px) {
  .nav-brand span { font-size: 16px; }
}

:focus-visible { outline: 2px solid var(--living); outline-offset: 3px; border-radius: 4px; }

/* ── Desktop install bridge ───────────────────────────────────────────────
   Recovo is iOS-only, so a reader on a laptop has no way to act on the post
   they just read. The QR hands them the App Store on their phone.

   `display: none` is the default and the media query is what reveals it, not
   the other way round: the markup ships to every visitor (crawlers and answer
   engines read the <a> inside it either way), and only a device whose primary
   pointer is a mouse is shown the code. `pointer: fine` rather than
   `hover: hover` — a touchscreen laptop reports hover as well, and a phone
   being told to scan a QR with itself is the one outcome to avoid. */
.install-bridge { display: none; }

@media (pointer: fine) and (min-width: 720px) {
  .install-bridge {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 40px 0 4px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--ink-raise);
  }
  .install-bridge .qr {
    width: 104px;
    height: 104px;
    flex: 0 0 auto;
    border-radius: 9px;
    /* The white quiet zone is part of the code, so the padding here is only
       the visual inset that keeps it off the card border. */
    padding: 7px;
    background: #fff;
  }
  .install-bridge-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .install-bridge-copy strong {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bone);
    line-height: 1.3;
  }
  .install-bridge-copy p {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--bone-dim);
    max-width: 52ch;
  }
  .install-bridge-link {
    align-self: flex-start;
    font-size: 13px;
    font-weight: 600;
    color: var(--living);
    text-decoration: none;
    border-bottom: 1px solid rgba(79, 207, 134, 0.28);
    padding-bottom: 1px;
    transition: border-color 0.18s ease;
  }
  .install-bridge-link:hover { border-bottom-color: var(--living); }
}

/* ── Self-assessment (PGSI) ───────────────────────────────────────────────
   Opt-in per post. The bands are visible by default and collapsed only once
   the enhancement script confirms JS is running (.sa-enhanced): a reader
   without JS needs to read all four to score themselves, so hiding them in
   CSS would break the no-JS path this block is built around. */
.self-assessment {
  margin: 52px 0 8px;
  padding: 26px 24px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--ink-raise);
}
.sa-head { margin-bottom: 22px; }
.sa-head h2 {
  font-size: 25px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--bone);
  margin: 6px 0 10px;
}
.sa-intro { font-size: 14.5px; line-height: 1.6; color: var(--bone-dim); }
.sa-intro strong { color: var(--bone); font-weight: 600; }

.sa-form { display: flex; flex-direction: column; gap: 4px; }
.sa-q { border: 0; padding: 15px 0; border-top: 1px solid var(--line-soft); }
.sa-q:first-child { border-top: 0; padding-top: 0; }
.sa-q legend {
  font-size: 15px;
  line-height: 1.5;
  color: var(--bone);
  padding: 0;
  margin-bottom: 11px;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.sa-q-n {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--living);
  font-variant-numeric: tabular-nums;
}
.sa-opts { display: flex; flex-wrap: wrap; gap: 7px; padding-left: 24px; }
.sa-opt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--bone-dim);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.sa-opt:hover { border-color: var(--sage); color: var(--bone); }
/* The native radio stays in the accessibility tree and keeps keyboard and
   screen-reader behaviour; only its default rendering is replaced. */
.sa-opt input { accent-color: var(--living); margin: 0; }
.sa-opt:has(input:checked) {
  border-color: var(--living);
  color: var(--bone);
  background: rgba(79, 207, 134, 0.08);
}
.sa-opt:has(input:focus-visible) { outline: 2px solid var(--living); outline-offset: 2px; }

.sa-live {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(79, 207, 134, 0.07);
  border: 1px solid rgba(79, 207, 134, 0.22);
}
.sa-live-score { font-size: 15px; color: var(--bone); }
.sa-live-score strong { font-size: 19px; color: var(--living); font-variant-numeric: tabular-nums; }
.sa-live-note { font-size: 13px; color: var(--bone-dim); margin-top: 3px; }

.sa-results { margin-top: 26px; }
.sa-results-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 10px;
}
.sa-scoring { font-size: 14px; color: var(--bone-dim); margin-bottom: 16px; }
.sa-scoring strong { color: var(--bone); font-weight: 600; }

.sa-band {
  padding: 16px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  margin-bottom: 10px;
}
.sa-band h4 {
  font-size: 15.5px;
  font-weight: 650;
  color: var(--bone);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}
.sa-band-range {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--living);
  border: 1px solid rgba(79, 207, 134, 0.3);
  border-radius: 6px;
  padding: 2px 7px;
}
.sa-band-lead { font-size: 14.5px; color: var(--bone); margin-bottom: 6px; }
.sa-band p { font-size: 13.5px; line-height: 1.6; color: var(--bone-dim); }

.sa-band-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
/* The helpline is listed first and styled as the equal of the app button, on
   every band, including the two that offer no app link at all. On a page that
   may have just told someone they have a gambling problem, a route to a person
   is the more useful of the two. Do not demote it to a footnote. */
.sa-help,
.sa-app {
  display: inline-flex;
  align-items: center;
  font-size: 13.5px;
  font-weight: 650;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 10px;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.sa-help { color: var(--bone); border: 1px solid var(--sage); }
.sa-help:hover { border-color: var(--bone); transform: translateY(-1px); }
.sa-app { background: var(--living); color: #06120B; }
.sa-app:hover { background: #5cd991; transform: translateY(-1px); }

/* With JS on, only the band matching the running score is expanded. Without
   it, this class is never added and all four stay open. */
.sa-results.sa-enhanced .sa-band { opacity: 0.42; transition: opacity 0.2s ease; }
.sa-results.sa-enhanced .sa-band > .sa-band-lead,
.sa-results.sa-enhanced .sa-band > p:not(.sa-band-lead),
.sa-results.sa-enhanced .sa-band > .sa-band-actions { display: none; }
.sa-results.sa-enhanced .sa-band.sa-band-on { opacity: 1; border-color: var(--line); }
.sa-results.sa-enhanced .sa-band.sa-band-on > .sa-band-lead,
.sa-results.sa-enhanced .sa-band.sa-band-on > p:not(.sa-band-lead) { display: block; }
.sa-results.sa-enhanced .sa-band.sa-band-on > .sa-band-actions { display: flex; }

.sa-source {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--sage);
}
.sa-source a { color: var(--sage); }

@media (max-width: 560px) {
  .self-assessment { padding: 22px 17px; border-radius: 15px; }
  .sa-head h2 { font-size: 22px; }
  .sa-opts { padding-left: 0; }
  .sa-opt { flex: 1 1 calc(50% - 4px); }
  .sa-help, .sa-app { flex: 1 0 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sa-opt, .sa-help, .sa-app, .sa-results.sa-enhanced .sa-band { transition: none; }
  .sa-help:hover, .sa-app:hover { transform: none; }
}