/* RM Life website styles. Themed to the RM Life flame mark. */
/* No frameworks, no external requests. System font stack for speed. */

/* ---------------------------------------------------------------------------
   COLOUR SYSTEM

   Navy carries the brand. The four flame colours are a FUNCTIONAL system --
   they appear only where they mean spiritual / social / physical / intellectual.
   Never use a category colour decoratively.

   Each category has four tokens:
     --cat-*-light   logo light tone. Fills on navy only.
     --cat-*-base    logo base tone. Large fills and swatches (meter bars, dots).
                     Fails text contrast -- never put text or hairlines in it.
     --cat-*-ui      contrast-safe. Text, icons, meter-bar edge. >= 4.6:1 on white.
     --cat-*-tint    pale wash for chips. Navy text on it >= 11.7:1.

   These mirror constants/Colors.ts in the app: -base == `categoriesVivid`,
   -ui == `categories`. Change a hue in one and change it in all three places
   (app Colors.ts, app lib/categories.ts, this file).

   Intellectual has no dark tone in the logo -- the flame is two-tone by design.
   --cat-intellectual-ui exists for UI contrast only. It is NOT a logo colour;
   do not add it to the mark.
   --------------------------------------------------------------------------- */

:root {
  /* Brand */
  --navy: #002e5d;          /* 13.56:1 on white */
  --navy-900: #011a39;
  --navy-700: #0b3868;
  --navy-600: #234e80;      /*  8.49:1 on white -- links, kickers */
  --navy-300: #83a8d5;
  --navy-100: #c9e0fe;

  /* Interactive. Navy is the primary action colour; there is no second brand blue. */
  --accent: var(--navy);
  --accent-hover: var(--navy-700);
  --link: var(--navy-600);

  /* Four areas of growth (Luke 2:52) */
  --cat-spiritual-light: #6ee9ff;
  --cat-spiritual-base:  #23c0d7;
  --cat-spiritual-ui:    #088191;
  --cat-spiritual-tint:  #d5f8fe;

  --cat-social-light: #c6ed59;
  --cat-social-base:  #a4c82b;
  --cat-social-ui:    #667e05;
  --cat-social-tint:  #e9f7cd;

  --cat-physical-light: #ff7d93;
  --cat-physical-base:  #ea4c6f;
  --cat-physical-ui:    #d92d5c;
  --cat-physical-tint:  #ffeaec;

  --cat-intellectual-light: #ffb37e;
  --cat-intellectual-base:  #f5851f;
  --cat-intellectual-ui:    #b45d02;
  --cat-intellectual-tint:  #ffece0;

  /* The flame sweep -- warm to cool, in the order the tongues read left to right.
     Signature accent. Thin rules only, never a large fill. */
  /* The four area tones as solid blocks with hard stops. There is deliberately
     no blended version: a gradient invents in-between colours that do not
     correspond to any of the four areas, so every flame element on the site
     switches colour instead of fading.

     TWO ORDERS EXIST, ON PURPOSE. They are not interchangeable.

     --flame-blocks is BRAND order: red, orange, green, blue, which is the order
     the tongues of the logo read left to right. Every decorative rule on the
     site uses it (the header rule, the kicker underline, the CTA band edge) so
     that a visitor's eye gets the same sequence from the mark and from the
     furniture around it. If you add a new decorative flame element, use this.

     --meter-blocks is CATEGORY order: spiritual, social, physical, intellectual,
     matching CATEGORY_ORDER in the app's lib/categories.ts. Only the meter key
     uses it, because its four quarters have to line up with the meter rows
     stacked beside them and with the hatched .k-plan swatch directly below it.
     Reordering this without reordering the meters in index.html, rm.html, and
     .k-plan::before makes the legend lie about which colour is which area. */
  --flame-blocks: linear-gradient(90deg,
    var(--cat-physical-base) 0 25%,
    var(--cat-intellectual-base) 25% 50%,
    var(--cat-social-base) 50% 75%,
    var(--cat-spiritual-base) 75% 100%);

  --meter-blocks: linear-gradient(90deg,
    var(--cat-spiritual-base) 0 25%,
    var(--cat-social-base) 25% 50%,
    var(--cat-physical-base) 50% 75%,
    var(--cat-intellectual-base) 75% 100%);

  /* The "scheduled but not done yet" hatch, one pattern per area. Each is the
     -ui tone blended toward white until the darker stripe clears 1.90:1 against
     --track, so the band stays distinct from the empty remainder.
     Single source of truth: both the meter bars and the key read these. */
  --hatch-spiritual:    repeating-linear-gradient(45deg, #75b8c1 0 6px, #b5d9de 6px 12px);
  --hatch-social:       repeating-linear-gradient(45deg, #a6b46e 0 6px, #ced6af 6px 12px);
  --hatch-physical:     repeating-linear-gradient(45deg, #ec94ac 0 6px, #f5c6d3 6px 12px);
  --hatch-intellectual: repeating-linear-gradient(45deg, #d5a471 0 6px, #e8ceb3 6px 12px);
  --hatch-neutral:      repeating-linear-gradient(45deg, #d5d1ca 0 6px, #e8e4dd 6px 12px);

  /* Surfaces -- warm neutral ground, echoing the off-white the mark sits on */
  --ink: #1f2225;
  --muted: #4a4d51;         /*  8.50:1 on white */
  --line: #e4e0da;
  --bg: #ffffff;
  --bg-soft: #f8f5f1;
  --track: #efece7;
  --ok: #1a7f4b;

  --radius: 12px;
  --shadow: 0 6px 24px rgba(0, 46, 93, 0.08);
  --maxw: 72rem;
}


* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Keeps #how, #faq, #waitlist etc. from landing underneath the sticky header
     when someone clicks a nav link. Must stay >= the header's height. */
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--link); }
a:hover { color: var(--navy); }

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

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Fixed, not absolute: with a sticky header the skip link has to stay in the
   viewport when the page is scrolled, or keyboard users tab to something they
   cannot see. */
.skip-link {
  position: fixed;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 50;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; color: #fff; }

/* Header */
/* Sticky. The 3px flame rule below doubles as the separator when content
   scrolls underneath, so no drop shadow is needed. z-index sits below the
   skip link (50) and above everything else on the page. */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 40;
}
/* Signature detail: the four area colours as a 3px rule under the header.
   Four solid quarters, not a fade. See --flame-blocks. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--flame-blocks);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--navy);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.2px;
}
.brand-mark {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
/* Reversed contexts (navy bands) keep the full-colour flame -- it is built to
   sit on navy, so no separate artwork is needed. */
.site-nav { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.site-nav a {
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.97rem;
  padding: 0.5rem 0.15rem;
}
.site-nav a:hover { color: var(--navy); }
.site-nav a[aria-current="page"] { color: var(--navy); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); color: #fff; box-shadow: var(--shadow); }
.btn-secondary { background: #fff; color: var(--navy); border-color: var(--navy); }
.btn-secondary:hover { background: var(--bg-soft); color: var(--navy); }
.btn-note { display: block; margin-top: 0.5rem; font-size: 0.88rem; color: var(--muted); }

/* Hero */
.hero { padding: 4rem 0 3rem; }
.hero .container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.1rem, 4.5vw, 3.2rem);
  line-height: 1.12;
  color: var(--navy);
  margin: 0 0 1rem;
  letter-spacing: -0.5px;
}
.hero .lede {
  font-size: 1.18rem;
  color: var(--muted);
  max-width: 34em;
  margin: 0 0 1.6rem;
}
.hero-ctas { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; }

/* Single-column hero for the interior pages (how-it-works, why-rm-life, faq,
   waitlist). The homepage hero is a two-column grid because it carries the
   phone mockup in column two; on a page with no mockup that same rule leaves
   half the band empty. Additive only: .hero on its own is unchanged. */
.hero-single .container { grid-template-columns: 1fr; }
.hero-single .lede { max-width: 46em; }
.hero-trust {
  margin-top: 1.1rem;
  font-size: 0.92rem;
  color: var(--muted);
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
}
.hero-trust span { display: inline-flex; align-items: center; gap: 0.35rem; }
.hero-trust svg { width: 18px; height: 18px; color: var(--ok); flex: none; }

/* ---------------------------------------------------------------------------
   PRE-LAUNCH STATE
   Status pill, store badges, and the waitlist form. Remove this block (and the
   markup that uses it) once the app is actually live in both stores.
   --------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.35rem 0.85rem 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--cat-spiritual-tint);
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cat-spiritual-ui);
  flex: none;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.8); }
}

/* Store badges. Deliberately NOT the official Apple or Google artwork: those
   badges are licensed for shipping apps only and may not be shown pre-launch.
   Plain-text references to the store names are what is left. */
.store-badges {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
}
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem 0.55rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--navy);
  min-height: 52px;
}
.store-badge svg { width: 22px; height: 22px; color: var(--navy-600); flex: none; }
.store-badge-text { display: flex; flex-direction: column; line-height: 1.15; }
.store-badge-text small {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--muted);
}
.store-badge-text strong { font-size: 0.98rem; font-weight: 800; }

