/* Pillar Page - Christian Hypnotherapy Guide */

* {
  box-sizing: border-box;
}

main {
  padding-top: calc(var(--header-height) + 2px);
  overflow-x: clip;
}

/* The page wrapper is a full-width container; the reading column lives inside
   .pillar-content and is constrained per-element. Full-bleed elements use the
   .guide-fullbleed escape hatch to break out of the column. */
#pillar-page {
  max-width: none;
  margin: 0;
  padding: 0 0 4em;
}

.pillar-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 2em 1.5em 0;
  line-height: 1.7;
  color: var(--color-3-grey);
}

/* Full-bleed escape hatch — used by hero, conditions grid, etc.
   Breaks out of any constrained parent and spans the viewport. */
.guide-fullbleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.condition-hero {
  margin: 0 0 2.4em;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  box-shadow: 0 2px 12px rgba(18, 46, 40, 0.08);
}
.condition-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Quick-answer callout — sits below H1 and gives a 150-word
   citation-ready answer to the page's primary question. Designed
   to be the first substantive thing AI crawlers see and quote. */
.quick-answer {
  background: var(--color-14-lighter-green);
  border-left: 4px solid var(--color-16-another-green);
  border-radius: 8px;
  padding: 1.4em 1.6em 0.6em;
  margin: 0 0 2.4em;
  color: var(--color-12-dark-green);
  font-size: 1.02em;
  line-height: 1.65;
}
.quick-answer p:first-of-type {
  font-size: 1em;
  font-weight: 700;
  color: var(--color-3-grey);
  border-left: 0;
  padding-left: 0;
  margin: 0 0 0.7em;
}
.quick-answer p {
  margin-bottom: 0.7em;
}
.quick-answer a {
  color: var(--color-8-deep-green);
}

/* Author bio block — sits between body and CTA box on the pillar
   guide and the 4 condition landing pages (they share this wrapper). */
.page-author {
  display: flex;
  gap: 1.5em;
  margin-top: 3em;
  padding: 1.8em 1.6em;
  background: var(--color-14-lighter-green);
  border-radius: 12px;
  align-items: flex-start;
}
.page-author__pic {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
}
.page-author__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-author__body {
  flex: 1;
  min-width: 0;
}
.page-author__name {
  margin: 0 0 0.2em;
  color: var(--color-3-grey);
  font-size: 1.15em;
}
.page-author__role {
  font-size: 0.85em;
  color: var(--color-2-grey);
  font-style: italic;
  margin-bottom: 0.7em;
}
.page-author__bio {
  margin: 0 0 0.9em;
  color: var(--color-12-dark-green);
  font-size: 0.95em;
  line-height: 1.55;
}
.page-author__more {
  color: var(--color-8-deep-green);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid var(--color-4-dark-green);
  padding-bottom: 1px;
  font-size: 0.92em;
}
.page-author__more:hover {
  color: var(--color-8-deep-green-hl);
  border-bottom-color: var(--color-16-another-green);
}

@media (max-width: 700px) {
  .page-author {
    flex-direction: column;
    align-items: stretch;
    padding: 1.4em 1.2em;
  }
  .page-author__pic {
    width: 80px;
    height: 80px;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Editorial typography
   Sans (futura-pt) for display, serif (freight-text-pro) for body,
   classical serif (adobe-caslon-pro) for drop caps and pull-quotes.
   ───────────────────────────────────────────────────────────────── */

/* Top byline strip — sits between H1 and hero image. Establishes the
   author and credentials before the reader has scrolled.
   Injected by make_page / make_condition_page after the H1. */
/* Magazine deck — one-line italic subtitle between H1 and byline.
   Higher-specificity selector beats `.pillar-content > p:first-of-type`
   so the deck doesn't get the magazine-lead treatment meant for the body. */
.pillar-content p.page-deck,
p.page-deck {
  font-family: var(--font-family-display-serif);
  font-size: 1.32rem;
  line-height: 1.4;
  font-style: italic;
  font-weight: 400;
  color: var(--color-3-grey);
  text-align: center;
  max-width: 36em;
  margin: 0 auto 1.4em;
  padding: 0;
  border: 0;
  letter-spacing: 0.005em;
}

.page-byline {
  margin: 0 0 2em;
  padding: 0 0 1.2em;
  border-bottom: 1px solid var(--color-4-dark-green);
  border-color: rgba(114, 130, 127, 0.5);
  font-family: var(--font-family-main);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-4-dark-green);
  text-align: center;
  line-height: 1.6;
  font-weight: 400;
  font-style: normal;
}
.page-byline a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  padding-bottom: 1px;
}
.page-byline a:hover {
  color: var(--color-8-deep-green);
}

