/* ==========================================================================
   Faith Works — design system (every page)
   Brand guidelines: Poppins (display) + Inter (body); Faith Pink #EFACBA,
   AI Yellow #FBC522, Works White #FAF8F4, Soft Charcoal #1A1A1A, and nothing
   else. Works White reading surface, charcoal text, one accent per section
   (pink for human/learning emphasis, yellow for AI and key actions). 8px spacing scale; controls
   ≥44px; 8px button radius; 10–14px card radius; 12-column grid (--grid, --col-gap); subtle borders.
   1. Tokens  2. Base  3. Layout + shared  4. Header, staging bar, footer
   5. Home: hero  6. Home: pathways  7. Home: examples  8. Home: journey
   9. Programs (home rows)  10. Business, gallery
   11. About, FAQ, starter kit block, CTA  12. Inner-page components
   13–14. (see 21)
   15. Forms  16. Starter kit funnel
   17. Legal, 404  18. Motion  19. Responsive  20. Reduced motion
   21. CMS page templates: program, event and resource pages, testimonial cards, fw-* blocks
   22. Refinements  23. For Professionals  24. Learn page
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
/* The About page keeps the earlier section sizes (every other page uses the tokens below) */
body[data-page="/about/"] { --fs-h2: clamp(34px, 4.2vw, 60px); --fs-lead: clamp(17px, 1.25vw, 19px); }
body[data-page="/about/"] .section-head > p { font-size: inherit; }
:root {
  /* Official palette only: Faith Pink, AI Yellow, Works White, Soft Charcoal. Every other
     value here is one of those four mixed with Works White or Charcoal (a tint, a translucent
     layer, a neutral for legibility), never a new hue. One accent per section; Pink and
     Yellow never lead the same section. */
  --pink: #EFACBA;          /* Faith Pink: marks, accents, solid blocks */
  --pink-tint: #F7E5E6;     /* Faith Pink at ~25% on Works White: section/card ground */
  --pink-light: var(--pink-tint);
  --yellow: #FBC522;        /* AI Yellow */
  --yellow-tint: var(--yellow);
  --yellow-pastel: #FAEBC0;  /* AI Yellow at ~25% on Works White */
  --ink: #1A1A1A;           /* Soft Charcoal */
  --ink-2: #262626;
  --ink-3: #333333;
  --paper: #FAF8F4;         /* Works White: the page foundation */
  --white: #FFFFFF;         /* raised cards on Works White, text on Charcoal */
  --stone: #E4E2DE;           /* Charcoal at ~10% on Works White */
  --stone-2: #F1EFEB;         /* Charcoal at ~4% on Works White */
  --muted: var(--ink);       /* secondary text stays full Charcoal: grey text read as low contrast */
  --muted-dark: var(--white); /* secondary text on Charcoal: full White */
  --line: #DFDDDA;
  --line-dark: rgb(255 255 255 / 0.16);
  --rose: #1A1A1A;           /* accent text: Charcoal (Faith Pink text on White fails contrast) */
  --rose-dot: #EFACBA;       /* decorative dots: Faith Pink */
  --focus: #1A1A1A;          /* focus ring: Charcoal, visible on White, Pink and Yellow */
  --error: #9B2245;
  --success: #1F6B3A;
  --motif-line: #E4E2DE;
  /* Glass: only for floating elements that sit over colour, never for reading surfaces.
     Depth is lighting, not hue: shadows are Soft Charcoal, glows are the section's accent. */
  --glass: rgb(250 248 244 / 0.66);
  --glass-edge: rgb(255 255 255 / 0.85);
  --glass-blur: blur(14px) saturate(1.3);
  --glass-shadow: 0 1px 0 rgb(255 255 255 / 0.6) inset, 0 20px 40px -18px rgb(26 26 26 / 0.28);

  --font: "Inter", Arial, sans-serif;           /* paragraphs, descriptions, interface copy */
  --font-display: "Poppins", Arial, sans-serif; /* headlines and prominent titles */
  --fs-label: 13px;
  --fs-small: 14px;
  --fs-body: 16px;
  --fs-lead: clamp(18px, 1.45vw, 21px);  /* section body copy: the "In their words" standfirst */
  /* Editorial scale: headlines lead the layout, body copy stays at a calm reading size */
  --fs-h3: clamp(20px, 1.7vw, 26px);
  --fs-h2: min(clamp(42px, 4.6vw, 72px), 10vw);  /* section headings: the "In their words" heading */
  --fs-h1: clamp(46px, 5.6vw, 82px);     /* home hero: centred inside the agent network */
  --fs-page-h1: clamp(42px, 5.6vw, 84px);
  --fs-display: clamp(46px, 6.6vw, 104px);  /* one statement headline per page at most */
  --lh-display: 0.96;
  --lh-head: 1.03;
  --measure: 62ch;                           /* longest comfortable line of body copy */

  /* Layout grid: 12 columns inside .wrap. Section heads, editorial splits and card rows all
     sit on these columns, so headings, copy, images and CTAs share the same edges. */
  --gutter: clamp(20px, 2.6vw, 44px);  /* the header's side padding, so page content shares its edges */
  --container: 100%;
  --col-gap: clamp(16px, 2.2vw, 32px);
  --grid: repeat(12, minmax(0, 1fr));
  --edge: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  --section: clamp(56px, 6.4vw, 96px);
  --head-gap: clamp(28px, 3.4vw, 48px);

  /* Corners stay quiet: controls 8px, cards 10–14px. Only the testimonial deck keeps its soft card. */
  --r-sm: 8px;
  --r: 10px;
  --r-lg: 14px;
  --header-h: 76px;
  --float: 0 18px 36px rgb(26 26 26 / 0.12);   /* only for things that truly float */

  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --dur-fast: 180ms;
  --dur: 420ms;
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
/* The page ground also sits on <main>: GHL paints its own white fixed layer (.bgCover.bg-fixed, z-index -1) over <body>, which would hide the Works White ground there. */
main { background: var(--paper); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; line-height: 1.65; }
/* Poppins for headlines and prominent titles (card titles, quotes, big numerals); Inter for the rest */
h1, h2, h3, h4, .h3, .route__title, .fit__name,
.business__ways b, .kitart__title, .kit-preview__title, .event__date b, .notfound__code,
blockquote { font-family: var(--font-display); }
blockquote cite { font-family: var(--font); font-style: normal; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: -0.045em; margin: 16px 0 0; }
h3, .h3 { line-height: 1.2; letter-spacing: -0.025em; }
/* Copy rhythm: paragraphs, lists and links never run into each other */
p + ul, p + ol, ul + p, ol + p { margin-top: 1.25em; }
li { line-height: 1.55; }
.h3 { font-size: var(--fs-h3); line-height: 1.25; margin: 0; }
small { font-size: inherit; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: var(--rose); outline-offset: 2px; }
main:focus { outline: none; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 40; background: var(--ink); color: var(--white); padding: 14px 18px; border-radius: var(--r-sm); }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.line { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.line > span { display: block; }
a.inline, .inline { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
a.inline:hover { color: var(--rose); }
code { font-size: 0.9em; }

/* Secondary text on Faith Pink and AI Yellow uses a deeper charcoal so it keeps AA contrast */
.band--pink, .phero--pink, .phero--yellow, .route--pink, .route--yellow, .route--stone, .agents, .voice, .proof, .founder, .quote--pink, .quote--yellow,
.scope--pink, .scope--yellow, .kit-hero, .thanks, .contact__form, .cta, .resource, .band-cta, .business,
.takeaway, .article__cta, .formats__item, .notice, .form__status--preview, .band--yellow { --muted: var(--ink); }

/* 3. Layout + shared ------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
[id] { scroll-margin-top: calc(var(--header-h, 72px) + 24px); }
.section--flush-top { padding-top: 0; }
/* A coloured page hero is its own boundary: content after it still needs a lead-in */
.phero + .section--flush-top { padding-top: clamp(40px, 4.4vw, 64px); }
.section--rule { border-top: 1px solid var(--line); }
.band--stone { background: var(--stone-2); }
.band--paper { background: var(--paper); }
.band--pink { background: var(--pink-tint); }
.band--yellow { background: var(--yellow-pastel); }

/* Pink & Yellow tech-textured gradient band (Sound familiar / challenges) ---- */
.band--gradient-textured {
  position: relative;
  overflow: hidden;
  background-color: var(--paper, #FAF8F4);
  background-image:
    /* Layer 1: Subtle CAD Tech Grid + Crosshairs (+) + Data Dots */
    url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 48 0 L 0 0 0 48' fill='none' stroke='rgb(26 26 26 / 0.04)' stroke-width='1'/%3E%3Cpath d='M -4 0 L 4 0 M 0 -4 L 0 4' fill='none' stroke='rgb(26 26 26 / 0.12)' stroke-width='1'/%3E%3Ccircle cx='24' cy='24' r='1.2' fill='rgb(26 26 26 / 0.07)'/%3E%3Ccircle cx='24' cy='0' r='0.8' fill='rgb(26 26 26 / 0.05)'/%3E%3Ccircle cx='0' cy='24' r='0.8' fill='rgb(26 26 26 / 0.05)'/%3E%3C/svg%3E"),
    /* Layer 2: Soft, diffused ambient glows of Faith Pink & AI Yellow */
    radial-gradient(circle at 10% 25%, rgb(239 172 186 / 0.28) 0%, transparent 55%),
    radial-gradient(circle at 90% 75%, rgb(251 197 34 / 0.22) 0%, transparent 60%),
    radial-gradient(circle at 80% 15%, rgb(251 197 34 / 0.14) 0%, transparent 50%),
    radial-gradient(circle at 18% 85%, rgb(239 172 186 / 0.18) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.85) 0%, transparent 72%),
    /* Layer 3: Soft, airy diagonal tint */
    linear-gradient(135deg, #FAF0F2 0%, #FAF8F4 50%, #FAF5E8 100%);
  border-block: 1px solid rgb(26 26 26 / 0.07);
}

/* Technical scanline raster overlay */
.band--gradient-textured::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(180deg, transparent 0 3px, rgb(26 26 26 / 0.02) 3px 4px);
  -webkit-mask: linear-gradient(180deg, #000 80%, transparent 100%);
  mask: linear-gradient(180deg, #000 80%, transparent 100%);
}

.band--gradient-textured .wrap {
  position: relative;
  z-index: 1;
}

/* Elevated frosted cards with technical glassmorphic edge */
.band--gradient-textured .pro-pain {
  background: rgb(255 255 255 / 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgb(255 255 255 / 0.9);
  box-shadow: none;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.band--gradient-textured .pro-pain:hover {
  transform: translateY(-3px);
  border-color: rgb(251 197 34 / 0.5);
}
.band--gradient-textured .pro-pain::before {
  background: linear-gradient(90deg, var(--pink), var(--yellow));
}
.section-head { display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap); row-gap: 16px; align-items: end; margin-bottom: var(--head-gap); }
.section-head > :first-child { grid-column: 1 / span 8; }
.section-head > :first-child:last-child { grid-column: 1 / -1; }
.section-head h2 { max-width: 22ch; }
.section-head > p { grid-column: 9 / -1; max-width: 40ch; margin: 0; font-size: var(--fs-lead); padding-bottom: 0.35em; color: var(--muted); }
.section-head h2:only-child { margin: 0; }

.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0; font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.4; }
/* Section labels are text-only editorial eyebrows: the phrase alone, set small, bold and tracked.
   No fill, no outline, no leading rule. Charcoal on light grounds, White on Charcoal. */
.eyebrow:not(.hero__eyebrow) { width: fit-content; max-width: 100%; color: var(--ink); font-size: 12px; letter-spacing: 0.16em; line-height: 1.3; }
.section--dark .eyebrow { color: var(--white); }
.dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--rose-dot); }
.small { font-size: var(--fs-small); color: var(--muted); line-height: 1.6; }
.intro { font-size: var(--fs-lead); color: var(--muted); max-width: 520px; }
.tag { display: inline-block; padding: 6px 12px; border: 1px solid rgb(255 255 255 / 0.25); border-radius: 999px; font-size: 13px; }
.tbc { color: var(--muted); font-style: italic; }

/* Buttons + links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 48px; padding: 12px 22px;
  border: 1.5px solid var(--ink); border-radius: var(--r-sm);
  background: var(--ink); color: var(--white);
  font-size: var(--fs-small); font-weight: 600; line-height: 1.3; text-align: center;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  touch-action: manipulation;
}
.btn:hover { transform: translateY(-2px); }
/* Hidden link text (.sr-only) before the arrow leaves a blank flex item that doubled the gap; the arrow hugs the label */
.btn:has(> .sr-only + .btn__arrow) { gap: 0; }
.btn > .sr-only + .btn__arrow { margin-left: 14px; }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn__arrow, .link-arrow, .route__arrow, .step__arrow { display: inline-block; transition: transform var(--dur) var(--ease-spring); }
.btn:hover .btn__arrow { transform: translate(3px, -3px); }
.btn:hover .btn__arrow--down { transform: translateY(3px); }
.btn--light { background: transparent; color: var(--ink); }
.btn--light:hover { background: var(--ink); color: var(--white); }
/* Secondary buttons carry no arrow-up-right; a download arrow still says what the click does */
.btn--light .btn__arrow:not(.btn__arrow--down):not(.btn__arrow--left) { display: none; }
.btn:hover .btn__arrow--left { transform: translateX(-3px); }
.btn--yellow { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.btn--yellow:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn--full { width: 100%; }
.text-link {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none;
  font-size: var(--fs-small); font-weight: 600; text-align: left;
}
.text-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1.5px; background: currentColor; transform-origin: right; transition: transform var(--dur) var(--ease-out); }
.text-link:hover::after { transform: scaleX(0); }
/* Underlined text links ("Join the waitlist", "Explore programs") carry no arrow-up-right */
.text-link .link-arrow { display: none; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 28px 0 20px; }
.actions--center { justify-content: center; }

/* Arrow icons: the arrow spans hold a text glyph for no-CSS fallback; it is drawn as an SVG icon */
.btn__arrow, .link-arrow, .route__arrow, .step__arrow, .icon-arrow {
  display: inline-block; flex: none; width: 1.05em; height: 1.05em; overflow: hidden; text-indent: 200%; white-space: nowrap; vertical-align: -0.15em;
  background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%2017%2017%207M8%207h9v9'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%2017%2017%207M8%207h9v9'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.btn__arrow--down { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%205v14M5%2012l7%207%207-7'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%205v14M5%2012l7%207%207-7'%2F%3E%3C%2Fsvg%3E"); }
.kit-preview__arrow { width: 0.8em; height: 0.8em; overflow: hidden; text-indent: 200%; white-space: nowrap; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%2017%2017%207M8%207h9v9'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%2017%2017%207M8%207h9v9'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.btn__arrow--left { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M19%2012H5M12%2019l-7-7%207-7'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M19%2012H5M12%2019l-7-7%207-7'%2F%3E%3C%2Fsvg%3E"); }
.btn__arrow--up { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2019V5M5%2012l7-7%207%207'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2019V5M5%2012l7-7%207%207'%2F%3E%3C%2Fsvg%3E"); }

.tool { display: inline-block; width: 22px; height: 22px; object-fit: contain; }
.pipe__icon--ai .tool { filter: invert(1); }

/* Badges (program/event status) and chips */
.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.3; max-width: 100%; background: var(--white); }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge--open { background: var(--yellow); }
.badge--waitlist { background: var(--white); color: var(--rose); }
.badge--soldout { background: var(--ink); color: var(--white); }
.badge--tba { background: var(--stone); color: var(--ink); }
.badge--planned { background: var(--stone-2); color: var(--muted); }
.badge--past { background: var(--stone); color: var(--muted); }
.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--stone); font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip--low { background: var(--yellow-tint); }
.chip--mid { background: var(--pink-tint); }
.chip--pick { background: var(--ink); color: var(--yellow); }
.chip--done { background: var(--ink); color: var(--white); }
.chip--draft { background: var(--yellow); }

/* Lists with drawn ticks */
.ticks { list-style: none; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 18px; height: 18px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 4.9 8.7 9.5 3.6' fill='none' stroke='%23FFCB2A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ticks--lg li { font-size: 17px; padding-block: 4px; }
.crosses { list-style: none; display: grid; gap: 10px; }
.crosses li { position: relative; padding-left: 30px; color: var(--muted); }
.crosses li::before { content: "×"; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 0.25em; border-radius: 50%; background: var(--stone); color: var(--ink); font-size: 14px; line-height: 1; }
.numbered { list-style: none; counter-reset: n; display: grid; gap: 0; }
.numbered li { counter-increment: n; display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgb(26 26 26 / 0.12); font-size: 17px; }
.numbered li::before { content: counter(n); flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--yellow); font-size: 13px; font-weight: 700; }

/* Notices (draft, staging, empty) */
.notice { padding: 14px 16px; border-radius: var(--r-sm); background: var(--pink-tint); font-size: var(--fs-small); line-height: 1.6; }
.notice--draft { background: var(--white); border-left: 6px solid var(--yellow); box-shadow: inset 0 0 0 1.5px var(--ink); }
/* Empty listings: one panel everywhere (programs, resources, events), a short sentence and one next step */
.empty { display: grid; justify-items: start; gap: 16px; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-lg); background: var(--stone-2); box-shadow: inset 0 0 0 1px var(--line); }
.empty p { margin: 0; max-width: 62ch; color: var(--muted); }
.empty strong { display: block; margin-bottom: 4px; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); }

/* 4. Header, staging bar, footer ------------------------------------------- */
.staging { background: var(--ink); color: var(--white); font-size: 13px; }
.staging__inner { display: flex; align-items: center; gap: 10px; min-height: 36px; padding-block: 6px; }
.staging .dot { background: var(--yellow); }
.site-header {
  /* a full-width white bar on every page, no rule below; the home hero card starts at its bottom edge */
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--header-h); padding-inline: var(--gutter);
  background: var(--white);
}
.site-header--campaign { position: static; }
.logo { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; opacity: 1; }
.logo img { display: block; width: 168px; height: auto; object-fit: contain; }
.site-nav { display: flex; align-items: center; gap: 28px; font-family: var(--font); font-size: 15px; font-weight: 500; }
.site-nav > a:not(.btn) { position: relative; padding-block: 10px; }
.site-nav > a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--pink); transform: scaleX(0); transform-origin: right; transition: transform var(--dur) var(--ease-out); }
.site-nav > a:not(.btn):hover::after, .site-nav > a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.site-nav > a[aria-current="page"] { color: var(--rose); }
.site-nav .btn { min-height: 48px; padding: 6px 20px 6px 22px; gap: 10px; font-size: var(--fs-small); }
.site-nav .btn .btn__arrow { width: 18px; height: 18px; background-size: 16px; }
.menu { display: none; position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; }
.menu__bars, .menu__bars::before, .menu__bars::after { position: absolute; left: 11px; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--dur) var(--ease-spring), background-color var(--dur-fast); }
.menu__bars { top: 21px; }
.menu__bars::before, .menu__bars::after { content: ""; left: 0; }
.menu__bars::before { top: -7px; }
.menu__bars::after { top: 7px; }
.menu[aria-expanded="true"] .menu__bars { background: transparent; }
.menu[aria-expanded="true"] .menu__bars::before { transform: translateY(7px) rotate(45deg); }
.menu[aria-expanded="true"] .menu__bars::after { transform: translateY(-7px) rotate(-45deg); }

.site-footer { padding: 56px 0 24px; background: var(--ink); color: var(--white); }
.site-footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 48px; padding-bottom: 40px; }
.site-footer__brand p { max-width: 320px; margin: 14px 0 0; font-size: var(--fs-small); color: var(--muted-dark); }
.site-footer__brand .site-footer__tagline { margin-top: 6px; color: var(--yellow); font-weight: 600; }
.site-footer__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; font-size: var(--fs-small); }
/* Community and Contact: the footer's two most visible links */
.site-footer__brand .site-footer__reach { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; max-width: none; }
.site-footer__cta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 1.5px solid rgb(255 255 255 / 0.55); border-radius: var(--r-sm); color: var(--white); font-size: 15px; font-weight: 600; white-space: nowrap; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.site-footer__cta:hover { border-color: var(--white); background: rgb(255 255 255 / 0.08); }
.site-footer__cta--pink { border-color: var(--pink); background: var(--pink); color: var(--ink); }
.site-footer__cta--pink:hover { border-color: var(--white); background: var(--white); color: var(--ink); }
.site-footer__cta:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.site-footer__links div { display: flex; flex-direction: column; align-items: start; }
.site-footer__links h2 { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted-dark); }
.site-footer__links a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--white); transition: color var(--dur-fast); }
.site-footer__links a:hover, .site-footer__legal a:hover { color: var(--pink); }
.site-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; padding-top: 20px; border-top: 1px solid var(--line-dark); font-size: 13px; color: var(--white); }
.site-footer__legal { display: flex; gap: 20px; }
.site-footer__legal a { display: inline-flex; align-items: center; min-height: 32px; }
.site-footer--campaign { padding: 0 0 8px; }

/* 5. Home: hero ------------------------------------------------------------ */
/* Brand guidelines p.25 (desktop hero mockup). Centred copy on the G1 feather (p.18): Faith Pink pools
   in the top-right corner and runs down the right edge, a Pink 60 band feathers along the top, AI
   Yellow glows softly top-left, and the lower half stays clear Works White for the copy and node web.
   Pink and Yellow meet only in that ground; the one gradient element is the eyebrow ring (p.11). */
.hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(36px, 4.4vw, 64px) clamp(16px, 2.5vw, 40px); background: var(--paper); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    /* a soft Works White clearing behind the headline, so the type has room to breathe */
    radial-gradient(52% 26% at 50% 24%, rgb(250 248 244 / 0.92) 35%, rgb(250 248 244 / 0) 100%),
    radial-gradient(60% 80% at 104% -6%, rgb(239 172 186 / 0.66), rgb(239 172 186 / 0.5) 22%, rgb(239 172 186 / 0.18) 56%, rgb(239 172 186 / 0) 100%),
    radial-gradient(72% 36% at 64% -4%, rgb(239 172 186 / 0.4), rgb(239 172 186 / 0) 100%),
    radial-gradient(44% 52% at -4% -6%, rgb(251 197 34 / 0.4), rgb(251 197 34 / 0) 85%);
}
/* on the home page the hero is an inset card with rounded corners; its top edge meets the header's bottom edge */
body[data-page="/"] .hero { margin: 0 clamp(8px, 1vw, 14px); border-radius: 20px; }
/* home: the ground around the hero card starts white under the header and settles into Works White as it goes down */
body[data-page="/"] { background: linear-gradient(var(--white), var(--paper)) 0 0 / 100% 100vh no-repeat, var(--paper); }
body[data-page="/"] main { background: linear-gradient(var(--white), var(--paper)) 0 0 / 100% 100vh no-repeat, var(--paper); }
.hero__stage { position: relative; z-index: 1; display: grid; justify-items: center; }
.hero__copy { max-width: 1120px; text-align: center; }

/* eyebrow: a bracketed pill with the Pink-to-Yellow ring; the brackets echo the mark */
.hero__eyebrow {
  display: inline-flex; padding: 8px 20px; border: 1px solid transparent; border-radius: 999px;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(100deg, var(--pink), var(--yellow)) border-box;
  font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.4;
}
.hero__eyebrow .dot { display: none; }

/* display type: 600, tight, two lines; one idea highlighted with the yellow block */
.hero h1 { font-size: clamp(40px, 4.7vw, 70px); font-weight: 700; line-height: 1.04; letter-spacing: -0.045em; margin: 20px 0 18px; hyphens: manual; }
/* the reveal wrappers clip (overflow: hidden), so the hero's lines get room above for the highlight */
.hero h1 .line { padding-top: 0.14em; margin-top: -0.14em; }
.hero h1 em { font-style: normal; position: relative; z-index: 0; margin-left: 0.12em; white-space: nowrap; }
.hero h1 em::after { content: ""; position: absolute; z-index: -1; inset: 0.08em -0.14em 0.02em -0.16em; border-radius: 0.16em; background: var(--yellow); transform-origin: left; }
.hero__intro { margin-inline: auto; max-width: 700px; color: var(--muted); }
/* the motto sits under the node web; js/motion.js §5i fills its letters in as the page scrolls */
.hero__small { margin: 8px 0 0; font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 38px); font-weight: 700; line-height: 1.1; letter-spacing: -0.04em; text-align: center; color: var(--ink); }

/* buttons: --r-sm corners, never pills. Primary: flat AI Yellow with a bare Charcoal arrow.
   Secondary: a flat Charcoal outline, no arrow. */
/* the node web rises beside the CTAs on wide screens; the buttons stay on top of its light column */
.hero__actions { position: relative; z-index: 1; justify-content: center; gap: 14px; margin: 28px 0 36px; }
.hero__actions .btn { min-height: 56px; padding: 8px 30px; border: 0; border-radius: var(--r-sm); font-size: var(--fs-body); font-weight: 500; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
/* .btn--sheen: the primary CTA, also used in the header. Flat: no gradient, highlight or shadow. */
.btn--sheen { border: 0; border-radius: var(--r-sm); transition: transform var(--dur-fast) var(--ease-out);
  background: var(--yellow); color: var(--ink); box-shadow: none;
}
.hero__actions .btn--sheen { padding: 8px 26px 8px 28px; gap: 12px; }
.btn--sheen:hover { background: var(--yellow); box-shadow: none; }
.btn--sheen .btn__arrow {
  width: 20px; height: 20px; -webkit-mask: none; mask: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%231A1A1A'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%2012h14M13%206l6%206-6%206'%2F%3E%3C%2Fsvg%3E") center / 18px no-repeat;
}
.btn--sheen:hover .btn__arrow { transform: translateX(2px); }
.hero__actions .btn--light { border: 1.5px solid var(--ink); background: transparent; color: var(--ink); }
.hero__actions .btn--light:hover { background: var(--ink); color: var(--white); }

/* Node web (p.21), laid out across the full width of the hero: lines come in from the left edge,
   pass through the AI tools on three branches (the outer two angle in), merge at a junction and enter
   the Faith Works hub; from a second junction on the right a spine fans out with rounded elbows, through
   the everyday work apps, to the right edge. js/main.js §10 places the nodes and draws the lines (one
   SVG across the hero) from one set of branch shapes; each line has its own weight and brand colour
   and carries a travelling signal under .motion. The lines feather out at the very edge of the page.
   The hub keeps the mockup's glassy outline; the web rests on a dot field (p.17: node webs only). */
.hweb {
  --dot: 52px; --hub: 132px;
  position: relative; isolation: isolate; justify-self: start; width: 100vw; margin-inline: calc(50% - 50vw); height: clamp(300px, 30vw, 440px);
  margin-top: clamp(-32px, -2vw, 0px); user-select: none;
}
.hweb::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(rgb(26 26 26 / 0.13) 1px, transparent 1.5px) 0 0 / 22px 22px;
  -webkit-mask: radial-gradient(ellipse 34% 50% at 50% 50%, #000 25%, transparent 80%); mask: radial-gradient(ellipse 34% 50% at 50% 50%, #000 25%, transparent 80%);
}
.hero__wires {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.hweb__wire, .hweb__pulse { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hweb__pulse { visibility: hidden; }
.hweb__junction { stroke: var(--white); stroke-width: 3; }
.hweb__node { position: absolute; z-index: 1; left: var(--x); top: var(--y); translate: -50% -50%; }
/* each node is framed like the hub: a white ring, a thin line in its wire's colour and a soft glow
   (--glow, --edge-a and --glow-a are set by js/main.js §10; a neutral hairline without JS) */
.hweb__dot { --glow: 26 26 26; --glow-a: 0; --edge-a: 0.08; flex: none; display: grid; place-items: center; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1px rgb(26 26 26 / 0.07), 0 0 0 6px rgb(255 255 255 / 0.72), 0 0 0 7px rgb(var(--glow) / var(--edge-a)), 0 0 14px 6px rgb(var(--glow) / var(--glow-a)), 0 14px 26px -16px rgb(26 26 26 / 0.3); }
.hweb__dot img { width: 44%; height: 44%; object-fit: contain; }
/* the hub: a rounded box, never a circle, in a glassy outline with a Pink 55% edge */
.hweb__hub {
  display: grid; place-items: center; width: var(--hub); height: var(--hub); position: absolute; z-index: 1; left: 50%; top: 50%; translate: -50% -50%; border-radius: 36px; background: var(--white);
  box-shadow: 0 0 0 10px rgb(255 255 255 / 0.72), 0 0 0 11px rgb(239 172 186 / 0.6), 0 0 22px 10px rgb(239 172 186 / 0.22), 0 22px 44px -22px rgb(26 26 26 / 0.3);
}
.hweb__hub img { width: 54%; height: auto; }
/* the hub as a small chat, in the hub's glassy outline: your message in a Charcoal bubble, the reply
   from the Faith Works mark in a Pink 24 bubble, and an input with a Yellow send button. On phones it
   shrinks to the mark alone. */
.hweb__hub.hchat {
  --chat-w: clamp(270px, 26vw, 360px);
  width: var(--chat-w); height: auto; display: grid; place-items: initial; gap: 12px; padding: 18px; border-radius: 28px;
  background: linear-gradient(180deg, var(--white), var(--paper)); font-family: var(--font-display); font-size: 13px; line-height: 1.4; text-align: left;
}
.hchat__you { justify-self: end; max-width: 84%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--ink); color: var(--white); font-weight: 500; }
.hchat__ai { display: flex; align-items: flex-end; gap: 10px; }
.hchat__avatar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 30%; background: var(--white); box-shadow: 0 0 0 1px rgb(239 172 186 / 0.6), 0 6px 14px -8px rgb(26 26 26 / 0.35); }
.hweb__hub .hchat__avatar img { width: 66%; }
.hchat__bubble { max-width: 84%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--pink-tint); color: var(--ink); }
.hchat__input { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; padding: 6px 6px 6px 14px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px rgb(26 26 26 / 0.08); color: rgb(26 26 26 / 0.5); }
.hchat__send { flex: none; width: 30px; height: 30px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%231A1A1A'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2019V5M5%2012l7-7%207%207'%2F%3E%3C%2Fsvg%3E") center / 14px no-repeat, var(--yellow); }
@media (max-width: 1100px) {
  .hweb { --dot: 46px; }
  .hweb__hub.hchat { --chat-w: 240px; gap: 10px; padding: 14px; font-size: 12px; }
}

.strip { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px var(--edge); border-block: 1px solid var(--line); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.strip__label { margin: 0; color: var(--muted); }
.strip__list { display: contents; list-style: none; }

/* 6. Home: pathways -------------------------------------------------------- */
.routes { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* Each card is its own column (label, icon, title, text, CTA) at one fixed height, so the text opening on
   hover takes room from around the icon and never changes the card or the page height */
.route { display: flex; }
.route--stone { --route-bg: var(--white); --route-edge: inset 0 0 0 1px var(--line);--icon-bg: linear-gradient(160deg, var(--pink-tint), rgb(247 229 230 / 0.55)); }
.route--pink { --route-bg: var(--pink); --icon-bg: linear-gradient(160deg, rgb(255 255 255 / 0.62), rgb(255 255 255 / 0.3)); }
.route--yellow { --route-bg: var(--yellow); --icon-bg: linear-gradient(160deg, rgb(255 255 255 / 0.66), rgb(255 255 255 / 0.32)); }
.route__link { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; width: 100%; min-height: clamp(440px, 33vw, 480px); padding: 28px 28px 32px; border-radius: var(--r-lg); background: var(--route-bg); box-shadow: var(--route-edge, none); transition: transform var(--dur) var(--ease-out); }
.route__link:hover { transform: translateY(-4px); }
.route__num { position: absolute; top: 28px; right: 28px; font-size: 14px; font-weight: 600; color: var(--muted); }
.route__icon { flex: none; align-self: flex-start; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 22px; background: var(--icon-bg); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), inset 0 0 0 1px rgb(26 26 26 / 0.06), 0 8px 18px -12px rgb(26 26 26 / 0.35); transition: transform var(--dur) var(--ease-spring); }
.route__link:hover .route__icon { transform: scale(1.05); }
.route__icon svg { width: 46px; height: 46px; overflow: visible; }
.route__line, .route__ring { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.route__node, .route__head, .route__needle { fill: var(--white); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.route__node--lead, .route__head--lead { fill: var(--ink); }
.route__needle--lead { fill: var(--pink); }
.route__title { margin: auto 0 0; padding-top: 32px; font-size: clamp(26px, 2.3vw, 34px); font-weight: 600; line-height: 1.05; letter-spacing: -0.045em; }
/* Laid out like the step cards (.journey-strip, .pp-gain): icon top left, label top right, title at the foot.
   The body and the button reveal on hover or keyboard focus; the card keeps its height. Touch and
   narrow screens always show them. */
.route__desc { display: grid; grid-template-rows: 0fr; max-width: 34ch; color: var(--muted); line-height: 1.55; opacity: 0; transform: translateY(6px); transition: grid-template-rows 360ms var(--ease-out), opacity 360ms var(--ease-out), transform 360ms var(--ease-out); }
.route__desc > span { overflow: hidden; }
.route__desc > span::before { content: ""; display: block; height: 10px; }
.route__link:hover .route__desc, .route__link:focus-visible .route__desc { grid-template-rows: 1fr; opacity: 1; transform: none; }
.route__cta { flex: none; display: flex; max-height: 0; margin-top: 0; overflow: hidden; justify-content: space-between; align-items: center; gap: 12px; padding-top: 0; border-top: 1px solid transparent; font-size: 14px; font-weight: 600; opacity: 0; transform: translateY(6px); transition: max-height 360ms var(--ease-out), margin-top 360ms var(--ease-out), padding-top 360ms var(--ease-out), border-color 360ms var(--ease-out), opacity 360ms var(--ease-out), transform 360ms var(--ease-out); }
.route__link:hover .route__cta, .route__link:focus-visible .route__cta { max-height: 64px; margin-top: 20px; padding-top: 14px; border-top-color: rgb(26 26 26 / 0.14); opacity: 1; transform: none; }
@media (hover: none) {
  .route__desc { grid-template-rows: 1fr; opacity: 1; transform: none; }
  .route__cta { max-height: none; margin-top: 20px; padding-top: 14px; border-top-color: rgb(26 26 26 / 0.14); opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .route__desc, .route__cta { transition: none; } }
.route__arrow { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--ink); border-radius: 50%; }

/* 7. Home: make it concrete ------------------------------------------------ */
/* One strip of three tasks, each on a filled icon tile, above three cards. Each card is a brand field panel (p.19: field and glassy content) with its step and copy set below. Fields rotate Rose, Sun, Dawn. */
#examples .section-head h2 { font-size: var(--fs-h2); }
.flow__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: clamp(14px, 1.4vw, 20px); border-radius: var(--r); overflow: hidden; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.flow__tabs button { position: relative; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 18px; border: 0; background: none; text-align: left; font-size: 16px; font-weight: 600; transition: color var(--dur-fast); }
.flow__tabs button + button { box-shadow: inset 1px 0 0 var(--line); }
.flow__tabs button::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform 420ms var(--ease-expo); }
.flow__tabs button > * { position: relative; z-index: 1; }
.flow__tabs button:hover::before { transform: scaleY(0.07); }
.flow__tabs button[aria-selected="true"] { color: var(--white); background: var(--ink); }
.flow__tabs button[aria-selected="true"]::before { transform: scaleY(1); }
.flow__tabs button:focus-visible { outline-offset: -5px; }
.flow__tabs button[aria-selected="true"]:focus-visible { outline-color: var(--yellow); }
/* each task's icon sits on its own filled tile: Faith Pink, AI Yellow, Charcoal */
/* line icons as on Learn's .promise__icon, on tiles alternating Faith Pink and AI Yellow */
.flow__tab-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--pink); }
.flow__tabs button:nth-child(even) .flow__tab-icon { background: var(--yellow); }
.flow__tab-icon svg { width: 25px; height: 25px; overflow: visible; }
.flow__tab-icon :is(.route__line, .route__node, .route__head) { stroke-width: 3.1; }

.flow__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); transition: opacity 200ms var(--ease-out); }
.flow__cards.is-swapping { opacity: 0; }
.fcard { display: flex; flex-direction: column; min-width: 0; }
/* Layer 1, the field: one of three painted grounds, built only from Faith Pink, AI Yellow and White */
.fcard__art { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; height: clamp(236px, 18vw, 264px); padding: 28px 24px; border-radius: var(--r-lg); background: var(--field); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.5); }
.fcard--task { --field: radial-gradient(85% 110% at 0% 0%, rgb(239 172 186 / 0.5), transparent 78%), radial-gradient(80% 90% at 100% 100%, rgb(251 197 34 / 0.34), transparent 80%), linear-gradient(135deg, #F9E2E6, #FCF1EC 55%, #FDF1D4); --tile: var(--pink); }
.fcard--ai { --field: radial-gradient(90% 100% at 85% 0%, rgb(251 197 34 / 0.42), transparent 78%), radial-gradient(80% 90% at 0% 100%, rgb(239 172 186 / 0.45), transparent 78%), linear-gradient(160deg, #FDF4DC, #FCF7F2 60%, #FAE7EA); --tile: var(--yellow); }
.fcard--review { --field: radial-gradient(70% 90% at 0% 35%, rgb(239 172 186 / 0.4), transparent 78%), radial-gradient(70% 80% at 85% 100%, rgb(251 197 34 / 0.28), transparent 78%), linear-gradient(180deg, #FFFFFF, #FCF6F3); --tile: var(--pink); }
.fcard__body { padding: 20px 2px 0; }
.fcard__step { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.02em; }
.fcard__icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--tile); color: var(--ink); box-shadow: 0 0 0 3px rgb(255 255 255 / 0.7); }
.fcard__icon svg { width: 20px; height: 20px; overflow: visible; }
.fcard__icon :is(.route__line, .route__node, .route__head) { stroke-width: 3.6; }
.fcard h3 { margin-bottom: 8px; font-family: var(--font-display); font-size: clamp(19px, 1.5vw, 22px); line-height: 1.25; letter-spacing: -0.02em; }
.fcard__body > p:last-child { max-width: 40ch; margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* Card 1: the inputs as floating pills, gently staggered */
.fpills { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.fpills li { padding: 11px 20px; border-radius: 999px; background: var(--white); font-size: 14px; font-weight: 600; white-space: nowrap; box-shadow: 0 0 0 6px rgb(255 255 255 / 0.42), 0 14px 28px -16px rgb(26 26 26 / 0.35); }
.fpills li:nth-child(3n+1) { translate: -22px 0; }
.fpills li:nth-child(3n+2) { translate: 18px 0; }
.fpills li:nth-child(3n) { translate: -6px 0; }

/* Card 2: a Charcoal drafting panel with the example tools tucked under it */
.fdraft { position: relative; width: min(100%, 236px); padding: 16px 18px 40px; border-radius: 14px; background: var(--ink); color: var(--white); box-shadow: 0 0 0 7px rgb(255 255 255 / 0.42), 0 22px 40px -20px rgb(26 26 26 / 0.55); }
.fdraft__top { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12px; font-weight: 600; color: var(--yellow); }
.fdraft__top svg { width: 14px; height: 14px; fill: var(--yellow); }
.fdraft__label { margin: 0 0 12px; font-family: var(--font-display); font-size: 16px; font-weight: 600; line-height: 1.2; }
.fdraft__bar { display: block; height: 4px; margin-bottom: 14px; border-radius: 4px; background: var(--ink-3); overflow: hidden; }
.fdraft__bar span { display: block; width: 72%; height: 100%; border-radius: inherit; background: var(--yellow); transform-origin: left; }
.fdraft__line { display: block; height: 6px; margin-top: 8px; border-radius: 6px; background: rgb(255 255 255 / 0.16); }
.fdraft__line--short { width: 62%; }
.ftools { position: relative; display: flex; gap: 10px; margin: -25px 0 0; padding: 0; list-style: none; }
.ftools li { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 12px; background: var(--white); box-shadow: 0 0 0 1px rgb(26 26 26 / 0.06), 0 12px 22px -12px rgb(26 26 26 / 0.35); }
.ftools img { width: 26px; height: 26px; }

/* Card 3: the reviewed result, with a Faith Pink approval seal */
.fout { position: relative; width: min(100%, 268px); padding: 16px 18px 8px; border-radius: 12px; background: var(--white); box-shadow: 0 0 0 7px rgb(255 255 255 / 0.42), 0 18px 34px -18px rgb(26 26 26 / 0.3); }
.fout__head { margin: 0 0 6px; padding-right: 40px; font-size: 14px; font-weight: 700; }
.fout__rows { list-style: none; margin: 0; padding: 0; }
.fout__rows li { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 13px; font-weight: 500; }
.fout__rows li + li { border-top: 1px solid var(--line); }
.fout__rows li::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 8.3 7 10.6l4.4-5' fill='none' stroke='%23FFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.fout__seal { position: absolute; top: -16px; right: -14px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 5px rgb(255 255 255 / 0.85), 0 14px 24px -12px rgb(26 26 26 / 0.4); }
.fout__seal svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.flow__foot { display: flex; justify-content: flex-end; margin: 18px 0 0; }

/* 8. Home: journey (dark) -------------------------------------------------- */
/* Charcoal sections carry a soft AI Yellow light and a faint white one, so the dark reads as depth, not a flat slab */
.section--dark { background: radial-gradient(46% 62% at 94% 6%, rgb(251 197 34 / 0.13), transparent 72%), radial-gradient(40% 58% at 2% 98%, rgb(250 248 244 / 0.06), transparent 72%), var(--ink); color: var(--white); }
.section--dark .section-head > p { color: var(--muted-dark); }
.journey { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.steps { display: flex; flex-direction: column; margin-top: 28px; }
.step { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line-dark); background: none; color: var(--white); font-size: 19px; font-weight: 500; text-align: left; transition: color var(--dur-fast); }
.step:first-child { border-top: 1px solid var(--line-dark); }
.step::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease-expo); }
.step:hover { color: var(--white); }
.step:hover .step__arrow { transform: translate(3px, -3px); }
.step__num { margin-right: 22px; font-size: 13px; color: var(--pink); }
.step[aria-selected="true"] { color: var(--yellow); }
.step[aria-selected="true"]::after { transform: scaleX(1); }
.step[aria-selected="true"] .step__arrow { transform: rotate(45deg); }
.scene__art { position: relative; min-height: 380px; padding: 28px; overflow: hidden; background: linear-gradient(160deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.025)); border: 1px solid rgb(255 255 255 / 0.1); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 40px 80px -40px rgb(10 10 10 / 0.6); border-radius: var(--r-lg); display: grid; place-items: center; }
.scene__copy { min-height: 150px; padding-top: 22px; }
.scene__copy h3 { margin-bottom: 8px; font-size: clamp(21px, 2vw, 25px); line-height: 1.3; }
.scene__copy p { max-width: 520px; color: var(--muted-dark); }
.scene[hidden] { display: none; }
/* Scroll-driven journey (main.js adds .is-pinned): the section grows tall and the journey stays pinned
   while scrolling walks through the five stages; small or short screens keep the plain tabs */
@media (min-width: 901px) and (min-height: 700px) {
  #journey.is-pinned { --pin-step: 60vh; height: calc(100vh + 4 * var(--pin-step)); padding-block: 0; }
  #journey.is-pinned .journey { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); align-content: center; }
}

/* Home journey on Works White, like the sections around it. Each scene is a brand field panel (p.19), like the
   "make it concrete" cards: a clean field (Rose, Sun, Dawn) with glassy-outline content, no texture.
   Scoped to #journey (stage rows to #journey.section--field): the home redesign reuses these scene classes on Charcoal. */
.section--field { background: var(--paper); color: var(--ink); }
/* the stages float on Works White as separate frosted rows: inactive rows are a light glass with softened text,
   the selected row turns solid Charcoal, flat. Stage icon tiles alternate Faith Pink and AI Yellow fills */
#journey.section--field .steps { gap: 10px; margin-top: 32px; }
#journey.section--field .step { min-height: 64px; padding: 12px 20px 12px 14px; border: 1px solid rgb(26 26 26 / 0.07); border-radius: var(--r-lg); background: rgb(255 255 255 / 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 1px 2px rgb(26 26 26 / 0.03); color: rgb(26 26 26 / 0.72); font-size: 21px; font-weight: 600; letter-spacing: -0.01em; transition: color var(--dur-fast), background-color var(--dur), border-color var(--dur), box-shadow var(--dur); }
#journey.section--field .step:first-child { border-top: 1px solid rgb(26 26 26 / 0.07); }
#journey.section--field .step::after { left: 0; right: auto; top: 14px; bottom: 14px; width: 3px; height: auto; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--pink), var(--yellow)); transform: scaleY(0); transform-origin: center; }
#journey.section--field .step:hover { color: var(--ink); background: rgb(255 255 255 / 0.78); border-color: rgb(26 26 26 / 0.12); }
/* the selected row turns Charcoal, like the selected tab in "One real task" (.flow__tabs) */
#journey.section--field .step[aria-selected="true"] { color: var(--white); background: var(--ink); border-color: var(--ink); box-shadow: none; }
#journey.section--field .step__name { display: inline-flex; align-items: center; }
/* the Learn AI stage icons (.journey-strip__icon set) on square tiles */
#journey.section--field .step__num { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; margin-right: 16px; border-radius: 10px; background: var(--pink); color: var(--ink); opacity: 0.8; transition: box-shadow var(--dur-fast), opacity var(--dur-fast); }
#journey.section--field .step:nth-child(even) .step__num { background: var(--yellow); }
#journey.section--field .step:hover .step__num, #journey.section--field .step[aria-selected="true"] .step__num { opacity: 1; }
#journey.section--field .step__num svg { width: 27px; height: 27px; overflow: visible; }
#journey.section--field .step__num :is(.route__line, .route__ring, .route__node, .route__head, .journey-strip__tick) { stroke-width: 2.8; }
#journey.section--field .step__arrow { color: rgb(26 26 26 / 0.45); transition: transform var(--dur) var(--ease-spring), color var(--dur-fast); }
#journey.section--field .step:hover .step__arrow { color: var(--ink); }
#journey.section--field .step[aria-selected="true"] .step__arrow { color: var(--white); }
#journey.section--field .step:focus-visible { outline-offset: 3px; }
/* narrow screens: main.js moves the scene right under the open tab (accordion) */
#journey.section--field .steps > .scenes { margin: 4px 0 14px; }
#journey .scene--learn, #journey .scene--implement { --field: radial-gradient(85% 110% at 0% 0%, rgb(239 172 186 / 0.5), transparent 78%), radial-gradient(80% 90% at 100% 100%, rgb(251 197 34 / 0.34), transparent 80%), linear-gradient(135deg, #F9E2E6, #FCF1EC 55%, #FDF1D4); }
#journey .scene--apply, #journey .scene--improve { --field: radial-gradient(90% 100% at 85% 0%, rgb(251 197 34 / 0.42), transparent 78%), radial-gradient(80% 90% at 0% 100%, rgb(239 172 186 / 0.45), transparent 78%), linear-gradient(160deg, #FDF4DC, #FCF7F2 60%, #FAE7EA); }
#journey .scene--build { --field: radial-gradient(70% 90% at 0% 35%, rgb(239 172 186 / 0.4), transparent 78%), radial-gradient(70% 80% at 85% 100%, rgb(251 197 34 / 0.28), transparent 78%), linear-gradient(180deg, #FFFFFF, #FCF6F3); }
#journey .scene__art {
  border: 0; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.5); background: var(--field);
  --frame: 0 0 0 7px rgb(255 255 255 / 0.42), 0 18px 34px -18px rgb(26 26 26 / 0.3);
}
/* content: white cards in a 7px glassy White frame. Lines follow the light connector language: 1px translucent
   Charcoal hairlines that end in small Faith Pink nodes, never solid Charcoal outlines or cards. */
#journey .scene__art { --hair: rgb(26 26 26 / 0.22); --node: radial-gradient(circle, var(--rose-dot) 2.5px, rgb(255 255 255 / 0.9) 3px 4px, transparent 4.5px); }
#journey .learn { gap: 22px 26px; }
#journey .learn__topics span { background: var(--white); color: var(--ink); box-shadow: 0 0 0 4px rgb(255 255 255 / 0.42); }
#journey .learn__topics .is-on { background: var(--yellow); color: var(--ink); }
#journey .learn__notes { padding: 14px; border-radius: 14px; background: var(--white); box-shadow: var(--frame); }
#journey .learn__panel-title, #journey .learn__note, #journey .learn__note b { color: var(--ink); }
#journey .learn__note { background: var(--stone-2); }
#journey .learn__assistant { box-shadow: var(--frame); }
#journey .learn__prompt { border: 1px solid var(--line); }
#journey .apply__doc { background: var(--white); color: var(--ink); box-shadow: var(--frame); }
/* the input card is frosted glass over the field: White at 55% with a bright edge */
#journey .apply__doc--in { background: rgb(255 255 255 / 0.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9), 0 18px 34px -20px rgb(26 26 26 / 0.22); }
#journey .apply__doc--in .apply__tag, #journey .apply__label { color: var(--ink); }
#journey .apply__inputs li { background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
#journey .apply__core::before, #journey .apply__core::after { top: 45px; height: 9px; background: linear-gradient(var(--hair), var(--hair)) center / 100% 1px no-repeat; }
#journey .apply__core::before { background: var(--node) left center / 9px 9px no-repeat, linear-gradient(var(--hair), var(--hair)) center / 100% 1px no-repeat; }
#journey .apply__core::after { background: var(--node) right center / 9px 9px no-repeat, linear-gradient(var(--hair), var(--hair)) center / 100% 1px no-repeat; }
#journey .apply__ring { stroke: var(--hair); stroke-width: 1.5; }
#journey .apply__status { color: var(--ink); }
#journey .apply__review-dot, #journey .pipe__icon--approve { background: var(--yellow); color: var(--ink); }
#journey .proto { box-shadow: var(--frame); }
#journey .proto__page .proto__btn { border: 1px solid rgb(26 26 26 / 0.3); }
#journey .proto__row .is-done { background: var(--stone); color: var(--ink); }
#journey .proto__progress b { background: var(--yellow); }
#journey .pipe { gap: 20px; }
#journey .pipe__step { background: var(--white); box-shadow: var(--frame); }
#journey .pipe__step--approve { box-shadow: inset 0 0 0 1.5px var(--yellow), var(--frame); }
#journey .pipe__step:not(:last-child)::after { left: 29px; width: 9px; height: 20px; background: var(--node) center bottom / 9px 9px no-repeat, linear-gradient(var(--hair), var(--hair)) center / 1px 100% no-repeat; }
#journey .pipe__icon { background: var(--stone-2); color: var(--ink); }
#journey .pipe__icon--ai { background: var(--pink-tint); }
#journey .pipe__icon--ai .tool { filter: none; }
#journey .pipe__icon--trigger, #journey .pipe__icon--approve { background: var(--yellow); }
#journey .pipe__icon--owner { background: var(--pink); }
#journey .pipe__text b, #journey .pipe__text small { color: var(--ink); }
#journey .pipe__chip { background: var(--stone-2); color: var(--ink); }
#journey .pipe__chip--auto { background: var(--yellow-pastel); color: var(--ink); }
#journey .pipe__chip--approve { background: var(--yellow); color: var(--ink); }
#journey .motif { --motif-line: rgb(26 26 26 / 0.3); }
#journey .motif path, #journey .motif rect { stroke-width: 1.25; }
#journey .motif rect:not(.motif-build__tile--accent) { fill: var(--white); }
#journey .motif .motif-build__tile--accent { stroke: none; }
#journey .motif .motif__wire { stroke: rgb(26 26 26 / 0.22); }
#journey .motif .motif-build__check { stroke-width: 2.5; }
#journey .motif-build__node { fill: var(--rose-dot); stroke: var(--white); stroke-width: 2; }
#journey .motif-build__dot { fill: rgb(26 26 26 / 0.35); }
#journey .compare { gap: 22px; }
#journey .compare__item { background: var(--white); color: var(--ink); box-shadow: var(--frame); }
#journey .compare__item span { color: var(--ink); }
#journey .compare__bar { background: var(--stone-2); }
#journey .compare__item--after .compare__bar i { background: var(--yellow); }
#journey .compare__loop { color: var(--ink); }
#journey .scene__copy p { color: var(--ink); }
#journey .tag { border-color: rgb(26 26 26 / 0.18); }

.motif { width: 100%; height: auto; overflow: visible; }
.motif path { fill: none; stroke: var(--motif-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.motif rect { fill: var(--ink-2); stroke: var(--motif-line); stroke-width: 2; }
.motif .motif__wire { stroke: var(--pink); }
.motif .motif-build__frame { stroke-width: 2.5; }
.motif .motif-build__tile--accent { fill: var(--yellow); stroke: var(--yellow); }
.motif .motif-build__check { stroke: var(--ink); stroke-width: 3; }
.motif .motif-build__box { stroke-width: 1.75; }
.motif-build__node { fill: var(--ink-2); stroke: var(--motif-line); stroke-width: 2; }
.motif-build__dot { fill: var(--motif-line); }

.learn { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "topics topics" "notes assistant"; gap: 16px 18px; width: 100%; align-items: center; }
.learn__topics { grid-area: topics; display: flex; flex-wrap: wrap; gap: 6px; }
.learn__topics span { padding: 4px 11px; border-radius: 999px; background: var(--ink-3); color: var(--muted-dark); font-size: 12px; font-weight: 500; }
.learn__topics .is-on { background: var(--yellow); color: var(--ink); }
.learn__notes { grid-area: notes; display: grid; gap: 8px; }
.learn__panel-title { margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--white); }
.learn__note { margin: 0; padding: 10px 14px; background: var(--ink-3); border-radius: 10px; font-size: 13px; color: var(--white); line-height: 1.4; }
.learn__note b { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); }
.learn__note mark { padding: 0 3px; background: var(--yellow); color: var(--ink); }
.learn__assistant { grid-area: assistant; padding: 16px; background: var(--white); color: var(--ink); border-radius: 14px; }
.learn__head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 13px; font-weight: 700; }
.learn__tools { display: flex; gap: 5px; }
.learn__tools .tool { width: 16px; height: 16px; }
.learn__bubble { margin: 0 0 12px; padding: 10px 12px; background: var(--stone-2); border-radius: 10px 10px 10px 2px; font-size: 13px; line-height: 1.45; }
.learn__prompt { display: flex; align-items: center; min-height: 40px; margin: 0; padding: 10px 12px; border: 1.5px solid var(--ink); border-radius: 10px; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.learn__caret { flex: none; width: 2px; height: 1.1em; margin-left: 2px; background: var(--rose-dot); }
.learn__suggest { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.learn__suggest span { padding: 4px 10px; border-radius: 999px; background: var(--pink-tint); font-size: 12px; font-weight: 500; }

.apply { display: grid; grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1.15fr); align-items: center; gap: 22px; width: 100%; }
.apply__doc { padding: 16px 18px; border-radius: 14px; background: var(--ink-3); color: var(--white); }
.apply__doc--out { background: var(--white); color: var(--ink); }
.apply__tag { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--white); }
.apply__doc--out .apply__tag { color: var(--muted); }
.apply__title { margin: 0 0 12px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.apply__label { margin: 0 0 6px; font-size: 12px; color: var(--white); }
.apply__inputs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.apply__inputs li { padding: 4px 10px; border-radius: 999px; background: var(--ink-2); font-size: 12px; }
.apply__core { position: relative; display: grid; justify-items: center; gap: 10px; }
.apply__core::before, .apply__core::after { content: ""; position: absolute; top: 48px; width: 22px; height: 2px; background: var(--pink); }
.apply__core::before { right: 100%; }
.apply__core::after { left: 100%; }
.apply__core svg { width: 96px; height: 96px; overflow: visible; }
.apply__ring { fill: none; stroke: var(--pink); stroke-width: 2; stroke-dasharray: 4 7; }
.apply__sun { fill: var(--yellow); }
.apply__spark { fill: var(--ink); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.apply__ring, .apply__sun, .apply__spark { transform-box: fill-box; transform-origin: center; }
.apply__status { margin: 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--white); }
.apply__lines { list-style: none; margin: 0 0 12px; counter-reset: draft; }
.apply__lines li { counter-increment: draft; display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; }
.apply__lines li::before { content: counter(draft); font-size: 12px; font-weight: 700; color: var(--rose); }
.apply__review { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 5px 12px 5px 6px; border-radius: 999px; background: var(--pink-tint); font-size: 12px; font-weight: 600; }
.apply__review-dot { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--yellow); }
.apply__review-dot svg, .pipe__icon--approve svg { width: 12px; height: 12px; }
.apply__review-dot path, .pipe__icon--approve path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.pipe { position: relative; display: grid; gap: 14px; width: 100%; max-width: 540px; list-style: none; }
.pipe__step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; background: var(--ink-3); border-radius: 14px; }
.pipe__step:not(:last-child)::after { content: ""; position: absolute; left: 33px; top: 100%; width: 2px; height: 14px; background: var(--pink); transform-origin: top; }
.pipe__step--approve { box-shadow: inset 0 0 0 2px var(--yellow); }
.pipe__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ink-2); color: var(--white); font-size: 12px; font-weight: 700; }
.pipe__icon svg { width: 20px; height: 20px; }
.pipe__icon--trigger { background: var(--yellow); color: var(--ink); }
.pipe__icon--trigger path { fill: currentColor; }
.pipe__icon--ai .tool { width: 20px; height: 20px; }
.pipe__icon--owner { background: var(--pink); color: var(--ink); }
.pipe__icon--approve { background: var(--yellow); color: var(--ink); }
.pipe__text b { display: block; font-size: 14px; font-weight: 600; color: var(--white); line-height: 1.35; }
.pipe__text small { font-size: 12px; color: var(--white); }
.pipe__chip { padding: 4px 10px; border-radius: 999px; background: var(--ink-2); color: var(--muted-dark); font-size: 12px; font-weight: 600; white-space: nowrap; }
.pipe__chip--auto { color: var(--yellow); }
.pipe__chip--approve { background: var(--yellow); color: var(--ink); }

.improve { display: grid; gap: 18px; width: 100%; }
.improve .motif { height: 200px; }
.compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; }
.compare__item { padding: 12px 14px; background: var(--ink-3); border-radius: 12px; color: var(--white); }
.compare__item--after { background: var(--white); color: var(--ink); }
.compare__item p { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 8px; font-size: 12px; }
.compare__item b { font-size: 13px; }
.compare__item span { color: var(--white); }
.compare__item--after span { color: var(--muted); }
.compare__bar { display: block; height: 6px; border-radius: 6px; background: var(--ink-2); overflow: hidden; }
.compare__item--after .compare__bar { background: var(--stone); }
.compare__bar i { display: block; height: 100%; width: calc(var(--w) * 100%); background: var(--pink); transform-origin: left; }
.compare__item--after .compare__bar i { background: var(--ink); }
.compare__loop { display: grid; justify-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--yellow); }
.compare__loop svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.proto { width: 100%; max-width: 520px; background: var(--white); color: var(--ink); border-radius: 12px; overflow: hidden; }
.proto__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--stone); font-size: 11px; color: var(--muted); }
.proto__bar i { width: 8px; height: 8px; border-radius: 50%; background: #CAC9C5; }
.proto__bar span { margin-left: 8px; padding: 2px 10px; background: var(--white); border-radius: 999px; }
.proto__body { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px; }
.proto__page { display: grid; gap: 8px; align-content: start; padding: 12px; background: var(--yellow); border-radius: 8px; }
.proto__page span { display: block; border-radius: 4px; background: var(--ink); }
.proto__nav { height: 6px; width: 60%; opacity: 0.25; }
.proto__h { height: 12px; width: 92%; }
.proto__h--short { width: 64%; }
.proto__page .proto__btn { height: 20px; width: 46%; margin-top: 6px; background: var(--white); border: 1.5px solid var(--ink); }
.proto__tracker { display: grid; gap: 6px; align-content: start; }
.proto__title { margin: 0 0 2px; font-size: 13px; font-weight: 700; }
.proto__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 7px 8px; background: var(--stone-2); border-radius: 6px; }
.proto__row span { font-size: 13px; font-weight: 500; }
.proto__row b { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.proto__row .is-new { background: var(--pink); }
.proto__row .is-follow { background: var(--yellow); }
.proto__row .is-done { background: var(--ink); color: var(--white); }
.proto__progress { display: flex; align-items: center; gap: 12px; padding: 0 14px 14px; font-size: 11px; font-weight: 600; }
.proto__progress i { flex: 1; height: 5px; border-radius: 5px; background: var(--stone); overflow: hidden; }
.proto__progress b { display: block; height: 100%; background: var(--ink); transform-origin: left; }

/* 9. Programs -------------------------------------------------------------- */
/* Home: programs as static cards on one shared system. Every card is pure white (lifting it off the Works White page); the cover sits on
   a soft Faith Pink + AI Yellow wash that fades into the white, so the drawn cover does the work.
   Cover, then title/summary, then the actions. */
.pstack { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
/* White surface, a hairline edge and one close, restrained Charcoal shadow */
.prog { --on: var(--ink); --muted: var(--ink); --rule: rgb(26 26 26 / 0.18);
  --btn-bg: var(--ink); --btn-fg: var(--white); --btn-hover: var(--pink); --grain-opacity: 0; --grain-blend: multiply;
  --surface: var(--white); --light: linear-gradient(transparent, transparent);
  --edge: inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 0 0 1px rgb(26 26 26 / 0.08);
  /* The cover wash: pink and yellow blooms over a pink-to-yellow sweep; --wash-fade lays white
     over the lower part so the colour dissolves into the card rather than ending in a hard edge */
  --wash-fade: linear-gradient(180deg, rgb(255 255 255 / 0) 28%, rgb(255 255 255 / 0.45) 56%, rgb(255 255 255 / 0.85) 80%, var(--white) 100%);
  --wash: radial-gradient(75% 95% at 12% 0%, rgb(239 172 186 / 0.75), rgb(239 172 186 / 0) 72%),
    radial-gradient(70% 90% at 92% 8%, rgb(251 197 34 / 0.42), rgb(251 197 34 / 0) 70%),
    linear-gradient(105deg, rgb(239 172 186 / 0.42), rgb(251 197 34 / 0.3)); }
.prog--feature { grid-column: 1 / -1; }
.prog__card { position: relative; isolation: isolate; display: flex; flex-direction: column; height: 100%; border-radius: var(--r-lg); background: var(--light), var(--surface); color: var(--on); overflow: hidden;
  box-shadow: var(--edge), 0 1px 2px rgb(26 26 26 / 0.05), 0 20px 44px -34px rgb(26 26 26 / 0.32); }
/* Grain: fractal noise, tinted Charcoal (inverted to light specks on Charcoal) */
.prog__card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .1 1.8 0 0 0 -.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.prog__art { position: relative; z-index: 0; aspect-ratio: 560 / 300; padding: clamp(18px, 2.2vw, 28px) clamp(18px, 2.2vw, 28px) 0; background: var(--wash-fade), var(--wash); }
.prog__art svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; transition: transform 700ms var(--ease-out); }
.prog:hover .prog__art svg { transform: translateY(-3px); }
.art__type { font-family: var(--font-display); font-weight: 700; }
.art__mono { font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; }
.art__label { font-family: var(--font); font-size: 13px; font-weight: 600; fill: var(--ink); }
.prog__body { position: relative; display: flex; flex-direction: column; flex: 1; padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.6vw, 34px) clamp(22px, 2.6vw, 32px); }
.prog__title { max-width: 15ch; margin: 0 0 14px; font-size: clamp(30px, 2.9vw, 42px); line-height: 1.02; letter-spacing: -0.045em; text-wrap: balance; }
.prog__title a { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-decoration-color var(--dur-fast); }
.prog__title a:hover { text-decoration-color: currentColor; }
.prog__summary { margin: 0; max-width: 46ch; text-wrap: pretty; color: var(--muted); font-size: 16px; line-height: 1.55; }
.prog__notice { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin: 20px 0 0; padding: 7px 14px 7px 12px; border-radius: var(--r-sm); background: var(--paper); box-shadow: inset 0 0 0 1px rgb(26 26 26 / 0.08); font-size: 13.5px; font-weight: 600; }
.prog__notice::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px rgb(26 26 26 / 0.12); }
.prog__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: auto; padding-top: 24px; }
.prog .prog__btn { min-height: 44px; padding: 9px 18px; border-color: var(--btn-bg); background: var(--btn-bg); color: var(--btn-fg); }
.prog .prog__btn:hover { border-color: var(--btn-hover); background: var(--btn-hover); color: var(--ink); }
.prog :focus-visible { outline-color: var(--on); }

/* Featured: copy on the left, the composition full-height on the right, with one large satin disc
   that runs off the card's top-right corner behind it */
.prog--feature .prog__card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "body art"; min-height: clamp(400px, 34vw, 480px); }
.prog--feature .prog__body { grid-area: body; justify-content: center; padding: clamp(32px, 4vw, 56px); }
.prog--feature .prog__actions { margin-top: 0; padding-top: 28px; }
.prog--feature .prog__title { max-width: 14ch; margin-bottom: 16px; font-size: clamp(32px, 3.3vw, 46px); line-height: 0.98; letter-spacing: -0.05em; }
.prog--feature .prog__summary { font-size: var(--fs-lead); }
.prog--feature .prog__art { grid-area: art; aspect-ratio: auto; display: flex; align-items: center; padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 44px) clamp(20px, 2.4vw, 32px) 0; }
.prog--feature .prog__art svg { height: auto; max-height: 440px; }
/* Side by side, the wash also softens into the white toward the copy column */
.prog--feature .prog__art { background: linear-gradient(90deg, var(--white), rgb(255 255 255 / 0) 30%), linear-gradient(180deg, rgb(255 255 255 / 0) 55%, rgb(255 255 255 / 0.75) 85%, var(--white)), var(--wash); }
.prog--feature .prog__art::before { content: ""; position: absolute; z-index: -1; top: -38%; right: -22%; width: 92%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 62%, rgb(255 255 255 / 0.62), rgb(255 255 255 / 0.18) 58%, rgb(255 255 255 / 0) 71%); }
.prog--feature .prog__art::after { content: ""; position: absolute; z-index: -1; top: -48%; right: -32%; width: 112%; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(26 26 26 / 0.1); }
/* Websites: a fine Charcoal grid under the wireframes, fading out toward the copy */
.prog--yellow .prog__art::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgb(26 26 26 / 0.07) 1px, transparent 1px), linear-gradient(90deg, rgb(26 26 26 / 0.07) 1px, transparent 1px); background-size: 22px 22px; background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 96%); mask-image: linear-gradient(180deg, #000 30%, transparent 96%); }
.programs__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; margin-top: 28px; text-align: center; }
.programs__foot .small { flex-basis: 100%; margin: 0; }

/* Home programs: scroll-driven split (tools/render.mjs programRowsHome, js/main.js §5b). One mockup
   holds sticky on the left on a soft Pink/Yellow/White ground; the programs pass on the right and
   the one in the middle of the screen is active. Narrower, each program shows its own view inline. */
.pscene { display: grid; gap: 28px; }
.pscene__stage { display: none; }
.pscene__steps { list-style: none; display: grid; gap: 20px; margin: 0; padding: 0; }
.pstep { border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); overflow: hidden; }
.pstep__body { padding: clamp(22px, 2.6vw, 34px); }
.pstep__cat { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; }
.pstep__num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); font-family: var(--font-display); font-size: 11px; letter-spacing: 0.04em; transition: background var(--dur-fast), border-color var(--dur-fast); }
/* Stacked (below the wide split, where only the active number fills): every number filled, Faith Pink and AI Yellow in turn */
@media (max-width: 1023px) {
  .pscene__steps > .pstep .pstep__num { background: var(--pink); border-color: var(--pink); }
  .pscene__steps > .pstep:nth-child(even) .pstep__num { background: var(--yellow); border-color: var(--yellow); }
}
.pstep__title { max-width: 14ch; margin: 0 0 16px; font-size: clamp(36px, 4vw, 60px); line-height: 0.98; letter-spacing: -0.045em; text-wrap: balance; }
.pstep__title a { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-decoration-color var(--dur-fast); }
.pstep__title a:hover { text-decoration-color: currentColor; }
.pstep__summary { max-width: 44ch; margin: 0; font-size: var(--fs-lead); line-height: 1.5; text-wrap: pretty; }
.pstep__label { margin: 22px 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.pstep__outs { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pstep__outs li { position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.5; }
.pstep__outs li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); }
.pstep--yellow .pstep__outs li::before { background: var(--yellow); }
.pstep .prog__notice { margin-top: 20px; }
.pstep__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 26px; }
.pstep__actions .btn { min-height: 44px; padding: 9px 18px; }

/* The mockup ground: each program has its own full Pink/Yellow/White gradient; on the stage they
   are stacked and crossfade as the active program changes (opacity only, so nothing re-lays out) */
:root { --g0: radial-gradient(80% 70% at 0% 0%, rgb(239 172 186 / 0.95), transparent 70%), radial-gradient(70% 70% at 100% 100%, rgb(251 197 34 / 0.6), transparent 72%), linear-gradient(135deg, #F4CBD3, #F9E6E6 45%, #FBF1E4 70%, #FCE3A6);
  --g1: radial-gradient(75% 75% at 100% 0%, rgb(251 197 34 / 0.75), transparent 70%), radial-gradient(85% 75% at 0% 100%, rgb(239 172 186 / 0.95), transparent 72%), linear-gradient(225deg, #FCE7B0, #FBF3E8 45%, #F7DCE1 75%, #F2C2CC);
  --g2: radial-gradient(70% 80% at 10% 15%, rgb(251 197 34 / 0.7), transparent 70%), radial-gradient(80% 80% at 95% 90%, rgb(239 172 186 / 0.9), transparent 72%), radial-gradient(50% 50% at 60% 40%, rgb(250 248 244 / 0.9), transparent 70%), linear-gradient(160deg, #FCE2A0, #FAF1E6 50%, #F5D0D8);
  --g3: radial-gradient(70% 70% at 100% 0%, rgb(239 172 186 / 0.85), transparent 70%), radial-gradient(80% 70% at 0% 100%, rgb(251 197 34 / 0.55), transparent 72%), radial-gradient(55% 55% at 45% 50%, rgb(250 248 244 / 0.85), transparent 70%), linear-gradient(200deg, #F6D3DA, #FAF4EC 50%, #FBE7B4);
}
.pmock { position: relative; isolation: isolate; display: grid; place-items: center; overflow: hidden; border-radius: var(--r-lg); background: var(--g0); }
.pmock--inline[data-at="1"] { background: var(--g1); }
.pmock--inline[data-at="2"] { background: var(--g2); }
.pmock--inline[data-at="3"] { background: var(--g3); }
.pmock__bg { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 800ms var(--ease-out); }
.pmock__bg[data-bg="0"] { background: var(--g0); }
.pmock__bg[data-bg="1"] { background: var(--g1); }
.pmock__bg[data-bg="2"] { background: var(--g2); }
.pmock__bg[data-bg="3"] { background: var(--g3); }
.pmock[data-at="0"] > [data-bg="0"], .pmock[data-at="1"] > [data-bg="1"], .pmock[data-at="2"] > [data-bg="2"], .pmock[data-at="3"] > [data-bg="3"] { opacity: 1; }
.pmock__view { grid-area: 1 / 1; width: min(100% - 40px, 500px); padding-block: 28px; }
/* The node network (tools/render.mjs programMock): a 480 × 440 map whose type is 1/30 of its width,
   so every card, wire and pin keeps its place at any size. Hairline Charcoal wires with Pink pins
   where they meet a card; frosted cards, the active one solid White with a Pink ring. */
.pnet { container-type: inline-size; }
.pnet__map { position: relative; width: 100%; aspect-ratio: 480 / 440; font-size: calc(100cqw / 30); }
.pnet__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.pnet__wire { stroke: var(--ink); stroke-opacity: 0.26; stroke-width: 1.25; stroke-linecap: square; stroke-linejoin: miter; }
.pnet__flow { stroke: var(--pink); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0.08 0.92; animation: pnet-flow 2.8s linear infinite; }
.pnet__pin { fill: var(--pink); stroke: var(--white); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
@keyframes pnet-flow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.pnet__out, .pnet__node, .pnet__cursor { position: absolute; left: calc(var(--x) / 480 * 100%); top: calc(var(--y) / 440 * 100%); }
/* The output in the middle: a small White window with the program's result drawn inside */
.pout { display: flex; flex-direction: column; box-sizing: border-box; width: calc(var(--w) * 1em / 16); height: calc(var(--h) * 1em / 16); transform: translate(-50%, -50%); overflow: hidden;
  border-radius: 0.9em; background: var(--white); box-shadow: 0 0 0 0.45em rgb(255 255 255 / 0.45), 0 1.4em 2.4em -1.2em rgb(26 26 26 / 0.35); }
.pout__bar { display: flex; align-items: center; gap: 0.25em; flex: none; height: 1.5em; padding: 0 0.6em; border-bottom: 1px solid rgb(26 26 26 / 0.07); background: var(--paper); }
.pout__bar i { width: 0.36em; height: 0.36em; border-radius: 50%; background: rgb(26 26 26 / 0.16); }
.pout__bar i:first-child { background: var(--pink); }
.pout__bar em { margin-left: 0.4em; font-size: 0.6em; font-style: normal; font-weight: 500; opacity: 0.6; white-space: nowrap; }
.pout__body { display: flex; flex-direction: column; gap: 0.4em; flex: 1; min-height: 0; padding: 0.6em 0.7em; }
.pout__title { font-family: var(--font-display); font-size: 0.75em; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.pout__row { display: flex; align-items: center; gap: 0.45em; padding: 0.3em 0.4em; border-radius: 0.4em; font-size: 0.625em; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.pout__row i { flex: none; width: 1.1em; height: 1.1em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(26 26 26 / 0.25); }
.pout__row.is-done { opacity: 0.6; text-decoration: line-through; }
.pout__row.is-done i { box-shadow: none; background: var(--pink); }
.pout__row.is-now { background: var(--pink-tint); }
.pout__row.is-now i { box-shadow: inset 0 0 0 0.3em var(--yellow); }
.pout__line { flex: none; height: 0.32em; border-radius: 1em; background: rgb(26 26 26 / 0.12); }
.pout__line--short { width: 64%; }
.pout__author { display: flex; align-items: center; gap: 0.4em; }
.pout__author > i { flex: none; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--pink); }
.pout__author > span { display: grid; gap: 0.25em; flex: 1; }
.pout__author em { height: 0.32em; border-radius: 1em; background: var(--ink); opacity: 0.75; }
.pout__author em + em { width: 60%; opacity: 0.2; }
.pout__media { flex: 1; min-height: 0; border-radius: 0.45em; background: linear-gradient(135deg, var(--pink), #F7DCE1 55%, var(--yellow)); }
.pout__head { flex: none; width: 80%; height: 0.6em; border-radius: 0.2em; background: var(--ink); }
.pout__form { display: flex; gap: 0.3em; margin-top: auto; }
.pout__field { flex: 1; height: 1.5em; border-radius: 0.35em; box-shadow: inset 0 0 0 1px rgb(26 26 26 / 0.18); }
.pout__btn { display: grid; place-items: center; padding: 0 0.9em; border-radius: 0.35em; background: var(--yellow); font-size: 0.6em; font-weight: 600; white-space: nowrap; height: 2.5em; }
.pnet__node { display: flex; align-items: center; gap: 0.6em; box-sizing: border-box; width: calc(var(--w) * 1em / 16); height: calc(var(--h) * 1em / 16); padding: 0 0.75em 0 0.6em; transform: translate(-50%, -50%);
  border-radius: 0.9em; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0.9em 1.6em -1em rgb(26 26 26 / 0.28); }
.pnet__node.is-on { background: var(--white); box-shadow: 0 0 0 1px var(--white), 0 0 0 0.3em rgb(239 172 186 / 0.55), 0 1.2em 2em -1em rgb(26 26 26 / 0.35); }
.pnet__icon { display: grid; place-items: center; flex: none; width: 2.2em; height: 2.2em; border-radius: 0.6em; background: var(--white); box-shadow: inset 0 0 0 1px rgb(26 26 26 / 0.08); }
.pnet__icon img, .pnet__icon svg { width: 1.3em; height: 1.3em; }
.pnet__txt { display: grid; gap: 0.15em; min-width: 0; flex: 1; }
.pnet__txt b { overflow: hidden; font-family: var(--font-display); font-size: 0.875em; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; text-overflow: ellipsis; }
.pnet__txt small { overflow: hidden; font-size: 0.75em; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; opacity: 0.72; }
.pnet__meter { position: relative; height: 0.32em; margin-top: 0.25em; border-radius: 1em; background: rgb(26 26 26 / 0.08); overflow: hidden; }
.pnet__meter::after { content: ""; position: absolute; inset: 0; width: calc(var(--p) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--pink), var(--yellow)); }
.pnet__live { flex: none; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 0.22em rgb(251 197 34 / 0.3); }
.pnet__node--chip { gap: 0.5em; justify-content: center; width: calc(var(--w) * 1em / 13); height: calc(var(--h) * 1em / 13); padding: 0 0.8em; border-radius: 2em; font-family: var(--font-display); font-size: 0.8125em; font-weight: 600; white-space: nowrap; }
.pnet__tick { flex: none; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.7 2.6L14 7.6' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
/* The cursor rests on the active node with its tool's name beside it */
.pnet__cursor { display: flex; align-items: flex-start; gap: 0.15em; animation: pnet-hover 3.2s var(--ease-out) infinite alternate; }
.pnet__cursor svg { width: 1.4em; height: 1.4em; filter: drop-shadow(0 2px 3px rgb(26 26 26 / 0.25)); }
.pnet__tip { margin-top: 1em; padding: 0.3em 0.65em; border-radius: 0.5em; background: var(--ink); color: var(--white); font-size: 0.75em; font-weight: 600; line-height: 1.3; white-space: nowrap; }
@keyframes pnet-hover { from { translate: 0 0; } to { translate: 0.35em 0.25em; } }
/* Small maps: drop the second line so the titles stay legible */
@container (max-width: 380px) {
  .pnet__txt small { display: none; }
  .pnet__node .pnet__meter { margin-top: 0.35em; }
}
.pmock__dots { display: none; }
.pstep__visual .pmock { border-radius: 0; }

/* Wide: two columns, the stage sticky beside the steps; each step is tall enough to read on its own */
@media (min-width: 1024px) {
  .pscene { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(32px, 4vw, 64px); align-items: start; }
  .pscene__stage { display: block; position: sticky; top: calc(var(--header-h) + 24px); height: min(640px, calc(100vh - var(--header-h) - 48px)); }
  .pscene__stage .pmock { height: 100%; }
  .pscene__steps { gap: 0; }
  .pstep { display: flex; align-items: center; min-height: min(640px, calc(100vh - var(--header-h) - 48px)); border: 0; border-radius: 0; background: none; overflow: visible; }
  .pstep__visual { display: none; }
  .pstep__body { padding: 0; }
  /* The active program: its number fills; the others recede */
  .pstep.is-active .pstep__num { background: var(--pink); border-color: var(--pink); }
  .pstep--yellow.is-active .pstep__num { background: var(--yellow); border-color: var(--yellow); }
  .pscene.is-live .pstep__body > * { transition: opacity 500ms var(--ease-out); }
  .pscene.is-live .pstep:not(.is-active) .pstep__body > * { opacity: 0.38; }
  .pscene.is-live .pstep:not(.is-active) .pstep__body:focus-within > * { opacity: 1; }

  /* Only the active view shows; it lifts in a little and its tray tiles follow */
  .pscene__stage .pmock__view { opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.985); transition: opacity 450ms var(--ease-out), transform 600ms var(--ease-out), visibility 0s 450ms; }
  .pscene__stage .pmock__view.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 450ms var(--ease-out) 120ms, transform 600ms var(--ease-out) 120ms, visibility 0s; }
  .pscene__stage .pnet__wire { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 700ms var(--ease-out); }
  .pscene__stage .is-active .pnet__wire { stroke-dashoffset: 0; transition-delay: calc(180ms + var(--k) * 90ms); }
  .pscene__stage .pnet__pin, .pscene__stage .pnet__flow { opacity: 0; transition: opacity 400ms var(--ease-out); }
  .pscene__stage .is-active .pnet__pin { opacity: 1; transition-delay: calc(560ms + var(--k) * 90ms); }
  .pscene__stage .is-active .pnet__flow { opacity: 1; transition-delay: 900ms; }
  .pscene__stage .pnet__node { opacity: 0; scale: 0.94; transition: opacity 400ms var(--ease-out), scale 500ms var(--ease-out); }
  .pscene__stage .is-active .pnet__node { opacity: 1; scale: 1; transition-delay: calc(320ms + var(--k) * 80ms); }
  .pscene__stage .pnet__cursor { opacity: 0; transition: opacity 400ms var(--ease-out); }
  .pscene__stage .is-active .pnet__cursor { opacity: 1; transition-delay: 820ms; }
  .pscene__stage .pmock__view { width: min(100% - 40px, 560px, (100vh - var(--header-h) - 150px) * 480 / 440); }
  .pmock__dots { position: absolute; left: 50%; bottom: 20px; display: flex; gap: 8px; transform: translateX(-50%); }
  .pmock__dots span { width: 7px; height: 7px; border-radius: 4px; background: rgb(26 26 26 / 0.18); transition: background 400ms, width 400ms var(--ease-out); }
  .pmock[data-at="0"] .pmock__dots span:nth-child(1), .pmock[data-at="1"] .pmock__dots span:nth-child(2), .pmock[data-at="2"] .pmock__dots span:nth-child(3), .pmock[data-at="3"] .pmock__dots span:nth-child(4) { width: 20px; background: var(--ink); }
}
@media (min-width: 1024px) and (max-height: 640px) {
  .pmock__view { scale: 0.88; }
}
@media (max-width: 480px) {
  .pmock__view { width: calc(100% - 28px); padding-block: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pmock, .pscene__stage .pmock__view, .pscene__stage .pmock__view *, .pmock__bg, .pscene.is-live .pstep__body > * { transition: none !important; }
  .pnet__flow, .pnet__cursor { animation: none; }
}

/* Illustrative output previews (static interface fragments) */
.preview { margin: 0; padding: 16px; border-radius: var(--r); background: var(--stone-2); }
.preview__cap { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.preview__table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--white); border-radius: 10px; overflow: hidden; }
.preview__table th { padding: 8px 10px; background: var(--ink); color: var(--white); text-align: left; font-weight: 600; font-size: 12px; }
.preview__table td { padding: 9px 10px; border-top: 1px solid var(--line); }
.preview__table tr.is-picked td { background: var(--yellow); font-weight: 600; }
.preview__table tr.is-picked .chip--low { background: var(--white); }
.preview__foot { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-size: 13px; }
.preview__plan { list-style: none; display: grid; gap: 6px; }
.preview__plan li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--white); font-size: 13px; }
.preview__plan b { font-size: 12px; color: var(--rose); }
.preview--proto .proto { max-width: none; box-shadow: inset 0 0 0 1px var(--line); }
.preview__chat { display: grid; gap: 8px; }
.preview__msg { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
.preview__msg--in { justify-self: start; max-width: 80%; background: var(--white); border-bottom-left-radius: 2px; }
.preview__msg--out { justify-self: end; max-width: 88%; display: grid; gap: 6px; justify-items: start; background: var(--ink); color: var(--white); border-bottom-right-radius: 2px; }
.preview__msg--out .chip { color: var(--ink); }
.preview__msg--flag { justify-self: stretch; background: var(--pink-tint); font-weight: 600; }

/* 10. Business, proof, gallery --------------------------------------------- */
/* Home: For your organization. The copy and the four verbs of an engagement on Faith Pink; a real
   session fills the other half, so the block reads people first. */
#business { padding-bottom: var(--section); }
.business { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; background: var(--pink); color: var(--ink); border-radius: 32px; }
/* the copy's left edge lines up with the header logo */
.business__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 5vw, 76px) clamp(28px, 4.6vw, 72px) clamp(36px, 5vw, 76px) var(--gutter); }
.business__copy h2 + p { margin-top: 18px; max-width: 520px; font-size: var(--fs-lead); }
.business__ways { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; max-width: 560px; margin: 32px 0 0; padding: 0; }
.business__ways li { padding: 14px 0 18px; border-top: 1.5px solid var(--ink); font-size: 15px; line-height: 1.4; }
.business__ways b { display: block; margin-bottom: 2px; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; letter-spacing: -0.03em; }
.business__for { margin: 18px 0 0; max-width: 46ch; font-size: var(--fs-small); color: var(--muted); }
.business .actions { margin: 28px 0 0; }
/* The photo fills its whole column; the wrapper's overflow + radius rounds its outer-right corners */
.business__photo { position: relative; overflow: hidden; min-height: 560px; margin: 0; border-radius: 0; background: var(--pink-tint); }
.business__photo picture { display: contents; }
.business__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 10b. Trusted by (logo strip) and the Events gallery (masonry) -------------
   Trusted by: the logo list is written twice (tools/trusted-by.mjs), so sliding the track by
   half its width loops without a jump. CSS only; js/main.js §11 adds a pause button. Hover or
   focus pauses it; reduced motion shows one still, wrapped row. Logos stay monochrome.
   Events gallery: a 12/6/2-column grid whose tiles carry their own spans (--c/--r desktop,
   --ct/--rt tablet, --cm/--rm phone; tools/event-gallery.mjs), so each band of five fills its
   rectangle exactly and the reading order is the order of the list. On the homepage
   (.egallery--bleed) the section is not a .wrap: the photos run as three full-bleed rows that the
   page scroll slides sideways (.srows, below). */
.trusted { padding-block: clamp(28px, 3.6vw, 52px) clamp(8px, 1.2vw, 16px); }
.trusted__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.trusted__title { margin: 0; font-family: var(--font); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.4; }
.trusted__toggle { min-height: 32px; padding: 4px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: 600 12px/1.2 var(--font); letter-spacing: 0.04em; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out); }
.trusted__toggle:hover { border-color: var(--ink); }
.trusted__toggle[aria-pressed="false"] .trusted__toggle-play, .trusted__toggle[aria-pressed="true"] .trusted__toggle-pause { display: none; }
.trusted__marquee { overflow: hidden; border-block: 1px solid var(--line); } /* full bleed: no fade, the logos run edge to edge */
.trusted__track { display: flex; width: max-content; animation: fw-logos 52s linear infinite; }
.trusted__marquee:hover .trusted__track, .trusted__marquee:focus-within .trusted__track, .trusted.is-paused .trusted__track { animation-play-state: paused; }
.trusted__set { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
@keyframes fw-logos { to { transform: translate3d(-50%, 0, 0); } }
.trusted__logo { flex: none; display: flex; align-items: center; gap: 10px; height: clamp(68px, 6.4vw, 92px); padding-inline: clamp(26px, 3.2vw, 52px); color: var(--ink); opacity: 0.5; white-space: nowrap; transition: opacity var(--dur) var(--ease-out); }
.trusted__logo:hover { opacity: 1; }
.trusted__logo--image img { display: block; width: auto; height: 34px; max-width: 170px; object-fit: contain; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; }
.trusted__name { font-family: var(--font-display); font-size: 17px; line-height: 1; }
.trusted__logo--caps .trusted__name { font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.trusted__logo--wide .trusted__name { font-size: 13px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; }
.trusted__logo--bold .trusted__name { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.trusted__logo--light .trusted__name { font-family: var(--font); font-size: 19px; font-weight: 300; letter-spacing: 0.01em; }
.trusted__mark { flex: none; width: 22px; height: 22px; background: currentColor; }
.trusted__mark--circle { border-radius: 50%; }
.trusted__mark--square { border-radius: 5px; }
.trusted__mark--diamond { width: 17px; height: 17px; margin-inline: 2px; border-radius: 3px; transform: rotate(45deg); }
.trusted__mark--ring { border: 3.5px solid currentColor; border-radius: 50%; background: none; }
.trusted__mark--bars { width: 20px; background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px); }

.section-head > .egallery__intro, .section-head > .latest__intro { grid-column: 9 / -1; display: grid; justify-items: start; gap: 14px; padding-bottom: 0.35em; }
.egallery__intro p, .latest__intro p { max-width: 40ch; margin: 0; font-size: var(--fs-lead); }
.mgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(40px, 4.6vw, 66px); grid-auto-flow: dense; gap: clamp(10px, 1.1vw, 16px); margin: 0; padding: 0; list-style: none; }
.mgrid__tile { grid-column: span var(--c); grid-row: span var(--r); min-width: 0; }
.mgrid__tile figure { position: relative; height: 100%; margin: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--stone); transition: translate 700ms var(--ease-expo), box-shadow 700ms var(--ease-expo); }
.mgrid__tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 900ms var(--ease-expo); }
.mgrid__tile figcaption { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 6px 12px; border: 1px solid var(--glass-edge); border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); font-size: 13px; font-weight: 600; line-height: 1.3; opacity: 0; translate: 0 6px; transition: opacity var(--dur) var(--ease-out), translate var(--dur) var(--ease-out); }
@media (hover: hover) {
  .mgrid__tile:hover figure { translate: 0 -4px; box-shadow: 0 18px 36px -22px rgb(26 26 26 / 0.45); }
  .mgrid__tile:hover img { scale: 1.04; }
}
.mgrid__tile figcaption { display: none; }
.egallery--bleed { container-type: inline-size; }
.egallery--bleed .mgrid { --cols: 12; --k: 0.72; --g: clamp(6px, 0.7vw, 12px); gap: var(--g); grid-auto-rows: calc((100cqi - (var(--cols) - 1) * var(--g)) / var(--cols) * var(--k)); }
@media (max-width: 1000px) {
  .mgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(44px, 7.4vw, 66px); }
  .egallery--bleed .mgrid { --cols: 6; --k: 0.6; }
  .mgrid__tile { grid-column: span var(--ct); grid-row: span var(--rt); }
}
@media (max-width: 900px) { .section-head > .egallery__intro, .section-head > .latest__intro { grid-column: 1 / -1; } .section-head > .latest__intro { margin-top: 18px; } }

/* Homepage gallery rows (tools/event-gallery.mjs scrollRows) -----------------
   Three full-bleed rows, one height per row (--h) and widths from each tile's --ar. Without
   motion each row scrolls sideways on its own; js/motion.js §5c adds .is-scrubbed on tablets and
   desktops (motion allowed), clips the rows and moves them with the page scroll instead. */
.srows { --h: max(140px, 14vw); --g: clamp(6px, 0.7vw, 12px); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--g); overflow: hidden; }
.srows__row { display: flex; gap: var(--g); margin: 0; padding: 0; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.srows__tile { flex: none; height: var(--h); aspect-ratio: var(--ar); }
.srows__tile figure { height: 100%; margin: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--stone); }
.srows__tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 900ms var(--ease-expo); }
@media (hover: hover) { .srows__tile:hover img { scale: 1.03; } }
.srows.is-scrubbed .srows__row { width: max-content; overflow: visible; will-change: transform; }
@media (max-width: 1000px) { .srows { --h: max(130px, 18vw); } }
@media (max-width: 640px) {
  .srows { --h: 38vw; --g: 6px; }
  .srows__row { scrollbar-width: none; padding-inline: 0 6px; }
  .srows__row::-webkit-scrollbar { display: none; }
  .srows__tile figure { border-radius: var(--r); }
}

/* Photo marquee: a full-bleed looping strip of event photos ------------------- */
.pmarquee { position: relative; overflow: hidden; width: 100%; }
.pmarquee::before,
.pmarquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: clamp(32px, 5vw, 72px); z-index: 2; pointer-events: none; }
.pmarquee::before { left: 0; background: linear-gradient(to right, var(--bg, #fff) 0%, transparent 100%); }
.pmarquee::after { right: 0; background: linear-gradient(to left, var(--bg, #fff) 0%, transparent 100%); }
.pmarquee__track { display: flex; width: max-content; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .pmarquee__track { animation: pmarquee-scroll 38s linear infinite; }
  .pmarquee:hover .pmarquee__track,
  .pmarquee:focus-within .pmarquee__track { animation-play-state: paused; }
}
@keyframes pmarquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.pmarquee__set { display: flex; flex-shrink: 0; list-style: none; margin: 0; padding: 0; gap: clamp(8px, 1vw, 14px); align-items: stretch; }
.pmarquee__tile { flex: 0 0 auto; }
.pmarquee__tile figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--stone); height: clamp(240px, 26vw, 400px); }
.pmarquee__tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 600ms var(--ease-expo); }
.pmarquee__tile figcaption { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 5px 11px; border: 1px solid var(--glass-edge); border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); font-size: 12px; font-weight: 600; line-height: 1.3; opacity: 0; translate: 0 6px; transition: opacity var(--dur) var(--ease-out), translate var(--dur) var(--ease-out); }
@media (hover: hover) {
  .pmarquee__tile:hover img { scale: 1.04; }
  .pmarquee__tile:hover figcaption { opacity: 1; translate: 0 0; }
}
/* Anchor tile: the first image is wider to anchor the strip */
.pmarquee__tile--anchor figure { width: clamp(300px, 40vw, 600px); }
.pmarquee__tile:not(.pmarquee__tile--anchor) figure { width: clamp(200px, 22vw, 340px); }
@media (max-width: 640px) {
  .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(34px, 11vw, 54px); gap: 8px; }
  .egallery--bleed .mgrid { --cols: 2; --k: 0.3; --g: 6px; }
  .mgrid__tile { grid-column: span var(--cm); grid-row: span var(--rm); }
  /* 10px is --r: each tile's inline --r (its row span, tools/event-gallery.mjs) shadows the token here */
  .mgrid__tile figure { border-radius: 10px; }
  .mgrid__tile figcaption { left: 8px; bottom: 8px; padding: 4px 10px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .trusted__track { display: block; width: auto; }
  .trusted__set { flex-wrap: wrap; justify-content: center; }
  .trusted__set[aria-hidden="true"], .trusted__toggle { display: none; }
}

/* 10a. Refinement components (2026-10) --------------------------------------
   Proof (testimonial stack + recent sessions), video, agent network,
   ecosystem links, booking dialog. Shared round control button: .voices__btn. */

/* Round control buttons (carousel) */
.voices__btn { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--white); color: var(--ink); transition: background-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.voices__btn:hover { background: var(--ink); color: var(--white); }
.voices__btn:active { transform: scale(0.94); }
.voices__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.voices__btn--toggle .i-play { display: none; }
.voices__btn--toggle[aria-pressed="true"] .i-play { display: block; fill: currentColor; stroke: none; }
.voices__btn--toggle[aria-pressed="true"] .i-pause { display: none; }

/* Proof: a standalone showcase. The heading, then one horizontal track of quotes running the full
   width: the active card centred, its neighbours peeking in at either side, recent sessions below.
   The track is a native scroll-snap row (swipe, trackpad, scroll without JS); js/main.js §12 adds
   drag, buttons, keys and sets --d (0 centred, 1 one card away) on each card for the depth. */
/* The head is an editorial masthead on the 12-column grid: the label over a ruled line, the
   statement headline across nine columns, the standfirst set against its last line. */
.proof { overflow: hidden; background: var(--pink-tint); padding-block: var(--section); }
.proof__head { display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap); align-items: end; }
.proof__head .eyebrow { grid-column: 1 / -1; width: 100%; max-width: none; margin: 0; padding-bottom: 14px; border-bottom: 1.5px solid var(--ink); }
.proof__head h2 { grid-column: 1 / span 9; margin: clamp(20px, 2.6vw, 36px) 0 0; font-size: var(--fs-h2); line-height: var(--lh-display); letter-spacing: -0.06em; hyphens: none; text-wrap: initial; }
.proof__head > p { grid-column: 10 / -1; max-width: 30ch; margin: 0; padding-bottom: 0.5em; color: var(--muted); font-size: var(--fs-lead); line-height: 1.5; }
.proof__sessions:empty { display: none; }
.sessions { margin-top: clamp(40px, 5vw, 64px); }
.sessions__label { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.sessions__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: clamp(20px, 3vw, 40px); }
.sessions__item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 2px 16px; padding: 12px 0; border-top: 1px solid rgb(26 26 26 / 0.12); }
.sessions__item time { grid-row: span 2; padding-top: 2px; font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.sessions__item b { font-size: 15.5px; line-height: 1.35; letter-spacing: -0.01em; }
.sessions__item span { font-size: 14px; color: var(--muted); }

.voices { --card-w: min(720px, 62vw); --card-gap: clamp(16px, 2.2vw, 32px); position: relative; margin-top: clamp(36px, 4.4vw, 64px); }
.voices__track { position: relative; display: flex; align-items: stretch; gap: var(--card-gap); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 12px max(var(--gutter), calc((100% - var(--card-w)) / 2)); touch-action: pan-x pan-y; }
.voices__track::-webkit-scrollbar { display: none; }
.voices__track:focus-visible { outline: none; }
.voices__track:focus-visible .voice.is-active { outline: 3px solid var(--focus); outline-offset: 5px; }
.voice { flex: 0 0 var(--card-w); scroll-snap-align: center; scroll-snap-stop: always; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(28px, 4vw, 56px);
  min-height: clamp(280px, 26vw, 360px); margin: 0; padding: clamp(28px, 4vw, 56px); border-radius: 28px; background: var(--v-bg); color: var(--v-ink); }
.voice--pink { --v-bg: var(--pink); --v-ink: var(--ink); --v-mark: var(--ink); --v-sub: var(--ink); }
.voice--yellow { --v-bg: var(--yellow); --v-ink: var(--ink); --v-mark: var(--ink); --v-sub: var(--ink); }
.voice--white { --v-bg: var(--white); --v-ink: var(--ink); --v-mark: var(--pink); --v-sub: var(--muted); }
.voice blockquote { margin: 0; }
.voice blockquote p { max-width: 34ch; margin: 0; font-size: clamp(20px, 1.85vw, 27px); font-weight: 500; line-height: 1.42; letter-spacing: -0.02em; text-wrap: pretty; }
.voice blockquote p::before { content: "“"; display: block; height: 0.5em; margin-bottom: 0.3em; font-size: 2.6em; font-weight: 700; line-height: 1; color: var(--v-mark); }
.voice figcaption { display: grid; gap: 2px; }
.voice__name { font-size: 16px; font-weight: 700; }
.voice__role { font-size: 14px; color: var(--v-sub); }

/* The stack (js/main.js §12): every card in the same grid cell, so the stage is as tall as the
   longest quote and every card in the pile is the same size. data-depth places each one: 0 on top,
   1 and 2 tucked behind it (smaller, turned a little, their bottom edges showing), "far" hidden at
   the back. Moving between places glides; .is-out (the top card leaving for the back) and .is-in
   (the back card arriving on top) swing the card out to the right and over or under the pile. */
.voices.is-stack .voices__track { display: grid; grid-template-columns: minmax(0, var(--card-w)); justify-content: center; overflow: visible; scroll-snap-type: none; padding: 8px 0 56px; touch-action: pan-y; }
.voices.is-stack .voice { grid-area: 1 / 1; width: auto; position: relative; transform-origin: 50% 100%;
  box-shadow: 0 1px 2px rgb(26 26 26 / 0.06), 0 24px 56px -24px rgb(26 26 26 / 0.28);
  transition: transform 0.7s var(--ease-out), opacity 0.5s var(--ease-out); }
.voices.is-stack .voice[data-depth="1"] { transform: translate(-1.5%, 26px) rotate(-1.8deg) scale(0.96); }
.voices.is-stack .voice[data-depth="2"] { transform: translate(1.5%, 48px) rotate(1.6deg) scale(0.92); }
.voices.is-stack .voice[data-depth="far"] { transform: translateY(60px) scale(0.88); opacity: 0; visibility: hidden; transition: transform 0.7s var(--ease-out), opacity 0.5s var(--ease-out), visibility 0s 0.5s; }
.voices.is-stack .voice:not(.is-active) { pointer-events: none; }
/* --reveal: set by the drag, to fade the next quote up as the top card moves aside */
.voices.is-stack .voice:not(.is-active) > * { opacity: var(--reveal, 0); transition: opacity 0.3s; }
.voices.is-stack .is-dragging .voice > * { transition: none; }
.voices.is-stack .voice.is-out, .voices.is-stack .voice.is-in { visibility: visible; }
.voices.is-stack .voice.is-out > *, .voices.is-stack .voice.is-in > * { opacity: 1; }
.voices.is-stack .voice.is-out { animation: voice-out 0.8s var(--ease-out); }
.voices.is-stack .voice.is-in { animation: voice-in 0.7s var(--ease-out); }
@keyframes voice-out {
  0% { transform: none; opacity: 1; z-index: 50; }
  45% { transform: translate(62%, -6%) rotate(7deg); opacity: 1; z-index: 50; }
  55% { z-index: 0; }
  100% { z-index: 0; }
}
@keyframes voice-in {
  0% { transform: translate(62%, -6%) rotate(7deg); opacity: 0; z-index: 50; }
  40% { opacity: 1; }
  100% { z-index: 50; }
}
.voices.is-stack .voice.is-active { cursor: grab; }
.voices.is-stack .voices__track.is-dragging { cursor: grabbing; user-select: none; }
.voices.is-stack .voices__track.is-dragging .voice.is-active { cursor: grabbing; z-index: 60 !important; }
.voices.is-stack .voices__track:focus-visible .voice.is-active { outline: 3px solid var(--focus); outline-offset: 5px; }
/* Previous / count / next, under the pile. Hidden without JS (the row scrolls by itself then). */
.voices__nav { display: none; justify-content: center; align-items: center; gap: 14px; }
.voices.is-stack .voices__nav { display: flex; margin-top: clamp(20px, 2.4vw, 32px); }
.voices__count { min-width: 4.5ch; margin: 0; font-size: 14px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }

/* Home: the heading on the left, the stack on the right (one column on narrower screens) */
.proof__grid { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 13fr); column-gap: clamp(32px, 4vw, 72px); align-items: center; }
.proof__grid .proof__head { display: block; }
.proof__grid .proof__head .eyebrow { width: auto; padding-bottom: 0; border-bottom: 0; font-size: 14px; }
.proof__grid .proof__head h2 { margin-top: 20px; text-wrap: balance; }
.proof__grid .proof__head h2 br { display: none; }
.proof__grid .proof__head > p { max-width: 40ch; margin-top: 26px; padding: 0; }
.proof__grid .voices { --card-w: 100%; margin-top: 0; }
/* Wide cards: the quote runs the full width of the card, so even a long one stays short */
.proof__grid .voice { min-height: 0; gap: clamp(24px, 2.6vw, 36px); padding: clamp(28px, 3.2vw, 48px) clamp(28px, 3.6vw, 56px); }
.proof__grid .voices.is-stack .voice blockquote p { max-width: none; }
@media (max-width: 960px) {
  .proof__grid { grid-template-columns: minmax(0, 1fr); }
  .proof__grid .voices { margin-top: clamp(32px, 5vw, 48px); }
}


/* Video: a still with a play button; the player loads on press */
.section-head--compact { margin-bottom: 18px; }
.video { max-width: 1040px; }
.video__play { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border: 0; border-radius: var(--r-lg); background: var(--ink); cursor: pointer; }
.video__play img { width: 100%; height: 100%; object-fit: cover; transition: scale 900ms var(--ease-expo); }
.video__play:hover img { scale: 1.03; }
.video__badge { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px 10px 10px; translate: -50% -50%; border-radius: 999px; border: 1px solid var(--glass-edge); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); color: var(--ink); font-size: 15px; font-weight: 600; }
.video__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--yellow); }
.video__icon svg { width: 18px; height: 18px; margin-left: 2px; fill: var(--ink); }
.video__frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-lg); background: var(--ink); }
.video__note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }

/* Agent network: three agents → one coordinating workflow → a person approves */

.agents { margin: 0; }
.agents__canvas { position: relative; aspect-ratio: 600 / 360; padding: 0; border-radius: 24px; overflow: hidden; isolation: isolate;
  background: radial-gradient(60% 70% at 50% 50%, rgb(255 255 255 / 0.9), transparent 70%), linear-gradient(135deg, var(--paper) 0%, var(--yellow-pastel) 100%); }
.agents__canvas::before { content: ""; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(rgb(26 26 26 / 0.1) 1px, transparent 1.5px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%); mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%); }
.agents__wires { position: absolute; inset: 4% 3%; width: 94%; height: 92%; overflow: visible; }
.agents__wire { fill: none; stroke: rgb(26 26 26 / 0.28); stroke-width: 1.6; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.agents__wire--out { stroke: var(--ink); stroke-dasharray: none; stroke-width: 2; }
.agents__signal { fill: var(--ink); }
.agents__signal--out { fill: var(--yellow); stroke: var(--ink); stroke-width: 1.5; }
.agents__node, .agents__hub, .agents__human { position: absolute; display: flex; align-items: center; gap: 10px; border-radius: 14px; border: 1px solid var(--glass-edge); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); line-height: 1.25; }
.agents__node { left: 3%; width: 27%; min-width: 0; padding: 9px 10px; translate: 0 -50%; }
.agents__node:nth-of-type(1) { top: calc(4% + 92% * 64 / 360); }
.agents__node:nth-of-type(2) { top: 50%; }
.agents__node:nth-of-type(3) { top: calc(4% + 92% * 296 / 360); }
.agents__txt { display: grid; min-width: 0; }
.agents__node b, .agents__human b { font-size: 13.5px; letter-spacing: -0.01em; }
.agents__node small, .agents__human small, .agents__hub small { font-size: 11.5px; color: var(--muted); }
.agents__chip { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--chip); font-size: 11px; font-weight: 700; }
/* Three agents, one accent: full AI Yellow, a lighter yellow, then white outlined in yellow */
.agents__node--a { --chip: var(--yellow); }
.agents__node--b { --chip: var(--yellow-pastel); }
.agents__node--c { --chip: var(--white); }
.agents__node--c .agents__chip { box-shadow: inset 0 0 0 1.5px var(--yellow); }
.agents__hub { left: 50%; top: 50%; flex-direction: column; align-items: center; gap: 2px; width: 28%; padding: 16px 12px; translate: -50% -50%; text-align: center; border-radius: 20px; background: rgb(255 255 255 / 0.82); }
.agents__hub b { font-size: 15px; letter-spacing: -0.02em; }
.agents__hub small { font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 10.5px; }
.agents__pulse { position: absolute; z-index: -1; inset: -10px; border-radius: 26px; border: 1.5px solid rgb(251 197 34 / 0.6); }
.agents__human { right: 3%; top: 50%; width: 21%; padding: 9px 10px; translate: 0 -50%; background: var(--yellow); border-color: var(--yellow); }
.agents__human small { color: var(--ink); }
.agents__seal { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); }
.agents__seal svg { width: 15px; height: 15px; fill: none; stroke: var(--yellow); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.agents__cap { margin-top: 10px; font-size: 13px; color: var(--muted); }
@keyframes fw-pulse { 0% { opacity: 0.9; transform: scale(0.96); } 100% { opacity: 0; transform: scale(1.12); } }
.motion .agents.is-in .agents__pulse { animation: fw-pulse 2.4s var(--ease-out) infinite; }
.motion .agents .agents__node { animation: fw-slide-l 700ms var(--ease-out) calc(200ms + var(--n) * 120ms) both; }
.motion .agents .agents__hub { animation: fw-pop 700ms var(--ease-spring) 120ms both; }
.motion .agents .agents__human { animation: fw-slide-r 700ms var(--ease-out) 650ms both; }
/* Signals travel only with motion allowed */
html:not(.motion) .agents__signal { display: none; }

/* Booking (Calendly in a dialog, loaded on demand) */
.booking { margin-top: 20px; }
.booking__note { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.booking__dialog { width: min(960px, calc(100% - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--white); color: var(--ink); box-shadow: var(--float); }
.booking__dialog::backdrop { background: rgb(26 26 26 / 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.booking__dialog[open] { animation: modal-in 220ms var(--ease-out); }
.booking__head { display: flex; justify-content: space-between; align-items: center; padding: 10px 10px 10px 22px; border-bottom: 1px solid var(--line); }
.booking__head p { margin: 0; font-weight: 700; }
.booking__close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--stone-2); font-size: 24px; line-height: 1; }
.booking__frame { display: block; width: 100%; height: min(720px, calc(100vh - 110px)); border: 0; }

/* 11. About, FAQ, starter kit block, CTA ----------------------------------- */
.about { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; margin-bottom: clamp(32px, 4vw, 52px); }
.ecosystem__mission { margin: 20px 0 10px; font-family: var(--font-display); font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; max-width: 520px; }
.ecosystem__lede { color: var(--muted); max-width: 520px; margin: 0; font-size: var(--fs-lead); }
.founder { display: grid; grid-template-columns: minmax(0, 1fr) clamp(170px, 16vw, 230px); gap: clamp(20px, 2.5vw, 36px); align-items: center; padding: clamp(18px, 2vw, 24px) clamp(18px, 2vw, 24px) clamp(18px, 2vw, 24px) clamp(24px, 2.6vw, 36px); background: var(--pink-tint); border-radius: var(--r-lg); }
.founder__text { display: grid; justify-items: start; gap: 10px; }
.founder__label { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rose); }
.founder strong { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.035em; }
.founder p { margin: 0; font-size: 15px; color: var(--muted); max-width: 34ch; }
.founder__links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.founder__photo { overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 5; background: var(--pink); }
.founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.ecosystem__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ecosystem__list a { position: relative; display: block; padding-top: 18px; border-top: 2px solid var(--ink); }
.ecosystem__list a::after { content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 100%; background: var(--pink); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease-expo); }
.ecosystem__list a:hover::after, .ecosystem__list a:focus-visible::after { transform: scaleX(1); }
.ecosystem__list h3 { margin-bottom: 6px; font-size: 18px; }
.ecosystem__list p { margin: 0; font-size: 15px; color: var(--muted); }

.faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 88px); align-items: start; }
.faq__head { position: sticky; top: calc(var(--header-h) + 24px); }
.faq__head h2 { margin-top: 14px; font-size: var(--fs-h2); }
.faq__head h2:only-child { margin-top: 0; }
details { border-bottom: 1px solid var(--line); }
details:first-child { border-top: 1px solid var(--line); }
summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 62px; padding: 14px 0; list-style: none; cursor: pointer; font-size: 17px; font-weight: 500; transition: color var(--dur-fast); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--stone-2); font-size: 18px; font-weight: 400; transition: transform var(--dur) var(--ease-spring), background-color var(--dur-fast), color var(--dur-fast); }
details[open] summary::after { transform: rotate(45deg); background: var(--ink); color: var(--white); }
summary:hover { color: var(--rose); }
details p { max-width: 680px; margin: 0 0 20px; color: var(--muted); }

/* FAQ questions: each one a flat White card with a hairline edge instead of a ruled row. Open
   questions alternate Faith Pink and AI Yellow. */
.faq__items { display: grid; gap: 12px; }
.faq details, .faq details:first-child { border: 0; border-radius: var(--r-lg); background: var(--white); padding-inline: clamp(18px, 2.4vw, 28px); box-shadow: inset 0 0 0 1px var(--line); }
.faq details[open]:nth-child(odd) summary::after { background: var(--pink); color: var(--ink); }
.faq details[open]:nth-child(even) summary::after { background: var(--yellow); color: var(--ink); }

.resource { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 7vw, 96px); align-items: center; padding: clamp(28px, 4vw, 48px); background: var(--pink-tint); border-radius: 22px; }
.resource h2 + p { margin-top: 16px; max-width: 480px; font-size: var(--fs-lead); }
.resource .btn { margin-top: 6px; }
.resource .small { margin: 12px 0 0; }
/* Starter kit graphic: the hero's language (a white card resting on a tilted yellow one, small
   opposing angles, one float shadow), with the workflow around it: task → AI → kit → reviewed */
.kitart { position: relative; display: flex; justify-content: center; padding: 52px 52px 56px 124px; border-radius: var(--r-lg); background: radial-gradient(rgb(26 26 26 / 0.08) 1px, transparent 1.5px) 0 0 / 20px 20px, linear-gradient(150deg, var(--pink) 0%, rgb(239 172 186 / 0.7) 100%); }
.kitart__stack { position: relative; width: min(360px, 100%); }
.kitart__back { position: absolute; inset: -26px -30px 40px 44px; border-radius: 22px; border: 1px solid var(--glass-edge); background: rgb(250 248 244 / 0.5); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); rotate: 4deg; }
.kitart__doc { position: relative; padding: 20px 22px 12px; border-radius: var(--r); background: var(--white); color: var(--ink); rotate: -1.5deg; box-shadow: 0 24px 40px -18px rgb(26 26 26 / 0.4); }
.kitart__head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; }
.kitart__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--pink-tint); }
.kitart__icon svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kitart__tag { margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
.kitart__title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.kitart__list { list-style: none; margin: 0; padding: 0; }
.kitart__list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; font-weight: 500; }
.kitart__tick { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--pink); }
.kitart__tick svg { width: 12px; height: 12px; }
.kitart__tick path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kitart__node { position: absolute; display: grid; place-items: center; }
.kitart__node--task { left: -105px; top: 30px; width: 58px; height: 48px; border-radius: 12px; border: 1px solid var(--glass-edge); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); }
.kitart__node--task svg { width: 48px; height: 40px; fill: rgb(26 26 26 / 0.55); }
.kitart__node--ai { left: -104px; top: 130px; width: 56px; height: 56px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 4px rgb(255 255 255 / 0.7); }
.kitart__node--ai img { width: 26px; height: 26px; }
.kitart__node--ok { left: -103px; top: 236px; width: 54px; height: 46px; border-radius: 12px; background: var(--ink); box-shadow: 0 0 0 4px rgb(255 255 255 / 0.7); }
.kitart__node--ok svg { width: 22px; height: 22px; fill: none; stroke: var(--pink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* the workflow column: task → AI → reviewed, with the AI step feeding the kit */
.kitart__wire { position: absolute; left: -77px; top: 78px; height: 158px; border-left: 1.5px dashed rgb(26 26 26 / 0.45); }
.kitart__wire::after { content: ""; position: absolute; left: 0; top: 79px; width: 77px; border-top: 2px solid var(--ink); }

.cta { position: relative; overflow: hidden; padding: clamp(64px, 7vw, 96px) var(--gutter); background: var(--pink-tint); text-align: center; }
.cta__side { position: absolute; width: clamp(180px, 24vw, 340px); line-height: 0; }
.cta__side--left { top: 0; left: 0; }
.cta__side--right { right: 0; bottom: 0; }
.cta__side--right .cta__pattern { rotate: 180deg; }
.cta__pattern { width: 100%; height: auto; display: block; }
.cta__pattern path { fill: none; stroke: var(--pink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cta__pattern circle { fill: var(--pink); }
.cta__inner { position: relative; z-index: 1; max-width: 680px; margin-inline: auto; }
.cta__inner > p { font-size: var(--fs-lead); }
.cta .eyebrow { margin-inline: auto; }
.cta h2 { margin: 14px auto 16px; }
.cta--plain { background: var(--pink-tint); }
.cta--plain h2 { margin-top: 0; font-size: var(--fs-h2); }

/* 12. Inner-page components ------------------------------------------------ */
.journey-line { padding-block: 0; }
.journey-line__steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: -1px; border-radius: 0 0 var(--r-lg) var(--r-lg); overflow: hidden; }
.journey-line__steps li { padding: 18px 20px; background: var(--ink); color: var(--muted-dark); font-size: 15px; }
.journey-line__steps li + li { box-shadow: inset 1px 0 0 var(--line-dark); }
.journey-line__steps b { display: block; color: var(--yellow); font-size: 18px; }
.band-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-lg); background: var(--yellow); }
.band-cta--pink { background: var(--pink-tint); }
.band-cta p { margin: 8px 0 0; max-width: 60ch; }
.band-cta .actions { margin: 0; }

/* Four steps as ruled editorial columns (no boxes): a numeral, the step, one line of detail */
.approach { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; border-top: 1px solid var(--line-dark); }
.approach li { counter-increment: s; padding: 24px clamp(8px, 1.4vw, 24px) 0 0; }
.approach li + li { padding-left: clamp(16px, 1.6vw, 24px); border-left: 1px solid var(--line-dark); }
.approach li::before { content: counter(s, decimal-leading-zero); display: block; margin-bottom: clamp(28px, 3.4vw, 52px); font-family: var(--font-display); font-size: clamp(36px, 3.4vw, 52px); font-weight: 700; line-height: 1; letter-spacing: -0.05em; color: var(--yellow); }
.approach h3 { font-size: clamp(19px, 1.5vw, 22px); margin-bottom: 10px; }
.approach p { margin: 0; color: var(--muted-dark); }
.scopes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.scope { padding: 26px; border-radius: var(--r-lg); background: var(--stone-2); }
.scope--pink { background: var(--pink-tint); }
.scope--yellow { background: var(--yellow-tint); }
.scope h3 { font-size: 22px; margin-bottom: 14px; }
.scope dl { margin: 0; display: grid; gap: 12px; }
.scope dt { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.scope dd { margin: 2px 0 0; }
.scopes__note { margin: 18px 0 0; }
.mini-steps { list-style: none; counter-reset: m; display: grid; gap: 8px; margin: 18px 0; }
.mini-steps li { counter-increment: m; display: flex; align-items: center; gap: 12px; font-weight: 500; }
.mini-steps li::before { content: counter(m); display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--pink); color: var(--ink); font-size: 13px; font-weight: 700; }
/* filled, alternating Faith Pink and AI Yellow with Charcoal numbers (as .bw-learn .numbered) */
.mini-steps li:nth-child(even)::before { background: var(--yellow); }
.formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.formats__item { padding: clamp(24px, 2.6vw, 34px); border-radius: var(--r-lg); background: var(--f-bg); }
.formats__item--pink { --f-bg: var(--pink); }
.formats__item--yellow { --f-bg: var(--yellow); }
.formats__item--stone { --f-bg: var(--stone); }
.formats__item h3 { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -0.04em; margin-bottom: 10px; }
.formats__item p { margin: 0; }
.topics { list-style: none; display: grid; gap: 0; }
.topics li { padding: 18px 0; border-bottom: 1px solid rgb(26 26 26 / 0.14); }
.topics li:first-child { padding-top: 0; }
.topics h3 { font-size: 20px; margin-bottom: 4px; }
.topics p { margin: 0; color: var(--muted); }
.partner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.partner h2 { margin-top: 0; margin-bottom: 16px; }
.partner figure { overflow: hidden; border-radius: var(--r-lg); }
.partner img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 100% 50%; }

/* About (redesign 2026-10-20). Founder-led editorial page: name-led hero beside the studio
   portrait, a long-form story with a ruled record of achievements, the mission in Faith's words,
   speaking topics, and the ecosystem as one lead panel with four brands beside it. Accent: Faith Pink for
   the founder/human sections; AI Yellow stays with the "where Faith Works teaches" band. */
/* Founder hero: Soft Charcoal ground; the portrait is a full-bleed editorial column that runs
   the section's full height and meets the viewport's right edge. The copy keeps the page edge. */
.ahero { background: var(--ink); color: var(--white); overflow: hidden; }
.ahero__grid { display: grid; grid-template-columns: var(--edge) minmax(0, 1fr) 44%; min-height: min(880px, calc(100svh - var(--header-h))); }
.ahero__copy { grid-column: 2; align-self: end; padding: clamp(48px, 6vw, 96px) clamp(36px, 6vw, 112px) var(--section) 0; }
.ahero .eyebrow { flex-wrap: wrap; gap: 4px 9px; color: var(--white); }
.ahero__label { color: var(--yellow); }
.ahero__tagline { color: var(--pink); }
.ahero h1 { margin: 22px 0 0; font-size: clamp(54px, 8.2vw, 128px); line-height: 0.92; letter-spacing: -0.06em; hyphens: none; color: var(--white); }
/* Roles as pills, alternating Faith Pink and AI Yellow, Charcoal text on both */
.ahero__roles { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; max-width: 100%; margin: 30px 0 0; padding: 0; font-family: var(--font-display); font-size: clamp(14px, 1.2vw, 17px); font-weight: 600; letter-spacing: -0.01em; }
.ahero__roles li { padding: 7px 16px; border-radius: 999px; background: var(--pink); color: var(--ink); line-height: 1.3; }
.ahero__roles li:nth-child(even) { background: var(--yellow); }
.ahero__lead { max-width: 50ch; margin: 26px 0 0; font-size: var(--fs-lead); color: var(--muted-dark); }
.ahero .actions { margin-bottom: 0; }
/* Buttons inverted for the charcoal ground: White primary, White-outlined secondary */
.ahero .btn { border-color: var(--white); background: var(--white); color: var(--ink); }
.ahero .btn--light { background: transparent; color: var(--white); }
.ahero .btn--light:hover { background: var(--white); color: var(--ink); }
.ahero__photo { grid-column: 3; position: relative; margin: 0; min-height: 100%; background: var(--ink-2); }
.ahero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The story and its sticky heading share one block, so the heading stops before the record */
.bio { display: grid; gap: clamp(48px, 6vw, 88px); }
.bio__main { display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap); }
.bio__main > .bio__head { grid-column: 1 / span 5; }
.bio__main > .bio__body { grid-column: 6 / -1; }
.bio__head { align-self: start; position: sticky; top: calc(var(--header-h) + 32px); }
.bio__head h2 { max-width: 18ch; font-size: clamp(28px, 2.9vw, 42px); }
.bio__body { max-width: 66ch; }
.bio__body p { font-size: 17px; color: var(--muted); }
.bio__body .bio__lead { margin-bottom: 1.1em; font-family: var(--font-display); font-size: clamp(20px, 1.75vw, 25px); font-weight: 500; line-height: 1.4; letter-spacing: -0.02em; color: var(--ink); }
.bio__body .bio__label, .bio__label { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
/* Record + credential: the four stat cards (For Professionals .pro-stat) beside the featured
   executive-education card, a Charcoal panel with the tech grid and one Faith Pink glow */
.bio__proof { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 12px; align-items: stretch; }
.edu { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-lg); background: var(--ink); color: var(--white); }
.edu::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 48 0 L 0 0 0 48' fill='none' stroke='rgb(255 255 255 / 0.05)' stroke-width='1'/%3E%3Cpath d='M -4 0 L 4 0 M 0 -4 L 0 4' fill='none' stroke='rgb(255 255 255 / 0.14)' stroke-width='1'/%3E%3C/svg%3E"),
    radial-gradient(circle at 100% 0%, rgb(239 172 186 / 0.32) 0%, transparent 55%);
  -webkit-mask: linear-gradient(200deg, #000 30%, transparent 85%); mask: linear-gradient(200deg, #000 30%, transparent 85%); }
.edu .edu__label { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--white); }
.edu__label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); }
.edu__title { max-width: 16ch; margin: 0 0 clamp(12px, 2vw, 28px); font-size: clamp(26px, 2.5vw, 38px); line-height: 1.12; letter-spacing: -0.035em; }
.edu__schools { display: grid; gap: 10px; margin-top: auto; list-style: none; }
.edu__school { display: grid; grid-template-columns: clamp(104px, 9vw, 132px) minmax(0, 1fr); grid-template-areas: "logo name"; align-items: center; column-gap: 20px; padding: 10px 18px 10px 10px; border-radius: var(--r); background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); transition: background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.edu__name { grid-area: name; font-family: var(--font-display); font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; line-height: 1.3; text-decoration: underline transparent 1px; text-underline-offset: 3px; transition: text-decoration-color var(--dur-fast) var(--ease-out); }
.edu__logo { grid-area: logo; display: grid; place-items: center; height: clamp(72px, 6.4vw, 88px); padding: 8px 10px; border-radius: var(--r-sm); background: var(--white); transition: transform var(--dur) var(--ease-expo), box-shadow var(--dur) var(--ease-out); }
.edu__logo img { width: 100%; height: 100%; object-fit: contain; }
.edu__school:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.edu__school:focus-visible .edu__logo { transform: scale(1.05); box-shadow: 0 0 0 3px rgb(239 172 186 / 0.55), 0 14px 30px -12px rgb(239 172 186 / 0.6); }
.edu__school:focus-visible .edu__name { text-decoration-color: currentColor; }
@media (hover: hover) {
  .edu__school:hover { background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(239 172 186 / 0.45); }
  .edu__school:hover .edu__logo { transform: scale(1.05); box-shadow: 0 0 0 3px rgb(239 172 186 / 0.55), 0 14px 30px -12px rgb(239 172 186 / 0.6); }
  .edu__school:hover .edu__name { text-decoration-color: currentColor; }
}
@media (prefers-reduced-motion: reduce) {
  .edu__school, .edu__logo, .edu__name { transition: none; }
  .edu__school:hover .edu__logo, .edu__school:focus-visible .edu__logo { transform: none; }
}

.mission { background: var(--pink); }
/* Single editorial column: label, statement, attribution, then the vision under a hairline. */
.mission__grid { display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 2.4vw, 32px); }
.mission__grid > * { width: 100%; max-width: 920px; }
.mission .eyebrow { width: 100%; max-width: 920px; margin: 0; }
.mission__quote { margin: 0; }
.mission__quote::before { content: "\201C"; display: block; height: 0.42em; font-family: var(--font-display); font-size: clamp(96px, 9vw, 150px); font-weight: 700; line-height: 0.9; color: var(--white); }
.mission__quote p { max-width: 24ch; margin: 0; font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 54px); font-weight: 600; line-height: 1.14; letter-spacing: -0.04em; text-wrap: pretty; }
.mission__quote mark { padding: 0 0.08em; margin: 0 -0.02em; background: linear-gradient(transparent 56%, var(--yellow) 56%, var(--yellow) 94%, transparent 94%); color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mission__quote cite { display: block; margin-top: 28px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.mission__vision { margin-top: clamp(8px, 1.6vw, 24px); padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid rgba(26, 26, 26, 0.35); }
.mission__vision p:last-child { max-width: 30ch; margin: 0; font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; line-height: 1.2; letter-spacing: -0.03em; text-wrap: balance; }

.talks { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(32px, 6vw, 104px); align-items: center; }
.talks__photo { overflow: hidden; border-radius: var(--r-lg); background: var(--stone); }
.talks__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; }
.talks h2 { max-width: 17ch; }
.talks__lead { max-width: 58ch; margin: 18px 0 0; font-size: var(--fs-lead); color: var(--muted); }
.talks__lead b { color: var(--ink); }
.talks__topics { list-style: none; counter-reset: topic; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px); margin: 32px 0 36px; }
.talks__topics li { counter-increment: topic; display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; }
.talks__topics li::before { content: counter(topic, decimal-leading-zero); flex: none; font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Ecosystem (2026-10-27): one mission, five brands. Faith Works leads as a tall Charcoal panel
   with its reversed wordmark; Faith AI and Faith Studio, then Faith Talks and Faith Works
   Community, sit beside it in two staggered rows, on the shared Pink & Yellow textured band
   (.band--gradient-textured). The cards are flat White: no shadows, glass or numbers.
   Accent: Faith Pink. */
/* The five brand cards page through the card pager (.pro-pains): three to a view on desktop,
   two on tablets, one on phones */
.pro-pains.eco5-pager { --per: 3; }
.eco5__item { --act-mark: var(--pink); position: relative; flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.2vw, 32px); border: 1px solid transparent; border-radius: var(--r-lg); background: var(--white); color: var(--ink); transition: border-color var(--dur) var(--ease-out); }
/* Action word, with a Faith Pink highlighter that fills on hover and focus */
.eco5__act { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.eco5__word { display: inline-block; padding: 3px 7px; margin-left: -7px; border-radius: 4px; background: linear-gradient(var(--act-mark), var(--act-mark)) left / 0 100% no-repeat; transition: background-size 500ms var(--ease-out), color 500ms var(--ease-out); }
/* The logos lead each card; in a narrow card the mark scales down whole rather than squashing */
.eco5__brand { height: 54px; margin: 0; line-height: 0; }
.eco5__brand .brandmark { object-fit: contain; object-position: left center; }
.eco5__brand--talks { height: 50px; }
.eco5__brand--community { height: 76px; }
.eco5__brand--studio { height: 54px; }
.eco5__desc { max-width: 52ch; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.eco5__link { align-self: flex-start; margin-top: auto; padding-top: 6px; }
.eco5__link::after { transform-origin: left; }
/* Hover and keyboard focus: the action word is marked, the card's edge firms up, the link's rule redraws */
.eco5__item:is(:hover, :focus-within) .eco5__word { background-size: 100% 100%; color: var(--ink); }
.eco5__item:is(:hover, :focus-within) { border-color: var(--pink); }
@media (hover: hover) {
  .eco5__item:hover .eco5__link::after { animation: eco5-rule 600ms var(--ease-out); }
}
@keyframes eco5-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.eco__note { margin: 20px 0 0; max-width: 80ch; }
@media (max-width: 1100px) {
  .pro-pains.eco5-pager { --per: 2; }
}
@media (max-width: 640px) {
  .pro-pains.eco5-pager { --per: 1; --gap: 12px; }
  .eco5__brand, .eco5__brand--studio { height: 44px; }
  .eco5__brand--talks { height: 42px; }
  .eco5__item--community .eco5__brand { height: 62px; }
}
/* The sessions list sits in a narrow column here: one session per row keeps titles readable */
.creds .sessions { margin-top: 32px; }
.creds .sessions__list { grid-template-columns: minmax(0, 1fr); }
/* About, Our approach on Works White: heading left, intro right, the stage cards below */
.approach-band { background: var(--paper); }
.approach__intro { display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap); row-gap: 20px; align-items: end; margin-bottom: clamp(40px, 4.6vw, 72px); }
.approach__intro > div:first-child { grid-column: 1 / span 6; }
.approach__intro > div:last-child { grid-column: 7 / -1; }
.approach-band .approach__intro .eyebrow { margin: 0 0 18px; }
.approach-band h2 { margin: 0; letter-spacing: -0.03em; line-height: 1.04; }
.approach-band .split__lead { margin-top: 0; }
.approach-band .approach__intro p:last-child { margin: 14px 0 0; }
@media (max-width: 900px) { .approach__intro > div:first-child, .approach__intro > div:last-child { grid-column: 1 / -1; } }
/* About: where Faith Works teaches. Copy and recent sessions beside an editorial set: the event
   poster upright, two session photos stacked beside it, captions on glass. */
.creds { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.creds__copy h2 { margin: 14px 0 12px; }
.creds__lede { max-width: 42ch; margin: 0; color: var(--muted); }
.creds__person { margin-top: 24px; padding: 16px 18px; border-radius: var(--r); background: var(--white); }
.creds__person p { margin: 0; }
.creds__label { margin-bottom: 4px !important; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.creds__media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 14px; }
.creds__media figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--stone); box-shadow: 0 30px 60px -36px rgb(26 26 26 / 0.45); }
.creds__media img { width: 100%; height: 100%; object-fit: cover; }
.creds__poster { grid-row: span 2; rotate: -1.5deg; }
.creds__photo--a { align-self: end; aspect-ratio: 4 / 3; rotate: 1.5deg; }
.creds__photo--b { aspect-ratio: 4 / 3; }
.creds__media figcaption { position: absolute; left: 10px; bottom: 10px; right: 10px; width: fit-content; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--glass-edge); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.motion .creds__media figure { animation: fw-rise 800ms var(--ease-out) both; }
.motion .creds__photo--a { animation-delay: 120ms !important; }
.motion .creds__photo--b { animation-delay: 240ms !important; }
/* Two ruled editorial columns, then the house rules as the one solid block */
.contact { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.contact__h { margin-top: 32px; }
.contact__form { padding: clamp(22px, 3vw, 36px); border-radius: var(--r-lg); background: var(--pink-tint); }
.contact__form > h2 { margin-bottom: 16px; }
.routes-list { list-style: none; display: grid; gap: 8px; margin-top: 14px; }
.routes-list a { display: grid; gap: 2px; padding: 14px 18px; border-radius: var(--r); background: var(--stone-2); transition: background-color var(--dur-fast); }
.routes-list a:hover { background: var(--stone); }
.routes-list b::after { content: ""; display: inline-block; width: 0.95em; height: 0.95em; margin-left: 6px; vertical-align: -0.1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%2017%2017%207M8%207h9v9'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%2017%2017%207M8%207h9v9'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.routes-list span { font-size: var(--fs-small); color: var(--muted); }
.routes-list--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.social { list-style: none; display: grid; gap: 0; }

/* Program, event and resource page templates, testimonial cards and article typography: section 21. */

/* 15. Forms ---------------------------------------------------------------- */
.formblock { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.formblock__intro h2 { margin-top: 0; }
.formblock__intro > p { margin-top: 14px; max-width: 46ch; font-size: var(--fs-lead); }
/* The intro stays in view while the taller form beside it scrolls past */
.formblock__intro, .contact__side { position: sticky; top: calc(var(--header-h) + 32px); }
.formblock .form { padding: clamp(22px, 3vw, 36px); border-radius: var(--r-lg); background: var(--white); }
.form--ghl { position: relative; width: 100%; display: block; overflow: hidden; }
.form--ghl iframe { display: block; width: 100%; border: none; background: transparent; }
.kit-card .form--ghl { padding: 0; background: transparent; box-shadow: none; }
.form__note { margin: 0 0 16px; font-size: var(--fs-small); color: var(--muted); }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.field { grid-column: 1 / -1; display: grid; gap: 6px; align-content: start; }
.field--half { grid-column: span 1; }
.field label { font-size: var(--fs-small); font-weight: 600; }
.opt { font-weight: 400; color: var(--muted); }
.field__hint { margin: 0; font-size: 13px; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 11px 13px; border: 1.5px solid #B5B3AF; border-radius: var(--r-sm); background: var(--white); font-size: 16px; line-height: 1.4; }
.field textarea { resize: vertical; min-height: 96px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field [aria-invalid="true"] { border-color: var(--error); background: var(--white); }
.field__error { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--error); }
.field__error::before { content: "! "; }
.check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 18px; font-size: 15px; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ink); }
.check label { cursor: pointer; }
.form__privacy { margin: 16px 0; font-size: var(--fs-small); color: var(--muted); }
.form__privacy a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); font-weight: 600; }
.form__submit { margin-top: 4px; }
.form[aria-busy="true"] .form__submit { cursor: progress; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__summary { margin-bottom: 16px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--white); border-left: 4px solid var(--error); box-shadow: inset 0 0 0 1.5px var(--error); font-size: var(--fs-small); }
.form__summary p { margin: 0 0 6px; }
.form__summary ul { padding-left: 18px; }
.form__summary a { color: var(--error); text-decoration: underline; font-weight: 600; }
.form__status:empty { display: none; }
.form__status { margin-top: 16px; padding: 14px 16px; border-radius: var(--r-sm); font-size: var(--fs-small); }
.form__status p { margin: 0 0 6px; }
.form__status p:last-child { margin: 0; }
.form__status--preview { background: var(--yellow); border-left: 4px solid var(--ink); }
.form__status--preview details { border: 0; margin: 6px 0; }
.form__status--preview summary { min-height: 40px; padding: 4px 0; font-size: var(--fs-small); font-weight: 600; }
.form__status--preview summary::after { width: 26px; height: 26px; background: var(--white); }
.form__status--preview ul { padding-left: 18px; word-break: break-word; }
.form__status--busy { background: var(--stone-2); }
.form__status--error { background: var(--white); border-left: 4px solid var(--error); box-shadow: inset 0 0 0 1.5px var(--error); }
.form__status--success { background: var(--white); border-left: 4px solid var(--success); box-shadow: inset 0 0 0 1.5px var(--success); }
.form__status--success h3 { font-size: 18px; margin-bottom: 6px; }
.form.is-done .form__grid, .form.is-done .check, .form.is-done .form__privacy, .form.is-done .form__submit, .form.is-done .form__note { display: none; }

/* 16. Starter kit funnel --------------------------------------------------- */
.kit-hero { padding-block: clamp(32px, 4.5vw, 64px); background: var(--pink-tint); }
.kit-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); grid-template-areas: "copy card" "preview card"; gap: 28px clamp(28px, 5vw, 72px); align-items: start; }
.kit-hero__copy { grid-area: copy; }
.kit-hero__copy .notice { margin-bottom: 20px; }
.kit-hero__eyebrow { margin: 0 0 14px; font-size: var(--fs-small); font-weight: 600; color: var(--rose); }
.kit-hero h1 { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.05; letter-spacing: -0.05em; max-width: 18ch; }
.kit-hero__benefits { margin-top: 24px; }
.kit-hero__benefits li::before { background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 6.2 5 8.4 9.3 3.8' fill='none' stroke='%231A1A1A' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.kit-hero__benefits li:nth-child(even)::before { background-color: var(--yellow); }
.kit-hero__hl { padding: 0 0.04em; margin: 0 -0.04em; background: linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 88%, transparent 88%); color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.kit-card { grid-area: card; position: sticky; top: 24px; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--float); }
.kit-card h2 { margin: 0 0 14px; font-size: clamp(24px, 2.2vw, 30px); }
.kit-card__reassure { margin: 14px 0 0; font-size: var(--fs-small); font-weight: 600; text-align: center; }
.kit-preview { grid-area: preview; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 16px; align-items: end; }
.kit-preview__cover { position: relative; aspect-ratio: 3 / 4; padding: 18px; border-radius: 10px; background: var(--yellow); overflow: hidden; rotate: -2deg; box-shadow: var(--float); }
/* the wordmark sits on a white tab: its yellow [ai] block would vanish on the yellow cover */
.kit-preview__brand { display: block; width: 104px; height: auto; margin: 0; padding: 5px 8px; box-sizing: content-box; border-radius: 6px; background: var(--white); }
.kit-preview__title { margin: 14px 0 6px; font-size: clamp(18px, 1.8vw, 24px); font-weight: 700; line-height: 1.1; letter-spacing: -0.04em; }
.kit-preview__sub { margin: 0; font-size: 12px; line-height: 1.45; }
.kit-preview__arrow { position: absolute; right: 10px; bottom: -6px; font-size: 80px; line-height: 1; rotate: -8deg; }
.kit-preview__page { padding: 16px; border-radius: 10px; background: var(--white); box-shadow: var(--float); }
.kit-preview__page-title { margin: 0 0 10px; font-weight: 700; }
.kit-preview__page table { width: 100%; border-collapse: collapse; font-size: 12px; }
.kit-preview__page th { padding: 6px; background: var(--ink); color: var(--white); text-align: left; font-weight: 600; }
.kit-preview__page td { padding: 7px 6px; border-bottom: 1px solid var(--line); }
.kit-preview__page td:nth-child(n+2):not(:last-child) { color: var(--rose-dot); letter-spacing: 1px; }
@media (max-width: 400px) {
  .kit-preview__page { padding: 12px; }
  .kit-preview__page table { font-size: 11px; }
  .kit-preview__page th, .kit-preview__page td { padding: 6px 4px; }
  .kit-preview__page th { font-size: 10px; letter-spacing: -0.01em; }
}
.kit-preview__note { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
/* Kit contents as a ruled index: numeral, title, one line, hairlines between */
.inside { list-style: none; counter-reset: i; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); column-gap: var(--col-gap); border-top: 1.5px solid var(--ink); }
.inside li { counter-increment: i; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-content: start; padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.inside li > * { grid-column: 2; }
.inside li::before { content: counter(i, decimal-leading-zero); grid-column: 1; grid-row: 1 / span 2; padding-top: 3px; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.inside h3 { font-size: 18px; margin-bottom: 6px; }
.inside p { margin: 0; color: var(--muted); }
/* Privacy on the landing page itself, before the form */
.kit-privacy { display: flex; gap: 14px; max-width: 560px; margin-top: 28px; padding: 16px 18px; border-radius: var(--r); border: 1px solid var(--glass-edge); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.kit-privacy__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--pink); }
.kit-privacy__icon svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.kit-privacy h2 { margin: 0 0 4px; font-size: 16px; letter-spacing: -0.01em; }
.kit-privacy p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.kit-privacy .text-link { min-height: 36px; font-size: 14px; }
/* Created by Faith Works PH: a light Faith Pink band, the founder's portrait on the left; who she is,
   then photos from recent sessions and the way into the events page, on the right */
.kit-by { background: #FCE8ED; color: var(--ink); }
.kit-by__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-areas: "photo copy" "photo events"; column-gap: clamp(32px, 6vw, 104px); align-items: center; }
.kit-by__photo { grid-area: photo; align-self: stretch; position: relative; min-height: 520px; margin: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--pink-tint); }
.kit-by__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kit-by__copy { grid-area: copy; align-self: end; max-width: 680px; }
.kit-by__copy h2 { margin: 0; max-width: 13ch; }
.kit-by__lead { margin: clamp(20px, 2vw, 28px) 0 0; font-size: var(--fs-lead); line-height: 1.55; }
.kit-by__more { margin: 14px 0 0; font-size: 16px; line-height: 1.6; }
.kit-by__events { grid-area: events; align-self: start; display: grid; justify-items: start; gap: 16px; max-width: 680px; margin-top: clamp(28px, 3.4vw, 44px); padding-top: clamp(20px, 2vw, 28px); border-top: 1px solid rgb(26 26 26 / 0.16); }
.kit-by__events .sessions__label { margin: 0; }
.kit-by__events .btn { margin-top: 8px; }
/* Session photos: a card pager (js/main.js §17), two photos a view, Previous/Next over the photos */
.kit-by__gallery { position: relative; width: 100%; }
.kit-by__photos { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 12px) / 2); gap: 12px; margin: 0; padding: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r-lg); }
.kit-by__photos::-webkit-scrollbar { display: none; }
.kit-by__photos:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.kit-by__photos li { height: clamp(180px, 16vw, 240px); overflow: hidden; border-radius: var(--r-lg); background: var(--stone); scroll-snap-align: start; }
.kit-by__photos img { width: 100%; height: 100%; object-fit: cover; }
.kit-by__nav { position: absolute; top: 50%; z-index: 1; translate: 0 -50%; border-color: var(--white); box-shadow: 0 4px 14px rgb(26 26 26 / 0.18); }
.kit-by__nav--prev { left: 12px; }
.kit-by__nav--next { right: 12px; }
.kit-by__nav[aria-disabled="true"] { opacity: 0; pointer-events: none; }
.thanks { padding-block: clamp(56px, 8vw, 120px); background: var(--pink-tint); }
.thanks__copy { max-width: 760px; }
.thanks__check { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 0 22px; border-radius: 50%; background: var(--ink); }
.thanks__check svg { width: 32px; height: 32px; fill: none; stroke: var(--yellow); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.thanks h1 { font-size: var(--fs-page-h1); line-height: 1.05; letter-spacing: -0.05em; }
.thanks__next { margin-top: 40px; }

/* 17. Legal, 404 ----------------------------------------------------------- */
.legal { max-width: 820px; padding-block: clamp(40px, 5vw, 72px) var(--section); }
.legal__head h1 { font-size: clamp(36px, 4vw, 52px); letter-spacing: -0.045em; margin-bottom: 20px; }
.legal__meta { margin: 14px 0 0; font-size: var(--fs-small); color: var(--muted); }
.legal h2 { margin: 36px 0 10px; font-size: 24px; letter-spacing: -0.03em; }
.legal ul { padding-left: 22px; display: grid; gap: 8px; margin-bottom: 1em; }
.notfound { padding-block: clamp(56px, 8vw, 120px); }
.notfound__code { margin: 0; font-size: clamp(80px, 12vw, 180px); font-weight: 700; line-height: 0.9; letter-spacing: -0.06em; color: var(--pink); }
.notfound h1 { font-size: var(--fs-page-h1); letter-spacing: -0.05em; margin-top: 12px; }
.notfound .routes-list { margin-top: 32px; }

/* 18. Motion --------------------------------------------------------------
   Runs only with html.motion (set before paint when JS runs and reduced motion
   is off). One entrance per block, triggered once in view; interactive panels
   play a short sequence when the visitor changes them. No looping decoration. */
@keyframes fw-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fw-line { from { transform: translateY(108%); } to { transform: none; } }
@keyframes fw-wipe-r { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fw-wipe-l { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes fw-badge { from { opacity: 0; transform: translateX(-8px); clip-path: inset(0 100% 0 0 round 5px); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 5px); } }
@keyframes fw-wipe-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fw-pop { 0% { opacity: 0; transform: scale(0.7); } 70% { opacity: 1; transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }
@keyframes fw-slide-l { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes fw-slide-r { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes fw-draw { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
@keyframes fw-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fw-blink { 50% { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; } to { opacity: 1; } }

.motion [data-reveal]:not(.is-in) *, .motion [data-reveal]:not(.is-in) *::before, .motion [data-reveal]:not(.is-in) *::after,
.motion [data-reveal]:not(.is-in), .motion .is-off *, .motion .is-off *::before, .motion .is-off *::after { animation-play-state: paused !important; }

.motion [data-draw] path { stroke-dasharray: 1 1.02; animation: fw-draw 1300ms var(--ease-io) calc(var(--draw-delay, 0ms) + var(--i, 0) * 110ms) both; }
[data-draw] circle { transform-box: fill-box; transform-origin: center; }
.motion [data-draw] circle { animation: fw-pop 500ms var(--ease-out) calc(var(--draw-delay, 0ms) + 700ms + var(--n, 0) * 100ms) both; }

/* Section heads: label wipes, heading lines rise out of their masks, then the copy */
.motion .section-head .eyebrow, .motion .journey__intro > .eyebrow, .motion .faq__head .eyebrow, .motion .resource .eyebrow, .motion .business__copy .eyebrow, .motion .about__lead > .eyebrow, .motion .cta .eyebrow { animation: fw-badge 650ms var(--ease-expo) both; }
.motion [data-split] .line > span { animation: fw-line 900ms var(--ease-expo) calc(120ms + var(--l, 0) * 90ms) both; }
.motion .section-head > p, .motion .business__copy > p, .motion .business__copy .actions, .motion .resource > div:first-child > p, .motion .resource .btn, .motion .ecosystem__mission, .motion .ecosystem__lede, .motion .founder, .motion .cta__inner > p, .motion .cta__inner .actions, .motion .steps { animation: fw-rise 800ms var(--ease-out) 320ms both; }
.motion .phero__copy[data-reveal] > *, .motion .ahero [data-reveal] > * { animation: fw-rise 700ms var(--ease-out) both; }
.motion .phero__copy[data-reveal] > :nth-child(2), .motion .ahero [data-reveal] > :nth-child(2) { animation-delay: 80ms; }
.motion .phero__copy[data-reveal] > :nth-child(3), .motion .ahero [data-reveal] > :nth-child(3) { animation-delay: 160ms; }
.motion .phero__copy[data-reveal] > :nth-child(n+4) { animation-delay: 240ms; }

/* Hero: one orchestrated entrance, then still */
.motion .hero__eyebrow { animation: fw-wipe-r 700ms var(--ease-expo) 60ms both; }
.motion .hero h1 .line > span { animation: fw-line 1000ms var(--ease-expo) both; }
.motion .hero h1 > .line:nth-child(1) > span { animation-delay: 120ms; }
.motion .hero h1 > .line:nth-child(2) > span { animation-delay: 220ms; }
.motion .hero h1 em::after { animation: fw-grow-x 700ms var(--ease-expo) 700ms both; }
.motion .hero__intro { animation: fw-rise 800ms var(--ease-out) 400ms both; }
.motion .hero__actions { animation: fw-rise 800ms var(--ease-out) 480ms both; }
.motion .hero__small { animation: fw-fade 800ms var(--ease-out) 560ms both; }
.motion .hweb { animation: fw-rise 900ms var(--ease-out) 640ms both; }
.motion .hero__wires { animation: fw-fade 1200ms var(--ease-out) 900ms both; }
.motion .hweb__pulse { visibility: visible; stroke-dasharray: 0.08 1.2; stroke-dashoffset: 0.08; animation: hweb-pulse 6.5s var(--ease-io) var(--delay, 1.6s) infinite; }
@keyframes hweb-pulse { 0% { stroke-dashoffset: 0.08; } 38%, 100% { stroke-dashoffset: -1; } }

/* Make it concrete: replays when the visitor picks a task */
.motion .flow__tabs { animation: fw-rise 700ms var(--ease-out) 100ms both; }
.motion .flow__cards .fcard { animation: fw-rise 700ms var(--ease-out) 180ms both; }
.motion .flow__cards .fcard--ai { animation-delay: 270ms; }
.motion .flow__cards .fcard--review { animation-delay: 360ms; }
.motion .is-playing .fpills li { animation: fw-fade 400ms var(--ease-out) calc(120ms + var(--c, 0) * 90ms) both; }
.motion .is-playing .fdraft__bar span { animation: fw-grow-x 900ms var(--ease-io) 250ms both; }
.motion .is-playing .fout__rows li::before { animation: fw-pop 420ms var(--ease-spring) calc(500ms + var(--c, 0) * 110ms) both; }
.motion .is-playing .fout__seal { animation: fw-pop 500ms var(--ease-spring) 850ms both; }

/* Journey scenes: each plays a short sequence when chosen */
.motion .scene.is-active .scene__art { animation: fw-fade 500ms var(--ease-out) both; }
.motion .scene.is-active .scene__copy > * { animation: fw-rise 500ms var(--ease-out) both; }
.motion .scene.is-active .scene__copy > :nth-child(2) { animation-delay: 70ms; }
.motion .scene.is-active .scene__copy > :nth-child(3) { animation-delay: 140ms; }
.motion .scene [data-draw] { --draw-delay: 200ms; }
.motion .scene--learn.is-active .learn__note { animation: fw-wipe-r 600ms var(--ease-expo) calc(200ms + var(--n) * 140ms) both; }
.motion .scene--learn.is-active .learn__assistant { animation: fw-slide-r 600ms var(--ease-out) 400ms both; }
.motion .scene--apply.is-active .apply__doc--in { animation: fw-slide-l 600ms var(--ease-out) 150ms both; }
.motion .scene--apply.is-active .apply__core { animation: fw-pop 600ms var(--ease-spring) 500ms both; }
.motion .scene--apply.is-active .apply__doc--out { animation: fw-slide-r 600ms var(--ease-out) 800ms both; }
.motion .scene--apply.is-active .apply__lines li { animation: fw-wipe-r 500ms var(--ease-expo) calc(1000ms + var(--n) * 120ms) both; }
.motion .scene--build.is-active .proto__row { animation: fw-slide-r 500ms var(--ease-out) calc(400ms + var(--n) * 120ms) both; }
.motion .scene--build.is-active .proto__progress b { animation: fw-grow-x 1200ms var(--ease-io) 300ms both; }
.motion .scene--implement.is-active .pipe__step { animation: fw-slide-r 550ms var(--ease-out) calc(150ms + var(--n) * 180ms) both; }
.pipe__step:nth-child(1) { --n: 0; } .pipe__step:nth-child(2) { --n: 1; } .pipe__step:nth-child(3) { --n: 2; } .pipe__step:nth-child(4) { --n: 3; }
.motion .scene--improve.is-active .compare__item { animation: fw-rise 500ms var(--ease-out) 1200ms both; }
.motion .scene--improve.is-active .compare__bar i { animation: fw-grow-x 800ms var(--ease-io) 1400ms both; }

/* Pathways, quotes and ecosystem rise in turn */
.motion .route { animation: fw-rise 700ms var(--ease-out) calc(120ms + var(--n) * 100ms) both; }
.motion .route__icon svg { --draw-delay: 400ms; }
.motion .founder__photo { animation: fw-wipe-up 900ms var(--ease-expo) 300ms both; }
.motion .ahero__photo img { animation: fw-wipe-up 1000ms var(--ease-expo) 200ms both; }
.motion .ecosystem__list a { animation: fw-rise 600ms var(--ease-out) 150ms both; }
.motion .faq details { animation: fw-rise 500ms var(--ease-out) calc(200ms + var(--q, 0) * 60ms) both; }
.motion details[open] p { animation: fw-rise 320ms var(--ease-out) both; }
.motion .business__ways li { animation: fw-wipe-r 600ms var(--ease-expo) calc(400ms + var(--n, 0) * 100ms) both; }
.business__ways li:nth-child(2) { --n: 1; } .business__ways li:nth-child(3) { --n: 2; } .business__ways li:nth-child(4) { --n: 3; }
.motion .business__for { animation: fw-rise 800ms var(--ease-out) 720ms both; }
.motion .business__photo { animation: fw-wipe-up 900ms var(--ease-expo) 200ms both; }

/* Program cards: each rises as it comes into view, then its mark draws */
.motion .prog { animation: fw-rise 700ms var(--ease-out) both; }
.motion .kitart__list li { animation: fw-wipe-r 500ms var(--ease-expo) calc(500ms + var(--n, 0) * 90ms) both; }
.kitart__list li:nth-child(2) { --n: 1; } .kitart__list li:nth-child(3) { --n: 2; } .kitart__list li:nth-child(4) { --n: 3; } .kitart__list li:nth-child(5) { --n: 4; }

/* CTA: circuits draw once, then the message */
.motion .cta__side--left { animation: fw-wipe-r 1100ms var(--ease-expo) both; }
.motion .cta__side--right { animation: fw-wipe-l 1100ms var(--ease-expo) both; }
.motion .cta__pattern { --draw-delay: 200ms; }
.motion .cta .eyebrow { animation-delay: 400ms; }
.motion .cta [data-split] .line > span { animation-delay: calc(500ms + var(--l, 0) * 90ms); }
.motion .cta__inner > p, .motion .cta__inner .actions { animation-delay: 750ms; }

/* Page-hero photos open the way the About and founder photos do, then settle from a slight zoom */
.motion .phero__photo { animation: fw-wipe-up 1000ms var(--ease-expo) 200ms both; }
.motion .phero__photo img { animation: fw-settle 1600ms var(--ease-expo) 200ms both; }
.motion .hstack__card { animation: fw-fade 900ms var(--ease-expo) 700ms both; }
.motion .hstack__card--2 { animation-delay: 850ms; }
.motion .pmosaic__cell { animation: fw-wipe-up 1000ms var(--ease-expo) both; animation-delay: calc(150ms + var(--c, 0) * 140ms); }
.motion .pmosaic__cell img { animation: fw-settle 1600ms var(--ease-expo) 200ms both; }
@keyframes fw-settle { from { transform: scale(1.06); } to { transform: none; } }

/* 18b. Depth ---------------------------------------------------------------
   js/motion.js gives a few elements --fw-p as they cross the viewport (-1 → 1; 0 → 1 for those on screen at load). These rules
   are the only place it becomes movement: a few pixels on the independent translate/scale
   properties, so it never fights the keyframes above or a hover transform. Text, buttons and
   forms never move. --fw-k halves the distances on small screens. No JS or reduced motion:
   --fw-p is never set, so everything stays put. */
:root { --fw-k: 1; }
@media (max-width: 760px) { :root { --fw-k: 0.5; } }
/* Photos drift inside their frames (scaled just enough to never show an edge) */
.motion :is(.phero__photo, .founder__photo, .business__photo, .talks__photo) img { scale: 1.08; translate: 0 calc(var(--fw-p, 0) * var(--fw-k) * 3%); }
/* Layered compositions: the backing plate and floating cards part slightly */
.motion .kitart__back { translate: 0 calc(var(--fw-p, 0) * var(--fw-k) * -20px); }
.motion .kitart__doc { translate: 0 calc(var(--fw-p, 0) * var(--fw-k) * 10px); }
.motion [data-depth] { translate: 0 calc(var(--fw-p, 0) * var(--fw-k) * var(--depth, 20) * 1px); }

/* 19. Responsive ----------------------------------------------------------- */
@media (max-width: 1240px) {
  .menu { display: block; }
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 24px; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: var(--float); max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
  .site-nav.is-open { display: flex; }
  .site-nav > a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-body); }
  .site-nav > a:not(.btn)::after { display: none; }
  /* The current page, now the underline is hidden: semibold, led by a Faith Pink node */
  .site-nav > a[aria-current="page"] { display: flex; align-items: center; gap: 12px; font-weight: 600; }
  .site-nav > a[aria-current="page"]::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); }
  .site-nav .btn { margin-top: 16px; }
  .motion .site-nav.is-open > * { animation: fw-rise 360ms var(--ease-out) both; }

  .approach { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .approach li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .site-footer__top { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  /* Programs: one column in source order (featured, LinkedIn, Websites); the featured art moves above its copy */
  .pstack { grid-template-columns: minmax(0, 1fr); }
  .prog--feature .prog__card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "body"; min-height: 0; }
  .prog--feature .prog__art { padding: 24px 24px 0; background: var(--wash-fade), var(--wash); }
  .prog--feature .prog__art::before { top: -30%; right: -30%; width: 100%; }
  .prog--feature .prog__art::after { top: -40%; right: -40%; width: 120%; }
  .prog--feature .prog__body { padding: 20px 24px 28px; }
  .about, .business, .formblock, .partner, .contact { grid-template-columns: minmax(0, 1fr); }
  .formblock__intro, .contact__side { position: static; }
  .about { align-items: start; }
  .routes, .scopes, .formats { grid-template-columns: minmax(0, 1fr); }
  .routes { grid-template-rows: none; gap: 12px; }
  .route, .route__link { grid-row: auto; grid-template-rows: none; }
  .route__link { padding: 24px 22px 26px; }
  .route__num { top: 24px; right: 22px; }
  .route__link { min-height: 0; }
  .route__desc { grid-template-rows: 1fr; opacity: 1; transform: none; }
  .route__cta { max-height: none; margin-top: 20px; padding-top: 14px; border-top-color: rgb(26 26 26 / 0.14); opacity: 1; transform: none; }
  .route__icon { width: 72px; height: 72px; border-radius: 20px; }
  .route__icon svg { width: 40px; height: 40px; }
  .section-head { display: block; }
  .section-head > p { max-width: var(--measure); margin-top: 16px; padding-bottom: 0; }
  .journey, .resource, .faq { grid-template-columns: minmax(0, 1fr); }
  .faq__head { position: static; }
  .business__copy { padding: clamp(32px, 6vw, 48px) var(--gutter); }
  .business__photo { min-height: 0; aspect-ratio: 4 / 3; }
  .strip { flex-wrap: wrap; justify-content: start; gap: 8px 22px; }
  .strip__label { width: 100%; }
  .ecosystem__list { grid-template-columns: minmax(0, 1fr); }
  .journey-line__steps { grid-template-columns: minmax(0, 1fr); border-radius: 0 0 var(--r) var(--r); }
  .journey-line__steps li { display: flex; gap: 10px; align-items: baseline; padding: 12px 18px; }
  .journey-line__steps li + li { box-shadow: inset 0 1px 0 var(--line-dark); }
  .journey-line__steps b { font-size: 17px; min-width: 6.5em; }
  .kit-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "card" "preview"; }
  .kit-card { position: static; }
  .creds { grid-template-columns: minmax(0, 1fr); }
  .kit-by__grid { grid-template-areas: "photo copy" "events events"; }
  .kit-by__copy { align-self: center; }
  .kit-by__photo { align-self: center; min-height: 0; aspect-ratio: 4 / 5; }
  .kit-by__events { max-width: none; }
  .bio__main, .talks { grid-template-columns: minmax(0, 1fr); }
  .ahero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ahero__copy { grid-column: 1; padding: clamp(40px, 8vw, 64px) var(--gutter) clamp(40px, 8vw, 56px); }
  /* Full width, 4:5 tall up to 82% of the screen: a height, not aspect-ratio + max-height, which
     would shrink the width too and leave an empty band beside the photo */
  .ahero__photo { grid-column: 1; min-height: 0; width: 100%; height: min(125vw, 82svh); }
  .bio__main > .bio__head, .bio__main > .bio__body { grid-column: 1 / -1; }
  .bio__main { row-gap: 28px; }
  .bio__head { position: static; }
  .bio__head h2 { max-width: 20ch; }
  .bio__proof { grid-template-columns: minmax(0, 1fr); }
  .talks__photo { width: 100%; }
  .talks__photo img { aspect-ratio: 3 / 2; }
  .site-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow__cards { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .art__label { font-size: 20px; }
  .art__mono { font-size: 15px; }
  .talks__photo img { aspect-ratio: 4 / 4.4; }
  :root { --header-h: 64px; --head-gap: 24px; }
  .logo img { width: 144px; }
  h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.045em; }
  .approach { grid-template-columns: minmax(0, 1fr); row-gap: 0; border-top: 0; }
  .approach li, .approach li + li { display: grid; grid-template-columns: 56px minmax(0, 1fr); padding: 20px 0; border-left: 0; border-top: 1px solid var(--line-dark); }
  .approach li::before { grid-row: span 2; margin: 0; font-size: 28px; }
  .site-header .site-nav .btn { width: 100%; }
  .site-header--campaign .text-link { font-size: 13px; }
  .staging__inner { font-size: 12px; align-items: start; }
  .staging .dot { margin-top: 6px; }
  .hero { padding-block: 32px 16px; }
  .hero h1 { font-size: 36px; }
  /* blooms simplify to one radial field on small screens, held to the top of the hero (p.29) */
  .hero::before { background: radial-gradient(130% 400px at 100% -40px, rgb(239 172 186 / 0.56), rgb(239 172 186 / 0.18) 55%, rgb(239 172 186 / 0) 100%); }
  .hero__actions .btn { width: 100%; }
  /* the node web tightens: no labels, shorter wires, a smaller hub */
  .hweb { --dot: 36px; --hub: 72px; height: 280px; }
  .hweb__node[data-k="c"] { display: none; } /* the middle branch keeps one tool on phones */
  .hweb__hub.hchat { --chat-w: 72px; height: 72px; padding: 0; place-items: center; border-radius: 22px; }
  .hchat__you, .hchat__bubble, .hchat__input { display: none; }
  .hchat__avatar { width: 46px; height: 46px; box-shadow: none; }
  .hweb__hub { border-radius: 22px; box-shadow: 0 0 0 7px rgb(255 255 255 / 0.72), 0 0 0 8px rgb(239 172 186 / 0.6), 0 0 16px 7px rgb(239 172 186 / 0.22), 0 16px 32px -18px rgb(26 26 26 / 0.3); }
  .flow__tabs button { flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; min-height: 64px; padding: 12px; font-size: 14px; line-height: 1.25; }
  .flow__tab-icon { width: 32px; height: 32px; border-radius: 9px; }
  .flow__tab-icon svg { width: 17px; height: 17px; }
  .fcard__art { height: 224px; padding: 24px 18px; }
  .flow__foot { justify-content: flex-start; }
  .step { font-size: 17px; }
  #journey.section--field .steps { gap: 8px; margin-top: 24px; }
  #journey.section--field .step { min-height: 56px; padding: 10px 16px 10px 12px; font-size: 18px; }
  #journey.section--field .step__num { width: 36px; height: 36px; margin-right: 14px; }
  #journey.section--field .step__num svg { width: 24px; height: 24px; }
  .scene__art { min-height: 0; padding: 18px; }
  .apply { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .apply__core { grid-template-columns: 64px auto; align-items: center; justify-content: center; }
  .apply__core svg { width: 64px; height: 64px; }
  .apply__core::before, .apply__core::after { display: none; }
  .pipe__step { grid-template-columns: 36px minmax(0, 1fr); }
  .pipe__chip { grid-column: 2; justify-self: start; }
  .pipe__step:not(:last-child)::after { left: 31px; }
  .improve .motif { height: 150px; }
  .compare { grid-template-columns: minmax(0, 1fr); }
  .compare__loop { grid-auto-flow: column; }
  .learn { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topics" "notes" "assistant"; }
  .learn__note:not(.learn__note--pick) { display: none; }
  .proto__body { grid-template-columns: minmax(0, 1fr); }
  .proto__page { display: none; }
  .business__ways { grid-template-columns: minmax(0, 1fr); }
  .preview__plan li { grid-template-columns: minmax(0, 1fr) auto; }
  .preview__plan b { grid-column: 1 / -1; }
  .preview__table { font-size: 12px; }
  .preview__table th, .preview__table td { padding: 7px 6px; }
  /* founder: the photo leads, full width, the text runs the card width below it */
  .founder { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 12px 12px 20px; }
  .founder__photo { order: -1; aspect-ratio: 5 / 4; }
  .founder__text { padding-inline: 8px; }
  .founder p { max-width: none; }
  .ecosystem__list { gap: 0; }
  .ecosystem__list a { padding: 20px 0 22px; border-top: 1px solid var(--line); }
  .ecosystem__list a::after { top: -1px; height: 1px; }
  .resource { padding: 24px 18px; border-radius: var(--r-lg); }
  .business { border-radius: 24px; }
  .business h2, .resource h2 { font-size: var(--fs-h2); }
  /* kit graphic: the workflow runs across the top (task, AI, reviewed) and drops into the kit */
  .kitart { padding: 96px 26px 30px; }
  .kitart__stack { width: min(300px, 100%); }
  .kitart__back { inset: -14px -10px 36px 18px; rotate: 3deg; }
  .kitart__doc { padding: 16px 16px 8px; rotate: -1deg; }
  .kitart__head { gap: 10px; }
  .kitart__node { top: -72px; }
  .kitart__node--task { left: 0; width: 44px; height: 38px; }
  .kitart__node--task svg { width: 38px; height: 32px; }
  .kitart__node--ai { left: calc(50% - 21px); top: -74px; width: 42px; height: 42px; }
  .kitart__node--ai img { width: 21px; height: 21px; }
  .kitart__node--ok { left: auto; right: 0; width: 44px; height: 38px; }
  .kitart__node--ok svg { width: 20px; height: 20px; }
  .kitart__wire { left: 44px; right: 44px; top: -53px; height: 0; border-left: 0; border-top: 1.5px dashed rgb(26 26 26 / 0.45); }
  .kitart__wire::after { left: 50%; top: 0; width: 0; height: 53px; border-top: 0; border-left: 2px solid var(--ink); }
  .cta__side { width: 150px; opacity: 0.7; }
  .cta h2 { font-size: var(--fs-h2); }
  .actions--center .btn, .band-cta .btn { width: 100%; }
  .form__grid { grid-template-columns: minmax(0, 1fr); }
  .field--half { grid-column: 1 / -1; }
  .kit-preview { grid-template-columns: minmax(0, 1fr); }
  .kit-preview__cover { aspect-ratio: auto; min-height: 180px; }
  .hstack__card--2 { display: none; }
  .hstack__card--1 { width: 38%; }
  .kit-by__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "copy" "events"; row-gap: 28px; }
  .kit-by__photo { width: min(100%, 480px); }
  .kit-by__photos { grid-auto-columns: 100%; }
  .kit-by__photos li { height: auto; aspect-ratio: 16 / 10; }
  .kit-by__events { margin-top: 8px; }
  .kit-by__events .btn { width: 100%; }
  .routes-list--wide { grid-template-columns: minmax(0, 1fr); }
  .voices { --card-w: calc(100vw - 72px); --card-gap: 12px; }
  .voices__track { padding-inline: calc((100% - var(--card-w)) / 2); }
  .voices.is-stack .voices__track { padding-inline: 0; }
  .voice { min-height: 320px; border-radius: 22px; }
  .voice blockquote p { font-size: 19px; line-height: 1.45; }
  .sessions__item { grid-template-columns: minmax(0, 1fr); }
  .ahero__roles { gap: 8px; }
  .ahero__roles li { padding: 6px 14px; }
  .creds__media figcaption { left: 8px; right: 8px; bottom: 8px; padding: 4px 9px; font-size: 11px; }
  .ahero .actions .btn { flex: 1 1 100%; }
  .bio__body p { font-size: 16px; }
  .bio__proof { gap: 8px; }
  .edu__school { grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; padding-right: 14px; }
  .edu__logo { height: 64px; padding: 6px 8px; }
  .edu__name { font-size: 16px; }
  .talks__topics { grid-template-columns: minmax(0, 1fr); }
  .sessions__item time { grid-row: auto; }
  /* Agent network: stacked on phones (agents, then the workflow, then you approve) */
  .agents__canvas { aspect-ratio: auto; display: grid; gap: 10px; padding: 16px; }
  .agents__wires { display: none; }
  .agents__node, .agents__hub, .agents__human { position: relative; left: auto; right: auto; top: auto !important; width: auto; translate: none; }
  .agents__hub { flex-direction: row; justify-content: center; gap: 10px; padding: 12px; margin-top: 12px; }
  .agents__human { margin-top: 12px; }
  .agents__hub::before, .agents__human::before { content: ""; position: absolute; left: 50%; top: -17px; height: 14px; border-left: 1.5px dashed rgb(26 26 26 / 0.4); }
  .agents__pulse { display: none; }
  .proof__head { display: block; }
  .proof__head > p { max-width: 44ch; margin-top: 18px; padding: 0; }
  .site-footer__legal { flex-wrap: wrap; }
}

/* 20. Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:hover, .route__link:hover, .route__link:hover .route__icon { transform: none; }
}

/* 21. CMS page templates ===================================================
   Programs, events, resources, testimonial cards and the fw-* blocks used by the CMS
   page editor. Kept last so it overrides the general rules above, as before. */

/* 1. Page wrapper and sections --------------------------------------------- */
.cms-page { display: block; }
.cms-page > :first-child:not(.phero):not(.article):not(.fw-topbar) { margin-top: 0; }
.fw-section + .fw-section { padding-top: 0; }
.fw-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.fw-split h2 { margin-top: 0; margin-bottom: 14px; }

/* 2. Section heads and text ------------------------------------------------- */
.fw-section__head { max-width: 720px; margin-bottom: var(--head-gap); }
.fw-section__head h2 { margin-top: 0; }
.fw-section__head p { margin: 14px 0 0; color: var(--muted); font-size: var(--fs-lead); }
.fw-subhead { margin: 24px 0 12px; font-size: 18px; }
.fw-subhead:first-child { margin-top: 0; }
.fw-meta { margin: 0 0 6px; font-weight: 600; }

/* 3. Cards and grids -------------------------------------------------------- */
.fw-grid { display: grid; gap: 16px; }
.fw-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fw-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fw-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fw-card { display: flex; flex-direction: column; align-items: start; gap: 6px; padding: clamp(22px, 2.4vw, 30px); border-radius: var(--r-lg); background: var(--stone-2); }
.fw-card h3 { font-size: 20px; line-height: 1.25; }
.fw-card p { margin: 0; color: var(--muted); }
.fw-card .btn, .fw-card .text-link { margin-top: auto; }
.fw-card--pink { background: var(--pink-tint); }
.fw-card--yellow { background: var(--yellow-pastel); }
.fw-card--white { background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.fw-card--ink { background: var(--ink); color: var(--white); }
.fw-card--ink p { color: var(--muted-dark); }
.fw-card__label { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose); }
.fw-card--ink .fw-card__label { color: var(--yellow); }

/* 4. Lists and panels ------------------------------------------------------- */
.fw-panel { padding: clamp(20px, 2.4vw, 30px); border-radius: var(--r-lg); background: var(--white); }
.band--stone .fw-panel { box-shadow: none; }
.fw-steps { list-style: none; counter-reset: s; display: grid; gap: 12px; }
.fw-steps li { counter-increment: s; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 14px; align-items: start; }
.fw-steps li::before { content: counter(s); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--yellow); font-weight: 700; }

/* 5. Images and galleries --------------------------------------------------- */
.fw-media { margin: 0; }
.fw-media img { width: 100%; height: auto; border-radius: var(--r-lg); background: var(--stone); object-fit: cover; }
.fw-media figcaption { margin-top: 8px; font-size: var(--fs-small); color: var(--muted); }
.fw-media--portrait img { aspect-ratio: 4 / 5; max-width: 440px; }
.fw-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.fw-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }

/* 6. Video embeds ----------------------------------------------------------- */
.fw-video { margin: 0; max-width: 960px; }
.fw-video iframe, .fw-video video, .fw-video__empty { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-lg); background: var(--ink); }
.fw-video__empty { display: grid; place-items: center; padding: 24px; background: var(--stone-2); color: var(--muted); font-size: var(--fs-small); font-weight: 600; text-align: center; box-shadow: inset 0 0 0 2px var(--line); }
.fw-video figcaption { margin-top: 8px; font-size: var(--fs-small); color: var(--muted); }

/* 7. Callouts and quotations ------------------------------------------------ */
.fw-quotes { grid-template-columns: minmax(0, 560px); }

/* 8. Custom page layout: the page brings its own navbar and footer ---------- */
.page--custom #main-content { min-height: 100vh; }
.fw-topbar { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 14px var(--gutter); background: var(--paper); border-bottom: 1px solid var(--line); }
.fw-topbar__brand { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.fw-topbar__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: var(--fs-small); font-weight: 600; }
.fw-topbar__nav .btn { min-height: 40px; padding: 8px 16px; }
.fw-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 28px var(--gutter); background: var(--ink); color: var(--muted-dark); font-size: var(--fs-small); }
.fw-footer p { margin: 0; }
.fw-footer a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.fw-contact { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; padding: clamp(22px, 3vw, 36px); border-radius: var(--r-lg); background: var(--stone-2); }
.fw-contact p { margin: 8px 0 0; color: var(--muted); max-width: 60ch; }

/* 9. Program pages ---------------------------------------------------------- */
/* Program detail (hero, facts, outcomes, agenda, requirements, more) */
.phero { --phero-pad: clamp(40px, 5vw, 76px); padding-block: var(--phero-pad); background: var(--phero-bg, var(--stone-2)); }
.phero--stone { --phero-bg: var(--stone-2); }
.phero--paper { --phero-bg: var(--paper); }
.phero--pink { --phero-bg: var(--pink-tint); }
.phero--yellow { --phero-bg: var(--yellow-tint); }
.phero--ink { --phero-bg: var(--ink); color: var(--white); }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.phero--compact .phero__grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 901px) { .phero--program .phero__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr); gap: clamp(28px, 4vw, 56px); } }
.phero--program h1 { font-size: clamp(38px, 4.6vw, 68px); max-width: none; }
/* Program hero art: the program's node network from the Programs split (render.mjs programHeroArt) */
@media (min-width: 901px) {
  .phero--program .phero__grid:has(.phero__art) { --art-gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--art-gap); }
  /* Keep the copy clear of the art, which reaches back into the column gap */
  .phero--program .phero__grid:has(.phero__art) .phero__copy { padding-right: clamp(24px, 4vw, 72px); }
}
.phero__art { width: 100%; }
@media (min-width: 901px) {
  /* Fills the hero's whole height, flush under the navbar and down to the hero's bottom edge, like
     the homepage hero panel, and runs off the right edge of the screen, past the gutter. Reaching
     back into half the column gap makes it exactly the right half of the hero. */
  .phero--program:has(.phero__art) { overflow-x: clip; }
  .phero__art { align-self: stretch; min-height: clamp(560px, calc(100svh - var(--header-h)), 900px); margin-block: calc(-1 * var(--phero-pad));
    width: calc(100% + var(--gutter) + var(--art-gap) / 2); margin-left: calc(var(--art-gap) / -2); border-radius: var(--r-lg) 0 0 var(--r-lg); }
  .phero__art .pmock__view { width: min(100% - 48px, 580px); }
}
/* Entrance: the same build as the Programs stage (wires draw, then cards, pins, flow and cursor) */
.motion .phero__art .pnet__out { animation: pnet-in 600ms var(--ease-out) 80ms both; }
.motion .phero__art .pnet__wire { stroke-dasharray: 1; animation: pnet-draw 700ms var(--ease-out) calc(180ms + var(--k) * 90ms) both; }
.motion .phero__art .pnet__node { animation: pnet-in 500ms var(--ease-out) calc(320ms + var(--k) * 80ms) both; }
.motion .phero__art .pnet__pin { animation: pnet-fade 400ms var(--ease-out) calc(560ms + var(--k) * 90ms) both; }
.motion .phero__art .pnet__flow { animation: pnet-fade 400ms var(--ease-out) 900ms both, pnet-flow 2.8s linear 900ms infinite; }
.motion .phero__art .pnet__cursor { animation: pnet-fade 400ms var(--ease-out) 820ms both, pnet-hover 3.2s var(--ease-out) 1.2s infinite alternate; }
@keyframes pnet-in { from { opacity: 0; scale: 0.94; } }
@keyframes pnet-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pnet-fade { from { opacity: 0; } }
/* The facts that sat beside the hero, under it (tools/render.mjs programInfo): one White card per
   fact in Learn's .promise__grid--cards format (tile, label as the card title, value below). */
.pinfo { margin-top: clamp(16px, 2vw, 28px); }
.pinfo__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); margin: 0; }
.pinfo__grid > div { display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--dur-fast) var(--ease-out); }
.pinfo__grid > div:hover { box-shadow: inset 0 0 0 1.5px var(--pink); }
.pinfo__grid dt { display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(22px, 2vw, 28px); font-weight: 700; line-height: 1.15; letter-spacing: -0.035em; }
.pinfo__grid dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
/* line icons as on Learn's .promise__icon, on tiles alternating Faith Pink and AI Yellow */
.pinfo__icon { display: grid; place-items: center; flex: none; width: 58px; height: 58px; margin-bottom: clamp(22px, 2.2vw, 30px); border-radius: 12px; background: var(--pink); }
.pinfo__grid > :nth-child(even) .pinfo__icon { background: var(--yellow); }
.pinfo__icon svg { width: 36px; height: 36px; overflow: visible; }
.pinfo__icon :is(.route__line, .route__node, .route__head) { stroke-width: 2.6; }
/* Faith's portrait takes the tile's place when she teaches */
.pinfo__photo { width: 58px; height: 58px; margin-bottom: clamp(22px, 2.2vw, 30px); overflow: hidden; border-radius: 50%; background: var(--stone); }
.pinfo__photo img { width: 100%; height: 100%; object-fit: cover; }
/* Unconfirmed details: plain text rather than italics, so they read as a status, not a gap */
.pinfo .tbc { font-style: normal; }
@media (max-width: 900px) { .pinfo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .pinfo__grid { grid-template-columns: minmax(0, 1fr); }
  }
.phero h1 { font-size: var(--fs-page-h1); line-height: 0.98; letter-spacing: -0.055em; max-width: 16ch; }
.phero--compact h1 { max-width: 20ch; }
.phero__lead { margin: 20px 0 0; font-size: var(--fs-lead); line-height: 1.6; max-width: 60ch; }
.phero .small { margin: 0; }
.phero--ink .small, .phero--ink .crumbs { color: var(--muted-dark); }
.phero__photo { overflow: hidden; border-radius: var(--r-lg); background: var(--stone); }
.phero__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.phero__photo--tall img { aspect-ratio: 4 / 4.4; }
.phero__ui .preview { background: var(--white); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; font-size: var(--fs-small); color: var(--muted); }
.crumbs a { text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--ink); }
.phero--ink .crumbs a:hover { color: var(--white); }
/* Hero photo compositions (src/data/gallery.json, tools/gallery.mjs). A stack is the page's main
   photo with two framed cards floating off its corners; a mosaic is one tall photo beside two
   offset ones. The cards and offset cells carry [data-depth], so js/motion.js parts them slightly
   on scroll (translate); hover tilts them a touch further (transform). The margins keep every
   card inside the column, so nothing ever causes a sideways scroll. */
.hstack { position: relative; margin: clamp(18px, 3vw, 34px) clamp(14px, 3vw, 40px) clamp(34px, 5vw, 56px) clamp(22px, 4vw, 52px); }
.hstack__main { position: relative; z-index: 0; }
.hstack--tall .hstack__main img { aspect-ratio: 4 / 4.4; }
.hstack__card { position: absolute; z-index: 1; margin: 0; overflow: hidden; border: clamp(4px, 0.5vw, 7px) solid var(--paper); border-radius: var(--r); background: var(--stone); box-shadow: var(--glass-shadow); transition: transform 700ms var(--ease-expo); }
.hstack__card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hstack__card--1 { left: calc(-1 * clamp(22px, 4vw, 52px)); bottom: calc(-1 * clamp(34px, 5vw, 56px)); width: 40%; aspect-ratio: 4 / 3; rotate: -3deg; }
.hstack__card--2 { right: calc(-1 * clamp(14px, 3vw, 40px)); top: calc(-1 * clamp(18px, 3vw, 34px)); width: 28%; aspect-ratio: 4 / 5; rotate: 4deg; }
.hstack:hover .hstack__card--1 { transform: translate(-4px, 4px) rotate(-1.5deg); }
.hstack:hover .hstack__card--2 { transform: translate(4px, -4px) rotate(1.5deg); }
.hstack__card figcaption { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--glass-edge); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); font-size: 12px; font-weight: 600; line-height: 1.3; }
.pmosaic { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: repeat(2, auto); gap: clamp(10px, 1.2vw, 16px); align-items: start; padding-block: clamp(10px, 1.6vw, 22px); }
.pmosaic__cell { margin: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--stone); }
.pmosaic__cell img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 900ms var(--ease-expo); }
.pmosaic__cell:hover img { scale: 1.04; }
.pmosaic__cell--1 { grid-row: 1 / span 2; aspect-ratio: 4 / 5; }
.pmosaic__cell--2 { aspect-ratio: 1; margin-top: clamp(-22px, -1.6vw, -10px); }
.pmosaic__cell--3 { aspect-ratio: 4 / 3; margin-left: clamp(-34px, -2.4vw, -14px); border: clamp(4px, 0.5vw, 7px) solid var(--paper); box-shadow: var(--glass-shadow); }
.facts { padding: clamp(20px, 2.4vw, 30px); border-radius: var(--r-lg); background: var(--white); color: var(--ink); }
.facts dl { margin: 0; display: grid; }
.facts div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.facts div:last-child { border-bottom: 0; }
.facts dt { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.facts dd { margin: 0; font-weight: 500; }
/* Program "Who it's for" (tools/render.mjs programAudience): two photos stacked on the left scroll
   past the copy, which stays pinned on the right. Tablet puts the copy on top with the photos
   paired below; mobile stacks everything. */
.pfor { background: var(--paper); color: var(--ink); }
.pfor__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 3.4vw, 56px); align-items: start; }
.pfor__media { display: grid; gap: 16px; }
/* The pinned copy fills the view below the header and centres itself in it, so it rides mid-screen */
.pfor__copy { position: sticky; top: var(--header-h); display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--header-h)); }
.pfor__photo { margin: 0; overflow: hidden; border-radius: 24px; background: var(--stone); box-shadow: 0 1px 2px rgb(26 26 26 / 0.06), 0 18px 40px -22px rgb(26 26 26 / 0.28); }
.pfor__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.pfor__photo:hover img { transform: scale(1.04); }
/* Both photos share one 3:2 frame, the middle of the originals' 4:3 to 16:9 range, so each loses little */
.pfor__photo { aspect-ratio: 3 / 2; }
/* Same weight and tracking as the program hero title (.phero--program h1) */
.pfor__copy h2 { margin: 0; font-size: clamp(38px, 4.6vw, 68px); font-weight: 700; line-height: 0.98; letter-spacing: -0.055em; }
.pfor__lead { margin: 18px 0 0; max-width: 36ch; font-size: var(--fs-lead); line-height: 1.55; }
/* Audience checklist: hairline rows, each led by a Faith Pink / AI Yellow check. The check is drawn
   in CSS so the list stays plain <li> text for the CMS (data-cms-list="audience"). */
.pfor__checks { margin: clamp(24px, 2.4vw, 34px) 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.pfor__checks li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); color: var(--ink); font-family: var(--font-display); font-size: clamp(16px, 1.15vw, 18px); font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; transition: transform 240ms var(--ease-out); }
.pfor__checks li::before { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9'/%3E%3C/svg%3E") center / 26px no-repeat; transition: transform 240ms var(--ease-out); }
.pfor__checks li:nth-child(even)::before { background-color: var(--yellow); }
.pfor__checks li:hover { transform: translateX(4px); }
.pfor__checks li:hover::before { transform: scale(1.08); }
@media (max-width: 1023px) {
  .pfor__grid { grid-template-columns: minmax(0, 1fr); }
  .pfor__copy { position: static; grid-row: 1; min-height: 0; }
  .pfor__lead { max-width: 52ch; }
  .pfor__media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .pfor__media { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .pfor__photo img, .pfor__checks li, .pfor__checks li::before { transition: none; } }

.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.split h2 { margin-top: 0; }
.split__lead { margin-top: 16px; font-size: var(--fs-lead); line-height: 1.55; }
.split--dark p { color: var(--muted-dark); }
.split--dark .split__lead { color: var(--white); }
.outcomes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.outcomes h2 { margin: 0 0 18px; }
.outcomes__leave { display: grid; gap: 16px; padding: clamp(20px, 2.4vw, 30px); border-radius: var(--r-lg); background: var(--white); }
.outcomes__leave .preview { background: var(--stone-2); }
.outcomes__leave .small { margin: 0; }
.agenda { list-style: none; counter-reset: a; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.agenda li { counter-increment: a; position: relative; padding: 22px; border-radius: var(--r); background: var(--stone-2); }
.agenda li::before { content: counter(a); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 14px; border-radius: 50%; background: var(--yellow); font-size: 14px; font-weight: 700; }
.agenda h3 { font-size: 18px; margin-bottom: 6px; }
.agenda p { margin: 0; color: var(--muted); }
/* Requirements and scope: two contrasting editorial panels. "What you need" is warm White with
   Faith Pink marks; "Not included" is Soft Charcoal with AI Yellow marks. Rows sit on hairlines. */
.needs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(12px, 1.6vw, 20px); align-items: stretch; padding-top: 0; }
.needs__col { padding: clamp(24px, 2.8vw, 40px); border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); }
.needs__col h3 { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(14px, 1.6vw, 20px); font-size: var(--fs-h3); font-weight: 600; }
.needs__col h3::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 5px var(--pink-tint); }
.needs__col .ticks, .needs__col .crosses { gap: 0; border-top: 1px solid var(--line); }
.needs__col .ticks li, .needs__col .crosses li { padding: 16px 0 16px 40px; border-bottom: 1px solid var(--line); color: var(--ink); }
.needs__col .ticks li:last-child, .needs__col .crosses li:last-child { border-bottom: 0; padding-bottom: 0; }
.needs__col .ticks li::before { top: calc(16px + 0.12em); width: 24px; height: 24px; background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 6.2 5 8.4 9.3 3.8' fill='none' stroke='%231A1A1A' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.needs__col--not { background: var(--ink); border-color: var(--ink); color: var(--white); }
.needs__col--not h3 { color: var(--white); }
.needs__col--not h3::before { background: var(--yellow); box-shadow: 0 0 0 5px rgb(251 197 34 / 0.18); }
.needs__col--not .crosses { border-top-color: var(--line-dark); }
.needs__col--not .crosses li { border-bottom-color: var(--line-dark); color: var(--white); }
.needs__col--not .crosses li::before { content: ""; top: calc(16px + 0.12em); width: 24px; height: 24px; margin: 0; background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 4l4 4M8 4 4 8' fill='none' stroke='%231A1A1A' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.more { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 18px; }
.more a { display: flex; flex-direction: column; align-items: start; gap: 10px; height: 100%; padding: 18px 20px; border-radius: var(--r); background: var(--stone-2); font-weight: 600; transition: background-color var(--dur-fast); }
.more a:hover { background: var(--stone); }

/* 10. Event pages and cards ------------------------------------------------- */
/* Event photos on an event page (page component "event-gallery": the images after the cover) */
.event-photos { margin-top: clamp(14px, 1.6vw, 22px); }
.event-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 16px); margin: 0; padding: 0; list-style: none; }
.event-gallery figure { margin: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--stone); aspect-ratio: 4 / 3; }
.event-gallery picture { display: contents; }
.event-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .event-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Event cards (Workshops list) */
.events { display: grid; gap: 14px; }
/* event cards: no picture (the calendar panel keeps the posters), two per row so a yellow stub sits beside a pink one */
.events { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.events > .event:only-child { grid-column: 1 / -1; }
.events > .event > .event__img { display: none; }
@media (min-width: 1241px) { .events > .event { grid-template-columns: clamp(112px, 8.5vw, 136px) minmax(0, 1fr); } }
@media (max-width: 1240px) { .events > .event > .event__date { grid-row: auto; } }
@media (max-width: 960px) { .events { grid-template-columns: minmax(0, 1fr); } }
/* The date is a full-height AI Yellow stub flush with the card's left edge; time and place sit
   under the summary as the calendar's badges (.cal__tag), so the card reads like a ticket. */
.event { --event-pad: clamp(18px, 2vw, 26px); display: grid; grid-template-columns: clamp(124px, 10vw, 148px) minmax(0, 1fr) minmax(0, 0.42fr); gap: clamp(20px, 2.4vw, 34px); align-items: start; padding: var(--event-pad); overflow: hidden; border-radius: var(--r-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.event__date { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; margin: calc(-1 * var(--event-pad)) 0 calc(-1 * var(--event-pad)) calc(-1 * var(--event-pad)); padding: 22px 12px; background: var(--yellow); color: var(--ink); text-align: center; }
.event__date b { font-size: clamp(60px, 5.6vw, 88px); font-weight: 700; line-height: 0.9; letter-spacing: -0.05em; }
.event__date span { font-size: 15px; font-weight: 700; line-height: 1.2; }
p.event__date b { font-size: clamp(36px, 3vw, 46px); letter-spacing: -0.03em; }
.event__date .event__dow { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
/* upcoming date stubs alternate AI Yellow, Faith Pink (the calendar uses the same colour per event, js/main.js) */
.events > .event:not(.event--past):nth-child(even) .event__date { background: var(--pink); }
.event--past .event__date { background: var(--stone); }
.event__type { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; font-size: var(--fs-small); font-weight: 600; color: var(--rose); }
.event h3 { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; margin-bottom: 8px; }
.event__body > p:not(.event__type):not(.event__meta) { color: var(--muted); }
.event__meta { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin: 4px 0 20px; color: var(--ink); }
.event__meta .cal__tag { font-size: 14px; }
/* Older pasted pages still carry the facts list until js/fw-live.js redraws the card */
.event__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 20px; margin: 0 0 18px; padding: 14px 0; border-block: 1px solid var(--line); }
.event__facts dt { font-size: 12px; font-weight: 600; color: var(--muted); }
.event__facts dd { margin: 2px 0 0; font-size: 15px; font-weight: 500; }
.event__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.event__img { overflow: hidden; border-radius: var(--r); background: var(--stone); }
/* event posters and graphics (assets/images/events/) show whole, on white, never cropped */
.event__img:has(img[src*="/images/events/"]) { background: var(--white); }
.event__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.event__img:not(.event__slides) img { aspect-ratio: auto; }
@media (min-width: 1241px) {
  .event > .event__img { position: relative; align-self: stretch; min-height: 280px; margin: calc(-1 * var(--event-pad)) calc(-1 * var(--event-pad)) calc(-1 * var(--event-pad)) 0; border-radius: 0; }
  .event > .event__img img, .event > .event__img .event__slides-frame { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  .event > .event__img img[src*="/images/events/"] { object-fit: contain; }
}
.event__img figcaption { padding: 6px 10px; font-size: 12px; color: var(--muted); }
.event--past .event__img img { filter: grayscale(0.4); }
/* Several event photos: one at a time, Previous/Next on the photo's sides (js/main.js §20) */
.event__slides-frame { position: relative; }
.event__slides-frame img[hidden] { display: none; }
.event__slides-nav { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 10px; pointer-events: none; }
.event__slides-nav[hidden] { display: none; }
.event__slides-btn { width: 36px; height: 36px; pointer-events: auto; }

/* 11. Resource and article pages -------------------------------------------- */
/* Resources: every resource (article, guide, worksheet…) as one card, its type as the badge.
   A search box and type chips (js/main.js §15) sit above the grid; the first featured card is wide. */
.rcards__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(24px, 3vw, 36px); }
.rcards__tools[hidden] { display: none; }
.rcards__search { flex: 1 1 280px; max-width: 420px; }
.rcards__search input { width: 100%; min-height: 48px; padding: 11px 16px; border: 1.5px solid #B5B3AF; border-radius: 999px; background: var(--white); font: inherit; color: var(--ink); }
.rcards__search input:hover, .rcards__search input:focus { border-color: var(--ink); }
.rcards__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.rcards__chip { min-height: 36px; padding: 6px 16px; border: 1px solid var(--pink); border-radius: 999px; background: transparent; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.rcards__chip:hover { background: var(--pink-tint); }
.rcards__chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--white); }
.rcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rcard { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.rcard[hidden] { display: none; }
.rcard:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line), var(--float); }
.rcard:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.rcard__media { display: block; overflow: hidden; background: var(--stone); }
.rcard__img, .rcard__img img { display: block; width: 100%; }
.rcard__img img { aspect-ratio: 16 / 10; object-fit: cover; transition: scale 700ms var(--ease-expo); }
.rcard__img--blank { aspect-ratio: 16 / 10; background: var(--stone-2); }
.rcard:hover .rcard__img img { scale: 1.04; }
.rcard__body { display: flex; flex: 1; flex-direction: column; align-items: start; gap: 10px; padding: clamp(20px, 2.4vw, 28px); }
.rcard__badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.rcard__type, .rcard__flag { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.rcard__type { background: var(--pink); }
.rcard__flag { background: var(--ink); color: var(--white); }
.rcard__meta { display: flex; flex-wrap: wrap; margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.rcard__meta span + span::before { content: "·"; margin: 0 0.6em; }
.rcard h3 { margin: 0; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.15; letter-spacing: -0.035em; }
.rcard h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.rcard h3 a:focus-visible { outline: none; }
.rcard:hover h3 a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.rcard__excerpt { margin: 0; color: var(--ink); }
.rcard__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding: 6px 0 2px; border-bottom: 1.5px solid var(--pink); font-size: var(--fs-small); font-weight: 700; }
.rcard__more .link-arrow { width: auto; height: auto; text-indent: 0; background: none; -webkit-mask: none; mask: none; transition: transform var(--dur) var(--ease-out); }
.rcard:hover .rcard__more .link-arrow { transform: translateX(4px); }
.rcard--lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.rcard--lead .rcard__img { height: 100%; }
.rcard--lead .rcard__img img { aspect-ratio: auto; height: 100%; min-height: 340px; }
.rcard--lead .rcard__body { justify-content: center; padding: clamp(28px, 3.4vw, 48px); }
.rcard--lead h3 { font-size: clamp(28px, 3vw, 44px); }
.rcard--lead .rcard__excerpt { font-size: var(--fs-lead); }
.rcards__none { margin: 24px 0 0; }
@media (max-width: 1100px) { .rcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .rcards { grid-template-columns: minmax(0, 1fr); }
  .rcard--lead { display: flex; }
  .rcard--lead .rcard__img, .rcard--lead .rcard__img img { height: auto; }
  .rcard--lead .rcard__img img { aspect-ratio: 16 / 10; min-height: 0; }
  .rcards__search { max-width: none; }
}
@media (max-width: 640px) {
  .art__label { font-size: 20px; }
  .art__mono { font-size: 15px; }
}

.article__head { max-width: 960px; padding-block: clamp(40px, 5vw, 72px) 28px; }
.article__head h1 { font-size: clamp(40px, 5.4vw, 80px); line-height: 1; letter-spacing: -0.05em; }
.article__lead { margin: 18px 0 0; font-size: var(--fs-lead); }
.article__meta { margin: 14px 0 0; font-size: var(--fs-small); color: var(--muted); }
.article__cover picture { display: block; overflow: hidden; border-radius: var(--r-lg); }
/* Featured image at its own proportions (covers are 1920×1080): never cropped to a banner */
.article__cover img { display: block; width: 100%; height: auto; }
.article__body { max-width: 720px; margin-inline: auto; padding: clamp(32px, 4vw, 56px) var(--gutter) 0; font-size: 17px; }
.article__body > h2 { margin: 52px 0 14px; font-size: clamp(28px, 3vw, 42px); line-height: 1.08; letter-spacing: -0.045em; }
.article__body > h3 { margin: 32px 0 10px; font-size: clamp(21px, 1.9vw, 26px); }
.article__body > ul, .article__body > ol { padding-left: 22px; margin-bottom: 1em; display: grid; gap: 8px; }
/* Every text link in an article reads as a link (same look as a.inline), whether or not the CMS
   body gave it the class: sources, internal links and video links were showing as plain text. */
.article__body :is(p, li, td, figcaption, blockquote, dd) a:not(.btn):not([class*="btn"]) { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.article__body :is(p, li, td, figcaption, blockquote, dd) a:not(.btn):not([class*="btn"]):hover { color: var(--rose); }
.callout { margin: 28px 0; padding: 22px 24px; border-radius: var(--r); background: var(--stone-2); }
.callout__label { margin: 0 0 6px; font-size: var(--fs-small); font-weight: 700; color: var(--rose); }
.callout h3 { margin-bottom: 8px; font-size: 19px; }
.callout p:last-child { margin: 0; }
.callout ul { padding-left: 20px; display: grid; gap: 6px; }
.pull { margin: 32px 0; padding-left: 20px; border-left: 4px solid var(--pink); }
.pull p { margin: 0; font-size: clamp(20px, 2vw, 24px); font-weight: 600; line-height: 1.4; letter-spacing: -0.02em; }
.pull cite { display: block; margin-top: 10px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.takeaway { margin: 36px 0; padding: 26px; border-radius: var(--r-lg); background: var(--yellow-tint); }
.takeaway h2 { margin: 0 0 14px; font-size: clamp(24px, 2.2vw, 30px); }
.article__fig { margin: 28px 0; }
.article__fig picture { display: block; overflow: hidden; border-radius: var(--r); }
.article__fig figcaption { margin-top: 8px; font-size: var(--fs-small); color: var(--muted); }
.article__cta { margin: 40px 0 0; padding: 28px; border-radius: var(--r-lg); background: var(--pink-tint); }
.article__cta h2 { margin: 0 0 8px; font-size: clamp(26px, 2.4vw, 34px); }

/* 12. Testimonial cards ----------------------------------------------------- */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.quote { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; margin: 0; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r-lg); background: var(--q-bg); }
.quote--pink { --q-bg: var(--pink-tint); }
.quote--stone { --q-bg: var(--stone-2); }
.quote--yellow { --q-bg: var(--yellow-pastel); }
.quote blockquote { margin: 0; }
.quote blockquote p { margin: 0; font-size: 18px; line-height: 1.55; font-weight: 500; letter-spacing: -0.01em; }
.quote blockquote p::before { content: "“"; display: block; height: 0.6em; margin-bottom: 8px; font-size: 56px; line-height: 1; font-weight: 700; color: var(--pink); }
.quote figcaption { display: grid; font-weight: 700; }
.quote figcaption span { font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
/* Name with an optional round photo beside it */
.quote .quote__by { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.quote .quote__name { font-size: 16px; font-weight: 700; color: inherit; }
.quote .quote__who { display: grid; gap: 2px; font-size: inherit; font-weight: inherit; color: inherit; }
.quote .quote__role { font-size: 14px; font-weight: 400; color: var(--muted); }
.quote__photo { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--stone); box-shadow: 0 0 0 2px var(--white); }

/* 12a. Event Calendar (Workshops). js/main.js §8 draws the month from the embedded data: day
   buttons with the day's events as chips (dots on phones), a panel listing the chosen day, and a
   "Next up" jump. AI Yellow is the one accent; the chosen day turns Charcoal. ---------------- */
.cal { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); gap: clamp(16px, 2.4vw, 32px); padding: clamp(16px, 2.4vw, 32px); border-radius: var(--r-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.cal__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.cal__title { margin: 0; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.035em; }
.cal__controls { display: flex; align-items: center; gap: 8px; }
.cal__today { min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; transition: background-color var(--dur-fast), border-color var(--dur-fast); }
.cal__today:hover { background: var(--stone-2); border-color: var(--ink); }
.cal__nav { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.cal__nav:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.cal__nav:focus-visible, .cal__today:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal__dow { padding: 2px 8px 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cal__day { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; min-height: 96px; padding: 8px; border: 0; border-radius: var(--r-sm); background: var(--stone-2); color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.cal__day:hover { background: var(--stone); }
.cal__day:active { transform: scale(0.97); }
.cal__day:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; z-index: 1; }
.cal__day--out { visibility: hidden; }
.cal__day--has { background: var(--yellow-pastel); }
.cal__day--has:hover { background: var(--yellow); }
.cal__day--pink { background: var(--pink-tint); }
.cal__day--pink:hover { background: var(--pink); }
.cal__day--pastonly { background: var(--stone-2); }
.cal__day--pastonly:hover { background: var(--stone); }
.cal__day[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.cal__num { display: grid; place-items: center; width: 26px; height: 26px; margin: -2px 0 2px -2px; border-radius: 50%; font-weight: 700; font-size: 14px; }
.cal__day--today .cal__num { background: var(--ink); color: var(--white); }
.cal__day--today[aria-pressed="true"] .cal__num { background: var(--white); color: var(--ink); }
.cal__chip { display: block; padding: 3px 6px; border-radius: 6px; background: var(--yellow); color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal__chip--pink { background: var(--pink); }
.cal__chip--past { background: var(--stone); color: var(--muted); }
.cal__day[aria-pressed="true"] .cal__chip--past { background: var(--ink-3); color: var(--muted-dark); }
.cal__more { font-size: 11px; font-weight: 600; color: var(--muted); }
.cal__day[aria-pressed="true"] .cal__more { color: var(--muted-dark); }
.cal__dots { display: none; justify-content: center; gap: 3px; }
.cal__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.cal__dot--past { background: #8C8B87; }
.cal__day[aria-pressed="true"] .cal__dot { background: var(--yellow); }
.cal__legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 0; }
.cal__legend li { display: flex; align-items: center; gap: 7px; }
.cal__key { width: 12px; height: 12px; border-radius: 4px; }
.cal__key--up { background: linear-gradient(135deg, var(--yellow) 50%, var(--pink) 50%); }
.cal__key--past { background: var(--stone); }
.cal__key--today { border-radius: 50%; background: var(--ink); }
.cal__hint { margin: 8px 0 0; }
/* The panel: the chosen day, or what is next */
.cal__panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: clamp(18px, 2vw, 26px); border-radius: var(--r); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.cal__panel:empty { display: none; }
.cal__kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.cal__date { margin: -6px 0 2px; font-size: var(--fs-h3); letter-spacing: -0.02em; }
.cal__items { list-style: none; display: grid; gap: 24px; margin: 0; padding: 0; }
.cal__item { display: grid; gap: 10px; }
.cal__item + .cal__item { padding-top: 24px; border-top: 1px solid var(--line); }
.cal__item h4 { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.cal__item p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.cal__item p.cal__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; padding: 0; border: 0; color: var(--ink); }
/* time and place read as badges (yellow, pink) instead of a block of text */
.cal__tag { display: inline-flex; align-items: flex-start; gap: 8px; padding: 6px 12px; border-radius: 12px; font-size: 13px; font-weight: 500; line-height: 1.4; }
.cal__tag::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 1px; background: currentColor; -webkit-mask: var(--tag-icon) center / contain no-repeat; mask: var(--tag-icon) center / contain no-repeat; }
.cal__tag--time { background: var(--yellow-pastel); --tag-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.cal__tag--place { background: var(--pink-tint); --tag-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.cal__tag--date { background: var(--stone); --tag-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
/* the summary stays short: three lines, the full text is on the event page */
.cal__item > p:not(.cal__meta) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cal__count { justify-self: start; display: inline-flex; padding: 2px 10px; border-radius: 999px; background: var(--yellow); font-size: 12px; font-weight: 700; }
.cal__count--pink { background: var(--pink); }
.cal__count--past { background: var(--stone); color: var(--muted); }
.cal__item .cal__photo { grid-column: 1 / -1; max-width: none; margin: 0 0 6px; border-radius: var(--r-sm); overflow: hidden; }
/* A single poster shows whole; slideshows keep their fixed frame */
.cal__item .cal__photo:not(.event__slides) { height: auto; aspect-ratio: auto; }
.cal__item .cal__photo:not(.event__slides) img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.cal__item .btn { justify-self: start; min-height: 40px; margin-top: 6px; padding: 8px 16px; }
/* Two or more events on one day: one shows at a time, previous / next buttons above it */
.cal__pager { display: flex; align-items: center; gap: 12px; }
.cal__pager-count { font-size: var(--fs-small); font-weight: 600; }
.cal__item[hidden] { display: none; }
.cal__items--paged > .cal__item { padding-top: 0; border-top: 0; }
.cal__none { margin: 0; color: var(--muted); }
.cal__jump { align-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--fs-small); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.cal__jump:hover { text-decoration-thickness: 2px; }
.cal__jump:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cal__next { display: grid; gap: 0; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
.cal__next:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08); }
.cal__next-media { display: block; aspect-ratio: 16 / 9; background: var(--line); }
.cal__next-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cal__next-body { display: grid; gap: 6px; padding: 18px 20px 20px; }
.cal__next-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.cal__next-date { font-size: var(--fs-small); color: var(--muted); }
.cal__next:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.motion .cal__grid.is-turning-next { animation: cal-from-right 420ms var(--ease-expo) both; }
.motion .cal__grid.is-turning-prev { animation: cal-from-left 420ms var(--ease-expo) both; }
.motion .cal__panel > * { animation: fw-rise 420ms var(--ease-out) both; }
.motion .cal__items > li { animation: fw-rise 480ms var(--ease-out) both; animation-delay: calc(var(--c, 0) * 70ms); }
@keyframes cal-from-right { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes cal-from-left { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@media (max-width: 1024px) {
  .cal { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .art__label { font-size: 20px; }
  .art__mono { font-size: 15px; }
  /* Phones: a compact month with dots; the panel below lists the chosen day */
  .cal { padding: 14px; }
  .cal__grid { gap: 4px; }
  .cal__dow { padding: 2px 0 4px; text-align: center; font-size: 11px; letter-spacing: 0.04em; }
  .cal__day { align-items: center; justify-content: center; gap: 3px; min-height: 0; aspect-ratio: 1; padding: 4px; }
  .cal__num { margin: 0; width: 28px; height: 28px; font-size: 13px; }
  .cal__chip, .cal__more { display: none; }
  .cal__dots { display: flex; }
}

/* 13. Responsive ------------------------------------------------------------ */
@media (max-width: 1240px) {
  .event { grid-template-columns: 120px minmax(0, 1fr); }
  .event__date { grid-row: span 2; justify-content: flex-start; padding-top: clamp(28px, 4vw, 40px); }
  .event__img { grid-column: 2 / -1; max-width: 560px; }
  .event__img img { aspect-ratio: 16 / 9; }
  .fw-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .phero__grid, .split, .outcomes, .quotes { grid-template-columns: minmax(0, 1fr); }
  .phero__photo img { aspect-ratio: 16 / 9; }
  .phero__photo--tall img, .hstack--tall .hstack__main img { aspect-ratio: 4 / 3; }
  .fw-split, .fw-grid--2, .fw-grid--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .art__label { font-size: 20px; }
  .art__mono { font-size: 15px; }
  .facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .needs { grid-template-columns: minmax(0, 1fr); }
  .needs__col { padding: 22px 20px; }
  .needs__col .ticks li, .needs__col .crosses li { padding-block: 14px; }
  .needs__col .ticks li::before, .needs__col--not .crosses li::before { top: calc(14px + 0.12em); }
  .event { grid-template-columns: minmax(0, 1fr); }
  .event__img { grid-column: 1 / -1; max-width: none; }
  /* the stub becomes a yellow band across the top of the card */
  .event__date { grid-row: auto; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; row-gap: 2px; margin: calc(-1 * var(--event-pad)) calc(-1 * var(--event-pad)) 0; padding: 16px var(--event-pad); text-align: left; }
  .event__date b { grid-column: 1; grid-row: 1 / span 2; font-size: 56px; line-height: 0.85; }
  .event__date .event__dow { grid-column: 2; grid-row: 1; align-self: end; }
  .event__date b + span { grid-column: 2; grid-row: 2; align-self: start; }
  p.event__date b { font-size: 40px; }
  .event > .event__img { margin: 0 calc(-1 * var(--event-pad)) calc(-1 * var(--event-pad)); border-radius: 0; }
  .fw-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .fw-contact .btn, .fw-topbar__nav .btn { width: 100%; }
}

/* 14. CMS editor markers ---------------------------------------------------
   The page editor shows which text comes from Details. These attributes are
   also present on the website, where they have no visual effect. */

/* 22. Refinements (2026-10-20) ===============================================
   Brand logos, featured resources, Keep reading cards, article contents,
   For Professionals. */

/* Brand logos (SVG, traced from the supplied PNGs). Dark-text versions on light grounds;
   *-reversed.svg for Charcoal. */
.brandmark { display: block; width: auto; height: 100%; max-width: 100%; }
.ecosystem__list h3.ecosystem__brand { height: 34px; margin-bottom: 10px; line-height: 0; }
.brandlock { height: clamp(44px, 5vw, 64px); margin: 0 0 20px; line-height: 0; }
/* Optical balance: the Faith AI wordmark is all cap-height, the Community lockup is two lines */
.ecosystem__list h3.ecosystem__brand:has(.brandmark--ai) { height: 28px; }
.ecosystem__list h3.ecosystem__brand:has(.brandmark--community) { height: 42px; }

/* Navigation: six links plus the button fit at desktop widths */
/* Desktop header: a three-part grid. The nav dissolves into it (display: contents) so the six links sit
   centred between two equal outer columns: the logo on the left, the CTA on the right. */
@media (min-width: 1241px) {
  .site-header:not(.site-header--campaign) { display: grid; grid-template-columns: minmax(max-content, 1fr) repeat(6, auto) minmax(max-content, 1fr); column-gap: 28px; }
  .site-header .site-nav { display: contents; }
  .site-header .site-nav .btn { justify-self: end; }
}
@media (min-width: 1241px) and (max-width: 1440px) { .site-header:not(.site-header--campaign) { column-gap: 20px; } }


/* Keep reading: article cards with their featured image */
.more .kr { padding: 0; gap: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.more .kr:hover { background: var(--white); transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line), var(--float); }
.kr__img { display: block; width: 100%; overflow: hidden; background: var(--stone); }
.kr__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: scale 700ms var(--ease-expo); }
.kr:hover .kr__img img { scale: 1.04; }
.kr__img--blank { aspect-ratio: 16 / 10; background: var(--stone-2); }
.kr__meta { padding: 18px 20px 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.kr__title { padding: 6px 20px 22px; font-family: var(--font-display); font-size: 19px; line-height: 1.3; letter-spacing: -0.02em; }
.kr:hover .kr__title { text-decoration: underline; text-underline-offset: 4px; }
/* Share this: at the end of the article body (js/main.js §16) */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.share__label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.share__list { display: flex; gap: 10px; }
.share__btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast), transform var(--dur) var(--ease-out); }
.share__btn svg { width: 20px; height: 20px; }
.share__btn:hover { background: var(--ink); color: var(--white); transform: translateY(-2px); }
.share__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.share__note { flex-basis: 100%; margin: 0; color: var(--muted); }
.share__note:empty { display: none; }
.related-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.related-head h2 { margin: 0; }

/* Article contents: a sticky sidebar beside the article (js/main.js §14 marks the heading in view).
   The layout spans the same .wrap edges as Keep reading below it. */
.article__layout { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); align-items: start; gap: clamp(32px, 5vw, 88px); }
.article__layout > .article__body { max-width: none; margin: 0; padding-inline: 0; }
.article__aside { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; padding-top: clamp(32px, 4vw, 56px); scrollbar-width: thin; }
.article__body h2[id] { scroll-margin-top: calc(var(--header-h) + 24px); }
.toc .toc__label { display: block; min-height: 0; margin-bottom: 14px; padding: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); pointer-events: none; }
.toc .toc__label::after { content: none; }
.toc, .toc:first-child { border: 0; }
.toc { padding: 24px 24px 26px; border-radius: var(--r-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.toc__list { list-style: none; display: grid; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.toc__link { display: block; margin-left: -2px; padding: 8px 0 8px 16px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.4; color: var(--muted); transition: color var(--dur-fast), border-color var(--dur) var(--ease-out); }
.toc__link:hover { color: var(--ink); }
.toc__link.is-active { border-left-color: var(--ink); color: var(--ink); font-weight: 600; }
.toc__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.toc__progress { height: 3px; margin-top: 20px; overflow: hidden; border-radius: 3px; background: var(--line); }
.toc__progress span { display: block; width: 100%; height: 100%; background: var(--pink); transform: scaleX(var(--read, 0)); transform-origin: left; }
@media (max-width: 1024px) {
  .article__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .article__aside { position: static; max-height: none; overflow: visible; padding-top: clamp(24px, 4vw, 40px); }
  .toc { padding: 4px 18px; border-radius: var(--r); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
  /* folds like the FAQ: the shared summary +/× control */
  .toc .toc__label { display: flex; min-height: 52px; margin: 0; pointer-events: auto; }
  .toc .toc__label::after { content: "+"; letter-spacing: 0; }
  .toc__list { margin-bottom: 14px; }
  .toc__progress { display: none; }
}

/* For Professionals: learning path cards and program links */
.offers { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; }
.offers__item { display: flex; flex-direction: column; align-items: start; gap: 8px; padding: 26px; border-radius: var(--r-lg); background: var(--white); transition: transform var(--dur) var(--ease-out); }
.offers__item:hover { transform: translateY(-3px); }
.offers__item--lead { background: var(--yellow); --muted: var(--ink); }
.offers__tag { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.offers__item h3 { margin: 4px 0 0; font-size: 22px; }
.offers__item p:not(.offers__tag) { margin: 0 0 8px; color: var(--muted); }
.offers__item > .btn, .offers__item > .text-link, .offers__links { margin-top: auto; }
.offers__links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.plinks { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 0; padding: 0; }
.plinks__link { display: flex; flex-direction: column; align-items: start; gap: 10px; height: 100%; padding: 24px; border-radius: var(--r-lg); background: var(--stone-2); transition: background-color var(--dur-fast), transform var(--dur) var(--ease-out); }
.plinks__link:hover { background: var(--stone); transform: translateY(-3px); }
.plinks__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.plinks__cat { font-size: 13px; font-weight: 600; }
.plinks__title { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.plinks__summary { font-size: 15px; color: var(--muted); }
.plinks__out { font-size: 14px; }
.plinks__out b { display: block; margin-bottom: 2px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.plinks__more { margin-top: auto; }
.plinks__note { margin: 18px 0 0; }

@media (max-width: 1240px) {
  .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .art__label { font-size: 20px; }
  .art__mono { font-size: 15px; }
  .offers { grid-template-columns: minmax(0, 1fr); }
  .offers__item, .plinks__link { padding: 20px; }
}

/* 23. For Professionals (2026-10-20) =========================================
   The individual's landing page: hero with a glass "how it works" card, the founder's
   record, workplace challenges, who it is for, and the Professionals / Business split.
   Accents: Yellow leads the hero, the steps and "you are here"; Pink only marks the challenges. */
.pro-hero h1 { max-width: 17ch; font-size: clamp(42px, 4.6vw, 68px); }
.pro-hero .phero__copy > .eyebrow { margin-bottom: 18px; }
.pro-hero__media { position: relative; }
.pro-hero__media .phero__photo img { aspect-ratio: 4 / 3.6; }
.pro-hero__card { position: absolute; left: clamp(-40px, -2.5vw, -16px); bottom: clamp(16px, 2.5vw, 32px); width: min(300px, 78%); padding: 18px 20px; border-radius: var(--r); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 0 0 1px var(--glass-edge), var(--glass-shadow); }
.pro-hero__label { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.pro-hero__card ol { list-style: none; counter-reset: h; display: grid; gap: 8px; margin: 0; padding: 0; }
.pro-hero__card li { counter-increment: h; position: relative; min-height: 24px; padding: 2px 0 0 34px; font-size: 14.5px; line-height: 1.4; }
.pro-hero__card li::before { content: counter(h); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--yellow); font-size: 12px; font-weight: 700; position: absolute; left: 0; top: 0; }
.motion .pro-hero__card { animation: fw-rise 800ms 320ms var(--ease-out) both; }

/* Photo on the left runs the full height of the section; copy and record cards stack on the right */
.pro-trust { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: stretch; }
.pro-trust__photo { position: relative; margin: 0; min-height: 420px; overflow: hidden; border-radius: var(--r-lg); background: var(--stone); }
.pro-trust__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.pro-trust__body { display: flex; flex-direction: column; justify-content: center; gap: clamp(28px, 3.5vw, 44px); }
.pro-trust h2 { margin: 12px 0 12px; max-width: 22ch; font-size: var(--fs-h2); }
.pro-trust__lead { margin: 0; max-width: 64ch; color: var(--muted); font-size: var(--fs-lead); }
.pro-trust__record { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.pro-trust__more { margin-top: 10px; }
.pro-trust__record > div { --muted: var(--ink); padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-lg); background: var(--pink); }
/* checkerboard: pink / yellow, yellow / pink */
.pro-trust__record > div:nth-child(4n+2), .pro-trust__record > div:nth-child(4n+3) { background: var(--yellow); }
.pro-trust__record dt { font-family: var(--font-display); font-size: clamp(34px, 3.2vw, 52px); font-weight: 700; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.pro-trust__record dd { max-width: 26ch; margin: 12px 0 0; font-size: 14.5px; line-height: 1.5; }

/* Interactive stats: hover (pointer devices), keyboard focus or a tap (.is-open, js/main.js) lifts
   the card and brings up its reveal row: a link chip or flags. The row's height is reserved so the
   card never shifts, and the + hint in the corner steps aside as it opens. */
.pro-stat { position: relative; display: flex; flex-direction: column; cursor: pointer; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.pro-stat::after { content: ""; position: absolute; top: clamp(14px, 1.6vw, 20px); right: clamp(14px, 1.6vw, 20px); width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(var(--ink), var(--ink)) center / 10px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 10px no-repeat, rgb(255 255 255 / 0.55); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-out); }
.pro-stat__unit { font-size: 0.5em; font-weight: 600; letter-spacing: -0.02em; }
.pro-trust__record .pro-stat__reveal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 40px; max-width: none; margin: auto 0 0; padding-top: 16px; }
.pro-stat__reveal > * { opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-expo); transition-delay: calc(var(--i, 0) * 60ms); }
.pro-stat__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px 6px 6px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 13.5px; font-weight: 600; line-height: 1.2; text-decoration: none; }
.pro-stat__chip:hover { background: var(--white); color: var(--ink); }
.pro-stat__chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.pro-stat__icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--white); color: var(--ink); }
.pro-stat__icon svg { width: 16px; height: 16px; }
.pro-stat__flag { display: block; flex: none; width: 36px; height: 24px; overflow: hidden; border-radius: 4px; box-shadow: 0 0 0 1px rgb(26 26 26 / 0.12), 0 6px 12px -6px rgb(26 26 26 / 0.4); }
.pro-stat__flag .flag { display: block; width: 100%; height: 100%; }
.pro-stat__note { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; transition-delay: 60ms; }
.pro-stat:focus-within, .pro-stat.is-open { transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgb(26 26 26 / 0.45); }
.pro-stat:focus-within::after, .pro-stat.is-open::after { opacity: 0; transform: rotate(90deg) scale(0.6); }
.pro-stat:focus-within .pro-stat__reveal > *, .pro-stat.is-open .pro-stat__reveal > * { opacity: 1; transform: none; pointer-events: auto; }
@media (hover: hover) {
  .pro-stat:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgb(26 26 26 / 0.45); }
  .pro-stat:hover::after { opacity: 0; transform: rotate(90deg) scale(0.6); }
  .pro-stat:hover .pro-stat__reveal > * { opacity: 1; transform: none; pointer-events: auto; }
}

/* Challenges: a scroll-snap row of cards, two per view (one on small screens). Swipe and trackpad
   scrolling are native; main.js adds the arrows, the 01–02 / 04 count and the progress line, and
   pages two cards at a time. Without JS the row still scrolls and snaps. */
.pro-pains { --per: 2; --gap: var(--col-gap); }
.pro-pains__track { list-style: none; position: relative; display: flex; gap: var(--gap); margin: 0; padding: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: var(--r-lg); }
.pro-pains__track::-webkit-scrollbar { display: none; }
.pro-pains__track:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.pro-pain { flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); display: flex; flex-direction: column; min-width: 0; padding: clamp(28px, 3.2vw, 48px); border-radius: var(--r-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); scroll-snap-align: start; }
.pro-pain:nth-child(2n) { scroll-snap-align: none; }
.pro-pain::before { content: ""; width: 32px; height: 3px; margin-bottom: clamp(22px, 2.4vw, 30px); border-radius: 3px; background: var(--pink); }
.pro-pain__quote { margin: 0; max-width: 22ch; font-family: var(--font-display); font-size: clamp(24px, 2.3vw, 32px); font-weight: 600; line-height: 1.22; letter-spacing: -0.025em; text-wrap: balance; }
.pro-pain__fix { margin: auto 0 0; padding-top: clamp(48px, 5vw, 72px); max-width: 46ch; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.pro-pain__fix b { display: block; margin-bottom: 10px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.pro-pains__controls { display: flex; align-items: center; gap: 12px; margin-top: clamp(20px, 2.4vw, 28px); }
.pro-pains__progress { position: relative; flex: 1; max-width: 200px; height: 2px; margin-right: auto; border-radius: 2px; background: rgb(26 26 26 / 0.12); overflow: hidden; }
.pro-pains__progress span { position: absolute; inset: 0 auto 0 0; width: calc(100% * var(--per) / 4); border-radius: inherit; background: var(--ink); transform: translateX(calc(var(--page, 0) * 100%)); transition: transform var(--dur) var(--ease-out); }
.pro-pains .voices__btn[aria-disabled="true"] { opacity: 0.35; cursor: default; pointer-events: none; }
.motion .pro-pains .pro-pain { animation: fw-rise 800ms var(--ease-out) both; }
.motion .pro-pains .pro-pain:nth-child(2) { animation-delay: 90ms; }
.motion .pro-pains .pro-pain:nth-child(n+3) { animation-delay: 180ms; }



.pro-events__more { margin-top: 24px; }

/* For Professionals or For Business: two solid cards in the What changes for you treatment
   (.pp-gain__item, css/professionals.css): Faith Pink for this page, AI Yellow for organizations,
   the homepage pathway icon on its tile (.pp-gain__icon) at the top, the flag where that section
   puts its number, then the title and the facts on hairline rules. */
.pro-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.pro-path { position: relative; display: flex; flex-direction: column; align-items: start; padding: clamp(28px, 3vw, 44px) clamp(24px, 3.4vw, 56px) clamp(36px, 4vw, 60px); border-radius: var(--r-lg); background: var(--yellow); color: var(--ink); --muted: var(--ink); --icon-bg: linear-gradient(160deg, rgb(255 255 255 / 0.66), rgb(255 255 255 / 0.32)); }
.pro-path--here { background: var(--pink); --icon-bg: linear-gradient(160deg, rgb(255 255 255 / 0.62), rgb(255 255 255 / 0.3)); }
.pro-path__flag { position: absolute; top: clamp(28px, 3vw, 44px); right: clamp(24px, 3.4vw, 56px); margin: 0; font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pro-path h3 { margin: 0; padding-top: clamp(48px, 6vw, 96px); font-size: clamp(30px, 3vw, 48px); line-height: 1.02; letter-spacing: -0.045em; }
.pro-path__facts { display: grid; width: 100%; margin: clamp(24px, 2.4vw, 36px) 0 clamp(28px, 3vw, 40px); }
.pro-path__facts > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid rgb(26 26 26 / 0.2); }
.pro-path__facts > div:last-child { border-bottom: 1px solid rgb(26 26 26 / 0.2); }
.pro-path__facts dt { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pro-path__facts dd { margin: 0; font-size: 17px; line-height: 1.6; }
.pro-path > .btn, .pro-path__links { margin-top: auto; }
.pro-path__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

.pro-cta .actions { flex-wrap: wrap; }

@media (max-width: 900px) {
  .pro-hero__card { position: relative; left: auto; bottom: auto; width: auto; margin: -36px 16px 0; }
  .pro-hero__media .phero__photo img { aspect-ratio: 16 / 10; }
  .pro-trust { grid-template-columns: minmax(0, 1fr); }
  .pro-trust__photo { min-height: 0; aspect-ratio: 4 / 3; }
  .pro-pains { --per: 1; --gap: 12px; }
  .pro-pain:nth-child(2n) { scroll-snap-align: start; }
  .pro-paths { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .art__label { font-size: 20px; }
  .art__mono { font-size: 15px; }
  .pro-trust__record { gap: 8px; }
  .pro-trust__record > div { padding: 18px 16px; }
  .pro-trust__record dd { font-size: 13.5px; }
  .pro-trust__record .pro-stat__reveal { gap: 5px; }
  /* the hint moves into the empty reveal row, clear of the number */
  .pro-stat::after { top: auto; bottom: 16px; right: 14px; width: 22px; height: 22px; }
  .pro-stat__chip { gap: 6px; padding-right: 12px; font-size: 12.5px; }
  .pro-stat__icon { width: 24px; height: 24px; }
  .pro-stat__icon svg { width: 14px; height: 14px; }
  .pro-stat__flag { width: 27px; height: 18px; border-radius: 3px; }
  .pro-pain__quote { max-width: none; }
  .pro-pain__fix { padding-top: 40px; }
  .pro-paths { gap: 12px; }
  .pro-path { padding: 24px 24px 32px; }
  .pro-path__flag { top: 24px; right: 24px; }
  .pro-path h3 { padding-top: 36px; }
  .pro-path__facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pro-path__facts dd { font-size: 16px; }
  .pro-cta .actions .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .motion .pro-hero__card, .motion .pro-pains .pro-pain { animation: none; }
  .pro-pains__track { scroll-behavior: auto; }
  .pro-pains__progress span { transition: none; }
  .pro-stat, .pro-stat::after, .pro-stat__reveal > * { transition: opacity var(--dur-fast) linear; transition-delay: 0s; }
  .pro-stat.is-open, .pro-stat:focus-within, .pro-stat:hover, .pro-stat__reveal > * { transform: none !important; }
}

/* 24. Learn page (2026-10-22) ================================================
   Editorial hero with a layered photo collage; Programs as the home Programs split,
   mirrored (tools/render.mjs programGrid; js/main.js §5b); the goal finder; what every program page answers; the closing starter-kit step. The hero leads with Faith Pink, the close with AI Yellow. */

/* Hero: an oversized two-line headline beside the clean workshop gallery */
.lhero { padding-block: clamp(48px, 6vw, 84px) clamp(52px, 6vw, 92px); }
.lhero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr); gap: clamp(36px, 5vw, 68px); align-items: center; }
.phero h1.lhero__title,
.phero h1.hero__title--xl { max-width: none; font-size: clamp(46px, 5.8vw, 92px); font-weight: 800; line-height: 0.96; letter-spacing: -0.045em; margin: 0; }
.phero--ink h1.hero__title--xl { color: var(--white); }
.lhero__line { display: block; }
.lhero__title mark { padding: 0 0.04em; margin: 0 -0.04em; background: linear-gradient(transparent 58%, var(--pink) 58%, var(--pink) 88%, transparent 88%); color: inherit; }
.lhero__lead { max-width: 44ch; margin-top: clamp(20px, 2.2vw, 32px); font-size: clamp(17px, 1.25vw, 19.5px); line-height: 1.55; text-wrap: pretty; }
.lhero__actions { gap: 14px; margin: clamp(24px, 2.8vw, 36px) 0 0; }
.lhero__actions .btn { min-height: 52px; padding: 14px 26px; font-size: 15px; }

/* Workshop & showcase photo gallery: clean stage image over thumbnail row with zoom & parallax */
.pgallery { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.pgallery__stage { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--stone); aspect-ratio: 16 / 11; border: 1px solid rgb(26 26 26 / 0.08); box-shadow: 0 4px 16px -4px rgb(26 26 26 / 0.1), 0 20px 40px -20px rgb(26 26 26 / 0.22); perspective: 1000px; }
.phero--ink .pgallery__stage { background: var(--ink); border-color: transparent; }
.pgallery__stage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pgallery__stage.is-zooming img { animation: pgallery-zoom 5s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
.pgallery__dissolve-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; will-change: opacity; }
@keyframes pgallery-zoom {
  0% { transform: scale(1.1); }
  100% { transform: scale(1.02); }
}
.pgallery__thumbs { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 12px); margin: 0; padding: 0; }
.pgallery__thumb { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; margin: 0; border: 2px solid transparent; border-radius: var(--r-sm); overflow: hidden; background: var(--stone); cursor: pointer; opacity: 0.65; transition: opacity var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast); }
.pgallery__thumb:hover { opacity: 1; transform: translateY(-2px); }
.pgallery__thumb[aria-pressed="true"] { opacity: 1; border-color: var(--pink); box-shadow: 0 2px 10px rgb(239 172 186 / 0.5); transform: translateY(-2px); }
.phero--yellow .pgallery__thumb[aria-pressed="true"], .phero--pink .pgallery__thumb[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 2px 10px rgb(26 26 26 / 0.35); }
.phero--ink .pgallery__thumb[aria-pressed="true"] { border-color: var(--yellow); box-shadow: 0 2px 10px rgb(251 197 34 / 0.45); }
.pgallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
.pgallery__thumb:hover img { transform: scale(1.06); }

/* Programs section: header, the five stages as one circuit trace, and the card grid it branches into.
   --drop is the gap between the strip and the cards. */
.lprograms { --drop: clamp(48px, 5vw, 72px); --node: 76px; --strip-pad: clamp(18px, 1.8vw, 28px); --rail-x: calc(var(--strip-pad) + var(--node) / 2); padding-top: var(--section); padding-bottom: clamp(48px, 5vw, 80px); }
.lprograms__head { display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap); row-gap: 14px; align-items: end; margin-bottom: clamp(28px, 3.2vw, 44px); }
.lprograms__head h2 { grid-column: 1 / span 6; margin: 0; font-size: var(--fs-h2); line-height: 0.95; letter-spacing: -0.05em; }
.lprograms__head p { grid-column: 7 / -1; max-width: 44ch; margin: 0; padding-bottom: 0.3em; font-size: var(--fs-lead); color: var(--muted); }

/* Five stages: the For Business step cards (css/professionals.css pp-gain) in five columns, Faith Pink
   and AI Yellow in turn. Each leads with a line icon (.route__* strokes) on a glass tile, its number on
   the right; the body opens on hover or focus. --rail-x sits on the first icon's centre so the trace
   below drops from it. */
.journey-strip { --node: 76px; --strip-pad: clamp(18px, 1.8vw, 28px); position: relative; }
.lprograms .journey-strip { margin-bottom: var(--drop); }
.journey-strip__head { margin: 0 0 clamp(18px, 2vw, 24px); font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.journey-strip__steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); margin: 0; padding: 0; }
.journey-strip__step { --muted: var(--ink); position: relative; display: flex; flex-direction: column; min-height: clamp(260px, 22vw, 330px); padding: var(--strip-pad); border-radius: var(--r-lg); background: var(--pink); color: var(--ink); outline: none; --icon-bg: linear-gradient(160deg, rgb(255 255 255 / 0.62), rgb(255 255 255 / 0.3)); }
.journey-strip__step:nth-child(even) { background: var(--yellow); --icon-bg: linear-gradient(160deg, rgb(255 255 255 / 0.66), rgb(255 255 255 / 0.32)); }
.journey-strip__step:focus-visible { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.journey-strip__icon { display: grid; place-items: center; width: var(--node); height: var(--node); border-radius: 20px; background: var(--icon-bg); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), inset 0 0 0 1px rgb(26 26 26 / 0.06), 0 8px 18px -12px rgb(26 26 26 / 0.35); }
.journey-strip__icon svg { width: 42px; height: 42px; overflow: visible; }
.journey-strip__tick { fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.journey-strip__num { position: absolute; top: var(--strip-pad); right: var(--strip-pad); font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; }
.journey-strip__title { display: block; margin-top: auto; padding-top: 32px; font-family: var(--font-display); font-size: clamp(24px, 2.1vw, 34px); font-weight: 600; line-height: 1.05; letter-spacing: -0.045em; }
.journey-strip__desc { display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(6px); font-size: 15px; line-height: 1.5; transition: grid-template-rows 360ms var(--ease-out), opacity 360ms var(--ease-out), transform 360ms var(--ease-out); }
.journey-strip__desc > span { overflow: hidden; }
.journey-strip__desc > span::before { content: ""; display: block; height: 12px; }
.journey-strip__step:hover .journey-strip__desc, .journey-strip__step:focus-within .journey-strip__desc { grid-template-rows: 1fr; opacity: 1; transform: none; }
@media (hover: none) { .journey-strip__desc { grid-template-rows: 1fr; opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .journey-strip__desc { transition: none; } }
/* Program agenda cards are as tall as the For Business step cards (.pp-gain__item, 5:6 across four
   columns), whatever the column count; a minimum, not a ratio, so a card still grows when its body opens */
@media (min-width: 1025px) { .journey-strip__steps--agenda .journey-strip__step { min-height: 27.5vw; } }
/* Program pages, How it runs: the same stage cards for the agenda's three or four steps,
   one row on wide screens and two by two for four steps on tablets */
.journey-strip__steps--agenda { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.journey-strip__steps--agenda .journey-strip__desc { margin: 0; }
@media (max-width: 1100px) { .journey-strip__steps--agenda:has(> li:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Speaking, Topics: the same cards with the topic as an h3; longer titles, so a step smaller */
.journey-strip__steps--topics .journey-strip__title { margin: auto 0 0; font-size: clamp(22px, 1.75vw, 28px); line-height: 1.1; letter-spacing: -0.035em; }

/* Programs: the home Programs split (.pscene, tools/render.mjs programGrid) mirrored. The programs
   pass on the left on the page ground, with no card fill; one mockup holds sticky on the right and
   js/main.js (§5b) shows the view of the program crossing the middle of the screen. Narrower,
   each program is a card with its own copy of its view above its text. */
.pgrid { list-style: none; margin: 0; padding: 0; }

/* The tone only picks the accent the outcome uses. --mix is the pink-to-yellow
   blend the outcome panel uses. */
.pgrid .prog { --accent: var(--pink);
  --mix: linear-gradient(110deg, rgb(239 172 186 / 0.42), rgb(250 235 192 / 0.62) 55%, rgb(251 197 34 / 0.3));
  position: relative; display: block; }
.pgrid .prog--yellow, .pgrid .prog--ink { --accent: var(--yellow); }

/* Body, top to bottom: the category label, the title and line lead; the outcome is
   the one highlighted panel; For and Format are a small spec table, label left, answer right;
   the footer holds the CTA. */
.pgrid .prog__body { display: flex; flex-direction: column; padding: clamp(26px, 2.8vw, 44px) clamp(24px, 2.8vw, 44px) clamp(24px, 2.6vw, 40px); }
.pgrid .prog__cat { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
/* Each category is led by the program's number in a filled circle, pink then yellow, alternating */
.pgrid { counter-reset: prog; }
.pgrid > .pstep { counter-increment: prog; }
.pgrid .prog__cat::before { content: counter(prog, decimal-leading-zero); flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--pink); color: var(--ink); font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.pgrid > .pstep:nth-child(even) .prog__cat::before { background: var(--yellow); }
.pgrid .prog__title { max-width: none; margin: 0 0 14px; font-size: clamp(36px, 4.2vw, 64px); line-height: 1.02; letter-spacing: -0.045em; text-wrap: balance; }
.pgrid .prog__summary { max-width: 46ch; margin: 0 0 clamp(22px, 2.2vw, 28px); font-size: 18px; line-height: 1.5; color: var(--ink); opacity: 0.78; text-wrap: pretty; }

/* "You leave with": a glassy tinted panel led by a checked circuit node, with an accent rail */
.pgrid .prog__outcome { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 16px; align-items: center; margin: 0 0 clamp(18px, 2vw, 24px); padding: 16px 20px 16px 18px; border-radius: var(--r); overflow: hidden;
  border: 1px solid rgb(26 26 26 / 0.08); background: var(--mix), rgb(255 255 255 / 0.55); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.pgrid .prog__outcome::before { content: ""; grid-row: 1 / span 2; width: 38px; height: 38px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M11.5 18.5l4.5 4.5 9-9.5' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E") center / 100% no-repeat; outline: 3px solid var(--accent); }
.pgrid .prog__outcome::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--pink), var(--yellow)); }
.pgrid .prog__outcome dt { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.pgrid .prog__outcome dd { margin: 3px 0 0; font-family: var(--font-display); font-size: clamp(17px, 1.35vw, 19px); font-weight: 600; line-height: 1.28; letter-spacing: -0.018em; color: var(--ink); text-wrap: balance; }

/* For / Format: label column and answer column, rows split by hairlines; each audience is its own
   line, marked with a small pad like the art's junctions */
.pgrid .prog__facts { display: grid; margin: 0; border-top: 1px solid var(--line); }
.pgrid .prog__fact { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pgrid .prog__facts dt { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.pgrid .prog__facts dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.pgrid .prog__for { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pgrid .prog__for li { position: relative; padding-left: 16px; }
.pgrid .prog__for li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
@media (max-width: 480px) {
  .pgrid .prog__fact { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
}

.pgrid .prog__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: 0; padding-top: clamp(18px, 1.8vw, 24px); }

/* Wide: the stage on the right, the programs on the left */
@media (min-width: 1024px) {
  .pscene--learn { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .pscene--learn .pscene__stage { grid-column: 2; grid-row: 1; }
  .pscene--learn .pscene__steps { grid-column: 1; grid-row: 1; }
  .pscene--learn .prog { flex: 1; min-width: 0; }
  .pscene--learn .prog__body { padding: 0; }
}

/* Goal finder: four clean radio rows beside the recommendation preview */
.fit { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
.fit__intro { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; margin-bottom: 6px; }
.fit__intro h2 { max-width: 18ch; margin: 0; font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.04em; }
.fit__caption { margin: 0; padding-bottom: 0.2em; font-size: var(--fs-lead); color: var(--muted); }
.fit__goals { display: grid; gap: 12px; }
.fit__goals button { position: relative; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 16px 22px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--white); color: var(--ink); text-align: left; font-family: var(--font); font-size: 16.5px; font-weight: 500; line-height: 1.35; cursor: pointer; transition: border-color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-fast); }
.fit__goals button::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgb(26 26 26 / 0.35); background: var(--white); box-shadow: inset 0 0 0 3px var(--white); transition: border-color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-fast); }
.fit__goals button:hover { border-color: var(--ink); background: var(--white); }
.fit__goals button:hover::before { border-color: var(--ink); }
.fit__goals button[aria-checked="true"] { border-color: var(--ink); background: var(--ink); color: var(--white); font-weight: 600; box-shadow: 0 4px 16px -4px rgb(26 26 26 / 0.18); }
.fit__goals button[aria-checked="true"]:hover { border-color: var(--ink); background: var(--ink); color: var(--white); }
.fit__goals button[aria-checked="true"]::before { border-color: var(--yellow); background: var(--yellow); box-shadow: inset 0 0 0 3.5px var(--ink); }
/* The recommendation: always a white card on the band, whichever goal is chosen */
.fit__preview { display: flex; flex-direction: column; padding: clamp(32px, 3.6vw, 52px); border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); transition: color 400ms var(--ease-out); }
.fit__kicker { margin: 0 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.fit__name { margin: 0 0 clamp(24px, 2.6vw, 32px); font-size: clamp(30px, 3vw, 44px); font-weight: 700; line-height: 1.06; letter-spacing: -0.04em; text-wrap: balance; }
/* Who it is for and what you leave with: a small label over each answer */
.fit__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; margin: 0 0 clamp(28px, 3vw, 36px); }
.fit__facts dt { margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.fit__facts dd { margin: 0; font-size: 17.5px; font-weight: 500; line-height: 1.45; }
.fit__actions { margin-top: auto; }
.fit__preview > * { transition: opacity 200ms var(--ease-out); }
.fit__preview.is-swapping > * { opacity: 0; }

/* Before you register: prominent 6-point grid with oversized numbers */
.promise { padding-block: clamp(52px, 6vw, 100px); }
.promise__head { display: grid; gap: 12px; margin-bottom: clamp(36px, 4.5vw, 64px); }
.promise__head .eyebrow { margin: 0; color: var(--rose); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 13px; }
.promise__head h2 { max-width: 22ch; margin: 0; font-size: var(--fs-h2); font-weight: 800; line-height: 1.05; letter-spacing: -0.045em; color: var(--ink); }
.promise__grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) clamp(24px, 3.2vw, 48px); margin: 0; padding: 0; }
.promise__item { position: relative; display: flex; flex-direction: column; padding-top: clamp(20px, 2.4vw, 28px); border-top: 2px solid var(--line); transition: border-color var(--dur-fast) var(--ease-out); }
.promise__item:hover { border-top-color: var(--pink); }
/* Card variant (Learn's six answers, Build's demo steps): compact White cards with a line icon
   (the journey strip's set) on a square tile, alternating Faith Pink and AI Yellow */
.promise__grid.promise__grid--cards { gap: clamp(10px, 1.2vw, 16px); }
.promise__grid--cards .promise__item { padding: clamp(22px, 2.4vw, 32px); border: 0; border-radius: var(--r-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--dur-fast) var(--ease-out); }
.promise__grid--cards .promise__item:hover { box-shadow: inset 0 0 0 1.5px var(--pink); }
.promise__icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: clamp(22px, 2.2vw, 30px); border-radius: 12px; background: var(--pink); }
.promise__item:nth-child(even) .promise__icon { background: var(--yellow); }
.promise__icon svg { width: 36px; height: 36px; overflow: visible; }
.promise__icon :is(.route__line, .route__ring, .route__node, .route__head, .journey-strip__tick) { stroke-width: 2.6; }
.promise__grid--cards .promise__title { margin-bottom: 8px; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.035em; }
.promise__grid--cards .promise__desc { font-size: 15px; }
.promise__num { display: grid; place-items: center; width: clamp(44px, 4.2vw, 50px); height: clamp(44px, 4.2vw, 50px); border-radius: 50%; background: var(--pink); font-family: var(--font-display); font-size: clamp(17px, 1.6vw, 19px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--ink); margin-bottom: clamp(14px, 1.5vw, 20px); }
.promise__title { margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 24px); font-weight: 700; line-height: 1.2; letter-spacing: -0.03em; color: var(--ink); }
.promise__desc { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--muted); }

/* Business: what teams come to us for. The heading holds (sticky, like .faq__head) while the
   checklist scrolls past; each row's rule draws in pink and its check strokes on as it arrives
   (js/motion.js §5b animates --goal-rule and the path). No JS or reduced motion: all drawn. */
.goals { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.goals__head { position: sticky; top: calc(var(--header-h) + 32px); }
.goals__head h2 { max-width: 14ch; margin: 0; font-size: var(--fs-h2); font-weight: 800; line-height: 1.05; letter-spacing: -0.045em; }
.goals__lead { max-width: 40ch; margin: clamp(16px, 1.8vw, 24px) 0 0; font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); }
.goals__list { list-style: none; margin: 0; padding: 0; border-bottom: 2px solid var(--line); }
.goals__item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 2.2vw, 28px); align-items: start; padding-block: clamp(28px, 3.6vw, 48px); border-top: 2px solid var(--line); }
.goals__item::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--pink); transform: scaleX(var(--goal-rule, 1)); transform-origin: left; }
.goals__check { display: grid; place-items: center; width: clamp(44px, 4.2vw, 50px); height: clamp(44px, 4.2vw, 50px); border-radius: 50%; background: var(--pink); }
.goals__check svg { width: 55%; height: 55%; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.goals__text { margin: 0; padding-top: 0.3em; font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); font-weight: 600; line-height: 1.3; letter-spacing: -0.025em; color: var(--ink); }
/* For Professionals, Who it's for: the same checklist, each row a role with a line beneath it */
.goals__head .eyebrow + h2 { margin-top: 18px; }
.goals__desc { max-width: 46ch; margin: 10px 0 0; font-size: 17px; line-height: 1.55; color: var(--muted); }
@media (max-width: 900px) {
  .goals { grid-template-columns: minmax(0, 1fr); }
  .goals__head { position: static; }
}

@media (max-width: 1100px) {
  .lhero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; }
  .fit__facts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .lhero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .phero h1.lhero__title { font-size: clamp(46px, 12vw, 76px); }
  .lprograms__head { display: block; }
  .lprograms__head p { margin-top: 14px; }
  .fit { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .fit__intro { margin-bottom: 0; }
  .promise__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
}
@media (max-width: 720px) {
  /* The stages stack, each card with its body showing */
  .journey-strip__steps, .journey-strip__steps--agenda:has(> li:nth-child(4)) { grid-template-columns: minmax(0, 1fr); }
  .journey-strip__step { min-height: 0; }
  .journey-strip__title { padding-top: 24px; font-size: 28px; }
  .journey-strip__desc { grid-template-rows: 1fr; opacity: 1; transform: none; }
  .pgrid .art__mono { font-size: 13px; }
  .pgrid .art__label { font-size: 17px; }
  /* The programs sit on the section ground rather than White cards; each view keeps its own corners */
  .pgrid { gap: clamp(48px, 12vw, 64px); }
  .pgrid > .pstep { border: 0; border-radius: 0; background: none; overflow: visible; }
  .pgrid > .pstep .pstep__visual { overflow: hidden; border-radius: var(--r-lg); }
  .pgrid .prog__body { padding: 24px 0 0; }
  .pscene__steps { gap: clamp(48px, 12vw, 64px); }
  .pscene__steps > .pstep { border: 0; border-radius: 0; background: none; overflow: visible; }
  .pscene__steps > .pstep .pstep__visual { overflow: hidden; border-radius: var(--r-lg); }
  .pscene__steps > .pstep .pstep__body { padding: 24px 0 0; }
}
@media (max-width: 640px) {
  .lhero__actions .btn { width: 100%; }
  .fit__goals button { min-height: 58px; padding: 14px 18px; font-size: 15.5px; }
  .promise__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .promise__head h2 { font-size: var(--fs-h2); }
}


/* ==========================================================================
   Merged from css/build.css
   ========================================================================== */
/* ==========================================================================
   Faith Works — Build with AI (/build/): use cases, kinds of build, Faith AI
   Loaded by src/pages/build.html, by the program pages for their
   two-step story (§6, tools/render.mjs programOutcomes) and by the starter kit page for its
   seven-step story (§7, src/pages/start-your-ai-journey.html); every class starts bw-. Builds on css/style.css tokens:
   the four brand colours and their tints only, as solid fills (gradients only behind the use-case
   outputs, the Learn mockup grounds); Poppins + Inter.

   One system through three sections: solid grounds, cards on one grid, and three markers that
   always mean the same thing: the AI chip (what AI helps to do), the person seal (what a person
   checks), the filled square (the output). --bw-acc carries the section's one accent: Faith Pink
   for the use cases, AI Yellow for kinds of build and Faith AI.
   Section headings use --fs-h2, which stays below the page hero's --fs-page-h1.

   1. Shared: tokens, section head, markers, skeleton lines, tags
   2. Use cases: the scroll story (cases left, output stage right), flow, the four illustrations
   3. Kinds of build: three cards
   4. Faith AI: copy, the system card, the three steps
   6. Program page: what you learn and leave with (the story with two steps)
   7. Starter kit: what's inside (the story with seven steps, one kit page each)
   5. Responsive
   ========================================================================== */

/* 1. Shared ------------------------------------------------------------------ */
.bw-uses, .bw-kinds, .bw-fai {
  --bw-rule: rgb(26 26 26 / 0.12);
  --bw-acc: var(--pink);
  --bw-pad: clamp(22px, 2.4vw, 32px);
  padding: clamp(72px, 8vw, 128px) var(--edge);
}
.bw-kinds, .bw-fai { --bw-acc: var(--yellow); }

.bw-head { display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap); row-gap: 24px; align-items: end; margin-bottom: clamp(40px, 4.4vw, 64px); }
.bw-head__title { grid-column: 1 / span 7; margin: 0; font-size: var(--fs-h2); line-height: var(--lh-head, 1); letter-spacing: -0.045em; }
.bw-head__intro { grid-column: 8 / -1; max-width: 32em; margin: 0; padding-bottom: 0.35em; font-size: var(--fs-lead); line-height: 1.55; }

/* the key: the three markers, read once, then used by every case */
.bw-key { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; padding-top: 20px; border-top: 1px solid var(--bw-rule); font-size: 15px; font-weight: 600; }
.bw-key__item { display: inline-flex; align-items: center; gap: 10px; }

/* Markers. --m sizes them */
.bw-mark { --m: 26px; position: relative; flex: none; display: inline-grid; place-items: center; width: var(--m); height: var(--m); }
.bw-mark--ai { border-radius: 28%; background: var(--ink); color: var(--white); font: 700 calc(var(--m) * 0.38) / 1 var(--font-display); letter-spacing: 0.02em; }
.bw-mark--person { border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink); }
.bw-mark--person::after { content: ""; width: 24%; height: 44%; margin-top: -12%; border: solid var(--ink); border-width: 0 1.75px 1.75px 0; rotate: 45deg; }
.bw-mark--out::before { content: ""; position: absolute; inset: 18%; border-radius: 22%; background: var(--bw-acc); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* Skeleton text lines inside the illustrations */
.bw-lines { display: grid; gap: 0.5em; width: 100%; }
.bw-lines i { display: block; height: 0.5em; border-radius: 0.25em; background: rgb(26 26 26 / 0.1); }
.bw-lines i:last-child { width: 62%; }
.bw-lines--long i:nth-child(2) { width: 88%; }

.bw-tag { flex: none; padding: 0.3em 0.75em; border-radius: 999px; background: var(--stone-2); font-size: 0.82em; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.bw-tag--pink { background: var(--pink); }
.bw-tag--done { background: var(--ink); color: var(--white); }

/* 2. Use cases -------------------------------------------------------------- */
/* Works White with Charcoal text; Faith Pink numbers on a rail that fills AI Yellow. The outputs sit on the Learn
   mockup gradients (--g0 to --g3, style.css), one per case, behind a glassy White edge. */
.bw-uses { background: var(--paper); color: var(--ink); }

.bw-case__title { margin: 0; font-size: clamp(34px, 3.8vw, 58px); line-height: 1; letter-spacing: -0.045em; }
.bw-case__task { margin: 8px 0 0; font-size: 17px; line-height: 1.5; }
.bw-case__art { display: grid; align-content: center; min-width: 0; padding: clamp(16px, 2vw, 24px); border-radius: var(--r-sm); background: var(--stone-2); font-size: clamp(11px, 0.85vw, 13px); line-height: 1.3; }

/* The story. Static (the default): each case, then its output, on one grid; the wrappers step
   aside (display: contents) so cases and outputs can be placed pair by pair. */
.bw-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 96px) var(--col-gap); align-items: center; }
.bw-story__steps, .bw-story__stage, .bw-story__frame, .bw-story__arts { display: contents; }
.bw-story__rail { display: none; }
.bw-story__step { grid-column: 1; min-width: 0; }
.bw-story__art { grid-column: 2; color: var(--ink); border-radius: var(--r-lg); background: var(--g0); box-shadow: var(--bw-glass); }
.bw-story__art:nth-child(2) { background: var(--g1); }
.bw-story__art:nth-child(3) { background: var(--g2); }
.bw-story__art:nth-child(4) { background: var(--g3); }
/* the glow and grid of .fcard__art belong to the live frame only */
.bw-story:not(.is-live) .bw-story__arts::before, .bw-story:not(.is-live) .bw-story__arts::after { content: none; }
.bw-story__step:nth-of-type(1), .bw-story__art:nth-child(1) { grid-row: 1; }
.bw-story__step:nth-of-type(2), .bw-story__art:nth-child(2) { grid-row: 2; }
.bw-story__step:nth-of-type(3), .bw-story__art:nth-child(3) { grid-row: 3; }
.bw-story__step:nth-of-type(4), .bw-story__art:nth-child(4) { grid-row: 4; }
.bw-story__step .bw-flow { margin-top: 24px; }
/* The glassy edge: a White hairline and a softer inner highlight, no drop shadow */
.bw-uses { --bw-glass: inset 0 0 0 1px rgb(255 255 255 / 0.85), inset 0 1px 0 1px rgb(255 255 255 / 0.5); }

.bw-story__num { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; color: var(--pink); font: 600 13px/1 var(--font-display); transition: background-color 500ms var(--ease-out), color 500ms var(--ease-out); }
/* Stacked (phones, no scroll story): the numbers are filled, alternating Faith Pink and AI Yellow, Charcoal inside */
.bw-story:not(.is-live) .bw-story__num { background: var(--pink); color: var(--ink); box-shadow: none; }
.bw-story:not(.is-live) .bw-story__step:nth-of-type(even) .bw-story__num { background: var(--yellow); }

/* Live (motion.js §5d, wide and tall screens): the cases scroll in the left column, past a rail
   that fills as you go; the frame on the right stays centred on screen and shows the output of
   the case at the centre. The frame keeps one height, the Learn Programs stage's (style.css,
   .pscene__stage), or the tallest output's if that is taller (motion.js measures it into
   --fit-h); it also paces the cases, so the pace stays even. */
.bw-story.is-live {
  --frame-h: max(var(--fit-h, 0px), min(640px, calc(100vh - var(--header-h) - 48px)));
  --step-h: max(var(--frame-h), 56vh);
  align-items: stretch; row-gap: 0;
}
.bw-story.is-live .bw-story__steps { display: block; position: relative; grid-column: 1; grid-row: 1; padding-left: 64px; }
.bw-story.is-live .bw-story__step { position: relative; display: grid; align-content: center; min-height: var(--step-h); opacity: 0.32; transition: opacity 600ms var(--ease-out); }
.bw-story.is-live .bw-story__step.is-active { opacity: 1; }
/* the number sits on the rail, level with the case title (it moves out of the flow's way) */
/* as on For Professionals (css/professionals.css .pp-step__num): the page ground behind it and a
   ring of it round it, so the number cuts the rail cleanly */
.bw-story.is-live .bw-story__num { position: relative; margin: 0 0 -36px; translate: -64px calc((clamp(34px, 3.8vw, 58px) - 36px) / 2); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--pink), 0 0 0 6px var(--paper); } /* level with the title's first line */
.bw-story.is-live .bw-story__step.is-active .bw-story__num { background: var(--pink); color: var(--ink); box-shadow: 0 0 0 6px var(--paper); }
.bw-story.is-live .bw-story__rail { display: block; position: absolute; left: 17px; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: var(--line);
  -webkit-mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
.bw-story.is-live .bw-story__rail i { display: block; height: 100%; border-radius: inherit; background: var(--yellow); transform-origin: top; }

.bw-story.is-live .bw-story__stage { display: block; grid-column: 2; grid-row: 1; }
.bw-story.is-live .bw-story__frame {
  position: sticky; top: calc(var(--header-h) + (100vh - var(--header-h) - var(--frame-h)) / 2);
  display: grid; isolation: isolate; overflow: hidden; border-radius: var(--r-lg); color: var(--ink); box-shadow: var(--bw-glass);
}
/* The frame's ground: one gradient per case, crossfading as the shown case changes */
.bw-story__bg { display: none; }
.bw-story.is-live .bw-story__bg { display: block; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 800ms var(--ease-out); }
.bw-story__bg[data-bg="0"] { background: var(--g0); }
.bw-story__bg[data-bg="1"] { background: var(--g1); }
.bw-story__bg[data-bg="2"] { background: var(--g2); }
.bw-story__bg[data-bg="3"] { background: var(--g3); }
.bw-story:not([data-active]) [data-bg="0"], .bw-story[data-active="0"] [data-bg="0"], .bw-story[data-active="1"] [data-bg="1"], .bw-story[data-active="2"] [data-bg="2"], .bw-story[data-active="3"] [data-bg="3"] { opacity: 1; }
.bw-story.is-live .bw-story__arts { display: grid; align-items: center; height: var(--frame-h); padding: 0; overflow: clip; border-radius: 0; background: none; box-shadow: none; }
.bw-story.is-live .bw-story__art { grid-area: 1 / 1; padding: 20px 24px 18px; border-radius: 0; background: none; box-shadow: none; font-size: clamp(12px, 0.95vw, 14px); visibility: hidden; opacity: 0; }
/* keep the four outputs close in height, so the frame never holds much empty space: the page
   mockup's shape would otherwise grow with the column's width */
.bw-story.is-live .bw-site__page { padding: 1.2em 1.6em; }
.bw-story.is-live .bw-site__shape { aspect-ratio: auto; height: 11em; }

/* Small details settle once an output is shown: the reviewed posts and the page checks tick in */
.motion .bw-story__art.is-active .bw-cal__grid .is-checked::after,
.motion .bw-story__art.is-active .bw-site__checks i { animation: fw-pop 500ms var(--ease-out) 650ms both; }
.motion .bw-story__art.is-active .bw-site__checks span:nth-child(2) i { animation-delay: 750ms; }
.motion .bw-story__art.is-active .bw-site__checks span:nth-child(3) i { animation-delay: 850ms; }
.motion .bw-story__art.is-active .bw-ask__docs .is-hit { animation: bw-hit 900ms var(--ease-out) 500ms both; }
@keyframes bw-hit { from { box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0.9em 1.6em -1em rgb(26 26 26 / 0.28); } to { box-shadow: 0 0 0 1px var(--white), 0 0 0 0.3em rgb(239 172 186 / 0.55), 0 0.9em 1.6em -1em rgb(26 26 26 / 0.28); } }

/* Flow: AI → person → output, three aligned rows */
.bw-flow { display: grid; margin: 0; border-top: 1px solid var(--bw-rule); }
.bw-flow__step { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--bw-rule); }
.bw-flow__step:last-child { border-bottom: 0; padding-bottom: 0; }
.bw-flow dt { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.bw-flow dd { margin: 0; font-size: 16px; line-height: 1.45; }
.bw-flow__step--out dd { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }

/* surfaces shared by the illustrations: the Learn mockup cards (.pout, .pnet__node in style.css),
   White with a translucent White ring and a soft shadow; the small document chips are frosted */
.bw-cal__sheet, .bw-cal__source, .bw-inbox__list, .bw-inbox__draft, .bw-ask__answer, .bw-ask__search, .bw-site {
  border-radius: 0.8em; background: var(--white); box-shadow: 0 0 0 0.45em rgb(255 255 255 / 0.45), 0 1.4em 2.4em -1.2em rgb(26 26 26 / 0.35); }
.bw-ask__docs span { border-radius: 0.8em; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0.9em 1.6em -1em rgb(26 26 26 / 0.28); }

/* 2a. Content planning */
.bw-cal { display: grid; gap: 0.8em; }
.bw-cal__source { display: flex; align-items: center; gap: 0.8em; justify-self: start; padding: 0.7em 1em 0.7em 0.7em; }
.bw-cal__source .bw-mark { --m: 2.2em; }
.bw-cal__source b, .bw-inbox__summary b, .bw-ask__body b { display: block; font-weight: 600; }
.bw-cal__source small { display: block; font-size: 0.86em; }
.bw-cal__sheet { padding: 1em; }
.bw-cal__bar { display: flex; align-items: center; gap: 0.5em; padding-bottom: 0.8em; }
.bw-cal__bar b { margin-right: auto; font: 600 1.15em/1.2 var(--font-display); }
.bw-cal__days, .bw-cal__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4em; }
.bw-cal__days span { padding: 0 0.3em 0.4em; font-size: 0.82em; font-weight: 600; }
.bw-cal__grid span { position: relative; min-height: 4.2em; padding: 0.5em 0.55em; border-radius: 0.5em; background: var(--stone-2); font-size: 0.88em; font-weight: 600; line-height: 1.2; }
.bw-cal__grid .is-post { background: var(--pink-tint); }
.bw-cal__grid .is-checked { background: var(--pink); }
.bw-cal__grid .is-checked::after { content: ""; position: absolute; right: 0.45em; bottom: 0.45em; width: 1.2em; height: 1.2em; border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10.5 17 18 8'/%3E%3C/svg%3E") center / 72% no-repeat; }

/* 2b. Lead follow-up */
.bw-inbox { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.8em; align-items: start; }
.bw-inbox__label { margin: 0 0 0.6em; font-size: 0.86em; font-weight: 600; }
.bw-inbox__list { display: grid; gap: 0.4em; padding: 0.9em; }
.bw-inbox__row { display: flex; align-items: center; gap: 0.6em; padding: 0.6em 0.7em; border-radius: 0.55em; background: var(--stone-2); }
.bw-inbox__row i { flex: none; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--stone); }
.bw-inbox__row b { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bw-inbox__row.is-open { background: var(--white); box-shadow: 0 0 0 1px var(--white), 0 0 0 0.3em rgb(239 172 186 / 0.55), 0 0.9em 1.6em -1em rgb(26 26 26 / 0.28); }
.bw-inbox__row.is-open i { background: var(--pink); }
.bw-inbox__work { display: grid; gap: 0.8em; }
.bw-inbox__summary { display: flex; align-items: flex-start; gap: 0.8em; padding: 0.9em; border-radius: 0.8em; background: var(--pink-tint); }
.bw-inbox__summary .bw-mark { --m: 2em; }
.bw-inbox__summary > span:last-child { flex: 1; display: grid; gap: 0.6em; }
.bw-inbox__draft { display: grid; gap: 0.8em; padding: 0.9em; }
.bw-inbox__draft .bw-inbox__label { margin: 0; }
.bw-checks { display: flex; flex-wrap: wrap; gap: 0.4em; }
.bw-checks span, .bw-site__checks span { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.35em 0.7em 0.35em 0.45em; border-radius: 999px; background: var(--stone-2); font-size: 0.88em; font-weight: 600; }
.bw-checks i { width: 1em; height: 1em; border-radius: 0.25em; box-shadow: inset 0 0 0 1.5px var(--ink); }
.bw-inbox__send { display: flex; align-items: center; gap: 0.6em; padding-top: 0.8em; border-top: 1px solid var(--line); font-weight: 600; }
.bw-inbox__send .bw-mark { --m: 1.8em; }

/* 2c. Team knowledge */
.bw-ask { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 11em); gap: 0.8em; }
.bw-ask__search { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.8em; padding: 0.9em 1.2em; border-radius: 999px; }
.bw-ask__glass { position: relative; flex: none; width: 0.9em; height: 0.9em; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ink); }
.bw-ask__glass::after { content: ""; position: absolute; right: -0.28em; bottom: -0.2em; width: 0.38em; height: 2px; background: var(--ink); rotate: 45deg; }
.bw-ask__q { font-family: var(--font-display); font-size: 1.1em; font-weight: 500; }
.bw-ask__answer { display: flex; align-items: flex-start; gap: 0.8em; padding: 1em; }
.bw-ask__answer .bw-mark { --m: 2.1em; }
.bw-ask__body { flex: 1; display: grid; gap: 0.75em; min-width: 0; }
.bw-ask__refs { display: flex; flex-wrap: wrap; gap: 0.4em; }
.bw-ask__src { padding: 0.4em 0.8em; border-radius: 999px; background: var(--pink); font-size: 0.88em; font-weight: 600; }
.bw-ask__esc { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.25em 0.8em 0.25em 0.3em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 0.88em; font-weight: 600; }
.bw-ask__esc .bw-mark { --m: 1.5em; }
.bw-ask__docs { display: grid; gap: 0.4em; align-content: start; }
.bw-ask__docs span { display: flex; align-items: center; gap: 0.6em; padding: 0.75em 0.9em; font-weight: 600; }
.bw-ask__docs span::before { content: ""; flex: none; width: 0.8em; height: 1em; border-radius: 0.15em; box-shadow: inset 0 0 0 1.5px var(--ink); }
.bw-ask__docs .is-hit { background: var(--white); box-shadow: 0 0 0 1px var(--white), 0 0 0 0.3em rgb(239 172 186 / 0.55), 0 0.9em 1.6em -1em rgb(26 26 26 / 0.28); }
.bw-ask__docs .is-hit::before { background: var(--pink); }

/* 2d. A simple web presence */
.bw-site { overflow: hidden; }
.bw-site__bar { display: flex; align-items: center; gap: 0.45em; padding: 0.8em 1em; border-bottom: 1px solid var(--line); }
.bw-site__bar i { width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--stone); }
.bw-site__bar span { margin-left: 1em; padding: 0.3em 1em; border-radius: 999px; background: var(--stone-2); font-size: 0.86em; font-weight: 600; }
.bw-site__page { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 1.2em 2em; padding: 1.4em 1.8em; }
.bw-site__nav { grid-column: 1 / -1; display: flex; gap: 0.9em; justify-content: flex-end; }
.bw-site__nav i { width: 3.6em; height: 0.55em; border-radius: 0.3em; background: rgb(26 26 26 / 0.12); }
.bw-site__nav i:first-child { width: 2em; height: 2em; margin-right: auto; border-radius: 0.4em; background: var(--ink); }
.bw-site__hero { display: grid; gap: 0.7em; align-content: center; }
.bw-site__hero b { display: block; height: 1.9em; border-radius: 0.4em; background: var(--ink); }
.bw-site__hero b.is-short { width: 68%; }
.bw-site__hero .bw-lines { margin-top: 0.6em; }
.bw-site__hero em { display: block; width: 9em; height: 2.6em; margin-top: 0.8em; border-radius: 0.5em; background: var(--pink); }
.bw-site__shape { align-self: end; aspect-ratio: 1.15; border-radius: 50% 50% 1em 1em; background: var(--pink-tint); box-shadow: inset 0 -3.2em 0 var(--pink); }
.bw-site__checks { display: flex; flex-wrap: wrap; gap: 0.4em; padding: 0.8em 1em; border-top: 1px solid var(--line); }
.bw-site__checks i { width: 1.2em; height: 1.2em; border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10.5 17 18 8'/%3E%3C/svg%3E") center / 72% no-repeat; }

/* 3. Kinds of build --------------------------------------------------------- */
.bw-kinds > * { position: relative; z-index: 1; }
.bw-kinds__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); margin: 0; padding: 0; list-style: none; }

/* All three cards are identical white; the meter carries the difference */
.bw-kind { display: flex; flex-direction: column; align-items: flex-start; padding: var(--bw-pad); border-radius: var(--r-lg); background: var(--white); }

/* support level: one, two, three bars filled; empty bars are a soft grey track */
.bw-kind__meter { display: flex; gap: 4px; margin-bottom: 20px; }
.bw-kind__meter i { width: 22px; height: 6px; border-radius: 3px; background: var(--bw-rule); }
/* filled bars take the brand colours in order: Faith Pink, AI Yellow, then the pink-to-yellow blend
   (/business/ scope options reuse the cards: briefing, workshop, program fill one, two, three) */
.bw-kind--train .bw-kind__meter i:nth-child(1),
.bw-kind--demo .bw-kind__meter i:nth-child(1),
.bw-kind--product .bw-kind__meter i:nth-child(1),
.bw-kind--brief .bw-kind__meter i:nth-child(1),
.bw-kind--team .bw-kind__meter i:nth-child(1),
.bw-kind--program .bw-kind__meter i:nth-child(1) { background: var(--pink); }
.bw-kind--demo .bw-kind__meter i:nth-child(2),
.bw-kind--product .bw-kind__meter i:nth-child(2),
.bw-kind--team .bw-kind__meter i:nth-child(2),
.bw-kind--program .bw-kind__meter i:nth-child(2) { background: var(--yellow); }
.bw-kind--product .bw-kind__meter i:nth-child(3),
.bw-kind--program .bw-kind__meter i:nth-child(3) { background: linear-gradient(90deg, var(--pink), var(--yellow)); }

.bw-kind__name { margin: 0; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -0.035em; }
.bw-kind__cues { display: grid; width: 100%; margin: 20px 0 0; padding: 0; list-style: none; }
.bw-kind__cues li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--bw-rule); font-size: 15px; font-weight: 600; line-height: 1.35; }
.bw-kind__cues li:last-child { border-bottom: 1px solid var(--bw-rule); }
.bw-kind__cues li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.bw-kind > p { margin: 20px 0 12px; font-size: 16px; line-height: 1.6; }
.bw-kind .text-link { margin-top: auto; }
/* labelled cues (/business/ scopes): a small label over each phrase, the card's link after them */
.bw-kind__cues--labelled { margin-bottom: 24px; }
.bw-kind__cues--labelled li { padding: 12px 0; }
.bw-kind__cues--labelled li::before { content: none; }
.bw-kind__cues--labelled small { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3; }
.bw-kinds__note { margin: clamp(24px, 2.4vw, 32px) 0 0; }

/* 4. Faith AI ---------------------------------------------------------------- */
.bw-fai { background: var(--paper); }
.bw-fai__top { display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap); row-gap: 40px; align-items: center; }
.bw-fai__copy { grid-column: 1 / span 5; }
.bw-fai__brand { height: clamp(40px, 4vw, 60px); margin-bottom: clamp(20px, 2.2vw, 32px); }
.bw-fai__lead { max-width: 28em; margin: 24px 0 0; font-size: var(--fs-lead); line-height: 1.5; }
.bw-fai__body { max-width: 34em; margin: 16px 0 0; font-size: 16px; line-height: 1.65; }

/* The system card: the process, its three kinds of work, the person who approves */
.bw-stage { grid-column: 7 / -1; margin: 0; }
.bw-sys { display: grid; gap: 10px; padding: var(--bw-pad); border-radius: var(--r-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; line-height: 1.3; }
/* The use-case outputs' treatment: a Learn mockup gradient (--g1, style.css) behind a glassy
   White edge. The panels stay solid White with a frosted White ring around them. motion.js §5e
   brings the card in. */
.bw-fai { --bw-glass: inset 0 0 0 1px rgb(255 255 255 / 0.85), inset 0 1px 0 1px rgb(255 255 255 / 0.5);
  --bw-ring: 0 0 0 1px var(--glass-edge), 0 0 0 5px rgb(255 255 255 / 0.4); }
.bw-sys.fcard__art { gap: 16px; height: auto; overflow: hidden; background: var(--g1); box-shadow: var(--bw-glass); }
.bw-sys.fcard__art::before, .bw-sys.fcard__art::after { content: none; }
.bw-sys .bw-panel { background: var(--white); box-shadow: var(--bw-ring); }
.bw-sys .bw-panel__row, .bw-sys .bw-panel__msg { background: var(--paper); }
.bw-sys__hub { box-shadow: var(--bw-ring); }
.motion .bw-sys.is-active .bw-sys__human .bw-mark { animation: fw-pop 500ms var(--ease-out) 1100ms both; }
.bw-sys__hub { display: grid; gap: 2px; padding: 14px 18px; border-radius: var(--r-sm); background: var(--ink); color: var(--white); }
.bw-sys__hub small { font-size: 12px; }
.bw-sys__hub b { font-family: var(--font-display); font-size: 17px; font-weight: 600; }

.bw-panel { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 16px; border-radius: var(--r-sm); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.bw-panel__head { display: flex; align-items: center; gap: 10px; }
.bw-panel__head b { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.bw-logo { flex: none; width: 32px; height: 32px; padding: 6px; border-radius: 8px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.bw-panel__body { display: grid; gap: 6px; min-width: 0; }
.bw-panel__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 8px; border-radius: 6px; background: var(--white); font-size: 13px; }
.bw-panel__row em { flex: none; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 600; }
.bw-panel__row .is-new { background: var(--stone); }
.bw-panel__row .is-follow { background: var(--yellow); }
.bw-panel__row .is-done { background: var(--ink); color: var(--white); }
.bw-panel__msg { display: grid; gap: 7px; padding: 8px 10px; border-radius: 6px; background: var(--white); }
.bw-panel__msg small, .bw-panel__foot { font-size: 12px; font-weight: 600; }
.bw-panel__foot { display: flex; align-items: center; gap: 6px; }
.bw-panel__foot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--ink); }
.bw-panel__search { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; }
.bw-panel__search::before { content: ""; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); }
.bw-panel__hit small { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--yellow); font-size: 12px; font-weight: 600; }

.bw-sys__human { display: flex; align-items: center; gap: 10px; padding-top: 6px; }
.bw-sys__human b { display: block; font-weight: 600; }
.bw-sys__human small { display: block; font-size: 13px; }
.bw-stage__cap { margin: 12px 0 0; font-size: 13px; line-height: 1.4; }

/* The three steps, then the demo request */
/* steps reuse the .promise__grid--cards White cards from style.css (as on Learn) */
.bw-fai__path { margin-top: clamp(56px, 6vw, 96px); }

.bw-fai__end { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: clamp(40px, 4vw, 56px); }
.bw-fai__note { flex: 1 1 22em; max-width: 40em; margin: 0; font-size: 14px; line-height: 1.6; }

/* 6. Program page: what you learn and leave with ---------------------------- */
/* The use-case story with two steps on the program pages (tools/render.mjs programOutcomes, which
   also loads this file there). The band stays Soft Stone, so the numbers
   cut the rail with that ground; the outputs keep the gradients and the glassy edge. */
.bw-learn { --bw-rule: rgb(26 26 26 / 0.12); --bw-acc: var(--pink); --bw-glass: inset 0 0 0 1px rgb(255 255 255 / 0.85), inset 0 1px 0 1px rgb(255 255 255 / 0.5); }
.bw-learn .bw-story__num { display: none; }
.bw-learn .bw-story.is-live .bw-story__num { display: grid; background: var(--stone-2); box-shadow: inset 0 0 0 1.5px var(--pink), 0 0 0 6px var(--stone-2); }
.bw-learn .bw-story.is-live .bw-story__step.is-active .bw-story__num { background: var(--pink); box-shadow: 0 0 0 6px var(--stone-2); }
/* two outputs, so each fills the frame: full width (not .fcard__art's centred column), a size up */
.bw-learn .bw-story.is-live .bw-story__arts { justify-content: stretch; }
.bw-learn .bw-story.is-live .bw-story__art { padding: clamp(28px, 3vw, 48px); font-size: clamp(13px, 1.05vw, 16px); }
.bw-learn .bw-case__title { margin-bottom: clamp(20px, 2vw, 28px); }
.bw-learn .numbered, .bw-learn .ticks { max-width: 34em; margin: 0; padding: 0; }
.bw-learn .numbered { border-top: 1px solid var(--bw-rule); }
/* numbers and ticks alternate Faith Pink and AI Yellow, Pink first, Charcoal inside (as .pfor__checks) */
.bw-learn .numbered li::before { width: 26px; height: 26px; background: var(--pink); color: var(--ink); font: 600 12px/1 var(--font-display); }
.bw-learn .ticks { gap: 0; border-top: 1px solid var(--bw-rule); }
.bw-learn .ticks li { padding-block: 14px; padding-left: 42px; border-bottom: 1px solid var(--bw-rule); font-size: 17px; }
.bw-learn .ticks li::before { top: calc(14px + 0.05em); width: 26px; height: 26px;
  background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.6 12.4 10.6 15.4 16.6 9'/%3E%3C/svg%3E") center / 22px no-repeat; }
.bw-learn .numbered li:nth-child(even)::before, .bw-learn .ticks li:nth-child(even)::before { background-color: var(--yellow); }
.bw-learn .small { margin: 20px 0 0; }
/* the Community page's group (templates/community.html): the kit's Next step rows, a label column wide enough for "Encouragement" */
@media (min-width: 681px) { .bw-learn .bw-kitpage__next li { grid-template-columns: 0.72em 9.5em minmax(0, 1fr); } }

/* 6a. The learning path: three frosted steps on a hairline, a Faith Pink node where each meets it */
.bw-path { position: relative; display: grid; gap: 0.9em; padding-left: 2.6em; }
.bw-path::before { content: ""; position: absolute; left: 0.8em; top: 2.4em; bottom: 2.4em; width: 1px; background: rgb(26 26 26 / 0.22); }
.bw-path__row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1em; align-items: center; padding: 1em 1.1em; border-radius: 0.8em; background: var(--white); box-shadow: 0 0 0 0.45em rgb(255 255 255 / 0.45), 0 1.4em 2.4em -1.2em rgb(26 26 26 / 0.35); }
.bw-path__row::before { content: ""; position: absolute; left: -1.8em; top: 50%; width: 1.8em; height: 1px; background: rgb(26 26 26 / 0.22); }
.bw-path__row::after { content: ""; position: absolute; left: calc(-1.8em - 0.36em); top: calc(50% - 0.36em); width: 0.72em; height: 0.72em; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 0.25em rgb(255 255 255 / 0.7); }
.bw-path__num { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--pink-tint); font: 600 1em/1 var(--font-display); }
.bw-path__row.is-now { box-shadow: 0 0 0 1px var(--white), 0 0 0 0.3em rgb(239 172 186 / 0.55), 0 1.4em 2.4em -1.2em rgb(26 26 26 / 0.35); }
.bw-path__row.is-now .bw-path__num { background: var(--pink); }
.bw-path__body { display: grid; gap: 0.6em; min-width: 0; }
.bw-path__body b { font: 600 1.15em/1.2 var(--font-display); letter-spacing: -0.01em; }
.bw-path__row .bw-mark { --m: 2em; }
.bw-path__chips { display: flex; flex-wrap: wrap; gap: 0.4em; }
.bw-path__chips span { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.35em 0.75em; border-radius: 999px; background: var(--stone-2); font-size: 0.88em; font-weight: 600; }
.bw-path__chips--ticks span { padding-left: 0.4em; }
.bw-path__chips--ticks span::before { content: ""; width: 1.2em; height: 1.2em; border-radius: 50%;
  background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10.5 17 18 8'/%3E%3C/svg%3E") center / 70% no-repeat; }
.bw-path__mini { display: flex; align-items: center; gap: 0.9em; }
.bw-path__mini > i { flex: none; width: 4.4em; height: 3em; border-radius: 0.45em; background: var(--pink-tint); box-shadow: inset 0 -0.8em 0 var(--pink); }
.bw-path__mini .bw-lines { max-width: 12em; }
.motion .bw-story__art.is-active .bw-path__chips--ticks span::before { animation: fw-pop 500ms var(--ease-out) 750ms both; }
.motion .bw-story__art.is-active .bw-path__chips--ticks span:nth-child(2)::before { animation-delay: 850ms; }
.motion .bw-story__art.is-active .bw-path__chips--ticks span:nth-child(3)::before { animation-delay: 950ms; }

/* 6b. The example output: the program preview (css/style.css .preview--proto) on the frame's
   gradient: a frosted caption, then the window as a White surface with the illustrations' ring */
.bw-learn__out .preview { display: grid; gap: 0.9em; padding: 0; border-radius: 0; background: none; }
.bw-learn__out .preview__cap { justify-self: start; margin: 0; padding: 0.4em 0.9em; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 0 0 1px var(--glass-edge); color: var(--ink); font-size: 0.9em; }
.bw-learn__out .proto, .bw-learn__out .preview__table, .bw-learn__out .preview__plan, .bw-learn__out .preview__chat { border-radius: 0.8em; box-shadow: 0 0 0 0.45em rgb(255 255 255 / 0.45), 0 1.4em 2.4em -1.2em rgb(26 26 26 / 0.35); }
.bw-learn__out .proto__bar { gap: 0.45em; padding: 0.8em 1em; border-bottom: 1px solid var(--line); background: var(--white); font-size: 1em; color: var(--ink); }
.bw-learn__out .proto__bar i { width: 0.7em; height: 0.7em; background: var(--stone); }
.bw-learn__out .proto__bar span { margin-left: 1em; padding: 0.3em 1em; background: var(--stone-2); font-size: 0.86em; font-weight: 600; }
.bw-learn__out .proto__body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 1.2em; padding: 1.2em; }
.bw-learn__out .proto__page { display: grid; gap: 0.75em; padding: 1.3em 1.2em; border-radius: 0.6em; background: var(--pink-tint); }
.bw-learn__out .proto__page span { border-radius: 0.35em; }
/* tinted, not faded: motion.js brings the parts in at full opacity */
.bw-learn__out .proto__page .proto__nav { width: 40%; height: 0.55em; opacity: 1; background: rgb(26 26 26 / 0.2); }
.bw-learn__out .proto__h { height: 1.5em; }
.bw-learn__out .proto__page .proto__btn { width: 8em; height: 2.4em; margin-top: 0.6em; border: 0; border-radius: 0.5em; background: var(--pink); }
.bw-learn__out .proto__tracker { gap: 0.45em; }
.bw-learn__out .proto__title { margin: 0 0 0.3em; font: 600 1.15em/1.2 var(--font-display); }
.bw-learn__out .proto__row { gap: 0.6em; padding: 0.65em 0.75em; border-radius: 0.55em; }
.bw-learn__out .proto__row span { font-size: 1em; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bw-learn__out .proto__row b { flex: none; padding: 0.3em 0.75em; font-size: 0.82em; line-height: 1.2; }
/* the other programs' outputs (readiness table, content plan, assistant chat) as the same White
   window, sized in em with the frame; separate borders so the table's corners round */
.bw-learn__out .chip { padding: 0.3em 0.75em; font-size: 0.82em; line-height: 1.2; }
.bw-learn__out .preview__table { border-collapse: separate; border-spacing: 0; font-size: 1em; }
.bw-learn__out .preview__table th { padding: 0.85em 1em; background: var(--stone-2); color: var(--ink); font-size: 0.86em; }
.bw-learn__out .preview__table td { padding: 0.8em 1em; font-weight: 600; }
.bw-learn__out .preview__foot { justify-self: start; gap: 0.6em; margin: 0; padding: 0.4em 0.9em 0.4em 0.4em; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 0 0 1px var(--glass-edge); font-size: 0.9em; }
.bw-learn__out .preview__plan, .bw-learn__out .preview__chat { gap: 0.5em; margin: 0; padding: 1.2em; background: var(--white); }
.bw-learn__out .preview__plan li { grid-template-columns: 4.6em minmax(0, 1fr) auto; gap: 0.8em; padding: 0.75em 0.9em; border-radius: 0.55em; background: var(--stone-2); font-size: 1em; font-weight: 600; }
.bw-learn__out .preview__plan b { font-size: 0.86em; }
.bw-learn__out .preview__msg { padding: 0.8em 1em; border-radius: 0.9em; font-size: 1em; }
.bw-learn__out .preview__msg--in { background: var(--stone-2); border-bottom-left-radius: 0.2em; }
.bw-learn__out .preview__msg--out { gap: 0.5em; border-bottom-right-radius: 0.2em; }

/* 7. Starter kit: what's inside --------------------------------------------- */
/* The use-case story with seven steps on /start-your-ai-journey/: the kit's parts on the left,
   the matching kit page on the right. The page ground stays Works White, so the numbers cut the
   rail as on Build with AI; the four gradients take turns behind the seven pages. */
.bw-kit { --bw-rule: rgb(26 26 26 / 0.12); --bw-acc: var(--pink); --bw-glass: inset 0 0 0 1px rgb(255 255 255 / 0.85), inset 0 1px 0 1px rgb(255 255 255 / 0.5); --kit-title: clamp(32px, 3.6vw, 54px); }
.bw-kit__list { display: contents; list-style: none; }
.bw-kit .bw-case__title { font-size: var(--kit-title); }
.bw-kit .bw-case__task { max-width: 34em; }
.bw-kit .bw-story__step:nth-of-type(5), .bw-kit .bw-story__art:nth-child(5) { grid-row: 5; }
.bw-kit .bw-story__step:nth-of-type(6), .bw-kit .bw-story__art:nth-child(6) { grid-row: 6; }
.bw-kit .bw-story__step:nth-of-type(7), .bw-kit .bw-story__art:nth-child(7) { grid-row: 7; }
.bw-kit .bw-story__art:nth-child(5) { background: var(--g0); }
.bw-kit .bw-story__art:nth-child(6) { background: var(--g1); }
.bw-kit .bw-story__art:nth-child(7) { background: var(--g2); }
/* Live: seven short parts, so each holds less scroll than a use case; the frame keeps its height */
.bw-kit .bw-story.is-live { --step-h: max(44vh, 320px); }
.bw-kit .bw-story.is-live .bw-kit__list { display: block; margin: 0; padding: 0; }
.bw-kit .bw-story.is-live .bw-story__num { translate: -64px calc((var(--kit-title) - 36px) / 2); }
.bw-kit .bw-story[data-active="4"] [data-bg="0"], .bw-kit .bw-story[data-active="5"] [data-bg="1"], .bw-kit .bw-story[data-active="6"] [data-bg="2"] { opacity: 1; }
.bw-kit .bw-story.is-live .bw-story__arts { justify-content: stretch; }
/* (grid-area and background again: the rows and grounds for pages 5 to 7 above outrank §2's) */
.bw-kit .bw-story.is-live .bw-story__art { grid-area: 1 / 1; padding: clamp(28px, 3vw, 48px); background: none; font-size: clamp(12px, 1.1vw, 16.5px); }

/* 7a. A kit page: White, the illustrations' ring and shadow; its title over a hairline */
.bw-kitpage { width: 100%; max-width: 38em; justify-self: center; padding: 1.2em 1.3em 1.3em; border-radius: 0.8em; background: var(--white); box-shadow: 0 0 0 0.45em rgb(255 255 255 / 0.45), 0 1.4em 2.4em -1.2em rgb(26 26 26 / 0.35); }
.bw-kitpage__bar { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin: 0 0 1em; padding-bottom: 0.8em; border-bottom: 1px solid var(--bw-rule); font: 600 1.15em/1.2 var(--font-display); letter-spacing: -0.01em; }
.bw-kitpage__bar .bw-tag { font-family: var(--font); font-size: 0.72em; letter-spacing: 0; }
.bw-kitpage .bw-mark, .bw-kitscene__side .bw-mark { --m: 1.6em; }
.bw-kitpage .bw-path__row > .bw-mark { --m: 2em; }
/* the cover (the hero's .kit-preview__cover) beside the start page */
.bw-kitpage__pair { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 1.4em; align-items: center; max-width: 44em; justify-self: center; width: 100%; }
.bw-kitpage__pair .kit-preview__cover { box-shadow: 0 1.4em 2.4em -1.2em rgb(26 26 26 / 0.35); }
/* the learning path rows sit on the page as Soft Stone rows, not White cards */
.bw-kitpage .bw-path__row { background: var(--stone-2); box-shadow: none; }
.bw-kitpage .bw-path__row.is-now { box-shadow: 0 0 0 0.2em rgb(239 172 186 / 0.55); }
.bw-kitpage .bw-path__row::after { box-shadow: 0 0 0 0.25em var(--white); }
.bw-kitpage .bw-path__num { background: var(--white); }
.bw-kitpage .bw-path__row.is-now .bw-path__num { background: var(--pink); }
.bw-kitpage .bw-path__chips span { background: var(--white); }
/* 02 · task selector: the hero's sheet, one task picked */
.bw-kitpage__table { width: 100%; border-collapse: separate; border-spacing: 0; }
.bw-kitpage__table th { padding: 0.7em 0.8em; background: var(--stone-2); font-size: 0.86em; font-weight: 600; text-align: left; }
.bw-kitpage__table th:first-child { border-radius: 0.55em 0 0 0.55em; }
.bw-kitpage__table th:last-child { border-radius: 0 0.55em 0.55em 0; }
.bw-kitpage__table td { padding: 0.75em 0.8em; border-bottom: 1px solid var(--bw-rule); font-weight: 600; }
.bw-kitpage__table td:nth-child(n+2):not(:last-child) { color: var(--rose-dot); letter-spacing: 1px; }
.bw-kitpage__table .is-pick td { background: var(--pink-tint); }
/* 03 · readiness map: seven fields, the two a person owns tinted Faith Pink */
.bw-kitpage__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6em; }
.bw-kitpage__field { display: grid; gap: 0.6em; padding: 0.75em 0.9em 0.85em; border-radius: 0.55em; background: var(--stone-2); }
.bw-kitpage__field.is-wide { grid-column: 1 / -1; }
.bw-kitpage__field.is-check { background: var(--pink-tint); }
.bw-kitpage__field b, .bw-kitpage__prompt b { display: flex; align-items: center; gap: 0.5em; font-weight: 600; }
/* 04 · prompt starter: six parts on hairlines, the review left to a person */
.bw-kitpage__prompt { display: grid; }
.bw-kitpage__prompt > span { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 1em; align-items: center; padding: 0.7em 0; border-bottom: 1px solid var(--bw-rule); }
.bw-kitpage__prompt > span:last-child { border-bottom: 0; padding-bottom: 0; }
.bw-kitpage__prompt .is-check .bw-mark { justify-self: start; }
/* 07 · next step: three destinations on hairlines, a Faith Pink node each */
.bw-kitpage__next { list-style: none; margin: 0; padding: 0; }
.bw-kitpage__next li { display: grid; grid-template-columns: 0.72em 8em minmax(0, 1fr); gap: 0.9em; align-items: center; padding: 1em 0; border-bottom: 1px solid var(--bw-rule); }
.bw-kitpage__next li:last-child { border-bottom: 0; padding-bottom: 0.2em; }
.bw-kitpage__next li::before { content: ""; width: 0.72em; height: 0.72em; border-radius: 50%; background: var(--pink); }
.bw-kitpage__next b { font: 600 1.1em/1.2 var(--font-display); letter-spacing: -0.01em; }
.motion .bw-story__art.is-active .bw-kitpage__next li::before { animation: fw-pop 500ms var(--ease-out) 650ms both; }
.motion .bw-story__art.is-active .bw-kitpage__next li:nth-child(2)::before { animation-delay: 750ms; }
.motion .bw-story__art.is-active .bw-kitpage__next li:nth-child(3)::before { animation-delay: 850ms; }

/* 7b. Around each page: a small card or two overlapping its edge, carrying the page's idea in a
   word or a mark rather than more copy (the home journey's scenes do the same). White cards
   with the page's ring, or frosted like the Build with AI document chips. */
.bw-kitscene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 12.5em); align-items: center; width: 100%; max-width: 46em; justify-self: center; }
.bw-kitscene > * { grid-row: 1; min-width: 0; }
.bw-kitscene .bw-kitpage, .bw-kitscene .bw-kitpage__pair { max-width: none; }
.bw-kitscene__side { position: relative; z-index: 1; display: grid; gap: 0.9em; justify-items: start; margin-left: -2.4em; }
.bw-kitscene__side--start { align-self: start; margin-top: -1.2em; }
.bw-kitscene__side--end { align-self: end; margin-bottom: -1.2em; }
/* below (01, where the cover and page already fill the width): the card under them, overlapping the page's foot */
.bw-kitscene--below { grid-template-columns: minmax(0, 1fr); }
.bw-kitscene--below > .bw-kitscene__side { grid-row: 2; justify-self: end; margin: -1.4em 1.5em 0 0; }
.bw-kitscene--below .bw-kitcard { display: flex; align-items: center; gap: 1.6em; width: auto; }
.bw-kitscene--below .bw-kitcard .bw-path__chips { flex-direction: row; }
.bw-kitcard { display: grid; gap: 0.75em; width: 100%; padding: 0.9em 1em 1em; border-radius: 0.8em; background: var(--white); box-shadow: 0 0 0 0.45em rgb(255 255 255 / 0.45), 0 1.4em 2.4em -1.2em rgb(26 26 26 / 0.35); }
.bw-kitcard--glass { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 0 0 1px var(--glass-edge), 0 1.4em 2.4em -1.2em rgb(26 26 26 / 0.3); }
.bw-kitcard__head { display: flex; align-items: center; gap: 0.55em; font: 600 1em/1.2 var(--font-display); letter-spacing: -0.01em; }
.bw-kitcard .bw-path__chips { flex-direction: column; align-items: flex-start; }
.bw-kitcard .bw-path__chips span { background: var(--stone-2); }
.bw-kitpill { display: inline-flex; align-items: center; gap: 0.6em; margin: 0; padding: 0.4em 0.95em 0.4em 0.4em; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0.9em 1.6em -1em rgb(26 26 26 / 0.28); font-size: 0.9em; font-weight: 600; white-space: nowrap; }
/* 01 · the kit's two files */
.bw-kitfile { display: flex; align-items: center; gap: 0.75em; font-weight: 600; }
.bw-kitfile i { display: grid; place-items: end start; flex: none; width: 3.4em; height: 4.2em; padding: 0.55em; box-sizing: border-box; border-radius: 0.4em 1.1em 0.4em 0.4em; background: var(--pink); font: normal 700 0.72em/1 var(--font-display); letter-spacing: 0.04em; }
.bw-kitfile--txt i { background: var(--yellow); }
/* 03 · the workflow the map plans: one hairline, a mark at each step */
.bw-kitflow { position: relative; gap: 1.05em; }
.bw-kitflow .bw-mark { --m: 1.9em; }
.bw-kitflow::before { content: ""; position: absolute; left: calc(1em + 0.95em - 0.5px); top: 1.9em; bottom: 1.9em; width: 1px; background: rgb(26 26 26 / 0.22); }
.bw-kitflow__step { position: relative; display: grid; grid-template-columns: 1.9em minmax(0, 1fr); gap: 0.7em; align-items: center; font-weight: 600; }
.bw-kitflow__step > :first-child { justify-self: center; }
.bw-kitflow__doc { position: relative; flex: none; width: 1.9em; height: 1.9em; border-radius: 28%; background: var(--stone-2); box-shadow: inset 0 0 0 1px rgb(26 26 26 / 0.14); }
/* 05 · the key to the three marks, as on /build/ */
.bw-kitkey span { display: flex; align-items: center; gap: 0.6em; font-size: 0.92em; font-weight: 600; }
/* 06 · a test week: the days logged so far */
.bw-kittrack { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.35em; }
.bw-kittrack i { display: grid; place-items: end center; aspect-ratio: 3 / 4; padding-bottom: 0.35em; border-radius: 0.45em; background: var(--stone-2); font: normal 600 0.72em/1 var(--font-display); }
.bw-kittrack .is-done { background: var(--pink-tint); box-shadow: inset 0 -0.5em 0 var(--pink); padding-bottom: 0.9em; }
/* 07 · community: a row of members, and room for you */
.bw-kitfaces { display: flex; align-items: center; }
.bw-kitfaces i { flex: none; width: 2.2em; height: 2.2em; margin-right: -0.55em; border-radius: 50%; background: radial-gradient(circle at 50% 38%, rgb(255 255 255 / 0.85) 0 22%, transparent 23%), radial-gradient(ellipse 46% 34% at 50% 100%, rgb(255 255 255 / 0.85) 0 98%, transparent 100%), var(--pink); box-shadow: 0 0 0 0.18em var(--white); }
.bw-kitfaces i:nth-child(even) { background-color: var(--yellow); }
.bw-kitfaces b { margin-left: 1em; padding: 0.35em 0.8em; border-radius: 999px; background: var(--white); font-size: 0.86em; font-weight: 600; white-space: nowrap; }
.motion .bw-story__art.is-active .bw-kittrack .is-done { animation: fw-pop 500ms var(--ease-out) 700ms both; }
.motion .bw-story__art.is-active .bw-kittrack .is-done:nth-child(2) { animation-delay: 800ms; }
.motion .bw-story__art.is-active .bw-kittrack .is-done:nth-child(3) { animation-delay: 900ms; }

/* 7c. Under each part: its line icon on a Faith Pink or AI Yellow tile, a tilted sticker with a
   short nudge, and where it sits in the kit (seven dots, the current one long). Decoration only
   (aria-hidden). As a part becomes the active one, the tile pops, the icon draws itself and the
   sticker slaps on; without the live story they simply show. */
.bw-kitmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: clamp(20px, 2vw, 28px); }
/* the tile and line icon match Learn's .promise__icon: a flat square, alternating Faith Pink and AI Yellow */
.bw-kitmeta__icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: var(--r); background: var(--pink); }
.bw-story__step:nth-of-type(even) .bw-kitmeta__icon { background: var(--yellow); }
.bw-kitmeta__icon svg { width: 30px; height: 30px; overflow: visible; }
.bw-kitmeta__icon [pathLength] { stroke-width: 2.6; stroke-dasharray: 1 1.02; }
.bw-kitmeta__sticker { display: inline-block; padding: 8px 14px; border-radius: 10px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line), 0 10px 18px -14px rgb(26 26 26 / 0.4); font: 600 15px/1.2 var(--font-display); letter-spacing: -0.01em; rotate: 2.5deg; }
.bw-story__step:nth-of-type(even) .bw-kitmeta__sticker { rotate: -2.5deg; }
.bw-kitmeta__sticker::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--pink); vertical-align: 0.1em; }
.bw-story__step:nth-of-type(even) .bw-kitmeta__sticker::before { background: var(--yellow); }
.bw-kitmeta__dots { display: inline-flex; align-items: center; gap: 5px; }
.bw-kitmeta__dots i { width: 8px; height: 8px; border-radius: 999px; background: var(--line); transition: width 500ms var(--ease-out), background-color 500ms var(--ease-out); }
.bw-kitmeta__dots .is-done { background: var(--pink); }
.bw-kitmeta__dots .is-on { width: 26px; background: var(--ink); }
.motion .bw-story.is-live .bw-story__step.is-active .bw-kitmeta__icon { animation: fw-pop 600ms var(--ease-spring) 120ms both; }
.motion .bw-story.is-live .bw-story__step.is-active .bw-kitmeta__icon [pathLength] { animation: fw-draw 1100ms var(--ease-io) 300ms both; }
.motion .bw-story.is-live .bw-story__step.is-active .bw-kitmeta__sticker { animation: bw-stick 650ms var(--ease-out) 380ms both; }
.motion .bw-story.is-live .bw-story__step.is-active .bw-kitmeta__dots .is-on { animation: bw-grow 600ms var(--ease-out) 450ms both; }
@keyframes bw-stick { 0% { opacity: 0; transform: scale(1.35) rotate(-10deg); } 60% { opacity: 1; transform: scale(0.96) rotate(1deg); } 100% { opacity: 1; transform: none; } }
@keyframes bw-grow { from { width: 8px; } to { width: 26px; } }

/* 5. Responsive ------------------------------------------------------------- */
@media (max-width: 1180px) {
  .bw-fai__copy { grid-column: 1 / span 6; }
  .bw-stage { grid-column: 7 / -1; }
  .bw-panel { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

@media (max-width: 960px) {
  .bw-head__title, .bw-head__intro { grid-column: 1 / -1; }
  .bw-head { row-gap: 16px; }
  /* one column: case 1, its output, case 2, its output… */
  .bw-story { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .bw-story__step, .bw-story__art { grid-column: 1; }
  .bw-story__step:nth-of-type(1) { grid-row: 1; } .bw-story__art:nth-child(1) { grid-row: 2; }
  .bw-story__step:nth-of-type(2) { grid-row: 3; } .bw-story__art:nth-child(2) { grid-row: 4; }
  .bw-story__step:nth-of-type(3) { grid-row: 5; } .bw-story__art:nth-child(3) { grid-row: 6; }
  .bw-story__step:nth-of-type(4) { grid-row: 7; } .bw-story__art:nth-child(4) { grid-row: 8; }
  .bw-kit .bw-story__step:nth-of-type(5) { grid-row: 9; } .bw-kit .bw-story__art:nth-child(5) { grid-row: 10; }
  .bw-kit .bw-story__step:nth-of-type(6) { grid-row: 11; } .bw-kit .bw-story__art:nth-child(6) { grid-row: 12; }
  .bw-kit .bw-story__step:nth-of-type(7) { grid-row: 13; } .bw-kit .bw-story__art:nth-child(7) { grid-row: 14; }
  .bw-story__step:not(:nth-of-type(1)) { margin-top: clamp(32px, 6vw, 56px); }
  .bw-case__art { font-size: clamp(11px, 1.7vw, 14px); }
  .bw-kinds__list { grid-template-columns: minmax(0, 1fr); }
  .bw-fai__copy, .bw-stage { grid-column: 1 / -1; }
  .bw-panel { grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 16px; }
}

@media (max-width: 680px) {
  .bw-key { flex-direction: column; gap: 10px; }
  .bw-flow__step { grid-template-columns: minmax(0, 1fr); }
  .bw-flow dd { margin-left: 36px; }
  .bw-cal__days { display: none; }
  .bw-cal__grid { gap: 0.3em; }
  .bw-cal__grid span { min-height: 4.4em; padding: 0.45em; font-size: 0.8em; }
  .bw-cal__bar .bw-tag:not(.bw-tag--done) { display: none; }
  .bw-inbox, .bw-ask { grid-template-columns: minmax(0, 1fr); }
  .bw-site__page { padding: 1.2em; gap: 1em; }
  .bw-panel { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* the program output keeps its page (css/style.css hides it in small previews), stacked above the tracker */
  .bw-learn__out .proto__body { grid-template-columns: minmax(0, 1fr); }
  .bw-learn__out .proto__page { display: grid; }
  .bw-learn__out .preview__plan li { grid-template-columns: minmax(0, 1fr) auto; }
  .bw-learn__out .preview__plan b { grid-column: 1 / -1; }
  .bw-learn__out .preview__table th, .bw-learn__out .preview__table td { padding: 0.7em 0.6em; }
  .bw-path { padding-left: 2.2em; }
  .bw-path__row { grid-template-columns: auto minmax(0, 1fr); padding: 0.9em; }
  .bw-path__row > .bw-mark { display: none; }
  .bw-path__row::before { left: -1.4em; width: 1.4em; }
  .bw-path__row::after { left: calc(-1.4em - 0.36em); }
  .bw-learn .ticks li, .bw-learn .numbered li { font-size: 16px; }
  /* kit pages: the start page alone (no cover on phones); the sheet's five columns kept inside the page */
  .bw-kitpage__pair { grid-template-columns: minmax(0, 1fr); }
  .bw-kitpage__pair .kit-preview__cover { display: none; }
  .bw-kitpage { padding: 1em; }
  .bw-kitpage__table th, .bw-kitpage__table td { padding: 0.6em 0.4em; }
  .bw-kitpage__prompt > span { grid-template-columns: 6.5em minmax(0, 1fr); }
  .bw-kitpage__next li { grid-template-columns: 0.72em minmax(0, 1fr); }
  .bw-kitpage__next .bw-lines { display: none; }
  .bw-kitscene { grid-template-columns: minmax(0, 1fr); }
  .bw-kitscene > * { grid-row: auto; }
  .bw-kitscene__side, .bw-kitscene__side--start, .bw-kitscene__side--end { display: flex; flex-wrap: wrap; align-items: start; justify-content: center; align-self: auto; margin: -0.8em 0 0; padding-inline: 0.8em; }
  .bw-kitscene__side .bw-kitcard { width: auto; max-width: 100%; }
  .bw-kitscene--below > .bw-kitscene__side { justify-self: stretch; margin: -0.8em 0 0; }
  .bw-kitscene--below .bw-kitcard { flex-wrap: wrap; gap: 0.6em 1.2em; }
  .bw-kitcard__head { white-space: nowrap; }
}


/* ==========================================================================
   Merged from css/professionals.css
   ========================================================================== */
/* ==========================================================================
   Faith Works — For Professionals (/professionals/): what changes, who it's for, your AI journey
   Loaded by src/pages/professionals.html; every class starts pp-. Builds on css/style.css tokens:
   the four brand colours and their tints only; Poppins + Inter.

   Three grounds in turn: Works White (with Pink and Yellow cards), Works White, Works White.
   Accents: Pink and Yellow cards, Faith Pink, AI Yellow. No card shadows, no dot patterns: hairline rules carry the
   structure. Gradients, texture and glass are kept for the journey alone.
   Section headings use --fs-h2 (below the page hero) with the Build with AI hero's tight
   leading and tracking (.phero h1, style.css).

   1. Shared: section grounds, heading
   2. What changes for you: the 2×2 grid
   3. Who it's for: the list and the team callout
   4. Your AI journey: Works White ground, the numbered rail, the gradient stage, the four circular visuals
   5. Motion (CSS part; the journey's is js/motion.js §5g)
   6. Responsive
   ========================================================================== */

/* 1. Shared ------------------------------------------------------------------ */
.pp-gain, .pp-who, .pp-path { --pp-acc: var(--yellow); --pp-rule: var(--line-dark); position: relative; padding-block: clamp(80px, 9vw, 144px); }
.pp-gain { --muted: var(--ink); background: var(--paper); color: var(--ink); }
.pp-who { --pp-acc: var(--pink); --pp-rule: var(--line); background: var(--paper); }

.pp-head { display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap); row-gap: 20px; align-items: end; margin-bottom: clamp(48px, 5.6vw, 88px); }
.pp-head > div { grid-column: 1 / span 8; }
.pp-head__title { max-width: 18ch; margin: 18px 0 0; font-size: var(--fs-h2); line-height: 0.98; letter-spacing: -0.055em; }
.pp-head__intro { grid-column: 9 / -1; max-width: 36ch; margin: 0; padding-bottom: 0.3em; font-size: var(--fs-lead); line-height: 1.55; }

/* 2. What changes for you ---------------------------------------------------- */
/* Four stage cards in one row, in the Learn AI "How every program works" style (.journey-strip,
   style.css): Faith Pink and AI Yellow alternating, line icon in the homepage pathway style
   (.route__* strokes, style.css) on a white tile, number on the right, title at the foot. The body
   reveals on hover or keyboard focus; on touch and narrow screens it always shows. Two columns on
   tablets, one stack on phones. Cards keep the Learn strip's portrait shape (5:6) in the row of four. */
.pp-gain__grid { --gain-pad: clamp(18px, 1.8vw, 28px); list-style: none; counter-reset: g; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); margin: 0; padding: 0; }
.pp-gain__item { --muted: var(--ink); counter-increment: g; position: relative; display: flex; flex-direction: column; min-height: clamp(260px, 22vw, 330px); aspect-ratio: 5 / 6; padding: var(--gain-pad); color: var(--ink); border-radius: var(--r-lg); background: var(--pink); outline: none; --icon-bg: linear-gradient(160deg, rgb(255 255 255 / 0.62), rgb(255 255 255 / 0.3)); }
.pp-gain__item:nth-child(even) { background: var(--yellow); --icon-bg: linear-gradient(160deg, rgb(255 255 255 / 0.66), rgb(255 255 255 / 0.32)); }
.pp-gain__item:focus-visible { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.pp-gain__icon { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 24px; background: var(--icon-bg); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), inset 0 0 0 1px rgb(26 26 26 / 0.06), 0 8px 18px -12px rgb(26 26 26 / 0.35); }
.pp-gain__icon svg { width: 48px; height: 48px; overflow: visible; }
.pp-gain__item .pp-gain__icon { width: 76px; height: 76px; border-radius: 20px; }
.pp-gain__item .pp-gain__icon svg { width: 42px; height: 42px; }
.pp-gain__tick { fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp-gain__item::before { content: counter(g, decimal-leading-zero); position: absolute; top: var(--gain-pad); right: var(--gain-pad); font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; }
.pp-gain__item h3 { display: block; margin: auto 0 0; padding-top: 32px; font-family: var(--font-display); font-size: clamp(24px, 2.1vw, 34px); font-weight: 600; line-height: 1.05; letter-spacing: -0.045em; text-wrap: wrap; -webkit-hyphens: manual; hyphens: manual; }
.pp-gain__item p { display: grid; grid-template-rows: 0fr; margin: 0; opacity: 0; transform: translateY(6px); font-size: 15px; line-height: 1.5; transition: grid-template-rows 360ms var(--ease-out), opacity 360ms var(--ease-out), transform 360ms var(--ease-out); }
.pp-gain__item p > span { overflow: hidden; }
.pp-gain__item p > span::before { content: ""; display: block; height: 12px; }
.pp-gain__item:hover p, .pp-gain__item:focus-within p { grid-template-rows: 1fr; opacity: 1; transform: none; }
@media (hover: none) { .pp-gain__item p { grid-template-rows: 1fr; opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pp-gain__item p { transition: none; } }
@media (max-width: 1024px) {
  .pp-gain__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-gain__item { aspect-ratio: auto; }
  .pp-gain__item:nth-child(3) { background: var(--yellow); --icon-bg: linear-gradient(160deg, rgb(255 255 255 / 0.66), rgb(255 255 255 / 0.32)); }
  .pp-gain__item:nth-child(4) { background: var(--pink); --icon-bg: linear-gradient(160deg, rgb(255 255 255 / 0.62), rgb(255 255 255 / 0.3)); }
  .pp-gain__item p { grid-template-rows: 1fr; opacity: 1; transform: none; }
}

/* 3. Who it's for ------------------------------------------------------------ */
/* The heading and checklist are the For Business .goals (style.css); only the ground and the callout are set here */
/* Training a whole team: a different path, so a different object: solid Faith Pink, full width */
.pp-who__note { display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap); row-gap: 12px; align-items: end; margin-top: clamp(56px, 7vw, 112px); padding: clamp(32px, 4vw, 64px); border-radius: var(--r-lg); background: var(--pink); }
.pp-who__note h3 { grid-column: 1 / span 7; margin: 0; font-size: clamp(30px, 3.4vw, 54px); line-height: 1; letter-spacing: -0.05em; }
.pp-who__note p { grid-column: 8 / -1; max-width: 34ch; margin: 0; padding-bottom: 0.2em; font-size: var(--fs-lead); line-height: 1.5; }
.pp-who__note a.inline:hover { color: var(--ink); text-decoration-thickness: 2px; }

/* 4. Your AI journey ----------------------------------------------------------- */
/* Works White, set like the Build with AI use cases (css/build.css §2): the steps on the left
   past a rail at the far left (Faith Pink numbers, an AI Yellow line between them), on the right
   a glassy-edged stage on the Learn mockup gradients (--g0 to --g3, style.css), one per step,
   holding a frosted White orb. Small Yellow marks sit inside the visuals, at the user's request.
   The visuals are circular compositions: rings, discs, pills and faces. Sizes inside a visual
   are in cqi, so a visual scales as one piece from a phone to the desktop stage. */
.pp-path { --pp-acc: var(--pink); --pp-rule: var(--line); background: var(--paper); color: var(--ink); }
.pp-path .btn { background: var(--yellow); border-color: var(--yellow); color: var(--ink); } /* AI Yellow, like the header CTA */
.pp-path .btn:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* The flow. Static (the default): each step, then its visual, on one grid; the wrappers step
   aside (display: contents) so steps and visuals can be placed pair by pair. */
.pp-path__flow { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 96px) var(--col-gap); align-items: center; }
.pp-path__steps, .pp-path__stage, .pp-orb, .pp-orb__arts { display: contents; }
.pp-path__rail, .pp-path__bg, .pp-orb__bezel { display: none; }
.pp-step { grid-column: 1; display: flex; flex-direction: column; align-items: start; min-width: 0; }
.pp-art { grid-column: 2; }
.pp-step:nth-of-type(1), .pp-art:nth-child(1) { grid-row: 1; }
.pp-step:nth-of-type(2), .pp-art:nth-child(2) { grid-row: 2; }
.pp-step:nth-of-type(3), .pp-art:nth-child(3) { grid-row: 3; }
.pp-step:nth-of-type(4), .pp-art:nth-child(4) { grid-row: 4; }

.pp-step__num { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--pink); color: var(--pink); font: 600 13px/1 var(--font-display); transition: background-color 500ms var(--ease-out), color 500ms var(--ease-out); }
.pp-step__tag { margin: 0; color: var(--ink); opacity: 0.72; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
/* step titles share the Build with AI case titles' size (css/build.css .bw-case__title) */
.pp-step h3 { max-width: 14ch; margin: 16px 0 0; font-size: clamp(34px, 3.8vw, 58px); line-height: 1; letter-spacing: -0.045em; }
.pp-step > p:not(.pp-step__tag) { max-width: 40ch; margin: 18px 0 0; font-size: 17px; line-height: 1.6; }
.pp-step > .btn, .pp-step > .text-link, .pp-step__links { margin-top: 24px; }
.pp-step__links { display: flex; flex-wrap: wrap; gap: 0 24px; }

/* The orb: a frosted White disc with the Learn mockup cards' edge (.pout, style.css): a White
   hairline, a translucent White ring and a soft shadow, over a fine grid with grain. Each visual
   wears it as its own disc, on its step's gradient, until the stage takes it over. */
.pp-art, .pp-path__flow.is-live .pp-orb { position: relative; isolation: isolate; aspect-ratio: 1; border-radius: 50%; color: var(--ink);
  background: radial-gradient(100% 85% at 50% 0%, rgb(255 255 255 / 0.92), rgb(255 255 255 / 0.62) 75%);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.85), 0 0 0 10px rgb(255 255 255 / 0.35), 0 40px 70px -40px rgb(26 26 26 / 0.35); }
.pp-art { background: radial-gradient(closest-side, rgb(255 255 255 / 0.92), rgb(255 255 255 / 0.62) 70%, transparent 71%), var(--g0); }
.pp-art:nth-child(2) { background: radial-gradient(closest-side, rgb(255 255 255 / 0.92), rgb(255 255 255 / 0.62) 70%, transparent 71%), var(--g1); }
.pp-art:nth-child(3) { background: radial-gradient(closest-side, rgb(255 255 255 / 0.92), rgb(255 255 255 / 0.62) 70%, transparent 71%), var(--g2); }
.pp-art:nth-child(4) { background: radial-gradient(closest-side, rgb(255 255 255 / 0.92), rgb(255 255 255 / 0.62) 70%, transparent 71%), var(--g3); }
.pp-art::before, .pp-path__flow.is-live .pp-orb::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0.6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(rgb(26 26 26 / 0.05) 1px, transparent 1px), linear-gradient(90deg, rgb(26 26 26 / 0.05) 1px, transparent 1px);
  background-size: 140px 140px, 22px 22px, 22px 22px; background-position: 0 0, 50% 11px, 11px 50%;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); }
/* static: each visual is its own disc */
.pp-art { justify-self: center; width: min(100%, 480px); }
.pp-art__field { position: absolute; inset: 4%; container-type: inline-size; }
.pp-art__field > * { position: absolute; }
.pp-art__svg { inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Live (motion.js §5g, wide and tall screens): the steps scroll in the left column past a rail
   at the far left that fills as you go; the stage on the right holds below the header at the
   Learn Programs stage's height (style.css, .pscene__stage) and shows the visual of the step at
   the centre. The orb is a fixed circle inside it, so nothing resizes. */
.pp-path__flow.is-live { --stage-h: min(640px, calc(100vh - var(--header-h) - 48px)); --orb-max: min(calc(var(--stage-h) - 120px), 500px); --orb: min(78%, var(--orb-max)); align-items: stretch; row-gap: 0; }
.pp-path__flow.is-live .pp-path__steps { display: block; position: relative; grid-column: 1; grid-row: 1; padding-left: 64px; }
.pp-path__flow.is-live .pp-step { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: start; position: relative; min-height: max(var(--stage-h), 64vh); /* no % here: it would resolve against the grid row */ opacity: 0.32; transition: opacity 600ms var(--ease-out); }
.pp-path__flow.is-live .pp-step.is-active { opacity: 1; }
/* the number sits on the rail, level with the step's title */
.pp-path__flow.is-live .pp-step > * { grid-column: 1; }
.pp-path__flow.is-live .pp-step__tag { grid-row: 1; }
.pp-path__flow.is-live .pp-step h3 { grid-row: 2; }
.pp-path__flow.is-live .pp-step > p:not(.pp-step__tag) { grid-row: 3; }
.pp-path__flow.is-live .pp-step > .btn, .pp-path__flow.is-live .pp-step > .text-link, .pp-path__flow.is-live .pp-step__links { grid-row: 4; }
.pp-path__flow.is-live .pp-step__num { grid-row: 2; grid-column: 1; align-self: center; margin: 16px 0 0 -64px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--pink), 0 0 0 6px var(--paper); }
.pp-path__flow.is-live .pp-step.is-active .pp-step__num { background: var(--pink); color: var(--ink); box-shadow: 0 0 0 6px var(--paper); }
/* the rail, as on Build with AI (css/build.css .bw-story__rail): the full height of the steps,
   fading out at both ends, its AI Yellow line filling with the scroll (motion.js §5g) */
.pp-path__flow.is-live .pp-path__rail { display: block; position: absolute; left: 17px; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: var(--line);
  -webkit-mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
.pp-path__flow.is-live .pp-path__rail i { display: block; height: 100%; border-radius: inherit; background: var(--yellow); transform-origin: top; }

.pp-path__flow.is-live .pp-path__stage { display: grid; place-items: center; grid-column: 2; grid-row: 1; align-self: start; position: sticky; top: calc(var(--header-h) + 24px); height: var(--stage-h);
  isolation: isolate; overflow: hidden; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.85), inset 0 1px 0 1px rgb(255 255 255 / 0.5); }
/* The stage's ground: one gradient per step, crossfading as the shown step changes */
.pp-path__flow.is-live .pp-path__bg { display: block; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 800ms var(--ease-out); }
.pp-path__bg[data-bg="0"] { background: var(--g0); }
.pp-path__bg[data-bg="1"] { background: var(--g1); }
.pp-path__bg[data-bg="2"] { background: var(--g2); }
.pp-path__bg[data-bg="3"] { background: var(--g3); }
.pp-path__flow:not([data-active]) [data-bg="0"], .pp-path__flow[data-active="0"] [data-bg="0"], .pp-path__flow[data-active="1"] [data-bg="1"], .pp-path__flow[data-active="2"] [data-bg="2"], .pp-path__flow[data-active="3"] [data-bg="3"] { opacity: 1; }
.pp-path__flow.is-live .pp-orb { display: block; width: var(--orb); }
.pp-path__flow.is-live .pp-orb__arts { display: grid; position: absolute; inset: 0; }
.pp-path__flow.is-live .pp-art { grid-area: 1 / 1; width: 100%; background: none; box-shadow: none; visibility: hidden; opacity: 0; }
.pp-path__flow.is-live .pp-art::before { content: none; }
.pp-path__flow.is-live .pp-orb__bezel { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* the dial: a ring of ticks inside the rim that turns with the scroll, and outside it four arcs,
   one per step, White until the step is reached, then Faith Pink */
.pp-orb__ticks { stroke: rgb(26 26 26 / 0.16); stroke-width: 6; stroke-dasharray: 0.12 0.88; }
.pp-orb__seg { stroke: rgb(255 255 255 / 0.7); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0.86 3.14; transform: rotate(calc(-87deg + var(--i) * 90deg)); transform-origin: 200px 200px; transition: stroke 500ms var(--ease-out); }
.pp-orb__seg.is-on { stroke: var(--pink); }

/* Shared parts of the visuals: Charcoal lines on the White field, White discs and pills, one
   AI Yellow dot per pill */
.pp-ring { stroke: rgb(26 26 26 / 0.12); stroke-width: 1.5; }
.pp-ring--dash { stroke: rgb(26 26 26 / 0.3); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 0 1; }
.pp-spin { transform-origin: 200px 200px; }
.pp-disc { left: 50%; top: 50%; translate: -50% -50%; display: grid; place-content: center; justify-items: center; gap: 2.4cqi; width: var(--d, 46%); aspect-ratio: 1; border-radius: 50%;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.95), inset 0 0 0 1px var(--glass-edge), 0 24px 48px -24px rgb(26 26 26 / 0.35); }
.pp-chip { left: var(--x); top: var(--y); translate: -50% -50%; display: inline-flex; align-items: center; gap: 1.6cqi; padding: 1.9cqi 3.4cqi; border-radius: 999px; white-space: nowrap;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--line), 0 12px 24px -16px rgb(26 26 26 / 0.4); color: var(--ink); font: 600 max(10px, 3.1cqi)/1 var(--font-display); letter-spacing: -0.01em; }
.pp-chip > i { flex: none; width: 2cqi; height: 2cqi; border-radius: 50%; background: var(--yellow); box-shadow: inset 0 0 0 1px rgb(26 26 26 / 0.3); }
.pp-chip--ink { background: var(--ink); color: var(--white); box-shadow: 0 12px 24px -14px rgb(26 26 26 / 0.6); }
.pp-chip--ink > i { background: var(--pink); box-shadow: none; }
/* a person: a head and shoulders in a circle */
.pp-face { left: var(--x); top: var(--y); translate: -50% -50%; width: var(--f, 11cqi); aspect-ratio: 1; overflow: hidden; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgb(26 26 26 / 0.78) 17%, transparent 18%), radial-gradient(circle at 50% 105%, rgb(26 26 26 / 0.78) 38%, transparent 39%), var(--white);
  box-shadow: inset 0 0 0 1px var(--line), 0 10px 20px -12px rgb(26 26 26 / 0.4); }

/* Step 1, the Starter Kit: an hour on the dial, one task picked from the list, a first version */
.pp-arc { stroke: var(--ink); stroke-width: 7; stroke-linecap: round; --dash: 0.82 1; stroke-dasharray: var(--dash); transform: rotate(-90deg); transform-origin: 200px 200px; }
.pp-dot { fill: var(--ink); }
.pp-kit { --d: 50%; }
.pp-kit__badge { display: grid; place-items: center; width: 10cqi; aspect-ratio: 1; margin-bottom: 0.6cqi; border-radius: 50%; background: var(--yellow); }
.pp-kit__badge i { width: 4.4cqi; height: 3.2cqi; border: 0.7cqi solid var(--ink); border-top-width: 1.1cqi; border-radius: 0.8cqi; }
.pp-kit__row { display: flex; align-items: center; gap: 1.8cqi; width: 30cqi; padding: 1.2cqi 1.6cqi; border-radius: 999px; }
.pp-kit__row b { flex: none; width: 3.6cqi; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 0.45cqi rgb(26 26 26 / 0.35); }
.pp-kit__row i { display: block; height: 1.5cqi; width: 70%; border-radius: 1cqi; background: rgb(26 26 26 / 0.14); }
.pp-kit__row:last-child i { width: 52%; }
.pp-kit__row.is-pick { background: var(--pink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pp-kit__row.is-pick b { box-shadow: none; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10.5 17 18 8'/%3E%3C/svg%3E") center / 74% no-repeat; }
.pp-kit__row.is-pick i { width: 84%; background: rgb(26 26 26 / 0.7); }
.pp-kit__time { --x: 76%; --y: 18%; }
.pp-kit__plan { --x: 50%; --y: 89%; }

/* Step 2, workshops: the host live at the centre, the room round the ring, a version taking shape */
.pp-pulse { stroke: rgb(26 26 26 / 0.3); stroke-width: 1.5; opacity: 0.35; transform-box: fill-box; transform-origin: center; }
.pp-live__host { --d: 36%; overflow: visible; }
.pp-live__host .pp-face { position: relative; translate: none; --f: 17cqi; background-color: var(--pink); }
.pp-live__tag { position: absolute; --x: 50%; --y: 0%; }
.pp-live__seat:nth-of-type(1) { --x: 67.25%; --y: 20.12%; }
.pp-live__seat:nth-of-type(2) { --x: 84.5%; --y: 50%; }
.pp-live__seat:nth-of-type(3) { --x: 67.25%; --y: 79.88%; }
.pp-live__seat:nth-of-type(4) { --x: 32.75%; --y: 79.88%; }
.pp-live__seat:nth-of-type(5) { --x: 15.5%; --y: 50%; }
.pp-live__seat:nth-of-type(6) { --x: 32.75%; --y: 20.12%; }
.pp-live__out { --x: 50%; --y: 92%; }
.pp-live__bar { width: 9cqi; height: 1.6cqi; border-radius: 1cqi; background: rgb(26 26 26 / 0.12); overflow: hidden; }
.pp-live__bar b { display: block; width: 72%; height: 100%; border-radius: inherit; background: var(--ink); transform-origin: left; }

/* Step 3, programs: six weeks round the ring, the last one closing on something you own */
.pp-week { stroke: rgb(26 26 26 / 0.14); stroke-width: 15; stroke-linecap: round; --dash: 0.78 5.22; stroke-dasharray: var(--dash); transform: rotate(calc(-85deg + var(--i) * 60deg)); transform-origin: 200px 200px; }
.pp-week--own { stroke: var(--ink); }
.pp-weeks { --d: 44%; }
.pp-weeks__tick { width: 13cqi; aspect-ratio: 1; margin-bottom: 0.8cqi; border-radius: 50%;
  background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10.5 17 18 8'/%3E%3C/svg%3E") center / 62% no-repeat; }
.pp-weeks > i { display: block; width: 22cqi; height: 1.6cqi; border-radius: 1cqi; background: rgb(26 26 26 / 0.16); }
.pp-weeks > i:last-child { width: 14cqi; }
.pp-weeks__label { --x: 27%; --y: 11%; }

/* Always on, literacy and community: guides on the inner orbit, people on the outer, one hub */
.pp-hub__trace { stroke: rgb(26 26 26 / 0.28); stroke-width: 1.5; stroke-linecap: round; }
.pp-hub__doc { left: var(--x); top: var(--y); translate: -50% -50%; display: grid; place-items: center; width: 10cqi; aspect-ratio: 1; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 0.6cqi var(--yellow), 0 10px 20px -12px rgb(26 26 26 / 0.4); }
.pp-hub__doc::before { content: ""; width: 4.4cqi; height: 3cqi; background: linear-gradient(var(--ink), var(--ink)) 0 0 / 100% 0.6cqi no-repeat, linear-gradient(rgb(26 26 26 / 0.4), rgb(26 26 26 / 0.4)) 0 50% / 100% 0.6cqi no-repeat, linear-gradient(rgb(26 26 26 / 0.4), rgb(26 26 26 / 0.4)) 0 100% / 64% 0.6cqi no-repeat; }
/* the members (and step 2's seats) as the starter kit's Next step draws them (.bw-kitfaces):
   Faith Pink and AI Yellow discs in turn, a White figure, a White ring */
.pp-hub__member { --f: 12cqi; }
.pp-hub__member, .pp-live__seat {
  background: radial-gradient(circle at 50% 38%, rgb(255 255 255 / 0.85) 0 22%, transparent 23%), radial-gradient(ellipse 46% 34% at 50% 100%, rgb(255 255 255 / 0.85) 0 98%, transparent 100%), var(--pink);
  box-shadow: 0 0 0 1cqi var(--white), 0 10px 20px -12px rgb(26 26 26 / 0.4); }
.pp-hub__member:nth-of-type(even), .pp-live__seat:nth-of-type(even) { background-color: var(--yellow); }
.pp-hub__core { left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 17cqi; aspect-ratio: 1; border-radius: 50%; background: var(--ink); color: var(--white);
  box-shadow: 0 0 0 2.4cqi rgb(255 255 255 / 0.7), 0 20px 40px -18px rgb(26 26 26 / 0.5); font: 700 4.4cqi/1 var(--font-display); letter-spacing: 0.02em; }

/* 5. Motion -------------------------------------------------------------------- */
/* Headings and lists arrive with the shared reveal (style.css §18: paused until .is-in) */
.motion .pp-head[data-reveal] > div > *, .motion .pp-head[data-reveal] > p { animation: fw-rise 800ms var(--ease-out) both; }
.motion .pp-head[data-reveal] > div > h2 { animation-delay: 80ms; }
.motion .pp-head[data-reveal] > p { animation-delay: 220ms; }
.motion .pp-gain__grid[data-reveal] > li { animation: fw-rise 900ms var(--ease-out) both; }
.motion .pp-gain__grid[data-reveal] > li:nth-child(2) { animation-delay: 90ms; }
.motion .pp-gain__grid[data-reveal] > li:nth-child(3) { animation-delay: 180ms; }
.motion .pp-gain__grid[data-reveal] > li:nth-child(4) { animation-delay: 270ms; }
.motion .pp-who__note[data-reveal] { animation: fw-rise 900ms var(--ease-out) both; }

/* The journey's visuals keep moving gently while shown (.is-active, set by js/motion.js §5g):
   the host's signal pulses out and the dotted orbits turn */
.motion .pp-art.is-active .pp-pulse { animation: pp-pulse 2.4s var(--ease-out) infinite; }
.motion .pp-art.is-active .pp-spin { animation: pp-spin 80s linear infinite; }
@keyframes pp-pulse { from { opacity: 0.7; transform: scale(1); } to { opacity: 0; transform: scale(1.8); } }
@keyframes pp-spin { to { transform: rotate(360deg); } }

/* 6. Responsive ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .pp-head > div, .pp-head__intro { grid-column: 1 / -1; }
  .pp-head__intro { max-width: 46ch; }

  .pp-who__note h3, .pp-who__note p { grid-column: 1 / -1; }
}

/* The journey in one column, below the live layout's breakpoint (motion.js §5g): step 1, its
   visual, step 2, its visual… No pinning; each visual arrives as it scrolls in. */
@media (max-width: 960px) {
  .pp-path__flow { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .pp-step, .pp-art { grid-column: 1; }
  .pp-art { width: min(100%, 420px); }
  .pp-step:nth-of-type(1) { grid-row: 1; } .pp-art:nth-child(1) { grid-row: 2; }
  .pp-step:nth-of-type(2) { grid-row: 3; } .pp-art:nth-child(2) { grid-row: 4; }
  .pp-step:nth-of-type(3) { grid-row: 5; } .pp-art:nth-child(3) { grid-row: 6; }
  .pp-step:nth-of-type(4) { grid-row: 7; } .pp-art:nth-child(4) { grid-row: 8; }
  .pp-step:not(:nth-of-type(1)) { margin-top: clamp(32px, 7vw, 56px); }
  /* every number filled, Faith Pink and AI Yellow in turn, Charcoal inside (the live rail fills only the active one) */
  .pp-step__num { background: var(--pink); color: var(--ink); box-shadow: none; }
  .pp-step:nth-of-type(even) .pp-step__num { background: var(--yellow); }
}

@media (max-width: 640px) {
  .pp-gain, .pp-who, .pp-path { padding-block: 72px; }
  .pp-gain__grid { grid-template-columns: minmax(0, 1fr); }
  .pp-gain__item { min-height: 0; }
  .pp-gain__item:nth-child(3) { background: var(--pink); --icon-bg: linear-gradient(160deg, rgb(255 255 255 / 0.62), rgb(255 255 255 / 0.3)); }
  .pp-gain__item:nth-child(4) { background: var(--yellow); --icon-bg: linear-gradient(160deg, rgb(255 255 255 / 0.66), rgb(255 255 255 / 0.32)); }
  .pp-gain__item h3 { padding-top: 24px; font-size: 28px; }
  .pp-gain__icon { width: 76px; height: 76px; border-radius: 20px; }
  .pp-gain__icon svg { width: 42px; height: 42px; }
  .pp-gain__item .pp-gain__icon { width: 76px; height: 76px; border-radius: 20px; }
  .pp-gain__item .pp-gain__icon svg { width: 42px; height: 42px; }
  .pp-gain__grid { gap: 12px; }
  .pp-gain__item p, .pp-step > p:not(.pp-step__tag) { font-size: 16px; }

  .pp-who__note { padding: 28px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-step, .pp-step__num, .pp-path__bg, .pp-orb__seg { transition: none; }
}


/* ==========================================================================
   Merged from css/home-redesign.css
   ========================================================================== */
/* ==========================================================================
   Faith Works — homepage redesign (review route /home-redesign/ only)
   Loaded by src/pages/home-redesign.html; every rule is scoped to .hr-page, so the live
   homepage and every other page are untouched. Builds on css/style.css tokens: the four brand
   colours (Faith Pink, AI Yellow, Works White, Soft Charcoal) and their tints only; Poppins + Inter.

   The idea: one morning of light. The page is a single place the visitor walks through:
   a dawn horizon (hero) → daylight working scenes → one charcoal scene (the journey) →
   daylight → the horizon again at full light (CTA). A spine of glass "stations" sits on the
   seams between scenes; the thread under each draws down into the next heading.

   1. Tokens + base  2. Shared parts (wrap, type, buttons, stations, glass)
   3. Hero  4. Trusted by  5. Pathways  6. Make it concrete  7. Journey (night)
   8. Programs  9. Organization  10. Events  11. Voices  12. Video  13. About
   14. FAQ  15. Starter kit  16. Finale  17. Motion  18. Responsive  19. Reduced motion
   ========================================================================== */

/* 1. Tokens + base ---------------------------------------------------------- */
.hr-page {
  --hr-spine: calc(var(--edge) + 32px);           /* x of the station spine: tile flush with the content edge */
  --hr-tint-pink: #F7E5E6;
  --hr-tint-yellow: #FAEBC0;
  --hr-dawn: #F9EEEA;                              /* Works White warmed by Faith Pink */
  --hr-glass: rgb(250 248 244 / 0.58);
  --hr-glass-strong: rgb(255 255 255 / 0.82);
  --hr-glass-edge: rgb(255 255 255 / 0.9);
  --hr-glass-blur: blur(18px) saturate(1.4);
  --hr-lift: 0 1px 0 rgb(255 255 255 / 0.9) inset, 0 24px 48px -22px rgb(26 26 26 / 0.3), 0 2px 6px rgb(26 26 26 / 0.05);
  --hr-dots: radial-gradient(circle, rgb(26 26 26 / 0.18) 1px, transparent 1.6px);
  --hr-grid: linear-gradient(rgb(26 26 26 / 0.045) 1px, transparent 1px), linear-gradient(90deg, rgb(26 26 26 / 0.045) 1px, transparent 1px);
  --hr-scene-pad: clamp(96px, 11vw, 168px);
  --hr-station-room: clamp(150px, 15vw, 230px);   /* top padding of a scene that opens with a station */
  background: var(--paper);
}
.hr-page main { overflow-x: clip; }
.hr-page .site-header { background: rgb(250 248 244 / 0.62); -webkit-backdrop-filter: var(--hr-glass-blur); backdrop-filter: var(--hr-glass-blur); border-bottom-color: rgb(26 26 26 / 0.06); }
.hr-page .site-header.is-scrolled { background: rgb(250 248 244 / 0.78); }

/* 2. Shared parts --------------------------------------------------------- */
.hr-page .hr-wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.hr-page .hr-scene { position: relative; isolation: isolate; padding-block: var(--hr-scene-pad); }
.hr-page .hr-scene:has(> .hr-station) { padding-top: var(--hr-station-room); }

.hr-page .hr-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 600 15px/1.3 var(--font); letter-spacing: -0.005em; }
.hr-page .hr-eyebrow::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px rgb(26 26 26 / 0.08); }
.hr-page .hr-display { max-width: 16ch; margin: 0; font-size: clamp(40px, 5.6vw, 92px); line-height: 0.94; letter-spacing: -0.055em; font-weight: 700; }
.hr-page .hr-mega { margin: 0; font-size: clamp(52px, 9.4vw, 172px); line-height: 0.88; letter-spacing: -0.065em; font-weight: 700; }
.hr-page .hr-display .line, .hr-page .hr-mega .line { padding-bottom: 0.08em; margin-bottom: -0.08em; }

.hr-page .hr-btn { min-height: 54px; padding: 14px 24px; font-size: 16px; }
.hr-page .hr-btn--glass { background: rgb(255 255 255 / 0.42); border-color: rgb(26 26 26 / 0.22); -webkit-backdrop-filter: var(--hr-glass-blur); backdrop-filter: var(--hr-glass-blur); }
.hr-page .hr-btn--glass:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.hr-page .hr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 32px; }
.hr-page .hr-actions--center { justify-content: center; }

/* Glass pill (hero) */
.hr-page .hr-pill { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 9px 16px 9px 12px; border-radius: 999px; background: var(--hr-glass); border: 1px solid var(--hr-glass-edge); box-shadow: var(--hr-lift); -webkit-backdrop-filter: var(--hr-glass-blur); backdrop-filter: var(--hr-glass-blur); font: 600 14px/1.2 var(--font); }
.hr-page .hr-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 4px rgb(239 172 186 / 0.3); }

/* Stations: a glass app-tile on the seam between two scenes, its thread drawing into the next heading */
.hr-page .hr-station { position: absolute; z-index: 4; top: 0; left: var(--hr-spine); display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -50%); pointer-events: none; }
.hr-page .hr-station__tile { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 19px; background: linear-gradient(160deg, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.6)); border: 1px solid var(--hr-glass-edge); box-shadow: var(--hr-lift), 0 0 0 8px rgb(255 255 255 / 0.28); -webkit-backdrop-filter: var(--hr-glass-blur); backdrop-filter: var(--hr-glass-blur); }
.hr-page .hr-station__tile img { width: 30px; height: 30px; }
.hr-page .hr-station__tile svg { width: 26px; height: 26px; fill: var(--ink); }
.hr-page .hr-station__thread { position: relative; width: 1.5px; height: calc(var(--hr-station-room) * 0.5); background: linear-gradient(var(--ink), rgb(26 26 26 / 0.25)); transform: scaleY(var(--draw, 1)); transform-origin: top; }
.hr-page .hr-station__thread::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); transform: translateX(-50%) scale(var(--draw, 1)); }
.hr-page .hr-station--night .hr-station__tile { background: linear-gradient(160deg, #333333, var(--ink)); border-color: rgb(255 255 255 / 0.16); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 24px 48px -16px rgb(26 26 26 / 0.6), 0 0 0 8px rgb(250 248 244 / 0.5); }
.hr-page .hr-station--night .hr-station__tile svg { fill: var(--pink); }
.hr-page .hr-station--night .hr-station__thread { background: linear-gradient(var(--pink), rgb(239 172 186 / 0.2)); }
.hr-page .hr-station--night .hr-station__thread::after { background: var(--pink); box-shadow: 0 0 0 5px rgb(239 172 186 / 0.2); }
/* The spine lands on the eyebrow: scenes with a station start their eyebrow on its dot */
.hr-page .hr-scene:has(> .hr-station) .hr-eyebrow::before { background: transparent; box-shadow: none; width: 0; margin-right: -10px; }

/* 3. Hero ------------------------------------------------------------------ */
.hr-page .hr-hero { position: relative; isolation: isolate; margin-top: calc(-1 * var(--header-h)); padding-top: var(--header-h); min-height: max(780px, 100svh); overflow: clip; }
.hr-page .hr-hero__sky { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 38%, var(--hr-dawn) 66%, var(--hr-tint-pink) 100%); }
.hr-page .hr-hero__dots { position: absolute; inset: 0; background-image: var(--hr-dots); background-size: 22px 22px; -webkit-mask-image: radial-gradient(60% 70% at 74% 42%, #000 0%, rgb(0 0 0 / 0.5) 45%, transparent 78%); mask-image: radial-gradient(60% 70% at 74% 42%, #000 0%, rgb(0 0 0 / 0.5) 45%, transparent 78%); }
/* The horizon: a vast lit curve whose rim is the brightest line on the page */
.hr-page .hr-hero__horizon { position: absolute; left: 50%; top: 84%; width: 230vw; height: 160vw; border-radius: 50%; transform: translateX(-50%) translateY(calc(var(--fw-p, 0) * 60px));
  background: radial-gradient(50% 50% at 50% 50%, transparent 97%, rgb(255 255 255 / 0.9) 99.6%, rgb(255 255 255 / 0) 100%),
              linear-gradient(180deg, #FFFFFF 0%, var(--hr-tint-pink) 2.5%, rgb(239 172 186 / 0.75) 7%, rgb(251 197 34 / 0.42) 14%, var(--hr-tint-yellow) 22%);
  box-shadow: 0 -30px 90px 10px rgb(239 172 186 / 0.55), 0 -8px 24px rgb(255 255 255 / 0.9); }

.hr-page .hr-hero__inner { position: relative; display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap); grid-template-rows: auto 1fr auto; width: 100%; max-width: var(--container); min-height: calc(max(780px, 100svh) - var(--header-h)); margin-inline: auto; padding: clamp(40px, 6vh, 80px) var(--gutter) clamp(120px, 15vh, 170px); }
.hr-page .hr-hero__copy { grid-column: 1 / span 8; grid-row: 1; position: relative; z-index: 2; }
.hr-page .hr-hero__title { margin: clamp(22px, 3vh, 36px) 0 0; font-weight: 700; }
.hr-page .hr-hero__line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.hr-page .hr-hero__line > span { display: block; }
.hr-page .hr-hero__title > .hr-hero__line { font-size: clamp(64px, 10.6vw, 184px); line-height: 0.86; letter-spacing: -0.068em; }
.hr-page .hr-hero__title > .hr-hero__line:nth-child(2) { padding-left: 0.62em; }
.hr-page .hr-hero__sub { display: block; margin-top: clamp(18px, 2.4vh, 30px); padding-left: 0.08em; font-size: clamp(26px, 3.3vw, 56px); font-weight: 500; line-height: 1.02; letter-spacing: -0.045em; }
.hr-page .hr-hero__base { grid-column: 1 / span 6; grid-row: 3; position: relative; z-index: 2; align-self: end; }
.hr-page .hr-hero__intro { max-width: 46ch; margin: 0; font-size: var(--fs-lead); line-height: 1.6; }
.hr-page .hr-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hr-page .hr-hero__motto { display: flex; align-items: center; gap: 14px; margin: 26px 0 0; font: 600 14px/1.3 var(--font); }
.hr-page .hr-hero__motto::before { content: ""; width: 48px; height: 1.5px; background: var(--ink); }

/* Constellation */
.hr-page .hr-cons { --mx: 0; --my: 0; position: relative; z-index: 1; grid-column: 6 / -1; grid-row: 1 / 4; align-self: center; width: calc(100% + var(--gutter)); aspect-ratio: 1 / 0.92; margin-top: -2%; }
.hr-page .hr-cons__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hr-page .hr-wire { fill: none; stroke: rgb(26 26 26 / 0.3); stroke-width: 1.3; stroke-linecap: round; }
.hr-page .hr-wire--lead { stroke: var(--pink); stroke-width: 2.4; }
.hr-page .hr-wire--app { stroke: rgb(26 26 26 / 0.22); stroke-dasharray: 2 6; }
.hr-page .hr-node { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: 29%;
  translate: calc(-50% + var(--mx) * var(--z) * 16px) calc(-50% + var(--my) * var(--z) * 12px);
  background: linear-gradient(155deg, rgb(255 255 255 / 0.96) 0%, rgb(255 255 255 / 0.62) 100%); border: 1px solid var(--hr-glass-edge);
  box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -10px 18px -12px rgb(26 26 26 / 0.12), 0 calc(10px + var(--z) * 14px) calc(24px + var(--z) * 18px) -14px rgb(26 26 26 / 0.32);
  -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); }
.hr-page .hr-node::before { content: ""; position: absolute; inset: 4% 8% auto; height: 38%; border-radius: 40% 40% 50% 50% / 60% 60% 40% 40%; background: linear-gradient(180deg, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0)); pointer-events: none; }
.hr-page .hr-node img { position: relative; width: 46%; height: 46%; }
.hr-page .hr-node--app img { width: 50%; height: 50%; }
.hr-page .hr-node--lead { box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 10px rgb(239 172 186 / 0.28), 0 0 60px 6px rgb(239 172 186 / 0.45), 0 30px 50px -18px rgb(26 26 26 / 0.35); }
.hr-page .hr-node--you { border-radius: 50%; background: linear-gradient(160deg, #333333, var(--ink)); border-color: rgb(255 255 255 / 0.2); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 0 0 12px rgb(250 248 244 / 0.7), 0 0 0 13px rgb(26 26 26 / 0.08), 0 26px 46px -16px rgb(26 26 26 / 0.5); }
.hr-page .hr-node--you::before { display: none; }
.hr-page .hr-node--you svg { width: 40%; height: 40%; fill: none; stroke: var(--white); stroke-width: 1.8; stroke-linecap: round; }
.hr-page .hr-node__label { position: absolute; top: calc(100% + 18px); left: 50%; translate: -50% 0; padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--white); font: 700 11px/1.2 var(--font); letter-spacing: 0.12em; text-transform: uppercase; }

/* 4. Trusted by ------------------------------------------------------------ */
.hr-page .hr-trusted { position: relative; z-index: 3; margin-top: calc(-1 * clamp(64px, 8vh, 96px)); padding: 0 var(--gutter); }
.hr-page .hr-trusted__glass { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; max-width: calc(var(--container) - 2 * var(--gutter)); margin-inline: auto; border-radius: 20px; background: rgb(250 248 244 / 0.5); border: 1px solid var(--hr-glass-edge); box-shadow: var(--hr-lift); -webkit-backdrop-filter: var(--hr-glass-blur); backdrop-filter: var(--hr-glass-blur); overflow: hidden; }
.hr-page .hr-trusted__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px clamp(20px, 2.4vw, 32px); border-right: 1px solid rgb(26 26 26 / 0.08); }
.hr-page .hr-trusted__title { margin: 0; font: 700 16px/1.2 var(--font-display); letter-spacing: -0.02em; white-space: nowrap; }
.hr-page .hr-trusted__toggle { min-height: 30px; padding: 3px 12px; background: rgb(255 255 255 / 0.5); }
.hr-page .hr-trusted__marquee { border: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hr-page .hr-trusted .trusted__logo { height: clamp(72px, 6vw, 92px); opacity: 0.62; }
.hr-page .hr-trusted .trusted__logo:hover { opacity: 1; }

/* 5. Pathways -------------------------------------------------------------- */
.hr-page .hr-paths { margin-top: clamp(72px, 8vw, 120px); background: var(--hr-grid), var(--paper); background-size: 56px 56px, 56px 56px, auto; background-position: center top; }
.hr-page .hr-paths::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--paper) 0%, rgb(250 248 244 / 0) 22%, rgb(250 248 244 / 0) 70%, var(--paper) 100%), radial-gradient(70% 60% at 50% 40%, rgb(250 248 244 / 0), var(--paper) 95%); }
.hr-page .hr-paths__head { display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap); align-items: end; }
.hr-page .hr-paths__head > .hr-eyebrow, .hr-page .hr-paths__head > h2 { grid-column: 1 / span 9; }
.hr-page .hr-paths__head > h2 { max-width: 13ch; font-size: clamp(44px, 7vw, 124px); }
.hr-page .hr-paths__lede { grid-column: 9 / -1; grid-row: 2; max-width: 32ch; margin: 0; padding-bottom: 0.6em; font-size: var(--fs-lead); }
.hr-page .hr-paths__for { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: clamp(40px, 5vw, 64px) 0 clamp(32px, 4vw, 52px); padding-block: 18px; border-block: 1px solid rgb(26 26 26 / 0.1); }
.hr-page .hr-paths__for-label { margin: 0; font-weight: 600; }
.hr-page .hr-paths__for-list { display: flex; flex-wrap: wrap; gap: 8px 26px; list-style: none; }
.hr-page .hr-paths__for-list li { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: clamp(17px, 1.4vw, 21px); font-weight: 500; letter-spacing: -0.02em; }
.hr-page .hr-paths__for-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); }

.hr-page .hr-routes { position: relative; padding-left: 72px; }
.hr-page .hr-routes__rail { position: absolute; left: 31px; top: calc(-1 * clamp(32px, 4vw, 52px) - 19px); bottom: 64px; width: 1.5px; background: rgb(26 26 26 / 0.12); }
.hr-page .hr-routes__rail > span { position: absolute; inset: 0; background: var(--ink); transform: scaleY(var(--draw, 1)); transform-origin: top; }
.hr-page .hr-routes__list { list-style: none; }
.hr-page .hr-route { --tone: var(--stone); position: relative; }
.hr-page .hr-route--pink { --tone: var(--pink); }
.hr-page .hr-route--yellow { --tone: var(--yellow); }
/* the branch from the rail into each row, ending on a node in the row's colour */
.hr-page .hr-route::before { content: ""; position: absolute; left: -41px; top: clamp(46px, 4.4vw, 70px); width: 41px; height: 1.5px; background: var(--ink); }
.hr-page .hr-route::after { content: ""; position: absolute; left: -48px; top: calc(clamp(46px, 4.4vw, 70px) - 6px); width: 14px; height: 14px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--ink); }
.hr-page .hr-route__link { position: relative; display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 6fr) minmax(0, 3.8fr); grid-template-rows: auto auto; column-gap: var(--col-gap); align-items: start; padding: clamp(28px, 3vw, 44px) clamp(8px, 1.6vw, 24px) clamp(28px, 3vw, 44px) 0; border-top: 1px solid rgb(26 26 26 / 0.14); isolation: isolate; overflow: hidden; border-radius: 0 14px 14px 0; }
.hr-page .hr-route:last-child .hr-route__link { border-bottom: 1px solid rgb(26 26 26 / 0.14); }
.hr-page .hr-route__link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 30%, var(--paper))); transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease-expo); }
.hr-page .hr-route__link:hover::before, .hr-page .hr-route__link:focus-visible::before { transform: scaleX(1); }
.hr-page .hr-route__link:focus-visible { outline-offset: -3px; }
.hr-page .hr-route__for { grid-column: 1; grid-row: 1 / span 2; padding-top: 0.9em; padding-left: 12px; font-weight: 600; font-size: 15px; }
.hr-page .hr-route__title { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: clamp(34px, 4.7vw, 80px); line-height: 0.96; letter-spacing: -0.055em; transition: transform 700ms var(--ease-expo); }
.hr-page .hr-route__link:hover .hr-route__title { transform: translateX(14px); }
.hr-page .hr-route__desc { grid-column: 3; grid-row: 1; max-width: 32ch; padding-top: 0.5em; font-size: 16px; line-height: 1.55; }
.hr-page .hr-route__cta { grid-column: 3; grid-row: 2; display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; font-weight: 700; font-size: 15px; }
.hr-page .hr-route__arrow { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--white); font-size: 15px; transition: transform 500ms var(--ease-expo); }
.hr-page .hr-route__link:hover .hr-route__arrow { transform: rotate(45deg); }

/* 6. Make it concrete ------------------------------------------------------ */
/* A full-section light field, after the Professionals "Sound familiar?" band: Pink from the left,
   Yellow from the right, Works White in between, a fine grid laid over the whole scene. */
.hr-page .hr-field { background:
    var(--hr-grid),
    radial-gradient(90% 80% at 0% 20%, rgb(239 172 186 / 0.55), transparent 62%),
    radial-gradient(80% 90% at 100% 85%, rgb(251 197 34 / 0.38), transparent 60%),
    radial-gradient(60% 60% at 55% 45%, rgb(255 255 255 / 0.9), transparent 75%),
    linear-gradient(118deg, #F8E3E7 0%, var(--paper) 48%, #FAF0D2 100%);
  background-size: 56px 56px, 56px 56px, auto, auto, auto, auto; }
.hr-page .hr-field::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 3px, rgb(26 26 26 / 0.018) 3px 4px); }
.hr-page .hr-field::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, var(--paper), rgb(250 248 244 / 0) 16%, rgb(250 248 244 / 0) 84%, var(--paper)); }

.hr-page .hr-concrete__grid { display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap); align-items: start; }
.hr-page .hr-concrete__head { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 32px); }
.hr-page .hr-concrete__head > p:not(.hr-eyebrow):not(.hr-concrete__foot) { max-width: 38ch; margin: 22px 0 0; font-size: var(--fs-lead); }
.hr-page .hr-tasks { display: flex; flex-direction: column; margin: clamp(32px, 4vw, 48px) 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.hr-page .hr-tasks button { position: relative; display: flex; align-items: baseline; gap: 18px; min-height: 64px; padding: 14px 0 14px 22px; border: 0; border-top: 1px solid rgb(26 26 26 / 0.12); background: none; box-shadow: none; color: rgb(26 26 26 / 0.5); text-align: left; font: 600 clamp(20px, 1.9vw, 28px)/1.15 var(--font-display); letter-spacing: -0.03em; transition: color var(--dur) var(--ease-out); }
.hr-page .hr-tasks button:last-child { border-bottom: 1px solid rgb(26 26 26 / 0.12); }
.hr-page .hr-tasks button::before { content: ""; position: absolute; inset: 10px auto 10px 0; z-index: 0; width: 4px; height: auto; border-radius: 4px; background: var(--ink); transform: scaleY(0); transform-origin: top; transition: transform 500ms var(--ease-expo); }
.hr-page .hr-tasks button:hover { color: var(--ink); }
.hr-page .hr-tasks button:hover::before { transform: scaleY(0.3); }
.hr-page .hr-tasks button[aria-selected="true"] { background: none; color: var(--ink); }
.hr-page .hr-tasks button[aria-selected="true"]::before { transform: scaleY(1); background: var(--pink); }
.hr-page .hr-tasks button:focus-visible { outline-offset: 2px; outline-color: var(--ink); }
.hr-page .hr-tasks .flow__tab-num, .hr-page .hr-tasks button[aria-selected="true"] .flow__tab-num { font: 600 13px/1 var(--font); color: inherit; letter-spacing: 0; }
.hr-page .hr-concrete__foot { margin: 28px 0 0; }

.hr-page .hr-bench { grid-column: 6 / -1; position: relative; display: flex; flex-direction: column; padding-top: clamp(8px, 2vw, 32px); }
.hr-page .hr-bench__path { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; }
.hr-page .hr-bench__path path { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 1 0; }
.hr-page .hr-pane { position: relative; z-index: 1; width: min(560px, 62%); padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 32px) clamp(30px, 3vw, 40px); border-radius: 22px; border: 1px solid var(--hr-glass-edge); -webkit-backdrop-filter: var(--hr-glass-blur); backdrop-filter: var(--hr-glass-blur); box-shadow: var(--hr-lift); transition: opacity var(--dur) var(--ease-out); }
.hr-page .hr-pane + .hr-pane { margin-top: -26px; }
.hr-page .hr-pane--task { background: rgb(250 248 244 / 0.42); }
.hr-page .hr-pane--ai { z-index: 2; align-self: center; background: rgb(255 255 255 / 0.66); box-shadow: inset 0 1px 0 #FFFFFF, 0 40px 70px -30px rgb(26 26 26 / 0.38), 0 0 0 1px rgb(239 172 186 / 0.35); }
.hr-page .hr-pane--review { z-index: 3; align-self: flex-end; background: rgb(255 255 255 / 0.9); }
.hr-page .hr-pane__step { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 600 14px/1 var(--font); }
.hr-page .hr-pane__step span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--white); font-size: 12px; }
.hr-page .hr-pane--ai .hr-pane__step span { background: var(--pink); color: var(--ink); }
.hr-page .hr-pane__art { position: relative; margin-bottom: 20px; }
.hr-page .hr-pane h3 { margin: 0 0 8px; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.2; }
.hr-page .hr-pane p:not(.hr-pane__step) { margin: 0; max-width: 46ch; font-size: 15.5px; line-height: 1.55; }
.hr-page .hr-bench.is-swapping .hr-pane > :not(.hr-pane__step) { opacity: 0; transition: opacity 180ms; }
.hr-page .hr-pane > * { transition: opacity 260ms var(--ease-out); }

.hr-page .hr-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.hr-page .hr-chips li { padding: 8px 14px; border-radius: 10px; background: rgb(255 255 255 / 0.75); box-shadow: inset 0 0 0 1px rgb(26 26 26 / 0.1); font-size: 14px; font-weight: 600; }
.hr-page .hr-draft { padding: 16px 18px; border-radius: 14px; background: var(--ink); color: var(--white); max-width: 300px; }
.hr-page .hr-draft__top { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--pink); }
.hr-page .hr-draft__top svg { width: 14px; height: 14px; fill: var(--pink); }
.hr-page .hr-draft__label { margin: 0 0 12px; font: 600 17px/1.25 var(--font-display); }
.hr-page .hr-draft__bar { display: block; height: 4px; border-radius: 4px; background: rgb(255 255 255 / 0.14); overflow: hidden; }
.hr-page .hr-draft__bar span { display: block; width: 68%; height: 100%; background: var(--pink); }
.hr-page .hr-draft__line { display: block; height: 6px; margin-top: 10px; border-radius: 6px; background: rgb(255 255 255 / 0.18); }
.hr-page .hr-draft__line--short { width: 60%; }
.hr-page .hr-orbit { position: absolute; top: -8px; right: 0; display: flex; gap: 10px; list-style: none; }
.hr-page .hr-orbit li { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: linear-gradient(155deg, #FFFFFF, rgb(255 255 255 / 0.7)); border: 1px solid var(--hr-glass-edge); box-shadow: 0 14px 26px -14px rgb(26 26 26 / 0.4); transform: translateY(calc(var(--o) * 14px - 14px)); }
.hr-page .hr-orbit img { width: 24px; height: 24px; }
.hr-page .hr-out { position: relative; padding: 16px 18px 14px; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 1px rgb(26 26 26 / 0.1); }
.hr-page .hr-out__head { margin: 0 0 8px; font: 700 15px/1.2 var(--font-display); }
.hr-page .hr-out__rows { list-style: none; }
.hr-page .hr-out__rows li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid rgb(26 26 26 / 0.08); font-size: 14px; }
.hr-page .hr-out__rows li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); }
.hr-page .hr-out__seal { position: absolute; top: -14px; right: -14px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 5px rgb(255 255 255 / 0.9); }
.hr-page .hr-out__seal svg { width: 20px; height: 20px; fill: none; stroke: var(--white); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* 7. Journey (night) ----------------------------------------------------------- */
.hr-page .hr-night { padding: 0; color: var(--white); background: var(--ink); }
.hr-page .hr-night__sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hr-page .hr-night__dots { position: absolute; inset: 0; background-image: radial-gradient(circle, rgb(250 248 244 / 0.22) 1px, transparent 1.6px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.35) 55%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.35) 55%, transparent 85%); }
/* The same horizon as the hero, seen at night: a pink rim rising from below */
.hr-page .hr-night__glow { position: absolute; left: 50%; top: 88%; width: 220vw; height: 150vw; border-radius: 50%; transform: translateX(-50%) translateY(calc((1 - var(--hr-night, 0)) * 6%));
  background: radial-gradient(50% 50% at 50% 50%, transparent 97.2%, rgb(239 172 186 / 0.95) 99.7%, rgb(239 172 186 / 0) 100%), linear-gradient(180deg, rgb(239 172 186 / 0.5) 0%, rgb(239 172 186 / 0.12) 6%, rgb(26 26 26 / 0) 16%);
  box-shadow: 0 -40px 110px 10px rgb(239 172 186 / 0.35); }
.hr-page .hr-night__pin { position: relative; display: flex; align-items: center; min-height: 100svh; padding-block: var(--hr-station-room) clamp(110px, 14vh, 160px); }
.hr-page .hr-night__grid { display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap); gap: initial; align-items: center; }
.hr-page .hr-night__intro { grid-column: 1 / span 5; }
.hr-page .hr-night .hr-eyebrow { color: var(--white); }
.hr-page .hr-night .hr-display { color: var(--white); }
.hr-page .hr-steps { position: relative; display: flex; flex-direction: column; margin-top: clamp(32px, 4vw, 52px); padding-left: 0; }
.hr-page .hr-steps__rail { position: absolute; left: 6px; top: 30px; bottom: 30px; width: 1.5px; background: rgb(255 255 255 / 0.16); }
.hr-page .hr-steps__fill { position: absolute; inset: 0; background: var(--pink); transform: scaleY(var(--hr-step, 0)); transform-origin: top; transition: transform 600ms var(--ease-expo); }
.hr-page .hr-steps .step { position: relative; min-height: 60px; padding: 10px 0 10px 40px; border: 0; color: rgb(255 255 255 / 0.4); font: 600 clamp(24px, 2.6vw, 40px)/1.05 var(--font-display); letter-spacing: -0.04em; }
.hr-page .hr-steps .step:first-of-type { border-top: 0; }
.hr-page .hr-steps .step::after { left: 0; right: auto; top: 50%; bottom: auto; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.35); transform: translateY(-50%); transition: background-color var(--dur), box-shadow var(--dur); }
.hr-page .hr-steps .step:hover { color: rgb(255 255 255 / 0.8); }
.hr-page .hr-steps .step[aria-selected="true"] { color: var(--white); }
.hr-page .hr-steps .step[aria-selected="true"]::after { transform: translateY(-50%); background: var(--pink); box-shadow: 0 0 0 6px rgb(239 172 186 / 0.2), 0 0 24px rgb(239 172 186 / 0.6); }
.hr-page .hr-steps .step__num { margin-right: 16px; font: 600 13px/1 var(--font); letter-spacing: 0; color: var(--pink); vertical-align: 0.6em; }
.hr-page .hr-steps .step__arrow { font-size: 18px; color: var(--pink); opacity: 0; transition: opacity var(--dur); }
.hr-page .hr-steps .step[aria-selected="true"] .step__arrow { opacity: 1; }
.hr-page .hr-steps .step:focus-visible { outline-color: var(--pink); outline-offset: 2px; }
.hr-page .hr-stage { grid-column: 6 / -1; }
.hr-page .hr-stage .scene__art { min-height: clamp(380px, 33vw, 480px); padding: clamp(24px, 3vw, 44px); border-radius: 26px; background: linear-gradient(160deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.03)); border-color: rgb(255 255 255 / 0.14); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 60px 120px -50px rgb(239 172 186 / 0.35), 0 40px 80px -40px rgb(0 0 0 / 0.6); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.hr-page .hr-stage .scene__copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: start; min-height: 132px; padding-top: 26px; }
.hr-page .hr-stage .scene__copy h3 { grid-column: 1 / -1; color: var(--white); font-size: clamp(22px, 2vw, 30px); }
.hr-page .hr-stage .scene__copy p { margin: 0; color: rgb(255 255 255 / 0.82); }
.hr-page .hr-stage .tag { align-self: start; border-color: rgb(239 172 186 / 0.5); color: var(--pink); white-space: nowrap; }

/* 8. Programs ---------------------------------------------------------------- */
.hr-page .hr-programs { background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 55%, var(--hr-tint-pink) 100%); }
.hr-page .hr-programs__head { display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap); align-items: end; margin-bottom: clamp(44px, 5vw, 72px); }
.hr-page .hr-programs__head > div { grid-column: 1 / span 8; }
.hr-page .hr-programs__head > p { grid-column: 9 / -1; max-width: 34ch; margin: 0; padding-bottom: 0.6em; font-size: var(--fs-lead); }
.hr-page .hr-programs .pstack { gap: clamp(18px, 2vw, 28px); align-items: start; }
.hr-page .hr-programs .prog__card { border-radius: 24px; box-shadow: 0 40px 80px -46px rgb(26 26 26 / 0.45); }
.hr-page .hr-programs .prog--feature .prog__card { min-height: clamp(460px, 40vw, 600px); }
.hr-page .hr-programs .prog--feature .prog__title { font-size: clamp(36px, 4.4vw, 68px); }
/* the two follow-on programs sit off the beat: the second drops below the first */
.hr-page .hr-programs .prog:not(.prog--feature):nth-child(3) { margin-top: clamp(56px, 8vw, 128px); }
.hr-page .hr-programs__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(44px, 5vw, 64px); }
.hr-page .hr-programs__foot .small { flex-basis: 100%; margin: 0; }

/* 9. Organization -------------------------------------------------------------- */
.hr-page .hr-org { display: flex; align-items: flex-end; min-height: max(760px, 108svh); padding-block: clamp(120px, 14vw, 200px) clamp(48px, 5vw, 72px); color: var(--white); background: var(--ink); overflow: clip; }
.hr-page .hr-org__photo { position: absolute; inset: 0; z-index: -2; margin: 0; }
.hr-page .hr-org__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; scale: 1.08; translate: 0 calc(var(--hr-org, 0) * -4%); }
.hr-page .hr-org::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(26 26 26 / 0.66) 0%, rgb(26 26 26 / 0.18) 55%, rgb(26 26 26 / 0.05) 100%), linear-gradient(180deg, rgb(26 26 26 / 0.35) 0%, rgb(26 26 26 / 0) 30%, rgb(26 26 26 / 0) 55%, rgb(26 26 26 / 0.82) 100%); }
.hr-page .hr-org__grid { display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap); row-gap: clamp(48px, 6vw, 88px); }
.hr-page .hr-org__plate { grid-column: 1 / span 6; padding: clamp(28px, 3.4vw, 52px); border-radius: 26px; color: var(--ink); background: rgb(250 248 244 / 0.8); border: 1px solid rgb(255 255 255 / 0.85); box-shadow: inset 0 1px 0 #FFFFFF, 0 50px 100px -40px rgb(0 0 0 / 0.55); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); }
.hr-page .hr-org__plate .hr-eyebrow::before { background: var(--yellow); box-shadow: 0 0 0 4px rgb(251 197 34 / 0.3); }
.hr-page .hr-org__plate .hr-display { font-size: clamp(36px, 4.4vw, 72px); }
.hr-page .hr-org__plate > p:not(.hr-eyebrow) { max-width: 46ch; margin: 22px 0 0; font-size: var(--fs-lead); }
.hr-page .hr-org__plate > .hr-org__for { margin-top: 14px; font-size: 15px; }
.hr-page .hr-org__ways { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); padding-top: 30px; list-style: none; counter-reset: way; }
.hr-page .hr-org__ways::before { content: ""; position: absolute; top: 7px; left: 7px; right: 0; height: 1.5px; background: linear-gradient(90deg, var(--yellow), rgb(255 255 255 / 0.4)); transform: scaleX(var(--hr-ways, 1)); transform-origin: left; }
.hr-page .hr-org__ways li { position: relative; max-width: 22ch; font-size: 16px; line-height: 1.45; color: rgb(255 255 255 / 0.88); }
.hr-page .hr-org__ways li::before { content: ""; position: absolute; top: -30px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px rgb(251 197 34 / 0.25); }
.hr-page .hr-org__ways b { display: block; margin-bottom: 4px; font: 700 clamp(26px, 2.6vw, 40px)/1 var(--font-display); letter-spacing: -0.04em; color: var(--white); }

/* 10. Events ------------------------------------------------------------------ */
.hr-page .hr-events { background: radial-gradient(70% 50% at 100% 0%, rgb(239 172 186 / 0.3), transparent 70%), var(--paper); }
.hr-page .hr-events__head { display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap); align-items: end; margin-bottom: clamp(44px, 5vw, 80px); }
.hr-page .hr-events__head > .hr-eyebrow { grid-column: 1 / -1; }
.hr-page .hr-events__head > h2 { grid-column: 1 / span 9; }
.hr-page .hr-events__intro { grid-column: 10 / -1; padding-bottom: 0.5em; }
.hr-page .hr-events__intro p { max-width: 32ch; margin: 0 0 14px; }
.hr-page .hr-photos { --row: clamp(34px, 5.4vw, 86px); --gap: clamp(8px, 1vw, 16px); display: grid; gap: var(--gap); }
.hr-page .hr-photos__band { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(10, var(--row)); gap: var(--gap); list-style: none; }
.hr-page .hr-photos__tile { min-width: 0; }
.hr-page .hr-photos__tile figure { position: relative; height: 100%; margin: 0; overflow: hidden; border-radius: 16px; background: var(--stone); }
.hr-page .hr-photos__tile img { display: block; width: 100%; height: 100%; object-fit: cover; scale: 1.06; translate: 0 calc(var(--hr-drift, 0) * 3%); transition: scale 1200ms var(--ease-expo); }
.hr-page .hr-photos__tile:hover img { scale: 1.1; }
.hr-page .hr-photos__tile figcaption { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 7px 12px; border-radius: 10px; background: rgb(250 248 244 / 0.72); border: 1px solid rgb(255 255 255 / 0.8); -webkit-backdrop-filter: var(--hr-glass-blur); backdrop-filter: var(--hr-glass-blur); font-size: 13px; font-weight: 600; line-height: 1.3; }
/* Band of nine: large, wide, tall, small… fitted so the 12×10 rectangle has no holes */
.hr-page .hr-photos__band > :nth-child(1) { grid-area: 1 / 1 / 6 / 8; }
.hr-page .hr-photos__band > :nth-child(2) { grid-area: 1 / 8 / 4 / 13; }
.hr-page .hr-photos__band > :nth-child(3) { grid-area: 4 / 8 / 8 / 11; }
.hr-page .hr-photos__band > :nth-child(4) { grid-area: 4 / 11 / 7 / 13; }
.hr-page .hr-photos__band > :nth-child(5) { grid-area: 6 / 1 / 11 / 4; }
.hr-page .hr-photos__band > :nth-child(6) { grid-area: 6 / 4 / 9 / 8; }
.hr-page .hr-photos__band > :nth-child(7) { grid-area: 7 / 11 / 11 / 13; }
.hr-page .hr-photos__band > :nth-child(8) { grid-area: 8 / 8 / 11 / 11; }
.hr-page .hr-photos__band > :nth-child(9) { grid-area: 9 / 4 / 11 / 8; }
.hr-page .hr-photos__band--mirror > :nth-child(1) { grid-area: 1 / 6 / 6 / 13; }
.hr-page .hr-photos__band--mirror > :nth-child(2) { grid-area: 1 / 1 / 4 / 6; }
.hr-page .hr-photos__band--mirror > :nth-child(3) { grid-area: 4 / 3 / 8 / 6; }
.hr-page .hr-photos__band--mirror > :nth-child(4) { grid-area: 4 / 1 / 7 / 3; }
.hr-page .hr-photos__band--mirror > :nth-child(5) { grid-area: 6 / 10 / 11 / 13; }
.hr-page .hr-photos__band--mirror > :nth-child(6) { grid-area: 6 / 6 / 9 / 10; }
.hr-page .hr-photos__band--mirror > :nth-child(7) { grid-area: 7 / 1 / 11 / 3; }
.hr-page .hr-photos__band--mirror > :nth-child(8) { grid-area: 8 / 3 / 11 / 6; }
.hr-page .hr-photos__band--mirror > :nth-child(9) { grid-area: 9 / 6 / 11 / 10; }
/* A last band with fewer than nine photos: one even row */
.hr-page .hr-photos__band--short { grid-template-rows: none; grid-auto-rows: calc(var(--row) * 4); grid-auto-flow: row; }
.hr-page .hr-photos__band--short > * { grid-area: auto / span 4 !important; }

/* 11. Voices ------------------------------------------------------------------ */
.hr-page .hr-field--warm { background:
    var(--hr-grid),
    radial-gradient(80% 70% at 100% 10%, rgb(251 197 34 / 0.42), transparent 62%),
    radial-gradient(80% 80% at 0% 100%, rgb(239 172 186 / 0.5), transparent 62%),
    linear-gradient(200deg, #FAF0D2 0%, var(--paper) 50%, #F8E3E7 100%);
  background-size: 56px 56px, 56px 56px, auto, auto, auto; }
.hr-page .hr-voices { overflow: clip; }
.hr-page .hr-voices__head { position: relative; display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap); align-items: end; }
.hr-page .hr-voices__head > .hr-eyebrow, .hr-page .hr-voices__head > h2 { grid-column: 1 / span 8; }
.hr-page .hr-voices__head > p:last-child { grid-column: 9 / -1; grid-row: 2; max-width: 30ch; margin: 0; padding-bottom: 0.6em; }
.hr-page .hr-voices__head::after { content: "“"; position: absolute; right: calc(var(--gutter) - 0.06em); top: -0.38em; z-index: -1; font: 700 clamp(240px, 32vw, 520px)/1 var(--font-display); color: transparent; -webkit-text-stroke: 1.5px rgb(26 26 26 / 0.14); pointer-events: none; }
.hr-page .hr-voices .voices { --card-w: min(760px, 66vw); margin-top: clamp(48px, 6vw, 88px); }
.hr-page .hr-voices .voice { border-radius: 28px; }
.hr-page .hr-voices .voice--white { background: rgb(255 255 255 / 0.86); -webkit-backdrop-filter: var(--hr-glass-blur); backdrop-filter: var(--hr-glass-blur); }

/* 12. Video ------------------------------------------------------------------- */
.hr-page .hr-video { padding-top: 0; }
.hr-page .hr-video__title { margin: 0 0 24px; font-size: var(--fs-h3); }

/* 13. About ------------------------------------------------------------------- */
.hr-page .hr-about { background: var(--hr-grid), var(--paper); background-size: 56px 56px, 56px 56px, auto; }
.hr-page .hr-about::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 60% at 30% 40%, rgb(250 248 244 / 0.2), var(--paper) 80%); }
.hr-page .hr-about__grid { display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap); align-items: center; }
.hr-page .hr-about__lead { grid-column: 1 / span 7; }
.hr-page .hr-about__mission { max-width: 20ch; margin: clamp(36px, 4vw, 56px) 0 0; font: 600 clamp(30px, 3.6vw, 58px)/1.06 var(--font-display); letter-spacing: -0.045em; text-wrap: balance; }
.hr-page .hr-about__mission { background: linear-gradient(180deg, transparent 62%, rgb(239 172 186 / 0.7) 62%, rgb(239 172 186 / 0.7) 90%, transparent 90%) no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; display: inline; }
.hr-page .hr-about__lede { max-width: 46ch; margin: clamp(28px, 3vw, 40px) 0 0; font-size: var(--fs-lead); }
.hr-page .hr-founder { grid-column: 9 / -1; position: relative; padding-bottom: 120px; }
.hr-page .hr-founder__photo { margin: 0; overflow: hidden; border-radius: 26px; aspect-ratio: 4 / 5; background: var(--stone); box-shadow: 0 50px 90px -50px rgb(26 26 26 / 0.5); }
.hr-page .hr-founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hr-page .hr-founder__card { position: absolute; left: -26%; right: 12%; bottom: 0; padding: 24px 26px; border-radius: 20px; background: rgb(250 248 244 / 0.78); border: 1px solid var(--hr-glass-edge); box-shadow: var(--hr-lift); -webkit-backdrop-filter: var(--hr-glass-blur); backdrop-filter: var(--hr-glass-blur); }
.hr-page .hr-founder__label { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.hr-page .hr-founder__card strong { display: block; font: 700 clamp(22px, 1.9vw, 28px)/1.15 var(--font-display); letter-spacing: -0.03em; }
.hr-page .hr-founder__card p:not(.hr-founder__label) { margin: 10px 0 0; font-size: 15px; line-height: 1.55; }
.hr-page .hr-founder__links { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 8px; }
.hr-page .hr-eco { position: relative; margin-top: clamp(80px, 9vw, 140px); }
.hr-page .hr-eco__wires { display: block; width: 100%; height: 64px; overflow: visible; }
.hr-page .hr-eco__wires path { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.hr-page .hr-eco__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.hr-page .hr-eco__list a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 30px 22px 28px; text-align: center; border-radius: 22px; border: 1px solid rgb(26 26 26 / 0.1); background: rgb(255 255 255 / 0.55); -webkit-backdrop-filter: var(--hr-glass-blur); backdrop-filter: var(--hr-glass-blur); transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), box-shadow var(--dur); }
.hr-page .hr-eco__list a::before { content: ""; position: absolute; top: -6px; left: 50%; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); transform: translateX(-50%); }
.hr-page .hr-eco__list a:hover { transform: translateY(-4px); background: #FFFFFF; box-shadow: var(--hr-lift); }
.hr-page .hr-eco__brand { margin: 0; }
.hr-page .hr-eco__brand img { width: auto; height: clamp(30px, 2.8vw, 40px); }
.hr-page .hr-eco__list p { max-width: 30ch; margin: 0; font-size: 15px; line-height: 1.5; }

/* 14. FAQ --------------------------------------------------------------------- */
.hr-page .hr-faq { border-top: 1px solid rgb(26 26 26 / 0.08); }
.hr-page .hr-faq__grid { display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap); align-items: start; }
.hr-page .hr-faq__head { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 32px); }
.hr-page .hr-faq__items { grid-column: 7 / -1; }
.hr-page .hr-faq details { border-bottom: 1px solid rgb(26 26 26 / 0.14); }
.hr-page .hr-faq details:first-child { border-top: 1px solid rgb(26 26 26 / 0.14); }
.hr-page .hr-faq summary { min-height: 88px; padding: 22px 0; font: 600 clamp(19px, 1.7vw, 25px)/1.25 var(--font-display); letter-spacing: -0.025em; }
.hr-page .hr-faq summary:hover { color: var(--ink); }
.hr-page .hr-faq summary::after { width: 40px; height: 40px; border-radius: 12px; background: rgb(26 26 26 / 0.06); }
.hr-page .hr-faq details[open] summary::after { background: var(--pink); color: var(--ink); }
.hr-page .hr-faq details p { max-width: 58ch; margin: -6px 0 28px; font-size: 16.5px; }

/* 15. Starter kit ------------------------------------------------------------- */
.hr-page .hr-kit { overflow: clip; background:
    linear-gradient(90deg, var(--paper) 0%, rgb(250 248 244 / 0.94) 38%, rgb(250 248 244 / 0) 62%),
    linear-gradient(rgb(26 26 26 / 0.05) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgb(26 26 26 / 0.05) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(180deg, var(--paper), var(--hr-tint-yellow) 30%, var(--hr-tint-yellow) 70%, var(--paper)); }
.hr-page .hr-kit::after { content: ""; position: absolute; z-index: -1; right: -10%; top: 50%; width: 70%; aspect-ratio: 1.6; translate: 0 -50%; border-radius: 50%; background: radial-gradient(closest-side, rgb(251 197 34 / 0.55), rgb(251 197 34 / 0) 100%); pointer-events: none; }
.hr-page .hr-kit__grid { display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap); align-items: center; }
.hr-page .hr-kit__copy { grid-column: 1 / span 6; }
.hr-page .hr-kit__copy > p:not(.hr-eyebrow):not(.small) { max-width: 44ch; margin: 24px 0 30px; font-size: var(--fs-lead); }
.hr-page .hr-kit__copy .small { margin: 16px 0 0; }
.hr-page .hr-kit__copy .hr-eyebrow::before { background: var(--yellow); box-shadow: 0 0 0 4px rgb(251 197 34 / 0.35); }
.hr-page .hr-kitobj { grid-column: 8 / -1; position: relative; padding: 48px 8% 64px; }
.hr-page .hr-kitobj__sheet { position: absolute; inset: 48px 8% 64px; border-radius: 22px; background: var(--white); box-shadow: 0 20px 40px -26px rgb(26 26 26 / 0.4); }
.hr-page .hr-kitobj__sheet--3 { rotate: -9deg; translate: -6% 3%; background: var(--pink); }
.hr-page .hr-kitobj__sheet--2 { rotate: 5deg; translate: 5% -2%; background: var(--yellow); }
.hr-page .hr-kitobj__doc { position: relative; padding: clamp(26px, 3vw, 40px); border-radius: 22px; background: var(--white); box-shadow: inset 0 1px 0 #FFFFFF, 0 60px 90px -40px rgb(26 26 26 / 0.45), 0 2px 8px rgb(26 26 26 / 0.06); rotate: -1.5deg; }
.hr-page .hr-kitobj__head { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid rgb(26 26 26 / 0.1); }
.hr-page .hr-kitobj__icon { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 16px; background: var(--ink); }
.hr-page .hr-kitobj__icon svg { width: 26px; height: 26px; fill: none; stroke: var(--yellow); stroke-width: 1.8; stroke-linejoin: round; }
.hr-page .hr-kitobj__tag { margin: 0 0 2px; font-size: 13px; font-weight: 600; }
.hr-page .hr-kitobj__title { margin: 0; font: 700 clamp(22px, 2vw, 30px)/1.1 var(--font-display); letter-spacing: -0.035em; }
.hr-page .hr-kitobj__list { list-style: none; margin-top: 8px; }
.hr-page .hr-kitobj__list li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px dashed rgb(26 26 26 / 0.14); font: 500 clamp(17px, 1.4vw, 20px)/1.3 var(--font-display); letter-spacing: -0.02em; }
.hr-page .hr-kitobj__list li:last-child { border-bottom: 0; }
.hr-page .hr-kitobj__tick { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--yellow); }
.hr-page .hr-kitobj__tick svg { width: 14px; height: 14px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hr-page .hr-kitobj__chip { position: absolute; z-index: 2; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 19px; background: linear-gradient(155deg, #FFFFFF, rgb(255 255 255 / 0.7)); border: 1px solid var(--hr-glass-edge); box-shadow: var(--hr-lift); -webkit-backdrop-filter: var(--hr-glass-blur); backdrop-filter: var(--hr-glass-blur); }
.hr-page .hr-kitobj__chip svg { width: 30px; height: 30px; }
.hr-page .hr-kitobj__chip--task { left: 0; top: 18%; }
.hr-page .hr-kitobj__chip--task rect { fill: var(--ink); }
.hr-page .hr-kitobj__chip--ai { right: 0; top: 4%; }
.hr-page .hr-kitobj__chip--ai img { width: 30px; height: 30px; }
.hr-page .hr-kitobj__chip--ok { right: 4%; bottom: 8%; background: var(--ink); border-color: rgb(255 255 255 / 0.2); }
.hr-page .hr-kitobj__chip--ok svg { fill: none; stroke: var(--yellow); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* 16. Finale ------------------------------------------------------------------ */
.hr-page .hr-finale { --gather: 1; position: relative; isolation: isolate; display: grid; place-items: center; min-height: max(760px, 100svh); padding: clamp(120px, 14vw, 200px) var(--gutter) clamp(160px, 20vw, 280px); overflow: clip; text-align: center; }
.hr-page .hr-finale__sky { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, var(--paper) 0%, var(--hr-dawn) 50%, var(--hr-tint-pink) 100%); }
.hr-page .hr-finale__dots { position: absolute; inset: 0; background-image: var(--hr-dots); background-size: 22px 22px; -webkit-mask-image: radial-gradient(50% 50% at 50% 45%, transparent 0%, #000 60%, transparent 100%); mask-image: radial-gradient(50% 50% at 50% 45%, transparent 0%, #000 60%, transparent 100%); }
/* the hero's horizon, risen: brighter, closer, the rim now a full arc of light */
.hr-page .hr-finale__sun { position: absolute; left: 50%; top: 72%; width: 190vw; height: 140vw; border-radius: 50%; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, transparent 97%, #FFFFFF 99.6%, rgb(255 255 255 / 0) 100%),
              linear-gradient(180deg, #FFFFFF 0%, var(--hr-tint-pink) 2%, var(--pink) 7%, rgb(251 197 34 / 0.85) 15%, var(--yellow) 24%);
  box-shadow: 0 -50px 140px 30px rgb(239 172 186 / 0.6), 0 -10px 30px rgb(255 255 255 / 0.95); }
.hr-page .hr-finale__ring { --rx: min(44vw, 640px); --ry: min(30vw, 330px); position: absolute; left: 50%; top: 45%; z-index: -1; width: 0; height: 0; }
.hr-page .hr-finale__ring span { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: clamp(54px, 5vw, 76px); height: clamp(54px, 5vw, 76px); border-radius: 29%;
  translate: calc(-50% + cos(var(--a)) * var(--rx) * var(--r) * (2 - var(--gather))) calc(-50% + sin(var(--a)) * var(--ry) * var(--r) * (2 - var(--gather)));
  opacity: calc(0.3 + var(--gather) * 0.7);
  background: linear-gradient(155deg, #FFFFFF, rgb(255 255 255 / 0.65)); border: 1px solid var(--hr-glass-edge); box-shadow: inset 0 1px 0 #FFFFFF, 0 22px 40px -18px rgb(26 26 26 / 0.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hr-page .hr-finale__ring img { width: 46%; height: 46%; }
.hr-page .hr-finale__inner { position: relative; max-width: 1100px; }
.hr-page .hr-finale .hr-eyebrow { justify-content: center; }
.hr-page .hr-finale .hr-eyebrow::before { background: var(--pink); box-shadow: 0 0 0 4px rgb(239 172 186 / 0.35); }
.hr-page .hr-finale .hr-mega { font-size: clamp(46px, 7.4vw, 132px); text-wrap: balance; }
.hr-page .hr-finale .hr-mega .line { display: block; }
.hr-page .hr-finale__inner > p:not(.hr-eyebrow) { margin: 28px auto 0; font-size: var(--fs-lead); }

/* 17. Motion -------------------------------------------------------------------- */
/* Hero: one orchestrated entrance. Headline lines rise, the constellation settles from the
   person outward and its wires draw toward them; afterwards only the person's ring breathes. */
@keyframes hr-node-in { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
@keyframes hr-breathe { 0%, 100% { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 0 0 12px rgb(250 248 244 / 0.7), 0 0 0 13px rgb(26 26 26 / 0.08), 0 26px 46px -16px rgb(26 26 26 / 0.5); }
  50% { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 0 0 18px rgb(250 248 244 / 0.5), 0 0 0 19px rgb(239 172 186 / 0.5), 0 26px 46px -16px rgb(26 26 26 / 0.5); } }
@keyframes hr-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes hr-pane-in { from { opacity: 0; transform: translate(40px, 30px); } to { opacity: 1; transform: none; } }
@keyframes hr-photo-in { from { clip-path: inset(18% 12% 18% 12% round 16px); } to { clip-path: inset(0 0 0 0 round 16px); } }
@keyframes hr-dawn { from { opacity: 0; transform: translateX(-50%) translateY(14%); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

.motion .hr-hero .hr-pill { animation: fw-wipe-r 700ms var(--ease-expo) 80ms both; }
.motion .hr-hero__line > span { animation: fw-line 1100ms var(--ease-expo) both; }
.motion .hr-hero__title > .hr-hero__line:nth-child(1) > span { animation-delay: 140ms; }
.motion .hr-hero__title > .hr-hero__line:nth-child(2) > span { animation-delay: 240ms; }
.motion .hr-hero__sub .hr-hero__line:nth-child(1) > span { animation-delay: 420ms; }
.motion .hr-hero__sub .hr-hero__line:nth-child(2) > span { animation-delay: 500ms; }
.motion .hr-hero__intro { animation: hr-rise 900ms var(--ease-out) 640ms both; }
.motion .hr-hero__actions { animation: hr-rise 900ms var(--ease-out) 740ms both; }
.motion .hr-hero__motto { animation: fw-fade 900ms var(--ease-out) 860ms both; }
.motion .hr-hero__horizon { animation: hr-dawn 2200ms var(--ease-expo) 100ms both; }
.motion .hr-node { animation: hr-node-in 900ms var(--ease-spring) calc(500ms + var(--i) * 65ms) both; }
.motion .hr-node--you { animation: hr-node-in 900ms var(--ease-spring) 420ms both, hr-breathe 5s var(--ease-io) 2s infinite; }
.motion .hr-wire { stroke-dasharray: 1 1.02; animation: fw-draw 1400ms var(--ease-io) calc(700ms + var(--i) * 70ms) both; }
.motion .hr-wire--app { stroke-dasharray: 2 6; animation: fw-fade 1200ms var(--ease-out) calc(1300ms + var(--i) * 50ms) both; }
.motion .hr-trusted__glass { animation: hr-rise 1000ms var(--ease-out) 1000ms both; }

/* Scenes: the split headings rise (css/style.css [data-split]); a few groups follow them in */
.motion .hr-scene .hr-eyebrow, .motion .hr-finale .hr-eyebrow { animation: fw-badge 650ms var(--ease-expo) both; }
.motion .hr-paths__lede, .motion .hr-paths__for, .motion .hr-concrete__head > p, .motion .hr-tasks, .motion .hr-programs__head > p,
.motion .hr-events__intro, .motion .hr-voices__head > p:last-child, .motion .hr-about__mission, .motion .hr-about__lede,
.motion .hr-kit__copy > p, .motion .hr-kit__copy > .btn, .motion .hr-finale__inner > p:not(.hr-eyebrow), .motion .hr-finale .hr-actions,
.motion .hr-org__plate > p:not(.hr-eyebrow), .motion .hr-org__plate .hr-actions, .motion .hr-steps { animation: hr-rise 900ms var(--ease-out) 320ms both; }
.motion .hr-route { animation: hr-rise 900ms var(--ease-out) calc(380ms + var(--n, 0) * 110ms) both; }
.motion .hr-route:nth-child(2) { --n: 1; } .motion .hr-route:nth-child(3) { --n: 2; }
.motion .hr-pane { animation: hr-pane-in 1000ms var(--ease-expo) both; }
.motion .hr-pane--ai { animation-delay: 140ms; } .motion .hr-pane--review { animation-delay: 280ms; }
.motion .hr-bench__path path { stroke-dasharray: 1 1.02; animation: fw-draw 1600ms var(--ease-io) 400ms both; }
.motion .hr-bench.is-playing .hr-chips li, .motion .hr-bench.is-playing .hr-out__rows li { animation: hr-rise 600ms var(--ease-out) calc(var(--c, 0) * 90ms + 200ms) both; }
.motion .hr-bench.is-playing .hr-draft__bar span { animation: fw-grow-x 1400ms var(--ease-io) 300ms both; transform-origin: left; }
.motion .hr-photos__tile figure { animation: hr-photo-in 1200ms var(--ease-expo) both; }
.motion .hr-photos__tile:nth-child(3n+2) figure { animation-delay: 120ms; } .motion .hr-photos__tile:nth-child(3n) figure { animation-delay: 220ms; }
.motion .hr-eco__wires path { stroke-dasharray: 1 1.02; animation: fw-draw 1400ms var(--ease-io) 300ms both; }
.motion .hr-eco__list a { animation: hr-rise 900ms var(--ease-out) both; }
.motion .hr-eco__list a:nth-child(2) { animation-delay: 160ms; } .motion .hr-eco__list a:nth-child(3) { animation-delay: 320ms; }
.motion .hr-kitobj__doc { animation: hr-rise 1100ms var(--ease-expo) 200ms both; }
/* The photos and the eco list sit in sections that may already be "in" when the rest of a long
   section arrives; their own blocks gate them so they play when actually seen */
.motion .hr-events:not(.is-in) .hr-photos__tile figure { animation-play-state: paused; }
/* Stations: the thread (--draw) is scrubbed by js/home-redesign.js; without it, fully drawn */

/* 18. Responsive ------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .hr-page .hr-hero__copy { grid-column: 1 / span 9; }
  .hr-page .hr-cons { grid-column: 5 / -1; }
  .hr-page .hr-concrete__head { grid-column: 1 / -1; position: static; }
  .hr-page .hr-tasks { flex-direction: row; overflow-x: auto; gap: 0 24px; border-bottom: 1px solid rgb(26 26 26 / 0.12); scrollbar-width: none; }
  .hr-page .hr-tasks button, .hr-page .hr-tasks button:last-child { flex: none; border: 0; padding: 14px 0 18px; }
  .hr-page .hr-tasks button::before { inset: auto 0 0 0; width: auto; height: 4px; transform: scaleX(0); transform-origin: left; }
  .hr-page .hr-tasks button[aria-selected="true"]::before { transform: scaleX(1); }
  .hr-page .hr-bench { grid-column: 1 / -1; margin-top: 48px; }
  .hr-page .hr-night__intro, .hr-page .hr-stage { grid-column: 1 / -1; }
  .hr-page .hr-night__pin { display: block; min-height: 0; }
  .hr-page .hr-steps { flex-direction: row; gap: 8px; overflow-x: auto; margin-bottom: 36px; padding-bottom: 6px; scrollbar-width: none; }
  .hr-page .hr-steps__rail { display: none; }
  .hr-page .hr-steps .step { flex: none; min-height: 48px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.2); font-size: 18px; letter-spacing: -0.02em; }
  .hr-page .hr-steps .step::after, .hr-page .hr-steps .step__arrow { display: none; }
  .hr-page .hr-steps .step[aria-selected="true"] { background: var(--pink); border-color: var(--pink); color: var(--ink); }
  .hr-page .hr-steps .step[aria-selected="true"] .step__num { color: var(--ink); }
  .hr-page .hr-steps .step__num { vertical-align: 0; margin-right: 8px; }
  .hr-page .hr-about__lead { grid-column: 1 / -1; }
  .hr-page .hr-founder { grid-column: 3 / span 8; margin-top: 64px; }
  .hr-page .hr-kit__copy { grid-column: 1 / span 7; }
  .hr-page .hr-kitobj { grid-column: 7 / -1; }
}
@media (max-width: 900px) {
  .hr-page { --hr-station-room: 150px; }
  .hr-page .hr-hero { min-height: 0; }
  .hr-page .hr-hero__inner { display: flex; flex-direction: column; min-height: 0; padding-bottom: 120px; }
  .hr-page .hr-hero__title > .hr-hero__line { font-size: clamp(56px, 15.5vw, 120px); }
  .hr-page .hr-hero__sub { font-size: clamp(24px, 6.4vw, 40px); }
  .hr-page .hr-cons { order: 2; width: 100%; max-width: 620px; margin: 28px auto 8px; aspect-ratio: 1 / 0.86; }
  .hr-page .hr-node { width: calc(var(--s) * 0.72); height: calc(var(--s) * 0.72); }
  .hr-page .hr-node__label { top: calc(100% + 10px); }
  .hr-page .hr-hero__base { order: 3; }
  .hr-page .hr-hero__horizon { top: auto; bottom: -1440px; height: 1500px; width: 300vw; }
  .hr-page .hr-trusted__glass { grid-template-columns: minmax(0, 1fr); }
  .hr-page .hr-trusted__head { flex-direction: row; align-items: center; justify-content: space-between; border-right: 0; border-bottom: 1px solid rgb(26 26 26 / 0.08); padding-block: 12px; }
  .hr-page .hr-paths__head > *, .hr-page .hr-paths__lede { grid-column: 1 / -1; grid-row: auto; }
  .hr-page .hr-paths__lede { margin-top: 20px; }
  .hr-page .hr-routes { padding-left: 44px; }
  .hr-page .hr-routes__rail { left: 15px; }
  .hr-page .hr-route::before { left: -29px; width: 29px; }
  .hr-page .hr-route::after { left: -36px; }
  .hr-page .hr-route__link { grid-template-columns: minmax(0, 1fr); padding-right: 12px; }
  .hr-page .hr-route__for, .hr-page .hr-route__title, .hr-page .hr-route__desc, .hr-page .hr-route__cta { grid-column: 1; grid-row: auto; padding-left: 0; padding-top: 0; }
  .hr-page .hr-route__title { margin: 8px 0 12px; }
  .hr-page .hr-pane { width: 88%; }
  .hr-page .hr-stage .scene__copy { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .hr-page .hr-programs__head > *, .hr-page .hr-events__head > *, .hr-page .hr-voices__head > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .hr-page .hr-programs__head > p, .hr-page .hr-events__intro, .hr-page .hr-voices__head > p:last-child { margin-top: 20px; }
  .hr-page .hr-programs .prog:not(.prog--feature):nth-child(3) { margin-top: 0; }
  .hr-page .hr-org { min-height: 0; padding-top: 52vw; }
  .hr-page .hr-org__photo { bottom: auto; height: 78vw; }
  .hr-page .hr-org::before { background: linear-gradient(180deg, rgb(26 26 26 / 0) 0, rgb(26 26 26 / 0) 30vw, var(--ink) 78vw); }
  .hr-page .hr-org__plate, .hr-page .hr-org__ways { grid-column: 1 / -1; }
  .hr-page .hr-org__ways { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
  .hr-page .hr-org__ways::before { display: none; }
  .hr-page .hr-photos { --row: 18vw; }
  .hr-page .hr-photos__band { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: var(--row); grid-auto-flow: row dense; }
  .hr-page .hr-photos__band > *, .hr-page .hr-photos__band--mirror > * { grid-area: auto / span 3 / span 2 !important; }
  .hr-page .hr-photos__band > :nth-child(1) { grid-area: auto / span 6 / span 3 !important; }
  .hr-page .hr-photos__band > :nth-child(3), .hr-page .hr-photos__band > :nth-child(7) { grid-area: auto / span 3 / span 3 !important; }
  .hr-page .hr-photos__band > :nth-child(4), .hr-page .hr-photos__band > :nth-child(8) { grid-area: auto / span 3 / span 3 !important; }
  .hr-page .hr-photos__band > :nth-child(9) { grid-area: auto / span 6 / span 2 !important; }
  .hr-page .hr-founder { grid-column: 1 / -1; max-width: 420px; margin-inline: auto; }
  .hr-page .hr-founder__card { left: 8%; right: -4%; }
  .hr-page .hr-eco__wires { display: none; }
  .hr-page .hr-eco__list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .hr-page .hr-eco__list a::before { display: none; }
  .hr-page .hr-faq__head, .hr-page .hr-faq__items { grid-column: 1 / -1; position: static; }
  .hr-page .hr-faq__items { margin-top: 36px; }
  .hr-page .hr-kit__copy, .hr-page .hr-kitobj { grid-column: 1 / -1; }
  .hr-page .hr-kitobj { margin-top: 40px; padding-inline: 10%; }
  .hr-page .hr-kit::after { right: -40%; top: 70%; width: 140%; }
  .hr-page .hr-finale__ring { --rx: 42vw; --ry: 64vw; top: 46%; }
  .hr-page .hr-finale__ring span { width: 46px; height: 46px; }
  .hr-page .hr-finale__sun { top: 80%; width: 300vw; height: 220vw; }
}
@media (max-width: 560px) {
  .hr-page .hr-cons { aspect-ratio: 1 / 1; }
  .hr-page .hr-node { width: calc(var(--s) * 0.6); height: calc(var(--s) * 0.6); }
  .hr-page .hr-hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .hr-page .hr-pane { width: 100%; }
  .hr-page .hr-pane + .hr-pane { margin-top: 14px; }
  .hr-page .hr-bench__path { display: none; }
  .hr-page .hr-orbit { position: static; margin-top: 14px; }
  .hr-page .hr-orbit li { transform: none; }
  .hr-page .hr-org__ways { grid-template-columns: minmax(0, 1fr); }
  .hr-page .hr-photos__band > *, .hr-page .hr-photos__band--mirror > *, .hr-page .hr-photos__band > :nth-child(n) { grid-area: auto / span 3 / span 2 !important; }
  .hr-page .hr-photos__band > :nth-child(3n+1) { grid-area: auto / span 6 / span 3 !important; }
  .hr-page .hr-photos { --row: 22vw; }
  .hr-page .hr-photos__tile figcaption { font-size: 12px; left: 8px; bottom: 8px; padding: 5px 9px; }
  .hr-page .hr-founder__card { position: relative; left: auto; right: auto; margin: -60px 12px 0; }
  .hr-page .hr-founder { padding-bottom: 0; }
  .hr-page .hr-voices__head::after { font-size: 220px; top: -0.2em; }
  .hr-page .hr-finale__ring span:nth-child(even) { display: none; }
}

/* 19. Reduced motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hr-page .hr-route__link::before, .hr-page .hr-route__title, .hr-page .hr-route__arrow, .hr-page .hr-photos__tile img, .hr-page .hr-eco__list a, .hr-page .hr-steps__fill { transition: none; }
  .hr-page .hr-node { translate: -50% -50%; }
}

/* 20. Phones: hero type and mockups --------------------------------------------- */
/* Hero headlines, leads and product mockups step down one size on phones, so the first
   screen shows the headline, lead and actions together and mockups stay a glance, not a page.
   Headlines stay larger than section h2s; mockups keep their em-based proportions. */
@media (max-width: 640px) {
  :root { --fs-page-h1: clamp(32px, 9.4vw, 40px); --fs-lead: 16.5px; }
  .hero h1 { font-size: clamp(30px, 8.8vw, 36px); margin-block: 16px 14px; }
  .hero__intro { font-size: 16px; }
  .phero h1, .phero--program h1, .pro-hero h1, .kit-hero h1, .article__head h1, .legal__head h1 { font-size: var(--fs-page-h1); }
  .phero h1.lhero__title, .phero h1.hero__title--xl { font-size: clamp(34px, 10vw, 42px); }
  .ahero h1 { font-size: clamp(40px, 12vw, 50px); }
  .phero__lead, .ahero__lead { font-size: var(--fs-lead); }
  .hr-page .hr-hero__title > .hr-hero__line { font-size: clamp(44px, 13vw, 56px); }

  /* mockups: a narrower stage inside the same frame, so height shrinks with width */
  .pmock--inline .pnet, .pmock--inline .proto { width: min(100%, 270px); margin-inline: auto; }
  .bw-case__art { padding: 12px; font-size: 10.5px; }
  .preview__chat, .preview__table { max-width: 280px; margin-inline: auto; }
  .kit-preview { gap: 12px; }
  .kit-preview__cover { min-height: 140px; padding: 14px; }
}

/* 25. Event announcement bar and latest resources (2026-11-04) ===============
   Announcement bar (tools/render.mjs eventBanner, js/main.js §22): a Soft Charcoal card that hangs
   just under the navigation and stays there on scroll. Its section is a zero-height sticky strip,
   so the card lies over the page and never moves it. It slides down from under the header, shows
   for 10 seconds (the AI Yellow ring on the close button drains, the seconds count down) and slides
   back up. Styled as the home journey's selected step: an AI Yellow tile with the site's line
   icon, white text on Charcoal, a right arrow. Hidden until script has chosen the event. */
.announce-slot { position: sticky; top: var(--header-h); z-index: 19; height: 0; }
/* the testimonial deck's cards animate at z-index 50: kept inside their own stack, under the bar */
.voices { isolation: isolate; }
.announce[hidden], .announce__item[hidden], .announce__count[hidden] { display: none; }
.announce {
  position: absolute; top: 8px; left: 0; right: 0; width: min(1120px, 100% - 2 * clamp(8px, 1vw, 14px)); margin-inline: auto;
  display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 10px;
  border-radius: var(--r-lg); background: var(--ink); color: var(--white);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 22px 44px -20px rgb(26 26 26 / 0.55);
  transition: transform 480ms var(--ease-io), opacity 320ms var(--ease-out);
}
.motion .announce[data-announce-ready] { animation: fw-announce-in 700ms var(--ease-expo) 150ms backwards; }
.announce.is-leaving { transform: translateY(calc(-100% - 20px)); opacity: 0; pointer-events: none; }
@keyframes fw-announce-in { from { opacity: 0; transform: translateY(calc(-100% - 20px)); } }
.announce__item { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.announce__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--yellow); }
.announce__icon svg { width: 28px; height: 28px; overflow: visible; }
.announce__icon :is(.route__line, .route__node) { stroke-width: 2.8; }
.announce__copy { flex: 1; min-width: 0; display: grid; gap: 1px; }
.announce__copy > p { margin: 0; }
.announce__kicker { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; font-size: 12.5px; font-weight: 500; line-height: 1.45; }
.announce__kicker > * + *::before { content: "\00B7"; margin-right: 8px; opacity: 0.6; }
.announce__tag { color: var(--yellow); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.announce__when { font-weight: 600; }
.announce__text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; line-height: 1.45; }
.announce__title { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.announce__summary::before { content: "\2014"; margin-right: 0.4em; opacity: 0.55; }
/* The button hugs its label: the arrow sits right after the text */
.announce__cta {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 8px 13px 8px 16px;
  border-radius: var(--r-sm); background: var(--white); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  transition: background-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.announce__cta .btn__arrow { width: 16px; height: 16px; transform: rotate(45deg); }
.announce__cta:hover { background: var(--yellow); transform: translateY(-1px); }
.announce__cta:hover .btn__arrow { transform: translateX(2px) rotate(45deg); }
.announce__end { flex: none; display: flex; align-items: center; gap: 6px; }
.announce__count { font-size: 12px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.announce__count b { font-weight: 700; }
.announce__close { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--white); cursor: pointer; transition: background-color var(--dur-fast); }
.announce__close:hover { background: rgb(255 255 255 / 0.1); }
.announce__ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; fill: none; stroke-width: 2; pointer-events: none; }
.announce__ring-track { stroke: rgb(255 255 255 / 0.16); }
.announce__ring-bar { stroke: var(--yellow); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(var(--announce-p, 0) * -100); }
.announce__x { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.announce__cta:focus-visible, .announce__close:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
/* Medium screens: the summary goes (the title and the date carry it) */
@media (max-width: 1100px) { .announce__summary { display: none; } }
/* Phones: icon and text, the button under the text; the countdown and close at the top right */
@media (max-width: 640px) {
  .announce { top: 6px; align-items: flex-start; padding: 12px; }
  .announce__item { flex-wrap: wrap; row-gap: 12px; padding-right: 76px; }
  .announce__copy { flex-basis: calc(100% - 58px); }
  .announce__text { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .announce__cta { margin-left: 58px; min-height: 44px; }
  .announce__end { position: absolute; top: 8px; right: 8px; gap: 2px; }
  .announce__count-label { display: none; }
}
@media (prefers-reduced-motion: reduce) { .announce { transition: none; } .motion .announce[data-announce-ready] { animation: none; } }

/* Latest resources (Home, Learn; tools/render.mjs latestResources): the Resources page's cards
   (.rcards, .rcard--lead), the newest as the wide lead and one row of three below it. The row
   stays three across until the cards stack, so the third never sits alone. */
@media (min-width: 761px) { .latest .rcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }