/* ============================================================================
   I Did The Hard Work - Shared public prose-page styles
   Applies to: for-you, founder, terms, privacy.
   Depends on static/css/idthw.css from the base package.
   Visual language mirrors how_it_works.css (serif display title, diamond rule,
   ivory panel, gold accents, readable prose column).
   Pages opt in via the `public-prose-page` body class and use `.prose-*` classes.
   Page-specific overrides are scoped to each page's own body class below.
   ============================================================================ */

/* --------------------------------------------------------------------------
   Shared shell, panel, title, prose column
   -------------------------------------------------------------------------- */
.public-prose-page .prose-main {
  flex: 1 0 auto;
  padding: 34px 0 28px;
  background:
    radial-gradient(circle at 50% 4%, rgba(255, 255, 255, 0.92) 0, rgba(255, 255, 255, 0.42) 32%, transparent 62%),
    linear-gradient(180deg, #fbf8f2 0%, #f5efe6 100%);
}

.public-prose-page .prose-shell {
  width: min(792px, calc(100% - 48px));
  margin: 0 auto;
}

/* The shared .ornate-panel gives the border + corner ticks; .content-panel
   adds the padding and surface treatment for a standalone prose page. */
.public-prose-page .content-panel {
  padding: 30px 54px 36px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.22) 42%, transparent 70%),
    rgba(255, 255, 255, 0.26);
  box-shadow: 0 19px 55px rgba(7, 31, 64, 0.08);
}

.prose-eyebrow {
  display: block;
  margin: 0 0 10px;
  color: var(--idthw-gold);
  font-family: var(--idthw-sans);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}

.prose-title {
  margin: 0;
  color: var(--idthw-ink);
  font-family: var(--idthw-serif);
  font-size: clamp(30px, 2.15vw, 34px);
  line-height: 0.94;
  letter-spacing: 0.035em;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}

.public-prose-page .diamond-rule {
  width: 96px;
  height: 16px;
  margin: 16px auto 22px;
}

.public-prose-page .diamond-rule::before,
.public-prose-page .diamond-rule::after {
  width: 42px;
}

/* Readable prose column. Serif body echoes the founder-letter voice while
   staying narrower than the panel for comfortable line length. */
.prose-content {
  max-width: 640px;
  margin: 0 auto;
}

.prose-content > p {
  margin: 0 0 18px;
  color: #1f3350;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.68;
  letter-spacing: 0.005em;
}

.prose-content > p:last-of-type {
  margin-bottom: 0;
}

.prose-content strong {
  color: var(--idthw-gold);
  font-weight: 700;
}

.prose-content em {
  color: #2a3f5e;
  font-style: italic;
}

