/* Global Forgiveness Movement — platform design system.
   Palette & type shared with the interactive workbook. Hexes are the official GFM
   Brand Cheat Sheet palette (adopted 2026-08-27); sage/lavender/slate are
   site-derived accents. Mobile-first. One file; every page uses it. */

@import url('fonts.css');

:root {
  --cream: #f5f1e2;
  --cream-soft: #efe9d8;
  --paper: #faf7ee;
  --white: #fffdf7;
  --teal: #00887a;
  --teal-deep: #006d62;
  --teal-bright: #009a8a;
  --navy: #003d57;
  --navy-deep: #003146;
  --plum: #770061;
  --plum-soft: #871071;
  --mustard: #fab812;
  --sage: #8fbcad;
  --lavender: #c6a3c8;
  --slate: #5b7e96;
  --ink: #24333e;
  --line: rgba(0, 61, 87, 0.14);
  --muted: rgba(36, 51, 62, 0.66);

  --font-head: 'Poppins', 'Avenir Next', 'Trebuchet MS', sans-serif;
  --font-body: 'Nunito Sans', 'Avenir', 'Segoe UI', sans-serif;
  --font-script: 'Sacramento', 'Snell Roundhand', cursive;

  --radius: 18px;
  --radius-soft: 26px;
  --shadow: 0 10px 30px rgba(0, 61, 87, 0.10);
  --pad: clamp(1.1rem, 4vw, 2rem);
  --measure: 68ch;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
html { scroll-behavior: smooth; }

/* The shell script reveals the page once the gate has decided; no flash of content. */
body { visibility: hidden; }
html[data-shell-ready] body { visibility: visible; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img, svg, iframe { max-width: 100%; }
a { color: var(--teal-deep); }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.22; color: var(--navy); margin: 0 0 0.6em; }
h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); font-weight: 700; }
h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); font-weight: 600; }
h3 { font-size: 1.12rem; font-weight: 600; }
p { margin: 0 0 1em; max-width: var(--measure); }
ul, ol { max-width: var(--measure); }
.script { font-family: var(--font-script); font-weight: 400; }
.small { font-size: 0.85rem; }
.muted { color: var(--muted); }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 1rem; color: var(--ink); }
:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }

/* ------------------------------------------------ header */
/* A card that has not been filled yet draws nothing — no empty white box while
   a backend answers. Cards are populated by script (My Path's progress and group
   cards); this covers every one of them, now and later. */
.card:empty { display: none; }

.site-head {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 0.8rem var(--pad);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem;
}
.site-brand { text-decoration: none; color: inherit; margin-right: auto; display: flex; align-items: center; gap: 0.65rem; }
.site-brand svg { width: 30px; height: 30px; flex: none; }
.site-brand .t { line-height: 1.2; }
.site-brand .t b { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--navy); }
.site-brand .t span { display: block; font-size: 0.72rem; letter-spacing: 0.05em; color: var(--muted); }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; }
.site-nav a {
  text-decoration: none; color: var(--ink);
  font-family: var(--font-head); font-weight: 500; font-size: 0.92rem;
  padding: 0.45rem 0.75rem; border-radius: 999px;
}
.site-nav a:hover { background: rgba(0, 136, 122, 0.10); }
.site-nav a[aria-current="page"] { background: var(--teal); color: #fff; }
.site-auth { display: flex; align-items: center; gap: 0.5rem; }
.site-auth a { text-decoration: none; font-family: var(--font-head); font-weight: 500; font-size: 0.92rem; }
.site-auth .signin,
.site-auth .signout { color: var(--teal-deep); padding: 0.45rem 0.4rem; }
/* The header sign-out is a button for the right semantics, and must not read
   as one — it sits beside a text link and matches it. */
.site-auth .signout {
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-head); font-weight: 500; font-size: 0.92rem;
}
.site-auth .signout:hover { text-decoration: underline; }

