/* =======================================================================
   Love Ritual — shared design system
   Used by: Resources (/blog/), Article template, Support, Privacy/Terms.
   Breakpoint: desktop >= 900px, mobile <= 899px (see "@media (max-width: 899px)").
   Sections below are self-contained; component names are documented in the
   build report handed to later agents.
   ======================================================================= */

/* -----------------------------------------------------------------------
   1. Reset & base
   ----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--fs-body);
  line-height: 1.6;
}

[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--orange-hover); }

button { font: inherit; }

/* -----------------------------------------------------------------------
   2. Design tokens
   ----------------------------------------------------------------------- */
:root {
  --ink: #2E3327;             /* headings, primary text on light */
  --body: #4A5240;            /* body copy */
  --prose: #3F4636;           /* long-form article prose */
  --muted: #6B7260;           /* meta text */
  --muted-2: #5C634F;         /* secondary descriptions */
  --bg: #FDFBF8;              /* page background; also "light" text on dark/orange surfaces */
  --orange: #C25B03;
  --orange-hover: #8F4302;
  --sage: #768057;
  --tan: #B07A4A;
  --cream: #F9EFE5;
  --clay: #F3E4D3;
  --sage-tint: #EEF0E6;
  --hairline: rgba(46, 51, 39, .14);
  --hairline-strong: rgba(46, 51, 39, .18);
  --dark: #2E3327;            /* dark panel background */
  --dark-text: #F9EFE5;       /* text on the dark panel */
  --avatar-bg: #DBA77B;       /* round initials-avatar background, from canvas */

  /* Type scale. Seven sizes for the whole site: four for text, three for
     headings. Each one drops to its phone value below 900px, so a rule sets
     its size once and never repeats it in a media query. The only sizes not
     from this scale are the fluid hero headline, the giant chapter numerals,
     the numbers inside step badges, and the wordmarks — those are shapes
     rather than type. */
  --fs-label: 11px;   /* eyebrows, tags, do/don't labels */
  --fs-meta: 13px;    /* dates, captions, nav, small print */
  --fs-body: 15px;    /* lists, card copy, answers */
  --fs-lead: 17px;    /* intros, article prose, app quotes */
  --fs-h3: 20px;      /* card and sub-section headings */
  --fs-h2: 31px;      /* section headings */
  --fs-h1: 47px;      /* page titles */
}

@media (max-width: 899px) {
  :root {
    --fs-meta: 12px;
    --fs-body: 14px;
    --fs-lead: 15px;
    --fs-h3: 17px;
    --fs-h2: 24px;
    --fs-h1: 29px;
  }
}

/* -----------------------------------------------------------------------
   3. Typography
   ----------------------------------------------------------------------- */
h1, h2, h3, .disp {
  font-family: 'Bricolage Grotesque', 'Arial Black', Impact, sans-serif;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

p { margin: 0; line-height: 1.65; }

.meta {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-meta);
  color: var(--muted);
  font-weight: 500;
}
@media (max-width: 899px) { .meta { } }

.big-label {
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: 1;
  letter-spacing: -0.02em;
}
.big-label--sm { font-size: var(--fs-h2); }
@media (max-width: 899px) {
}

/* -----------------------------------------------------------------------
   4. Layout utilities
   ----------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1312px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4.5vw, 64px);
}
@media (max-width: 899px) {
  .container { padding: 0 20px; }
}

/* Breakpoint visibility helpers. They only ever HIDE (with !important so no
   component display rule can override them); when an element is shown it
   keeps its own display value (flex, grid, block …). */
@media (min-width: 900px) {
  .only-mobile { display: none !important; }
}
@media (max-width: 899px) {
  .only-desktop { display: none !important; }
}

/* -----------------------------------------------------------------------
   5. Buttons & badges
   ----------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 26px;
  border-radius: 14px;
  background: var(--orange);
  color: var(--bg);
  font-weight: 700;
  font-size: var(--fs-body);
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: background-color .2s ease;
}
.btn:hover { background: var(--orange-hover); color: var(--bg); }
.btn.ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--bg); }
.btn--light { background: var(--bg); color: var(--orange); }
.btn--light:hover { background: var(--bg); color: var(--orange-hover); }
.btn--pill { border-radius: 999px; }
.btn--sm { height: 40px; padding: 0 16px; font-size: var(--fs-meta); }
@media (max-width: 899px) {
  .btn { height: 44px; padding: 0 18px; border-radius: 12px; }
  .btn--sm { height: 42px; }
}

/* Nav "Download for free" (mobile only) */
.nav-download { height: 38px; padding: 0 14px; font-size: var(--fs-meta); border-radius: 12px; }