/* Waitlist form. Lives inside the navy CTA band. */
/* Two columns: name and email share row one, the button spans row two.
   Three controls on a single row would squeeze every one of them. */
.waitlist-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  max-width: 36rem;
  margin: 0 auto;
}
.waitlist-input {
  /* Inputs carry a default intrinsic width; without min-width:0 a 1fr grid
     column refuses to shrink below it and the form overflows the band. */
  min-width: 0;
  min-height: 48px;
  padding: 0.75rem 1.1rem;
  border-radius: 999px;
  border: 2px solid transparent;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.waitlist-input::placeholder { color: #7b7f84; }
.waitlist-input:focus-visible { outline: 3px solid var(--cat-spiritual-light); outline-offset: 2px; }
/* Turnstile sits on its own row above the button. With
   data-appearance="interaction-only" the widget renders nothing most of the
   time, so the row collapses to zero height and the form looks untouched;
   it only takes up space when a visitor actually has to interact. */
.waitlist-form .cf-turnstile {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
}
.waitlist-form .cf-turnstile:empty { display: none; }

.waitlist-form .btn-primary { grid-column: 1 / -1; }
.waitlist-form .btn-primary[disabled] { opacity: 0.6; cursor: progress; }

.waitlist-status {
  min-height: 1.5rem;
  margin: 0.9rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy-100);
}
.waitlist-status[data-state="ok"]    { color: var(--cat-social-light); }
.waitlist-status[data-state="error"] { color: var(--cat-intellectual-light); }

@media (max-width: 620px) {
  .waitlist-form { grid-template-columns: 1fr; }
  .store-badges { gap: 0.5rem; }
  .store-badge { flex: 1 1 100%; }
}

/* Phone mock */
.phone {
  width: min(320px, 88vw);
  margin: 0 auto;
  border: 10px solid var(--navy);
  border-radius: 36px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 1.1rem 1rem 1.3rem;
}
.phone-head {
  font-weight: 800;
  color: var(--navy);
  font-size: 0.95rem;
  margin-bottom: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.phone-head small { color: var(--muted); font-weight: 600; }
.meter { margin-bottom: 0.7rem; }
.meter-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.meter-track {
  position: relative;
  height: 10px;
  border-radius: 6px;
  background: var(--track);
  overflow: hidden;
}
/* "Planned" is a hatched ghost bar; "actual" is the solid category colour on top.

   The "actual" fill uses the LITERAL LOGO TONES (--cat-*-base), so the bars read
   as the flame. Those tones are bright: on their own they sit at 1.6-3.1:1
   against the track, under the 3:1 that WCAG 1.4.11 asks of a meaningful
   graphic. The 1px inset ring in --meter-edge (the contrast-tuned tone, 3.9:1)
   restores a perceivable boundary, so the bar's extent stays legible while the
   fill keeps the brand colour. Do not remove the ring without darkening the
   track to compensate. */
.meter-plan {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 6px;
  background: var(--meter-hatch, var(--hatch-neutral));
}
.meter-actual {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 6px;
  background: var(--meter-fill, var(--navy-600));
  box-shadow: inset 0 0 0 1px var(--meter-edge, transparent);
}

/* Category mapping. The colour is a second channel only -- the label always
   names the area in text, so nothing depends on colour alone.

   --meter-fill   the logo tone (= constants/Colors.ts `categoriesVivid`)
   --meter-edge   the contrast-tuned tone (= `categories`), used for the ring
   --meter-hatch  the "scheduled" stripe pattern, from the --hatch-* tokens */
.meter[data-area="spiritual"]    { --meter-fill: var(--cat-spiritual-base);    --meter-edge: var(--cat-spiritual-ui);    --meter-hatch: var(--hatch-spiritual); }
.meter[data-area="social"]       { --meter-fill: var(--cat-social-base);       --meter-edge: var(--cat-social-ui);       --meter-hatch: var(--hatch-social); }
.meter[data-area="physical"]     { --meter-fill: var(--cat-physical-base);     --meter-edge: var(--cat-physical-ui);     --meter-hatch: var(--hatch-physical); }
.meter[data-area="intellectual"] { --meter-fill: var(--cat-intellectual-base); --meter-edge: var(--cat-intellectual-ui); --meter-hatch: var(--hatch-intellectual); }

/* Small colour dot beside each meter label, so the four areas read as a set. */
.meter-label span:first-child { display: inline-flex; align-items: center; gap: 0.4rem; }
.meter[data-area] .meter-label span:first-child::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--meter-fill);
  flex: none;
}
/* Key for the three zones. Without it the hatched band is a mystery: readers
   assume it is decoration rather than "scheduled but not done yet". */