/* ------------------------------------------------ layout */
main { flex: 1; width: 100%; }
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 var(--pad); }
.section { padding: clamp(2.2rem, 6vw, 3.8rem) 0; }
/* Anchored sections land with a little air above the heading. */
.section[id] { scroll-margin-top: 1rem; }
.section + .section { border-top: 1px solid var(--line); }
.section--paper { background: var(--paper); }
.section--navy { background: var(--navy); color: #f2f4f0; }
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }
/* The navy link tint is for prose links only — a .btn keeps its own colors.
   Without :not(.btn) this rule's specificity (0,1,1) beats .btn--primary's
   (0,1,0) and paints button labels sage on teal (the "greyed-out" look
   Wyatt flagged 1 Sep). */
.section--navy a:not(.btn) { color: var(--sage); }
.section--navy .muted { color: rgba(242, 244, 240, 0.7); }
.kicker {
  font-family: var(--font-head); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--plum);
  margin: 0 0 0.7rem;
}
.section--navy .kicker { color: var(--mustard); }
.center { text-align: center; }
.center p, .center ul { margin-left: auto; margin-right: auto; }

/* ------------------------------------------------ buttons */
.btn {
  display: inline-block; text-decoration: none; text-align: center;
  font-family: var(--font-head); font-weight: 600; font-size: 0.98rem;
  padding: 0.75rem 1.5rem; border-radius: 999px; border: 2px solid transparent;
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn--primary { background: var(--teal); color: #fff; }
.btn--primary:hover { background: var(--teal-bright); }
.btn--outline { border-color: var(--teal); color: var(--teal-deep); background: transparent; }
.btn--plum { background: var(--plum); color: #fff; }
.btn--quiet { color: var(--teal-deep); background: rgba(0, 136, 122, 0.10); }
button.btn { font-size: 1rem; }

/* ------------------------------------------------ cards & grids */
.grid { display: grid; gap: 1.1rem; }
/* Grid items default to min-width:auto, so a card whose content has a wide
   min-content width refuses to shrink and drags the whole track past the
   viewport (the sign-up page did exactly this at 390px). One rule here
   rather than a fix per card. */
.grid > * { min-width: 0; }
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: 1fr 1fr; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem; box-shadow: 0 4px 16px rgba(0, 61, 87, 0.05);
}
.card h3 { margin-top: 0.2rem; }
.card .kicker { margin-bottom: 0.35rem; }
.card--tint { background: var(--cream-soft); }

/* The three doors */
.door {
  display: flex; flex-direction: column; gap: 0.4rem;
  background: var(--white); border: 2px solid var(--line); border-radius: var(--radius-soft);
  padding: 1.8rem 1.6rem;
}
.door:hover { border-color: var(--teal); }
.door .kicker { margin: 0 0 0.2rem; }
.door h3 { font-size: 1.35rem; margin: 0; }
.door p { margin: 0 0 0.8rem; }
.door .btn { align-self: flex-start; margin-top: auto; }
.door-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin: auto 0 0; }
.door-actions .btn { margin-top: 0; }

/* Home hero: the three doors ARE the hero's call to action, so the lede stays
   narrow above them and the doors get the full width. The video no longer
   competes for the first screen — it sits below, at feature size. */
.hero-lede { max-width: 46rem; }
.hero-lede h1 { margin-top: 0.2rem; }
.hero-lede .muted { margin-bottom: 0; }
.doors { max-width: 1000px; margin: 1.8rem auto 0; }
.video--feature { max-width: 900px; margin: 0 auto; }

/* ------------------------------------------------ stats */
.stats { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; padding: 0.9rem 0.4rem; }
.stat b { display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.1rem); color: var(--teal-deep); }
.stat span { font-size: 0.85rem; color: var(--muted); }
.section--navy .stat b { color: var(--mustard); }
.section--navy .stat span { color: rgba(242, 244, 240, 0.7); }