/* Distinct quotation block (scripture / pull quote). */
.prose-quote {
  margin: 22px auto 22px;
  padding: 18px 26px;
  max-width: 560px;
  text-align: center;
  border-top: 1px solid rgba(195, 139, 54, 0.45);
  border-bottom: 1px solid rgba(195, 139, 54, 0.45);
  color: var(--idthw-gold);
  font-family: var(--idthw-serif);
  font-size: 22px;
  line-height: 1.4;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.prose-quote cite {
  display: block;
  margin-top: 8px;
  color: var(--idthw-muted);
  font-family: var(--idthw-sans);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.16em;
  font-weight: 700;
  text-transform: uppercase;
  font-style: normal;
}

/* Closing invitation block mirrors the how-works-cta cadence. */
.prose-closing {
  max-width: 640px;
  margin: 26px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(195, 139, 54, 0.38);
  text-align: center;
}

.prose-closing p {
  margin: 0;
  color: #142a4a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.68;
  font-style: italic;
}

.prose-closing strong {
  color: var(--idthw-gold);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Founder page
   -------------------------------------------------------------------------- */
.founder-page .prose-content {
  max-width: 660px;
}

/* Signature block: a closing flourish, not a centered CTA. */
.founder-signature {
  margin: 4px 0 0;
  color: #142a4a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.68;
  font-style: italic;
  text-align: right;
}

.founder-signature + .founder-signature {
  margin-top: 2px;
}

.founder-signature strong {
  color: var(--idthw-ink);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.founder-signature-img {
  width: 150px;
  height: auto;
}

/* Scripture quote sits between the signature and the closing CTA. Reduce
   font size to match body prose, and drop the bottom border so only the
   CTA's top border separates the two blocks (single rule, not two). */
.founder-page .prose-quote {
  font-size: 18px;
  font-style: italic;
  border-bottom: none;
}

/* For-You page: shrink the inline scripture quote to match body prose. */
.for-you-page .prose-quote {
  font-size: 18px;
}

/* For-You page: tighten body line-height (page is content-heavy with many
   short paragraphs; the shared 1.68 reads as sparse here). */
.for-you-page .prose-content > p {
  line-height: 1.4;
}

/* For-You page: list font must match body prose (Georgia 16px). */
.for-you-page .prose-content ul {
  margin: 4px 0 12px;
  padding-left: 22px;
  color: #1f3350;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.4;
}

.for-you-page .prose-content li {
  margin-bottom: 0;
}

.for-you-page .prose-content li:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Faith-vs-Works pre-baseline page
   -------------------------------------------------------------------------- */
.faith-works-page .prose-shell {
  width: min(880px, calc(100% - 48px));
}

.faith-works-page .content-panel {
  padding: 30px 52px 36px;
}

.faith-works-page .prose-title {
  font-size: clamp(26px, 2.25vw, 32px);
  line-height: 1.12;
}

.faith-works-page .prose-content {
  max-width: 700px;
}

.faith-works-page .prose-content > p {
  line-height: 1.56;
}

.faith-works-page .prose-content ol,
.faith-works-page .prose-content ul {
  margin: 8px 0 18px;
  padding-left: 24px;
  color: #1f3350;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.56;
}

.faith-works-page .prose-content li {
  margin-bottom: 8px;
}

.faith-works-page .prose-content li:last-child {
  margin-bottom: 0;
}

.faith-works-page .faith-works-quote {
  max-width: 640px;
  margin: 20px auto 20px;
  padding: 16px 22px;
  font-size: 18px;
  line-height: 1.45;
  text-align: left;
}

.faith-works-page .faith-works-quote cite {
  margin-top: 10px;
  text-align: left;
}

.faith-works-page .faith-works-cta {
  margin-top: 28px;
}

.faith-works-page .faith-works-cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Terms page (legal document structure)
   -------------------------------------------------------------------------- */
.terms-page .prose-shell {
  width: min(880px, calc(100% - 48px));
}

.terms-page .content-panel {
  padding: 30px 56px 36px;
}

/* The terms title is a very long legal string; keep it readable. */
.terms-page .prose-title {
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.18;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.terms-page .prose-content {
  max-width: none;
}

.terms-page .prose-content > p {
  font-size: 14px;
  line-height: 1.62;
}

/* Effective date / platform domain meta lines. */
.terms-page .prose-content > p:first-child,
.terms-page .prose-content > p:nth-child(2) {
  margin-bottom: 12px;
}

.terms-warning {
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 1px solid rgba(195, 139, 54, 0.55);
  border-left: 3px solid var(--idthw-gold);
  border-radius: 4px;
  background: rgba(255, 248, 235, 0.55);
  color: #4a2f12;
  font-family: var(--idthw-sans);
  font-size: 12.5px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  font-weight: 500;
}

.terms-warning strong {
  color: #6b3d10;
  font-weight: 700;
}

.terms-page .prose-content h2 {
  margin: 28px 0 12px;
  padding-bottom: 6px;
  color: var(--idthw-ink);
  font-family: var(--idthw-serif);
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: 0.03em;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(195, 139, 54, 0.38);
}

.terms-page .prose-content h2:first-of-type {
  margin-top: 20px;
}

.terms-page .prose-content h3 {
  margin: 18px 0 6px;
  color: var(--idthw-navy-soft);
  font-family: var(--idthw-sans);
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.terms-page .prose-content ul,
.terms-page .prose-content ol {
  margin: 8px 0 18px;
  padding-left: 22px;
  color: #1f3350;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.62;
}

.terms-page .prose-content li {
  margin-bottom: 0;
}

.terms-page .prose-content li:last-child {
  margin-bottom: 0;
}

.terms-page .prose-content li strong {
  color: var(--idthw-gold);
}

/* The "CONCLUDING LEGAL ACKNOWLEDGMENT" was a second <h1>; it is now an <h2>
   with a stronger treatment to mark the final section. */
.terms-page .prose-content .terms-final-heading {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid rgba(195, 139, 54, 0.45);
  border-bottom: none;
  font-size: 21px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Privacy page (legal document structure)
   -------------------------------------------------------------------------- */
.privacy-page .prose-shell {
  width: min(880px, calc(100% - 48px));
}

.privacy-page .content-panel {
  padding: 30px 56px 36px;
}

.privacy-page .prose-content {
  max-width: none;
}

.privacy-page .prose-content > p {
  font-size: 14px;
  line-height: 1.62;
}

.privacy-page .prose-content > p:first-child,
.privacy-page .prose-content > p:nth-child(2) {
  margin-bottom: 12px;
}

.privacy-page .prose-content h2 {
  margin: 28px 0 12px;
  padding-bottom: 6px;
  color: var(--idthw-ink);
  font-family: var(--idthw-serif);
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: 0.03em;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(195, 139, 54, 0.38);
}

.privacy-page .prose-content h2:first-of-type {
  margin-top: 20px;
}

.privacy-page .prose-content h3 {
  margin: 18px 0 6px;
  color: var(--idthw-navy-soft);
  font-family: var(--idthw-sans);
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.privacy-page .prose-content ul,
.privacy-page .prose-content ol {
  margin: 8px 0 18px;
  padding-left: 22px;
  color: #1f3350;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.62;
}

.privacy-page .prose-content li {
  margin-bottom: 6px;
}

.privacy-page .prose-content li:last-child {
  margin-bottom: 0;
}

.privacy-page .prose-content li strong {
  color: var(--idthw-gold);
}

/* --------------------------------------------------------------------------
   Contact page (mirrors the legal prose structure of terms/privacy)
   -------------------------------------------------------------------------- */
.contact-page .prose-shell {
  width: min(880px, calc(100% - 48px));
}

.contact-page .content-panel {
  padding: 30px 56px 36px;
}

.contact-page .prose-content {
  max-width: none;
}

.contact-page .prose-content > p {
  font-size: 14px;
  line-height: 1.62;
}

.contact-page .prose-content > p:first-child {
  margin-bottom: 12px;
}

.contact-page .prose-content h2 {
  margin: 28px 0 12px;
  padding-bottom: 6px;
  color: var(--idthw-ink);
  font-family: var(--idthw-serif);
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: 0.03em;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(195, 139, 54, 0.38);
}

.contact-page .prose-content h2:first-of-type {
  margin-top: 20px;
}

.contact-page .prose-content ul {
  margin: 8px 0 18px;
  padding-left: 22px;
  color: #1f3350;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.62;
}

.contact-page .prose-content li {
  margin-bottom: 6px;
}

.contact-page .prose-content li:last-child {
  margin-bottom: 0;
}

.contact-page .prose-content li strong {
  color: var(--idthw-gold);
}

/* --------------------------------------------------------------------------
   Responsive behavior
   -------------------------------------------------------------------------- */
@media (max-width: 680px) {
  .public-prose-page .prose-main {
    padding: 22px 0 22px;
  }

  .public-prose-page .prose-shell {
    width: min(100% - 28px, 792px);
  }

  .public-prose-page .content-panel {
    padding: 26px 22px 28px;
  }

  .prose-content > p {
    font-size: 15px;
    line-height: 1.62;
  }

  .prose-quote {
    margin-left: 0;
    margin-right: 0;
    padding: 16px 18px;
    font-size: 19px;
  }

  .terms-page .prose-shell {
    width: min(100% - 28px, 880px);
  }

  .terms-page .content-panel {
    padding: 26px 24px 28px;
  }

  .terms-page .prose-content > p,
  .terms-page .prose-content ul,
  .terms-page .prose-content ol {
    font-size: 13px;
    line-height: 1.58;
  }

  .terms-page .prose-content h2 {
    font-size: 17px;
  }

  .privacy-page .prose-shell {
    width: min(100% - 28px, 880px);
  }

  .privacy-page .content-panel {
    padding: 26px 24px 28px;
  }

  .privacy-page .prose-content > p,
  .privacy-page .prose-content ul,
  .privacy-page .prose-content ol {
    font-size: 13px;
    line-height: 1.58;
  }

  .privacy-page .prose-content h2 {
    font-size: 17px;
  }

  .contact-page .prose-shell {
    width: min(100% - 28px, 880px);
  }

  .contact-page .content-panel {
    padding: 26px 24px 28px;
  }

  .contact-page .prose-content > p,
  .contact-page .prose-content ul {
    font-size: 13px;
    line-height: 1.58;
  }

  .contact-page .prose-content h2 {
    font-size: 17px;
  }
}

/* --------------------------------------------------------------------------
   How It Works page
   The page has a timeline with absolute-positioned phase labels that need
   extra horizontal room, so the shell is wider and the prose content is
   not capped at 640px. Page-specific timeline/module/CTA styles live in
   how_it_works.css.
   -------------------------------------------------------------------------- */
.how-it-works-page .prose-shell {
  width: min(880px, calc(100% - 48px));
}

.how-it-works-page .content-panel {
  padding: 30px 56px 36px;
}

.how-it-works-page .prose-content {
  max-width: 640px;
  margin: 0 auto;
}

.how-it-works-page .prose-content > p {
  text-align: center;
}

/* The CTA inside .prose-closing needs more bottom padding for the button. */
.how-it-works-page .prose-closing {
  padding-bottom: 4px;
}

@media (max-width: 680px) {
  .how-it-works-page .prose-shell {
    width: min(100% - 28px, 880px);
  }

  .how-it-works-page .content-panel {
    padding: 26px 24px 28px;
  }
}

/* --------------------------------------------------------------------------
   FAQ page (accordion)
   -------------------------------------------------------------------------- */
.faq-page .prose-shell {
  width: min(820px, calc(100% - 48px));
}

.faq-page .content-panel {
  padding: 30px 48px 36px;
}

.faq-page .prose-content {
  max-width: none;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border: 1px solid rgba(195, 139, 54, 0.32);
  border-radius: 6px;
  background: rgba(255, 252, 246, 0.55);
  overflow: hidden;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.faq-item:hover {
  border-color: rgba(195, 139, 54, 0.55);
}

.faq-item[open] {
  border-color: rgba(195, 139, 54, 0.6);
  background: rgba(255, 250, 240, 0.78);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  color: var(--idthw-ink);
  font-family: var(--idthw-serif);
  font-size: 17px;
  line-height: 1.32;
  letter-spacing: 0.01em;
  font-weight: 600;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question__text {
  flex: 1 1 auto;
}

.faq-question__toggle {
  flex: 0 0 auto;
  position: relative;
  width: 14px;
  height: 14px;
  margin-top: 4px;
  align-self: flex-start;
}

.faq-question__toggle::before,
.faq-question__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: var(--idthw-gold);
  transform: translate(-50%, -50%);
  transition: transform 160ms ease;
}

.faq-question__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] .faq-question__toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-answer {
  padding: 0 20px 18px;
  border-top: 1px solid rgba(195, 139, 54, 0.22);
}

.faq-answer > p {
  margin: 14px 0 0;
  color: #1f3350;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.66;
  letter-spacing: 0.005em;
}

.faq-answer > p:first-child {
  margin-top: 14px;
}

.faq-answer strong {
  color: var(--idthw-gold);
  font-weight: 700;
}

.faq-answer em {
  color: #2a3f5e;
  font-style: italic;
}

.faq-answer ul {
  margin: 14px 0 0;
  padding-left: 22px;
  color: #1f3350;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.66;
}

.faq-answer li {
  margin-bottom: 6px;
}

.faq-answer li:last-child {
  margin-bottom: 0;
}

@media (max-width: 680px) {
  .faith-works-page .prose-shell {
    width: min(100% - 28px, 880px);
  }

  .faith-works-page .content-panel {
    padding: 24px 20px 26px;
  }

  .faith-works-page .prose-title {
    font-size: clamp(22px, 8.2vw, 28px);
    line-height: 1.16;
  }

  .faith-works-page .prose-content > p,
  .faith-works-page .prose-content ol,
  .faith-works-page .prose-content ul {
    font-size: 14px;
    line-height: 1.6;
  }

  .faith-works-page .faith-works-quote {
    font-size: 16px;
    line-height: 1.5;
    padding: 14px 16px;
  }

  .faq-page .prose-shell {
    width: min(100% - 28px, 820px);
  }

  .faq-page .content-panel {
    padding: 26px 22px 28px;
  }

  .faq-question {
    padding: 14px 16px;
    font-size: 15.5px;
  }

  .faq-answer {
    padding: 0 16px 16px;
  }

  .faq-answer > p,
  .faq-answer ul {
    font-size: 14px;
    line-height: 1.6;
  }
}