/* H1 — generous, restrained, sans for visual anchor */
h1 {
  color: var(--color-3-grey);
  font-family: var(--font-family-main);
  font-size: clamp(2.2rem, 4.6vw, 3rem);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 0 0 0.6em;
  text-align: center;
}

/* H2 — chapter-break feel: hairline ornament above, refined sans */
h2 {
  position: relative;
  color: var(--color-3-grey);
  font-family: var(--font-family-main);
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.25;
  margin: 3.4em 0 0.9em;
  padding: 1.6em 0 0;
  border-bottom: 0;
}
h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4em;
  height: 1px;
  background: var(--color-4-dark-green);
  opacity: 0.55;
}

/* H3 — sub-section, smaller, no ornament */
h3 {
  color: var(--color-3-grey);
  font-family: var(--font-family-main);
  font-size: 1.18rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.3;
  margin: 2em 0 0.5em;
}

/* Body prose — serif for editorial, slightly larger for comfortable reading */
.pillar-content {
  font-family: var(--font-family-serif);
  font-size: 1.125rem; /* 18px → reads larger in serif */
  line-height: 1.7;
  color: var(--color-12-dark-green);
}
.pillar-content p {
  margin: 0 0 1.1em;
  font-family: var(--font-family-serif);
  font-size: 1.125rem;
  line-height: 1.7;
}

/* First paragraph — magazine-deck lead.
   On condition pages this is the punchy hook ("The 3am awake mind...").
   On the pillar guide this is the lead after the Quick Answer aside. */
.pillar-content > p:first-of-type {
  font-family: var(--font-family-display-serif);
  font-size: 1.45rem;
  line-height: 1.45;
  font-style: italic;
  font-weight: 400;
  color: var(--color-3-grey);
  margin: 0.4em 0 1.6em;
  letter-spacing: 0.005em;
  border-left: 0;
  padding-left: 0;
}

/* Drop cap — on the SECOND paragraph (the first regular body paragraph
   following the lead). Adobe Caslon italic gives a printerly feel. */
.pillar-content > p:nth-of-type(2)::first-letter {
  font-family: var(--font-family-display-serif);
  font-size: 4.2em;
  float: left;
  line-height: 0.85;
  font-weight: 400;
  color: var(--color-8-deep-green);
  margin: 0.05em 0.08em 0 0;
  letter-spacing: -0.02em;
}

/* Pull-quote rules now live in base.css (shared with blog posts). */

/* Lists — refined bullets with custom marker */
.pillar-content ul, .pillar-content ol {
  margin: 1.2em 0;
  padding-left: 1.6em;
}
.pillar-content li {
  margin-bottom: 0.55em;
  font-family: var(--font-family-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
}
.pillar-content ul li::marker {
  color: var(--color-16-another-green);
  content: "✦  ";
  font-size: 0.9em;
}

/* Links */
.pillar-content a {
  color: var(--color-8-deep-green);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.pillar-content a:hover {
  color: var(--color-16-another-green);
}

strong {
  color: var(--color-3-grey);
  font-weight: 600;
}

/* helper/base.css has `* { font-family: futura-pt; font-size: 18px }` which
   directly hits every inline element — so <em>, <strong>, <i>, <b>, <cite>,
   <a> inside the pillar's serif body don't inherit freight-text-pro from
   .pillar-content. The result is italic / bold / link spans rendering in
   a sans face at a slightly different size from the surrounding serif body.
   Force inheritance for inline tags so they stay in the body's serif face. */
.pillar-content em,
.pillar-content strong,
.pillar-content i,
.pillar-content b,
.pillar-content cite,
.pillar-content span,
.pillar-content a {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Blockquote — Scripture quotes, treated as printerly callouts */
.pillar-content blockquote {
  background: transparent;
  border-left: 2px solid var(--color-16-another-green);
  margin: 1.8em 0 1.8em 0;
  padding: 0.2em 0 0.2em 1.6em;
  font-family: var(--font-family-display-serif);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--color-3-grey);
}
.pillar-content blockquote p {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0 0 0.4em;
}
.pillar-content blockquote p:last-child {
  margin-bottom: 0;
}

/* Quick-answer callout — refresh to use serif body for citation feel */
.quick-answer {
  font-family: var(--font-family-serif);
  font-size: 1.05rem;
  line-height: 1.6;
}
.quick-answer p {
  font-family: var(--font-family-serif);
  font-size: 1.05rem;
}
.quick-answer p:first-of-type {
  font-family: var(--font-family-main);
  font-size: 0.82rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-8-deep-green);
  font-weight: 500;
}

/* CTA Box wrapper — pillar/condition-page-specific spacing.
   Box styling itself lives in base.css (.cta-box, .cta-buttons). */
.pillar-cta {
  margin-top: 3em;
  width: 100%;
}

/* Header - same as other pages */
#header {
  position: fixed;
  height: var(--header-height);
  width: 100%;
  background: rgba(255, 255, 255);
  box-shadow: 0 1px 0 0 #eee, 0 0 1px 0 #eee;
  color: var(--color-9-grey);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}
.header__icon-cont {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#logo-icon {
  display: inline-block;
  height: 32px;
  margin-left: 1em;
  margin-right: 0.5em;
}
#header a {
  color: var(--color-9-grey);
  cursor: pointer;
  text-decoration: none;
}
#header a:hover {
  color: var(--color-11-red);
}
.header__nav {
  padding-right: 1em;
}
.header__nav a {
  display: inline-block;
  margin-right: 1em;
}
.header__nav img {
  height:0.7em;
  position:relative;
  top:-4px;
  left: -1px;
  opacity:0.5;
}
#header a:hover img {
  opacity:0.8;
}
.header__nav img.star1-1 {
  height: 0.6em;
  top: +4px;
  left: -2px;
}

/* Footer - same as other pages */
#footer {
  background: var(--color-8-deep-green);
  color: var(--color-9-grey);
  text-align: center;
  font-size: var(--font-size-small);
  padding: 1.4em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
}
.map {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.loc {
  display: block;
  text-align: left;
  margin-left: 1em;
}
.social-media a {
  display: flex;
  flex-direction: row;
  color: var(--color-8-grey);
  align-items: center;
  line-height: 1em;
  font-size: 1em;
  text-decoration: none;
}
.social-media img {
  width: 23px;
  display: inline-block;
  margin-right: 4px;
}

/* ============================================================
   Editorial vocabulary for the long-form guide
   Hero, illuminated scripture breakers, image figures,
   conditions card grid, accordion FAQ, end-of-section ornaments.
   ============================================================ */

/* Top eyebrow — sits above the H1, paired with two diamond ornaments */
.guide-top-eyebrow {
  font-family: var(--font-family-main);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-8-deep-green);
  text-align: center;
  font-weight: 500;
  margin: 0.6em auto 1.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
}
.guide-top-eyebrow::before,
.guide-top-eyebrow::after {
  content: "";
  width: 2.4em;
  height: 1px;
  background: var(--color-16-another-green);
  opacity: 0.55;
  display: inline-block;
}

/* HERO FIGURE — full-bleed editorial photograph that anchors the page.
   Use individual margin properties so they don't clobber the negative margins
   set by the .guide-fullbleed escape hatch. */
.guide-hero-figure {
  margin-top: 1.4em;
  margin-bottom: 2.6em;
  aspect-ratio: 21 / 9;
  max-height: 540px;
  overflow: hidden;
  background: var(--color-8-deep-green);
}
.guide-hero-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.97) contrast(1.02);
}
.guide-hero-figure figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2em 1.5em 1.4em;
  background: linear-gradient(
    180deg,
    rgba(18, 46, 40, 0) 0%,
    rgba(18, 46, 40, 0.55) 55%,
    rgba(18, 46, 40, 0.85) 100%
  );
  color: rgba(255, 255, 255, 0.94);
  font-family: var(--font-family-display-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.45;
  text-align: center;
  letter-spacing: 0.005em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.guide-hero-figure figcaption em {
  font-style: italic;
  color: rgba(255, 255, 255, 1);
}
@media (max-width: 768px) {
  .guide-hero-figure {
    aspect-ratio: 4 / 3;
    margin-top: 1em;
    margin-bottom: 2em;
    max-height: 360px;
  }
  .guide-hero-figure figcaption {
    font-size: 0.92rem;
    padding: 1.6em 1.2em 1em;
  }
}

/* ───────────────────────────────────────────────────────────
   IMAGE FIGURE — mid-stream photograph at section breaks.
   Sits inside the reading column, slightly wider than text.
   ─────────────────────────────────────────────────────────── */
.guide-figure {
  margin: 2.6em auto;
  max-width: 760px;
}
.guide-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(18, 46, 40, 0.1),
    0 18px 48px -16px rgba(18, 46, 40, 0.18);
  filter: brightness(0.99);
}
.guide-figure figcaption {
  margin-top: 1em;
  font-family: var(--font-family-display-serif);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--color-2-grey);
  text-align: center;
  max-width: 32em;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.005em;
}