.badges { display: flex; align-items: center; gap: 16px; }
.badges img { height: 60px; width: auto; display: block; }
@media (max-width: 899px) {
  .badges { gap: 10px; }
  .badges img { height: 52px; }
}
.badges--stacked { flex-direction: column; align-items: flex-start; gap: 10px; }

/* -----------------------------------------------------------------------
   6. Nav
   Markup:
   <header class="site-header">
     <div class="nav-desktop only-desktop"> logo+wordmark, .nav-links </div>
     <div class="nav-mobile only-mobile">
       <div class="nav-mobile-top"> logo+wordmark, a.btn.nav-download[data-store-link] </div>
       <div class="nav-tabs"> a.nav-tab (aria-current="page" on active) x2 </div>
     </div>
   </header>
   ----------------------------------------------------------------------- */
.site-header { background: var(--bg); }

.nav-desktop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(24px, 4.5vw, 64px);
}
.nav-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.nav-brand img { height: 32px; width: 32px; display: block; }
.nav-brand span { font-size: 20px; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--ink);
}
.nav-links a[aria-current="page"] { color: var(--orange); }

.nav-mobile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
}
.nav-mobile-top .nav-brand img { height: 28px; width: 28px; }
.nav-mobile-top .nav-brand span { font-size: 17px; }

.nav-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.nav-tab {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--ink);
}
.nav-tab + .nav-tab { border-left: 1px solid var(--hairline); }
.nav-tab[aria-current="page"] {
  color: var(--orange);
  box-shadow: inset 0 -2px 0 var(--orange);
}

/* -----------------------------------------------------------------------
   7. Footer
   Markup:
   <footer class="site-footer"><div class="container footer-inner">
     <div class="nav-brand footer-brand">logo+wordmark</div>
     <div class="footer-links"> a x4 (Resources, Support, Privacy, Terms) </div>
   </div></footer>
   ----------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--hairline); padding: 32px 0 48px; }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-meta);
}
.footer-brand img { height: 22px; width: 22px; }
.footer-brand span { font-size: var(--fs-body); }
.footer-links { display: flex; gap: 24px; }
.footer-links a { color: var(--ink); }
@media (max-width: 899px) {
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-brand img { height: 20px; width: 20px; }
  .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
}

/* -----------------------------------------------------------------------
   8. Tags & chips
   ----------------------------------------------------------------------- */
.tags-row { display: flex; gap: 8px; flex-wrap: wrap; }