/* Effect sizes */
.effects { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 620px; }
.effect { background: var(--white); border-radius: var(--radius); border: 1px solid var(--line); text-align: center; padding: 1rem 0.5rem; }
.effect b { display: block; font-family: var(--font-head); font-size: 1.5rem; color: var(--plum); }
.effect span { font-size: 0.8rem; color: var(--muted); display: block; }

/* ------------------------------------------------ REACH steps */
.reach { display: grid; gap: 0.9rem; }
@media (min-width: 720px) { .reach { grid-template-columns: repeat(5, 1fr); } }
.reach li {
  list-style: none; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem; text-align: center;
}
.reach .letter {
  display: inline-grid; place-content: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--teal); color: #fff; font-family: var(--font-script); font-size: 1.7rem; line-height: 1;
  margin-bottom: 0.5rem;
}
.reach li:nth-child(2) .letter { background: var(--mustard); color: var(--navy); }
.reach li:nth-child(3) .letter { background: var(--plum); }
.reach li:nth-child(4) .letter { background: var(--slate); }
.reach li:nth-child(5) .letter { background: var(--sage); color: var(--navy); }
.reach b { display: block; font-family: var(--font-head); font-size: 0.98rem; color: var(--navy); }
.reach span { font-size: 0.85rem; color: var(--muted); }

/* ------------------------------------------------ video */
.video { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--navy-deep); box-shadow: var(--shadow); }
.video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.video figcaption { padding: 0.55rem 0.9rem; font-size: 0.8rem; color: rgba(242, 244, 240, 0.75); }
figure.video { margin: 0; }
/* A slot waiting for its iframe holds the iframe's 16:9 space, so hydration
   never moves the page under the visitor (it broke anchor landings). */
figure.video:empty { aspect-ratio: 16 / 9; }

/* ------------------------------------------------ quotes */
.quote { background: var(--white); border-left: 4px solid var(--sage); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.2rem 1.4rem; margin: 0; }
.quote p { font-size: 1.02rem; margin-bottom: 0.6rem; }
.quote footer { font-family: var(--font-head); font-weight: 500; font-size: 0.85rem; color: var(--muted); }

/* ------------------------------------------------ forms */
.form { display: grid; gap: 0.9rem; max-width: 460px; }
.form label { display: grid; gap: 0.3rem; font-family: var(--font-head); font-weight: 500; font-size: 0.9rem; color: var(--navy); }
.form input, .form select, .form textarea {
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--white);
  padding: 0.65rem 0.85rem;
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--teal); outline: none; }
.form .check { display: flex; gap: 0.55rem; align-items: flex-start; font-family: var(--font-body); font-weight: 400; font-size: 0.88rem; color: var(--ink); }
.form .check input { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; }
.form-note { font-size: 0.85rem; color: var(--muted); }
.form-msg { border-radius: 12px; padding: 0.7rem 0.9rem; font-size: 0.92rem; }
.form-msg--ok { background: rgba(143, 188, 173, 0.25); color: var(--teal-deep); }
.form-msg--err { background: rgba(119, 0, 97, 0.12); color: var(--plum); }

/* ------------------------------------------------ tables & session lists */
.sessions { display: grid; gap: 0.6rem; padding: 0; margin: 0; counter-reset: session; }
.sessions li { list-style: none; display: flex; gap: 0.9rem; align-items: baseline; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem 1.1rem; }
.sessions .n {
  flex: none; display: inline-grid; place-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--cream-soft); color: var(--teal-deep); font-family: var(--font-head); font-weight: 600; font-size: 0.95rem;
  align-self: center;
}
.sessions b { font-family: var(--font-head); font-weight: 600; color: var(--navy); display: block; }
.sessions span { font-size: 0.9rem; color: var(--muted); }