/* Three equal columns across the full width of the card. The swatches are the
   same 10px height and radius as a real meter bar, so the key is a scale
   sample of the thing it explains rather than a token chip. */
.meter-key {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
}
/* Column direction with the default align-items:stretch is what makes the
   ::before swatch span its whole column. */
.meter-key span {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: center;
  min-width: 0;
}
.meter-key span::before {
  content: "";
  height: 10px;
  border-radius: 6px;
}
/* Four solid blocks stand in for "whatever colour this area is". Hard stops,
   not a blend: the four areas are four separate things, and a gradient invents
   in-between colours that mean nothing.

   --meter-blocks, NOT --flame-blocks: this swatch sits directly above .k-plan's
   hatched quarters and beside the meter rows, so it follows CATEGORY_ORDER.
   The decorative flame rules elsewhere follow the logo's left-to-right order
   instead. */
.k-done::before { background: var(--meter-blocks); }
/* Four hatched quarters, same four areas in the same order as .k-done.
   Each layer is sized to 25% and positioned across the 75% of free space:
   0% -> 0, 33.333% -> 25%, 66.667% -> 50%, 100% -> 75%. */
.k-plan::before {
  background:
    var(--hatch-spiritual)     0%       0 / 25% 100% no-repeat,
    var(--hatch-social)        33.333%  0 / 25% 100% no-repeat,
    var(--hatch-physical)      66.667%  0 / 25% 100% no-repeat,
    var(--hatch-intellectual)  100%     0 / 25% 100% no-repeat;
  box-shadow: inset 0 0 0 1px var(--line);
}
.k-open::before { background: var(--track); box-shadow: inset 0 0 0 1px var(--line); }

.phone-insight {
  margin-top: 0.9rem;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  background: var(--bg-soft);
  border-left: 3px solid var(--cat-social-ui);
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.45;
}

/* Sections */
section { padding: 3.4rem 0; }
section.soft { background: var(--bg-soft); }
.kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--navy-600);
  margin: 0 0 0.75rem;
}
.kicker::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-top: 0.45rem;
  border-radius: 2px;
  background: var(--flame-blocks);
}
h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 0.9rem;
  letter-spacing: -0.3px;
}
.section-lede { color: var(--muted); max-width: 44em; margin: 0 0 2rem; font-size: 1.06rem; }

/* Problem cards */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.3rem;
}
.card h3 { margin: 0.6rem 0 0.5rem; color: var(--navy); font-size: 1.12rem; }
.card p { margin: 0; color: var(--muted); font-size: 0.99rem; }
.card .icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--navy-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Opt-in category tinting for cards that genuinely represent one of the four areas. */
.card[data-area="spiritual"]    .icon { background: var(--cat-spiritual-tint);    border-color: transparent; color: var(--cat-spiritual-ui); }
.card[data-area="social"]       .icon { background: var(--cat-social-tint);       border-color: transparent; color: var(--cat-social-ui); }
.card[data-area="physical"]     .icon { background: var(--cat-physical-tint);     border-color: transparent; color: var(--cat-physical-ui); }
.card[data-area="intellectual"] .icon { background: var(--cat-intellectual-tint); border-color: transparent; color: var(--cat-intellectual-ui); }
.card .icon svg { width: 24px; height: 24px; }

/* Steps */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.3rem;
  position: relative;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  margin-bottom: 0.7rem;
}
.step h3 { margin: 0 0 0.45rem; color: var(--navy); font-size: 1.1rem; }
.step p { margin: 0; color: var(--muted); font-size: 0.98rem; }