.tag {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--cream);
  color: #8F4302;
}
.tag--cream { background: var(--cream); color: #8F4302; }
.tag--cream-orange { background: var(--cream); color: var(--orange); }
.tag--clay { background: var(--clay); color: #8F4302; }
.tag--sage { background: var(--sage-tint); color: var(--body); }
@media (max-width: 899px) {
  .tag { height: 22px; padding: 0 9px; }
}

/* -----------------------------------------------------------------------
   9. Dark download panel
   Markup (place inside a <section><div class="container">):
   <div class="panel-dark">
     <div class="panel-dark__copy"><h2>...</h2><p>...</p></div>
     <div class="badges">...</div>
   </div>
   ----------------------------------------------------------------------- */
.panel-dark {
  background: var(--dark);
  color: var(--dark-text);
  border-radius: 36px;
  padding: 64px 72px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}
.panel-dark h2 { color: var(--dark-text); font-size: var(--fs-h2); }
.panel-dark p { font-size: var(--fs-lead); color: rgba(249, 239, 229, .8); max-width: 520px; }
.panel-dark .badges { justify-content: flex-end; }
@media (max-width: 899px) {
  .panel-dark {
    border-radius: 24px;
    padding: 32px 22px;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .panel-dark p { max-width: none; }
  .panel-dark .badges { justify-content: flex-start; }
}

/* -----------------------------------------------------------------------
   10. Page header block (Resources / Support / Privacy / Terms)
   Markup: <div class="page-header container-block"><span class="big-label">…</span><h1>…</h1><p>…</p></div>
   ----------------------------------------------------------------------- */
.page-header {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 820px;
  padding: 56px 0 40px;
}
.page-header h1 { font-size: var(--fs-h1); }
.page-header p { font-size: var(--fs-lead); color: var(--body); max-width: 600px; }
@media (max-width: 899px) {
  .page-header { padding: 36px 0 24px; gap: 14px; }
  .page-header p { max-width: none; }
}

/* -----------------------------------------------------------------------
   11. Resources — featured guide card
   Markup: <a class="card-featured" href="…">
     <img class="card-featured__img" …>
     <div class="card-featured__body"><div class="tags-row">…</div><h2>…</h2><p>…</p><span class="meta">…</span><span class="card-featured__cta">Read the guide →</span></div>
   </a>
   ----------------------------------------------------------------------- */
.card-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  background: var(--cream);
  border-radius: 36px;
  padding: 40px;
  color: var(--ink);
}
.card-featured__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; }
.card-featured__body { display: flex; flex-direction: column; gap: 18px; }
.card-featured__body h2 { font-size: var(--fs-h2); }
.card-featured__body p { font-size: var(--fs-lead); color: var(--body); }
.card-featured__cta { font-weight: 700; color: var(--orange); font-size: var(--fs-body); }
@media (max-width: 899px) {
  .card-featured { grid-template-columns: 1fr; gap: 16px; border-radius: 24px; padding: 14px 14px 22px; }
  .card-featured__img { aspect-ratio: 16 / 10; border-radius: 16px; }
  .card-featured__body { padding: 0 6px; gap: 12px; }
}

/* -----------------------------------------------------------------------
   12. Article / resource cards (desktop grid) and compact rows (mobile)
   Desktop:
   <div class="article-grid"><a class="card">
     <img …><div class="tags-row">…</div><h3>…</h3><p>…</p><span class="meta">…</span>
   </a>…</div>
   Mobile:
   <div class="article-rows"><a class="article-row">
     <img class="article-row__thumb" …><div><div class="tags-row">…</div><h3>…</h3><span class="meta">…</span></div>
   </a>…</div>
   ----------------------------------------------------------------------- */
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
}
.card { display: flex; flex-direction: column; gap: 14px; color: var(--ink); }
.card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 20px; }
.card h3 { font-size: var(--fs-h3); line-height: 1.15; }
.card p { font-size: var(--fs-meta); color: var(--muted-2); }

.article-rows { display: flex; flex-direction: column; border-bottom: 1px solid var(--hairline); }
.article-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--hairline);
  color: var(--ink);
}
.article-row__thumb { width: 104px; height: 104px; object-fit: cover; border-radius: 14px; }
.article-row h3 { font-size: var(--fs-h3); line-height: 1.18; }
.article-row > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* -----------------------------------------------------------------------
   13. Article template
   ----------------------------------------------------------------------- */

/* Breadcrumb */
.breadcrumb { display: flex; gap: 8px; }
.breadcrumb a { color: var(--muted); }

/* Round initials avatar */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--avatar-bg);
  color: var(--ink);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  flex-shrink: 0;
}
.avatar--lg { width: 56px; height: 56px; font-size: 18px; }
@media (max-width: 899px) {
  .avatar--lg { width: 48px; height: 48px; font-size: 16px; }
}

/* Title block: centered on desktop, left-aligned on mobile.
   Shared by the articles and the guide hero so the two cannot drift apart. */
.article-title, .guide-hero {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  text-align: center;
  width: 820px;
  max-width: 100%;
  margin: 0 auto;
  padding: 48px 0 0;
}
.article-title h1 { font-size: var(--fs-h1); }
.article-title__deck { font-size: var(--fs-lead); color: var(--body); }
.byline { display: flex; align-items: center; gap: 12px; }
.byline-meta { display: flex; align-items: center; gap: 8px; }
@media (max-width: 899px) {
  .article-title, .guide-hero {
    align-items: flex-start;
    text-align: left;
    width: auto;
    gap: 14px;
    padding: 24px 0 0;
  }
  .byline { gap: 10px; }
  .byline-meta { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* Cover figure */
.article-cover-wrap { max-width: 1120px; margin: 0 auto; padding: 40px 0 0; }

.article-cover { margin: 0; }
.article-cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 32px;
  display: block;
}
.article-cover figcaption { padding-top: 12px; font-size: var(--fs-meta); color: var(--muted); }
@media (max-width: 899px) {
  .article-cover-wrap { padding: 22px 0 0; }
  .article-cover img { border-radius: 20px; }
}

/* 3-column layout with sticky "In this article" list (desktop) */
.article-layout {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(0, 720px) minmax(160px, 1fr);
  gap: 40px;
  align-items: start;
  padding: 56px 0 0;
}
.article-prose { grid-column: 2; }

.toc-list { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 24px; }
.toc-list__label {
  margin-bottom: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: var(--fs-label);
  color: var(--muted);
  font-weight: 600;
}
.toc-list a {
  display: block;
  font-size: var(--fs-meta);
  color: var(--body);
  padding: 8px 0 8px 14px;
  border-left: 2px solid transparent;
}
.toc-list a.is-active { color: var(--orange); border-left-color: var(--orange); font-weight: 600; }

/* Mobile collapsed contents (Article + Legal share this) */
.toc-mobile {
  border: 1.5px solid var(--hairline-strong);
  border-radius: 14px;
  margin: 20px 0 0;
}
.toc-mobile summary {
  list-style: none;
  cursor: pointer;
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--ink);
}
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile summary svg { transition: transform .2s ease; flex-shrink: 0; }
.toc-mobile[open] summary svg { transform: rotate(180deg); }
.toc-mobile nav { display: flex; flex-direction: column; padding: 4px 16px 14px; }
.toc-mobile nav a { font-size: var(--fs-meta); color: var(--body); padding: 8px 0; }

/* On phones the contents row pins to the top of the screen once you scroll
   past it, so a reader can jump sections from anywhere in a long page.
   site.js adds .is-stuck while it is pinned, for the shadow. */
@media (max-width: 899px) {
  .toc-mobile {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg);
  }
  .toc-mobile[open] nav { max-height: 62vh; overflow-y: auto; }
  .toc-mobile.is-stuck {
    border-radius: 0 0 14px 14px;
    border-top-color: transparent;
    box-shadow: 0 8px 20px rgba(46, 51, 39, .1);
  }
}

@media (max-width: 899px) {
  .article-layout { display: block; padding: 0; }
  .article-layout .toc-list { display: none; }
  .article-prose { max-width: 560px; margin: 0 auto; }
  /* clear of the pinned contents row when a link jumps here */
  .prose h2, .prose h3 { scroll-margin-top: 68px; }
}

/* Prose typography — shared by Article body and Legal body */
.prose { display: flex; flex-direction: column; gap: 24px; }
.prose > * + * { margin-top: 0; }
.prose p { font-size: var(--fs-lead); line-height: 1.75; color: var(--prose); }
.prose h2 { font-size: var(--fs-h2); margin-top: 16px; }
.prose h3 { font-size: var(--fs-h3); margin-top: 8px; }
.prose ul, .prose ol { margin: 0; padding-left: 22px; font-size: var(--fs-lead); line-height: 1.75; color: var(--prose); }
.prose li { margin-bottom: 12px; }
.prose li strong { color: var(--ink); }
.prose a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.prose figure { margin: 0; }
.prose figure img { width: 100%; border-radius: 20px; }
.prose figcaption { padding-top: 10px; font-size: var(--fs-meta); color: var(--muted); }
.prose blockquote {
  margin: 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--tan);
  font-style: italic;
  font-size: var(--fs-lead);
  color: var(--ink);
  line-height: 1.6;
}
@media (max-width: 899px) {
  .prose { gap: 20px; }
  .prose p, .prose ul, .prose ol { line-height: 1.72; }
  .prose h2 { margin-top: 12px; }
  .prose blockquote { padding-left: 18px; }
}

/* Pull quote — the callout-card treatment used inline in article prose */
.pull-quote {
  margin: 0;
  background: var(--cream);
  border-radius: 24px;
  padding: 32px 36px;
  border-left: none;
  font-style: normal;
}
.pull-quote p {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.25;
  color: var(--ink);
}
@media (max-width: 899px) {
  .pull-quote { border-radius: 20px; padding: 22px 20px; }
  .pull-quote p { line-height: 1.3; }
}