/* ------------------------------------------------ downloads */
.dl-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.pill { display: inline-block; font-family: var(--font-head); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--cream-soft); color: var(--teal-deep); }
.pill--plum { background: rgba(119, 0, 97, 0.12); color: var(--plum); }
/* Optional extras on the group form — present, asked, but never in the way. */
.group-extra { margin-top: 0.4rem; border-top: 1px solid var(--line); padding-top: 0.8rem; }
.group-extra > summary { cursor: pointer; font-family: var(--font-head); font-size: 0.9rem; font-weight: 600; color: var(--teal-deep); }
.group-extra > summary:hover { color: var(--plum); }
.group-extra[open] > summary { margin-bottom: 0.6rem; }
/* A pill that really is a control. Looks the same at rest — it always looked
   pressable; now it is — and answers the pointer. */
a.pill--link { text-decoration: none; border: 1px solid transparent; transition: border-color 0.15s, background 0.15s; }
a.pill--link:hover, a.pill--link:focus-visible { background: var(--white); border-color: var(--teal); color: var(--teal-deep); }

/* ------------------------------------------------ people */
.people { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 1.1rem; }
.person { flex: 0 1 230px; min-width: 0; text-align: center; }
.person summary { cursor: pointer; list-style: none; }
.person summary::-webkit-details-marker { display: none; }
.person .por { width: 112px; height: 112px; border-radius: 50%; margin: 0 auto 0.7rem; display: grid; place-content: center; background: var(--sage); color: var(--navy); font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; }
img.por { object-fit: cover; object-position: center top; }
.person:nth-child(4n+2) .por { background: var(--lavender); }
.person:nth-child(4n+3) .por { background: var(--mustard); }
.person:nth-child(4n) .por { background: var(--slate); color: #fff; }
.pn { font-family: var(--font-head); display: block; color: var(--navy); font-weight: 700; }
.pr { font-size: 0.85rem; color: var(--muted); display: block; }
.pl { font-size: 0.85rem; color: var(--muted); display: block; margin-top: 0.4rem; }
.pm { display: inline-block; font-family: var(--font-head); font-size: 0.8rem; font-weight: 600; color: var(--teal-deep); margin-top: 0.5rem; }
.pm::after { content: ' ▾'; display: inline-block; transition: transform 0.2s ease; }
details[open] .pm::after { transform: rotate(180deg); }
.pbio { text-align: left; font-size: 0.9rem; margin-top: 0.8rem; }
.pbio p { margin: 0 0 0.6rem; }
.pbio a { font-size: 0.85rem; }
details[open] .pbio { animation: pbio-in 0.25s ease; }
@keyframes pbio-in { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------ footer */
.site-foot { background: var(--navy); color: rgba(242, 244, 240, 0.85); margin-top: 3rem; }
.site-foot .cols { display: grid; gap: 1.6rem; padding: 2.2rem var(--pad) 1.2rem; max-width: 1060px; margin: 0 auto; }
@media (min-width: 720px) { .site-foot .cols { grid-template-columns: repeat(3, 1fr); } }
.site-foot h4 { color: var(--mustard); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.6rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin: 0.3rem 0; }
.site-foot a { color: inherit; text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.site-foot .legal { border-top: 1px solid rgba(255, 255, 255, 0.14); padding: 1rem var(--pad) 1.4rem; font-size: 0.8rem; color: rgba(242, 244, 240, 0.6); text-align: center; }
.site-foot .legal p { max-width: none; margin: 0.25rem 0; }

/* ------------------------------------------------ the gate */
.gate {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: var(--cream); padding: var(--pad);
}
.gate-card { max-width: 400px; width: 100%; text-align: center; }
.gate-card svg { width: 44px; height: 44px; margin-bottom: 0.8rem; }
.gate-card .script { font-size: 2.1rem; color: var(--teal-deep); line-height: 1.1; display: block; }
.gate-card h1 { font-size: 1.35rem; margin: 0.2rem 0 0.4rem; }
.gate-card p { font-size: 0.92rem; color: var(--muted); margin: 0 auto 1.2rem; }
.gate-card form { display: flex; gap: 0.5rem; }
.gate-card input {
  flex: 1; border: 1.5px solid var(--line); border-radius: 999px; background: var(--white);
  padding: 0.65rem 1.1rem; font-size: 1rem;
}
.gate-card input:focus { border-color: var(--teal); outline: none; }
.gate-err { color: var(--plum); font-size: 0.88rem; min-height: 1.4em; margin-top: 0.6rem; }

/* ------------------------------------------------ misc */
.groupcode { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 1.15em;
  letter-spacing: 0.06em; background: rgba(0, 136, 122, 0.12); color: var(--teal-deep);
  padding: 0.15em 0.45em; border-radius: 5px; white-space: nowrap; }

.notice { background: rgba(250, 184, 18, 0.18); border: 1px solid rgba(250, 184, 18, 0.5); border-radius: var(--radius); padding: 0.85rem 1.1rem; font-size: 0.92rem; max-width: var(--measure); }
.crumbs { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.6rem; }
.crumbs a { color: inherit; }
hr.leafline { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

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

/* ------------------------------------------------ collapsed header (<1100px)
   Below 1100px the nav links and "Sign in" fold behind the .nav-toggle button;
   the header row keeps brand + auth button + toggle. Everything lives in this
   base rule and one max-width block, so the ≥1100px header cannot change. */
.nav-toggle {
  display: none;
  background: none; border: 0; color: var(--navy);
  padding: 0.65rem; border-radius: 999px; line-height: 0;
}

@media (max-width: 1099.98px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; order: 2; flex: none; }
  .site-brand { min-width: 0; }
  .site-brand .t { min-width: 0; }
  /* Promote the auth slot's children to header flex items, in both auth
     states: the .btn stays in the top row, the .signin joins the menu panel. */
  .site-auth { display: contents; }
  /* margin-left:auto right-aligns the controls when a narrow phone wraps
     them onto their own row; in a single row it dissolves into the same gap
     the brand's margin-right:auto already owns. */
  .site-auth .btn { order: 1; flex: none; padding: 0.55rem 1.1rem; margin-left: auto; }
  .site-nav {
    display: none;
    order: 10; flex-basis: 100%;
    flex-direction: column; align-items: stretch; gap: 0.1rem;
    border-top: 1px solid var(--line); padding-top: 0.55rem; margin-top: 0.15rem;
  }
  .site-nav a { padding: 0.65rem 0.75rem; }
  .site-auth .signin,
  .site-auth .signout { display: none; order: 11; flex-basis: 100%; padding: 0.65rem 0.75rem; text-align: left; }
  .site-head[data-menu-open] .site-nav { display: flex; }
  .site-head[data-menu-open] .site-auth .signin,
  .site-head[data-menu-open] .site-auth .signout { display: block; }
  .site-head[data-menu-open] .site-nav,
  .site-head[data-menu-open] .site-auth .signin,
  .site-head[data-menu-open] .site-auth .signout { animation: menu-in 180ms ease-out; }
}

@keyframes menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------ editing page text (js/copy.js) */
.copybar { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  max-width: min(36rem, calc(100vw - 2rem)); padding: 0.6rem 0.8rem; background: var(--navy-deep); color: #F2F4F0;
  border-radius: var(--radius); box-shadow: var(--shadow); font-size: 0.85rem; }
.copybar-msg { flex: 1 1 12rem; }
.copybar-msg--err { color: var(--mustard); flex-basis: 100%; }
.copybar-btn { font: 600 0.82rem var(--font-head); padding: 0.45rem 0.9rem; border-radius: 999px; cursor: pointer;
  background: transparent; color: #F2F4F0; border: 1px solid rgba(242, 244, 240, 0.5); }
.copybar-btn--primary { background: var(--teal); border-color: var(--teal); }
.copybar-btn[disabled] { opacity: 0.45; cursor: default; }
[data-copy-editing] [data-copy] { outline: 2px dashed rgba(0, 136, 122, 0.55); outline-offset: 3px; border-radius: 3px; cursor: text; }
[data-copy-editing] [data-copy]:focus { outline: 2px solid var(--teal); background: rgba(250, 184, 18, 0.12); }