/* ───────────────────────────────────────────────────────────
   ILLUMINATED SCRIPTURE BREAKER
   Lifts a single verse out of the prose, treats it like a
   manuscript callout. Hairline rules above and below in
   the accent green; oversized Caslon italic for the verse;
   small caps citation in the sans face for the reference.
   ─────────────────────────────────────────────────────────── */
.pillar-content blockquote.scripture-breaker {
  margin: 2.6em auto;
  max-width: 36em;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  position: relative;
}
.pillar-content blockquote.scripture-breaker::before,
.pillar-content blockquote.scripture-breaker::after {
  content: "";
  display: block;
  width: 4em;
  height: 1px;
  background: var(--color-16-another-green);
  opacity: 0.55;
  margin: 0 auto;
}
.pillar-content blockquote.scripture-breaker::before {
  margin-bottom: 1.6em;
}
.pillar-content blockquote.scripture-breaker::after {
  margin-top: 1.6em;
}
.pillar-content blockquote.scripture-breaker p {
  font-family: var(--font-family-display-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.55rem);
  line-height: 1.4;
  color: var(--color-8-deep-green);
  margin: 0 0 0.9em;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.pillar-content blockquote.scripture-breaker cite {
  display: block;
  font-family: var(--font-family-main);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-4-dark-green);
  font-style: normal;
  font-weight: 500;
}

/* ───────────────────────────────────────────────────────────
   CONDITIONS CARD GRID
   Full-bleed tinted band; 3-up grid on desktop; cards have
   image-on-top with title + description below.
   ─────────────────────────────────────────────────────────── */
.guide-conditions {
  background: linear-gradient(
    180deg,
    var(--color-14-lighter-green) 0%,
    #eef3f1 100%
  );
  margin-top: 3em;
  margin-bottom: 3em;
  padding: 3.6em 1.5em;
  border-top: 1px solid var(--color-15-lighter-green);
  border-bottom: 1px solid var(--color-15-lighter-green);
}
.guide-conditions__inner {
  max-width: 1120px;
  margin: 0 auto;
}
.guide-conditions__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5em;
}
@media (max-width: 880px) {
  .guide-conditions__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .guide-conditions__grid {
    grid-template-columns: 1fr;
    gap: 1.2em;
  }
}
/* Whole card is the link — readers were trying to click anywhere on the card,
   not just the "Learn more" line. <a class="guide-condition-card"> wraps the
   image, title, blurb, and a span styled as the more-link. */
.guide-condition-card {
  background: #fbfcfb;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(18, 46, 40, 0.06),
    0 8px 24px -10px rgba(18, 46, 40, 0.1);
  transition: transform 240ms ease, box-shadow 240ms ease;
  border: 1px solid rgba(91, 164, 148, 0.08);
  text-decoration: none;
  color: inherit;
}
.pillar-content a.guide-condition-card {
  text-decoration: none;
  color: inherit;
}
.guide-condition-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(18, 46, 40, 0.08),
    0 14px 32px -10px rgba(18, 46, 40, 0.15);
}
.guide-condition-card__pic {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-15-lighter-green);
  position: relative;
}
.guide-condition-card__pic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(18, 46, 40, 0) 60%,
    rgba(18, 46, 40, 0.18) 100%
  );
  pointer-events: none;
}
.guide-condition-card__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms ease;
}
.guide-condition-card:hover .guide-condition-card__pic img {
  transform: scale(1.03);
}
.guide-condition-card__body {
  padding: 1.4em 1.4em 1.6em;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.pillar-content .guide-condition-card__title {
  font-family: var(--font-family-main);
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--color-8-deep-green);
  margin: 0 0 0.55em;
  letter-spacing: 0.005em;
  line-height: 1.25;
}
.guide-condition-card__body p {
  font-family: var(--font-family-serif);
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--color-3-grey);
  margin: 0 0 1em;
  flex: 1;
}
/* Read-more visual cue inside the card. It's a <span>, not a link, because the
   parent card is the link. */