/* Step tiles (the four-step ritual breakdown) */
.step-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.step-tile {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-radius: 18px;
  padding: 18px 20px;
}
.step-tile__num {
  width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-meta); flex-shrink: 0;
}
.step-tile strong { font-size: var(--fs-body); }
.step-tile p { font-size: var(--fs-meta); line-height: 1.5; margin-top: 2px; }
.step-tile--1 { background: var(--cream); }
.step-tile--1 .step-tile__num { background: var(--orange); color: var(--bg); }
.step-tile--1 p { color: var(--body); }
.step-tile--2 { background: var(--sage-tint); }
.step-tile--2 .step-tile__num { background: var(--sage); color: var(--bg); }
.step-tile--2 p { color: var(--body); }
.step-tile--3 { background: var(--clay); }
.step-tile--3 .step-tile__num { background: var(--tan); color: var(--bg); }
.step-tile--3 p { color: var(--body); }
.step-tile--4 { background: var(--dark); color: var(--dark-text); }
.step-tile--4 .step-tile__num { background: var(--avatar-bg); color: var(--ink); }
.step-tile--4 p { color: rgba(249, 239, 229, .8); }
@media (max-width: 899px) {
  .step-tiles { display: flex; flex-direction: column; gap: 10px; }
  .step-tile { border-radius: 16px; padding: 16px 18px; }
}

/* Question set (used by the tier-1 guide pages) */
.question-set {
  border: 1.5px solid var(--hairline-strong);
  background: #FFFFFF;
  border-radius: 24px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.question-set h3 { font-size: var(--fs-h3); margin: 0 !important; }
.question-set__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.question-set ol, .question-set ul {
  margin: 0; padding-left: 22px;
  font-size: var(--fs-body); line-height: 1.7; color: var(--prose);
}
.question-set li { margin-bottom: 6px; }
@media (max-width: 899px) {
  .question-set { border-radius: 20px; padding: 22px 20px; }
  .question-set ol, .question-set ul { line-height: 1.6; }
}

/* "Print / save as PDF" action */
.print-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  height: 52px;
  background: var(--orange);
  color: var(--bg);
  border: none;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-body);
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s ease;
}
.print-cta:hover { background: var(--orange-hover); }
@media (max-width: 899px) {
  .print-cta { height: 42px; padding: 0 18px; align-self: flex-start; }
}

/* FAQ list — shared by the guide pages, Article template and Support.
   Answers are always visible: no accordion, no +/- affordance.
   Works whether .faq-question is a <h3> (new pages) or a legacy <button>
   (existing guide pages) — `all: unset` strips button chrome either way. */
.faq-list { display: flex; flex-direction: column; }
.faq-item { padding: 22px 0; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 8px; }
.faq-question {
  all: unset;
  display: block;
  cursor: default;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--ink);
  line-height: 1.3;
}
.faq-question::after { content: none !important; }
.faq-answer { max-height: none !important; overflow: visible !important; }
.faq-answer p { font-size: var(--fs-body); color: var(--body); line-height: 1.6; margin: 0; }
@media (max-width: 899px) {
  .faq-item { padding: 18px 0; gap: 8px; }
}

/* Resource page tail: the app CTA sits right after the article, related reading last */
.article-cta-wrap { padding: 96px 0 0; }
.more-from { padding: 96px 0 96px; }
@media (max-width: 899px) {
  .article-cta-wrap { padding: 56px 0 0; }
  .more-from { padding: 56px 0 64px; }
}

.article-syndication { font-size: var(--fs-meta); color: var(--muted); }
@media (max-width: 899px) { .article-syndication { } }

/* Author box */
.author-box {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.author-box__body { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 899px) {
  .author-box { gap: 14px; padding-top: 18px; }
}

/* "More from Love Ritual" reuses .article-grid / .card (desktop) and
   .article-rows / .article-row (mobile) from section 12 above. */

/* -----------------------------------------------------------------------
   14. Support
   ----------------------------------------------------------------------- */
.help-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.help-card {
  background: var(--cream);
  border-radius: 28px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.help-card__icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--bg);
  display: inline-flex; align-items: center; justify-content: center;
}
.help-card h3 { font-size: var(--fs-h3); }
.help-card p { font-size: var(--fs-body); color: var(--body); }
.help-card__link { font-weight: 700; font-size: var(--fs-body); margin-top: auto; }
.help-card__extra { font-size: var(--fs-meta); color: var(--muted); }
@media (max-width: 899px) {
  .help-cards { display: flex; flex-direction: column; gap: 12px; }
  .help-card {
    border-radius: 20px;
    padding: 18px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 6px;
    align-items: start;
  }
  .help-card > :not(.help-card__icon) { grid-column: 2; }
  .help-card__icon { width: 44px; height: 44px; border-radius: 12px; grid-column: 1; grid-row: 1 / span 4; }
  .help-card__link { margin-top: 0; padding-top: 2px; }
}

/* "Questions / Before you write in" two-column block */
.support-questions {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  align-items: start;
}
.support-questions__intro { display: flex; flex-direction: column; gap: 12px; }
.support-questions__intro h2 { font-size: var(--fs-h2); }
@media (max-width: 899px) {
  .support-questions { display: flex; flex-direction: column; gap: 16px; }
}

/* -----------------------------------------------------------------------
   15. Legal (Privacy / Terms)
   ----------------------------------------------------------------------- */
.legal-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 80px;
  align-items: start;
  padding: 0 0 64px;
}
.legal-layout .toc-list { max-width: 300px; }
.legal-prose { max-width: 720px; }
.legal-prose h2 { font-size: var(--fs-h2); }
.legal-summary {
  font-size: var(--fs-body);
  color: var(--body);
  background: var(--cream);
  border-radius: 18px;
  padding: 20px 24px;
}
@media (max-width: 899px) {
  .legal-layout { display: block; padding: 0 0 48px; }
  .legal-layout .toc-list { display: none; }
  .legal-summary { border-radius: 16px; padding: 18px; }
}

/* -----------------------------------------------------------------------
   16. Motion
   ----------------------------------------------------------------------- */
/* Animated graphics ([data-anim]) are started, played once and held by
   site.js; see setUpGraphicAnimations. */

/* -----------------------------------------------------------------------
   17. Print — let the question bank and guides save cleanly as a PDF
   ----------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .panel-dark, .related-section, .more-from,
  .breadcrumb, .print-cta, .article-cover-wrap, .tags-row,
  .article-syndication, .toc-list, .toc-mobile, .author-box { display: none !important; }
  body { background: #fff; color: #000; }
  .article-title { padding: 0 0 12px; align-items: flex-start; text-align: left; width: auto; }
  .article-title h1 { font-size: 22pt; color: #000; }
  .article-title__deck { font-size: 12pt; }
  .article-layout { display: block; padding: 0; }
  .prose p, .prose ul, .prose ol { font-size: 11pt; line-height: 1.55; color: #000; }
  .prose h2 { font-size: 14pt; margin: 20pt 0 8pt; page-break-after: avoid; }
  .prose h3 { font-size: 12pt; margin: 14pt 0 6pt; page-break-after: avoid; }
  .prose li { margin-bottom: 5pt; page-break-inside: avoid; }
  .question-set { border: 1px solid #ccc; padding: 12pt 14pt; page-break-inside: avoid; }
  .container { max-width: none; padding: 0; }
  .prose a { color: #000; text-decoration: none; }
}

/* Resources cards whose picture is a phone screenshot rather than a photo. */
.card img.card__img--app,
.article-row__thumb.card__img--app { object-fit: contain; object-position: center bottom; background: var(--clay); padding-top: 16px; }
.article-row__thumb.card__img--app { padding-top: 10px; }

/* "All articles" / "More from Love Ritual" — the one heading that used to be
   sized inline on seven pages. */
.section-heading { font-size: var(--fs-h2); }
.section-heading--spaced { margin-bottom: 28px; }

/* -----------------------------------------------------------------------
   17. Windows high contrast
   ----------------------------------------------------------------------- */
/* Forced colours rewrite `fill` and `stroke` as well as text and background,
   which flattens the ritual illustrations into blocks of one colour — a label
   and the card behind it end up identical and the graphic becomes unreadable.
   These are illustrations whose colour carries the meaning (each step has its
   own), so they keep their drawn palette; everything around them still
   follows the user's colours. */
@media (forced-colors: active) {
  svg.lr-week,
  svg.lr-anim {
    forced-color-adjust: none;
  }
  /* the store badges are artwork too */
  .badges img { forced-color-adjust: none; }
  /* keep the pinned contents row legible against forced colours */
  .toc-mobile { background: Canvas; }
}