/* Comparison table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table.compare { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 0.97rem; }
.compare th, .compare td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { background: var(--navy); color: #fff; font-size: 0.92rem; }
.compare thead th:first-child { border-top-left-radius: var(--radius); }
.compare thead th:last-child { border-top-right-radius: var(--radius); }
.compare tbody tr:last-child td { border-bottom: none; }
.compare td.yes { color: var(--ok); font-weight: 700; }
.compare td.no { color: var(--muted); }
.compare td:first-child { font-weight: 700; color: var(--navy); }

/* Feature list */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }

/* FAQ */
.faq { max-width: 50rem; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  margin-bottom: 0.8rem;
  padding: 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 3rem 1rem 1.2rem;
  font-weight: 700;
  color: var(--navy);
  position: relative;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--navy-600);
  font-weight: 700;
}
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 1.2rem 1.1rem; color: var(--muted); }
.faq .answer p { margin: 0 0 0.6rem; }
.faq .answer p:last-child { margin-bottom: 0; }

/* Audience strip */
.audience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.audience .card { display: flex; flex-direction: column; gap: 0.4rem; }
.audience .card a { font-weight: 700; }

/* CTA band */
.cta-band {
  background: var(--navy);
  color: #fff;
  text-align: center;
  border-top: 4px solid transparent;
  border-image: var(--flame-blocks) 1;
}
.cta-band h2 { color: #fff; }
.cta-band .section-lede { color: var(--navy-100); margin-left: auto; margin-right: auto; }
.cta-band .btn-primary { background: #fff; color: var(--navy); }
.cta-band .btn-primary:hover { background: var(--bg-soft); color: var(--navy); }
.cta-band .btn-note { color: var(--navy-100); }

/* Reversed-context links.
   Without this the global `a { color: var(--link) }` (navy-600) lands on the
   navy band at 1.60:1 -- effectively invisible. White is 13.56:1 (AAA).
   The underline stays so the link is not signalled by colour alone (WCAG 1.4.1). */
.cta-band a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.cta-band a:hover {
  color: var(--cat-spiritual-light);   /* 9.53:1 on navy */
  text-decoration-thickness: 2px;
}
/* The global focus ring uses --cat-spiritual-ui, which is only 2.94:1 against
   navy and fails WCAG 1.4.11 (3:1 for non-text). Swap to the light tone here. */
.cta-band :focus-visible {
  outline: 3px solid var(--cat-spiritual-light);
  outline-offset: 2px;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 2.2rem 0 2.6rem;
  font-size: 0.93rem;
  color: var(--muted);
}
.site-footer .container {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer-links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.footer-links a { color: var(--muted); text-decoration: none; font-weight: 600; }
.footer-links a:hover { color: var(--navy); }
.footnote { max-width: 44em; font-size: 0.85rem; margin-top: 0.8rem; }

/* Legal pages */
.legal { max-width: 46rem; padding-top: 2.5rem; }
.legal h1 { color: var(--navy); font-size: 2rem; margin-bottom: 0.2rem; }
.legal .updated { color: var(--muted); font-size: 0.92rem; margin-bottom: 2rem; }
.legal h2 { font-size: 1.25rem; margin-top: 2rem; }
.legal p { color: var(--muted); }
/* Lists carry the dense parts of the policy -- what we collect, who it goes to,
   how to cancel. Scannable beats a wall of prose for anything a reader is
   trying to find rather than read. */
.legal ul { color: var(--muted); padding-left: 1.2rem; margin: 0 0 1rem; }
.legal li { margin-bottom: 0.6rem; }
.legal li:last-child { margin-bottom: 0; }
.legal li::marker { color: var(--navy-300); }
.legal strong { color: var(--navy); font-weight: 700; }

/* Responsive */
@media (max-width: 960px) {
  .hero .container { grid-template-columns: 1fr; gap: 2.4rem; }
  .grid-3, .steps { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .grid-3, .steps, .grid-4, .audience { grid-template-columns: 1fr; }
  .hero { padding-top: 2.6rem; }
  section { padding: 2.6rem 0; }

  /* On a phone the four nav links would wrap to two or three rows, and a
     sticky header that tall swallows a third of the screen. Force one row and
     let it scroll sideways instead. */
  html { scroll-padding-top: 4.25rem; }
  .site-header .container { padding-top: 0.55rem; padding-bottom: 0.55rem; gap: 0.75rem; }
  .brand { font-size: 1.05rem; }
  .brand-mark { width: 28px; height: 28px; }
  .site-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 0.9rem;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; font-size: 0.9rem; padding: 0.35rem 0.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}