.guide-condition-card__more {
  font-family: var(--font-family-main);
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-8-deep-green);
  border-bottom: 1px solid var(--color-16-another-green);
  padding-bottom: 2px;
  align-self: flex-start;
  font-weight: 500;
  transition: color 200ms ease, border-color 200ms ease,
    transform 240ms ease;
  display: inline-block;
}
.guide-condition-card:hover .guide-condition-card__more {
  color: var(--color-16-another-green);
  border-bottom-color: var(--color-8-deep-green);
  transform: translateX(2px);
}

/* ───────────────────────────────────────────────────────────
   ACCORDION FAQ
   Native <details>, custom + / × marker, hairline separators.
   ─────────────────────────────────────────────────────────── */
.guide-faq {
  margin: 1.6em 0 2.4em;
  border-top: 1px solid var(--color-15-lighter-green);
}
.guide-faq__item {
  border-bottom: 1px solid var(--color-15-lighter-green);
}
.guide-faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.2em 0.2em 1.2em 0;
  display: flex;
  align-items: flex-start;
  gap: 1em;
  font-family: var(--font-family-main);
  font-size: 1.06rem;
  font-weight: 400;
  color: var(--color-3-grey);
  transition: color 220ms ease;
  letter-spacing: 0.005em;
}
.guide-faq__item summary::-webkit-details-marker {
  display: none;
}
.guide-faq__item summary::marker {
  content: "";
}
.guide-faq__item summary::before {
  content: "+";
  flex-shrink: 0;
  width: 1.2em;
  height: 1.2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-display-serif);
  font-size: 1.5em;
  line-height: 1;
  color: var(--color-16-another-green);
  font-weight: 400;
  font-style: normal;
  transition: transform 260ms ease, color 260ms ease;
  margin-top: -0.05em;
}
.guide-faq__item[open] > summary::before {
  transform: rotate(45deg);
  color: var(--color-8-deep-green);
}
.guide-faq__item:hover > summary {
  color: var(--color-8-deep-green);
}
.guide-faq__item > div {
  padding: 0 0 1.4em 2.2em;
  font-family: var(--font-family-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-12-dark-green);
  animation: guide-faq-fade 220ms ease both;
}
.guide-faq__item > div p {
  margin: 0 0 0.7em;
}
.guide-faq__item > div p:last-child {
  margin-bottom: 0;
}
@keyframes guide-faq-fade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .guide-faq__item > div {
    animation: none;
  }
  .guide-faq__item summary::before {
    transition: none;
  }
}

/* ───────────────────────────────────────────────────────────
   QUICK ANSWER refresh — slightly more presence; the AI-citation
   block deserves a bit more visual weight as the page now has
   more around it.
   ─────────────────────────────────────────────────────────── */
.quick-answer {
  margin: 0 0 2.4em;
  padding: 1.6em 1.8em 0.8em;
  border-left: 4px solid var(--color-16-another-green);
  background: linear-gradient(
    135deg,
    var(--color-14-lighter-green) 0%,
    #f1f6f4 100%
  );
  border-radius: 4px;
  position: relative;
}
.quick-answer::before {
  content: "";
  position: absolute;
  top: 0.7em;
  right: 0.9em;
  width: 1em;
  height: 1em;
  border-top: 1px solid var(--color-16-another-green);
  border-right: 1px solid var(--color-16-another-green);
  opacity: 0.5;
}

/* ───────────────────────────────────────────────────────────
   PAGE-DECK refresh on the lead paragraph for the new layout
   The first body paragraph already gets the magazine-deck italic
   treatment. We extend it slightly so it pairs with the hero
   image above without competing.
   ─────────────────────────────────────────────────────────── */
.pillar-content > p:first-of-type {
  text-wrap: balance;
}

/* ============================================================
   Mobile responsiveness
   ============================================================ */
@media (max-width: 768px) {
  .pillar-content {
    padding: 1.5em 1em 0;
  }

  h1 {
    font-size: var(--font-size-bigger);
  }

  h2 {
    font-size: var(--font-size-larger);
  }

  .pillar-content > p:first-of-type {
    font-size: var(--font-size-normal);
  }

  .guide-conditions {
    margin-top: 2em;
    margin-bottom: 2em;
    padding: 2.4em 1.2em;
  }

  .guide-faq__item summary {
    font-size: 1rem;
    padding: 1em 0.2em 1em 0;
  }

  .guide-faq__item > div {
    padding-left: 2em;
    font-size: 1rem;
  }

  .guide-figure {
    margin: 2em auto;
  }

  /* .cta-buttons mobile overrides live in base.css */
}