/* =====================================================================
   Insights article layout — shared by every article and the index.
   Extracted from the approved EMDR vs CBT sample so a change to the
   look of the articles is made once, here, rather than in each file.
   ===================================================================== */

.post-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(165deg, #2f4034, #1d2a22);
  color: #eef2ea;
  padding: clamp(96px, 12vw, 150px) 0 clamp(48px, 6vw, 72px);
  text-align: center;
}
/* Optional per-article top banner. Articles without one keep the plain
   gradient above, so a missing image is never a broken-looking page.

   The supplied banners arrive already toned to the site green and already
   clear 5:1 against white on their own, so this scrim is deliberately light
   — just enough to hold the headline and the nav, without flattening the
   photograph into a dark smear. */
.post-hero-bg { position: absolute; inset: 0; z-index: -1; }
.post-hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(26, 36, 28, 0.34) 0%,
    rgba(26, 36, 28, 0.20) 50%,
    rgba(26, 36, 28, 0.40) 100%);
}
.post-hero .container { position: relative; }
/* A wide banner cropped into a narrow phone viewport loses whoever is in it,
   so each image says where to hold the frame. Matches how the site's other
   banners already behave. */
@media (max-width: 700px) {
  .post-hero-bg img[style*="--mobpos"] { object-position: var(--mobpos); }
}

/* The site-wide .cta scrim is tuned for full-colour photographs. The blog
   banners are pre-treated, so on these pages it is lightened to match —
   otherwise the two treatments stack and the person disappears. */
.cta::after {
  background:
    linear-gradient(180deg,
      rgba(26, 36, 28, 0.42) 0%,
      rgba(26, 36, 28, 0.26) 45%,
      rgba(26, 36, 28, 0.46) 100%);
}
.post-hero .kicker { justify-content: center; color: var(--clay-soft); }
.post-hero .kicker::before { background: var(--clay-soft); }
.post-hero h1 {
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.06;
  max-width: 21ch;
  margin: 14px auto 0;
  text-wrap: balance;
}
.post-meta {
  margin-top: 22px;
  font-family: var(--font-ui);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(233,240,228,0.66);
  display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
}
.post-meta span { display: inline-flex; align-items: center; gap: 7px; }
.post-meta svg { width: 14px; height: 14px; }

.post-body { max-width: 760px; margin: 0 auto; padding: clamp(48px, 6vw, 72px) 22px 0; }
.post-body h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.14;
  margin: clamp(44px, 5vw, 60px) 0 16px;
}
.post-body h2:first-child { margin-top: 0; }
.post-body h3 {
  font-family: var(--font-display);
  font-size: 1.16rem;
  line-height: 1.3;
  margin: 32px 0 0;
  color: var(--ink);
}
.post-body p {
  font-family: var(--font-serif); font-weight: 300;
  font-size: 1.06rem; line-height: 1.82;
  color: #45433c;
  margin: 18px 0 0;
}
.post-body ul, .post-body ol.plain { margin: 18px 0 0 1.2em; padding: 0; }
.post-body li {
  font-family: var(--font-serif); font-weight: 300;
  font-size: 1.03rem; line-height: 1.75; color: #45433c;
  margin-bottom: 10px;
}
.post-body a { color: var(--sage-dk); text-decoration: underline; text-underline-offset: 2px; }
.post-body .supref { font-size: 0.72em; vertical-align: super; line-height: 0; color: var(--sage-dk); }

/* comparison / information table */
.compare-wrap { margin: 34px 0 0; overflow-x: auto; }
table.compare {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-ui); font-size: 0.92rem;
  background: var(--paper);
  border: 1px solid rgba(27,26,23,0.1);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.compare th, .compare td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(27,26,23,0.08); }
.compare thead th {
  background: var(--sage-dk); color: #fff;
  font-weight: 600; letter-spacing: 0.04em; font-size: 0.8rem; text-transform: uppercase;
}
.compare tbody th { font-weight: 600; color: var(--ink); width: 26%; background: rgba(111,130,109,0.07); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: none; }

/* takeaway box */
.takeaway {
  margin: 40px 0 0;
  background: linear-gradient(160deg, #33453a, #223029);
  color: #eef2ea; border-radius: var(--r-lg);
  padding: clamp(26px, 3.5vw, 38px);
}
.takeaway h3 {
  margin: 0 0 10px; color: var(--clay-soft);
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.takeaway p { color: rgba(233,240,228,0.88); font-family: var(--font-serif); font-weight: 300; line-height: 1.75; margin: 0; }

/* Numbered process steps. Deliberately NOT named .steps/.step: styles.css
   already uses those for the fees page's four-across grid, and sharing the
   name silently reflowed these into narrow unreadable columns. */
.pstep-list { margin: 30px 0 0; display: grid; gap: 14px; counter-reset: step; }
.pstep {
  position: relative;
  background: var(--paper);
  border: 1px solid rgba(27,26,23,0.1);
  border-radius: var(--r-lg);
  padding: 20px 22px 20px 66px;
}
.pstep::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 20px; top: 19px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--sage-dk); color: #fff;
  font-family: var(--font-ui); font-size: 0.82rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.pstep h3 { margin: 0; font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.pstep p { margin: 7px 0 0; font-size: 0.98rem; line-height: 1.7; }

/* signal list — "when to consider getting help" style checklists */
.signals { margin: 28px 0 0; display: grid; gap: 10px; }
.signals div {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(111,130,109,0.07);
  border-radius: 14px; padding: 14px 18px;
  font-family: var(--font-serif); font-weight: 300;
  font-size: 1rem; line-height: 1.68; color: #45433c;
}
.signals svg { width: 17px; height: 17px; flex: none; margin-top: 5px; color: var(--sage-dk); }

/* Safety note. Deliberately louder than .post-disclaimer: this one carries
   the suicide-risk wording Karen asked for, and it has to read as an
   instruction rather than as legal small print. */
.safety-note {
  margin: 26px 0 0; padding: 16px 20px;
  background: rgba(169,121,78,0.09);
  border-left: 3px solid var(--clay);
  border-radius: 0 var(--r-sm, 8px) var(--r-sm, 8px) 0;
  font-family: var(--font-ui); font-size: 0.92rem; line-height: 1.62;
  color: #45433c;
}

/* disclaimer + refs */
.post-disclaimer {
  margin: 44px 0 0; padding: 16px 20px;
  border-left: 3px solid var(--clay-soft);
  font-family: var(--font-serif); font-weight: 300; font-style: italic;
  font-size: 0.88rem; line-height: 1.65; color: var(--muted);
}
.post-refs { margin: 40px 0 0; }
.post-refs h2 { font-size: 1.25rem; }
.post-refs ol { margin: 14px 0 0 1.4em; padding: 0; }
.post-refs li { font-family: var(--font-ui); font-size: 0.8rem; line-height: 1.6; color: var(--muted); margin-bottom: 8px; }

/* related reading */
.post-related { max-width: 760px; margin: 0 auto; padding: 24px 22px 64px; }
.post-related h2 { font-size: 1.25rem; margin: 34px 0 14px; }
.related-links { display: grid; gap: 12px; }
.related-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--paper); border: 1px solid rgba(27,26,23,0.1);
  border-radius: 14px; padding: 15px 18px;
  font-family: var(--font-ui); font-weight: 600; font-size: 0.95rem;
  color: var(--ink); text-decoration: none;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.related-links a:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(27,26,23,0.10); }
.related-links svg { width: 16px; height: 16px; flex: none; color: var(--sage-dk); }

/* =====================================================================
   Insights index
   ===================================================================== */
.insights-grid {
  max-width: 1080px; margin: 0 auto;
  padding: clamp(48px, 6vw, 76px) 22px clamp(40px, 5vw, 60px);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 20px;
}
.insight-card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid rgba(27,26,23,0.1);
  border-radius: var(--r-lg);
  padding: 26px 26px 22px;
  text-decoration: none; color: inherit;
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.insight-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(27,26,23,0.10); }
/* Karen asked for a sense of the click. Pressing depresses the card and
   pulls the shadow in tight, then it releases as the page navigates. */
.insight-card:active {
  transform: translateY(0) scale(0.982);
  box-shadow: 0 4px 10px rgba(27,26,23,0.12);
  transition-duration: 90ms;
}
@media (prefers-reduced-motion: reduce) {
  .insight-card, .insight-card:hover, .insight-card:active,
  .insights-toc a, .insights-toc a:hover, .insights-toc a:active { transform: none; }
}
.insight-card .kicker { margin: 0 0 12px; }
.insight-card h2 {
  font-family: var(--font-display);
  font-size: 1.24rem; line-height: 1.26;
  margin: 0; color: var(--ink);
}
.insight-card p {
  font-family: var(--font-serif); font-weight: 300;
  font-size: 0.95rem; line-height: 1.7; color: var(--muted);
  margin: 12px 0 0;
}
.insight-card .read-on {
  margin-top: auto; padding-top: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-dk);
}
.insight-card .read-on svg { width: 15px; height: 15px; }

/* Video top banner for the Insights page — same treatment as the EMDR
   evidence page, so the two read as one family. */
.vhero {
  position: relative;
  min-height: clamp(420px, 66vh, 640px);
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background: #0f1712;
}
.vhero-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Heavier than the evidence page's scrim on purpose. That video is dark
   footage; this one is shot towards bright windows, and measured against
   its own brightest frames the evidence-page values gave only 2.6:1 for the
   headline. These hold it above 5.9:1. */
.vhero-scrim {
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(10, 17, 13, 0.62) 0%,
    rgba(10, 17, 13, 0.58) 45%,
    rgba(10, 17, 13, 0.78) 100%);
}
/* the clay kicker is too low-contrast over moving footage */
.vhero .kicker--light { color: #e8d5bf; }
.vhero-inner { padding: 96px 22px; color: #fff; }
.vhero .hero-title { color: #fff; margin: 10px 0 0; }
/* Matches .hero-lede on the Fees page and elsewhere, so the subheading
   reads in the same voice across the site. */
.vhero-sub {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 1.14rem;
  line-height: 1.72;
  max-width: 560px;
  color: rgba(255, 255, 255, 0.9);
  margin: 28px auto 0;
}
/* Motion is decorative here — anyone who has asked their system to reduce
   motion gets the still poster frame instead. */
@media (prefers-reduced-motion: reduce) { .vhero-media { display: none; } }

/* Contents list above the cards. Karen's note was that it did not read as a
   list of things you can click, so each row is now a bordered link with a
   number and a chevron rather than a bare line of text. */
.insights-toc { max-width: 1080px; margin: 0 auto; padding: clamp(36px, 4.5vw, 56px) 22px 0; }
.insights-toc h2 {
  font-family: var(--font-ui);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sage-dk); margin: 0 0 6px; text-align: center;
}
.insights-toc .toc-hint {
  font-family: var(--font-serif); font-weight: 300;
  font-size: 0.92rem; color: var(--muted);
  text-align: center; margin: 0 0 22px;
}
.insights-toc ol {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 10px; counter-reset: toc;
}
.insights-toc li { margin: 0; }
.insights-toc a {
  display: flex; align-items: center; gap: 14px;
  background: var(--paper);
  border: 1px solid rgba(27,26,23,0.11);
  border-radius: 12px; padding: 13px 16px;
  font-family: var(--font-ui); font-weight: 500;
  font-size: 0.94rem; line-height: 1.4;
  color: var(--ink); text-decoration: none;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.insights-toc a::before {
  counter-increment: toc; content: counter(toc); flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(111,130,109,0.14); color: var(--sage-dk);
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.insights-toc a::after {
  content: ""; flex: none; margin-left: auto;
  width: 7px; height: 7px;
  border-right: 2px solid var(--clay); border-bottom: 2px solid var(--clay);
  transform: rotate(-45deg); transition: transform 200ms var(--ease);
}
.insights-toc a:hover { border-color: var(--sage); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(27,26,23,0.08); }
.insights-toc a:hover::after { transform: rotate(-45deg) translate(2px, 2px); }
.insights-toc a:active { transform: translateY(0) scale(0.985); transition-duration: 90ms; }
}

/* Karen: the numbered process blocks read too narrow on a laptop. On wider
   screens they now break out past the 760px text column, which gives the
   text room without disturbing the reading measure of the prose itself. */
@media (min-width: 1080px) {
  .pstep-list { width: calc(100% + 190px); margin-left: -95px; }
  .pstep { padding: 24px 30px 24px 74px; }
  .pstep::before { left: 26px; top: 23px; }
}
@media (min-width: 1080px) {
  .signals { width: calc(100% + 120px); margin-left: -60px; }
}