/* ==========================================================================
   Re:Mind — landing page
   Design system: Inner Archive × Future Clarity
   Palette, type and layout tokens per Maya's brand brief.
   ========================================================================== */

:root {
  /* --- brand palette (fixed, from the Re:Mind visual language brief) --- */
  --charcoal: #545454;
  --charcoal-soft: #6b6b6b;
  --ink: #3c3a3b;
  --blush: #f2edee;
  --paper: #faf7f5;
  --pink: #f2d5d7;
  --pink-deep: #e7b9bd;
  --aqua: #d5f2f0;
  --aqua-deep: #a9dbd7;
  --lavender: #e3d9f5;
  --lavender-deep: #c9b8e8;
  --gray-line: #dedede;
  --white: #fffdfc;

  /* section wash tints (very light, so 60-70% of each section stays neutral) */
  --wash-lavender: #f3effa;
  --wash-aqua: #eef9f8;
  --wash-blush: #f2edee;

  --font-display: "Heebo", "Assistant", "Segoe UI", sans-serif;
  --font-body: "Heebo", "Assistant", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  --container: 1120px;
  --measure: 640px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------------------------------- */
/* reset + base                                                          */
/* ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
/* the UA stylesheet gives figure 40px side margins, which overflowed the page */
figure { margin: 0; }
a { color: inherit; }
strong { font-weight: 700; color: var(--ink); }
.body-copy strong, .lede strong { font-size: 1.06em; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; text-wrap: balance; color: var(--ink); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; }

:focus-visible {
  outline: 2px solid var(--charcoal);
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

@media (min-width: 780px) {
  .container { padding-inline: 48px; }
}

.measure { max-width: var(--measure); }

section { position: relative; }

.section-pad { padding-block: 46px; }
@media (min-width: 780px) { .section-pad { padding-block: 74px; } }

.bg-paper   { background: var(--paper); }
.bg-blush   { background: var(--blush); }
.bg-lavender{ background: var(--wash-lavender); }
.bg-aqua    { background: var(--wash-aqua); }
.bg-white   { background: var(--white); }
.bg-ink     { background: var(--ink); color: var(--blush); }
.bg-ink h2, .bg-ink h3 { color: var(--white); }

/* full illustrated backgrounds, sized against each section's own box so the
   scene reads the same regardless of viewport height */
.bg-scene-blush {
  background-color: var(--blush);
  background-image: linear-gradient(rgba(242,237,238,0.3), rgba(242,237,238,0.3)), url("../images/bg-spacious.jpg");
  background-size: auto, cover;
  background-position: center, left center;
  background-repeat: no-repeat;
}
.bg-scene-aqua {
  background-color: var(--wash-aqua);
  background-image: linear-gradient(rgba(213,242,240,0.28), rgba(213,242,240,0.28)), url("../images/bg-abstract.jpg");
  background-size: auto, cover;
  background-position: center, right center;
  background-repeat: no-repeat;
}


/* the four stations reuse the spacious brand background, held on the other
   side of the frame so it does not read as a repeat of the promises section */
.bg-scene-corridors {
  background-color: var(--wash-aqua);
  background-image: linear-gradient(rgba(238, 249, 248, 0.72), rgba(238, 249, 248, 0.76)), url("../images/bg-spacious.jpg");
  background-size: auto, cover;
  background-position: center, right center;
  background-repeat: no-repeat;
}

/* ---------------------------------------------------------------------- */
/* archival label — small mono eyebrow, used ONLY where order is real     */
/* ---------------------------------------------------------------------- */
.label {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--charcoal-soft);
  margin-bottom: 18px;
}
.label::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

/* ---------------------------------------------------------------------- */
/* type scale                                                             */
/* ---------------------------------------------------------------------- */
.h1 { font-size: 2.3rem; line-height: 1.22; letter-spacing: -0.01em; }
.h2 { font-size: 1.85rem; line-height: 1.3; }
.h3 { font-size: 1.28rem; line-height: 1.4; font-weight: 500; }
.eyebrow-word { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--charcoal-soft); }

@media (min-width: 780px) {
  .h1 { font-size: 3.4rem; }
  .h2 { font-size: 2.35rem; }
  .h3 { font-size: 1.3rem; }
}

.lede { font-size: 1.18rem; color: var(--ink); line-height: 1.75; }
.body-copy { color: var(--charcoal); }
.body-copy + .body-copy { margin-top: 1.35em; }

/* ---------------------------------------------------------------------- */
/* nav                                                                    */
/* ---------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 247, 245, 0.86);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(84, 84, 84, 0.1);
}
.nav .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
}
.nav .container > a:first-child {
  position: absolute;
  inset-inline-start: 24px;
  display: flex;
  align-items: center;
}
@media (min-width: 780px) {
  .nav .container > a:first-child { inset-inline-start: 48px; }
}
.nav .logo-mark { height: 22px; width: auto; }
.nav .btn { font-size: 0.85rem; padding: 0.6em 1.3em; }

/* ---------------------------------------------------------------------- */
/* buttons — brand spec: pink bg, charcoal text, slightly rounded, no glow */
/* ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: 0.005em;
  padding: 1.15em 2.6em;
  border-radius: var(--radius-md);
  text-decoration: none;
  border: 3px solid var(--pink);
  box-shadow: 0 0 0 6px rgba(242, 213, 215, 0.34), 0 20px 34px -18px rgba(60, 58, 59, 0.6);
  transition: background-color 0.2s var(--ease), transform 0.18s var(--ease), box-shadow 0.2s var(--ease);
  white-space: nowrap;
}
.btn:hover { background: #2b2a2b; border-color: var(--aqua-deep); transform: translateY(-2px);
  box-shadow: 0 0 0 7px rgba(169, 219, 215, 0.4), 0 24px 38px -18px rgba(60, 58, 59, 0.65); }
.btn:active { transform: translateY(1px); box-shadow: 0 8px 16px -12px rgba(60,58,59,0.4); }
/* the sticky button stays soft — it is on screen the whole way down and
   should not compete with the dark in-page calls to action */
.nav .btn { font-size: 0.9rem; padding: 0.65em 1.4em; background: var(--pink); color: var(--ink);
  border-color: rgba(84, 84, 84, 0.16); box-shadow: 0 8px 16px -10px rgba(231, 185, 189, 0.8); }
.nav .btn:hover { background: var(--aqua); color: var(--ink); border-color: var(--aqua-deep); }
.btn-arrow { font-size: 1.05em; transition: transform 0.2s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(-3px); }

.btn-wrap { margin-top: 22px; }
/* a CTA already closes the section, so it needs less air beneath it */
.section-pad:has(.btn-wrap) { padding-block-end: 30px; }
.hero-copy .btn-wrap { margin-top: 18px; }

/* ---------------------------------------------------------------------- */
/* hero                                                                   */
/* ---------------------------------------------------------------------- */
.hero { background: var(--blush); overflow: hidden; }
.hero-art {
  position: relative;
  width: 100%;
  aspect-ratio: 850 / 1140;
}
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: top; animation: hero-in 1.2s var(--ease) both; }
@keyframes hero-in { from { opacity: 0; transform: scale(1.045); } to { opacity: 1; transform: scale(1); } }

@media (min-width: 900px) {
  .hero-art { aspect-ratio: 1600 / 760; }
}

.hero-overlay {
  position: absolute;
  inset-inline: 0;
  top: 26%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 6%;
}
.hero-overlay .h1 {
  /* Frank Ruhl Libre is the classic Hebrew book face — the closest thing to an
     old printed/typewritten look that actually ships Hebrew glyphs */
  font-family: "Frank Ruhl Libre", "David Libre", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.55rem;
  letter-spacing: 0.005em;
  text-align: center;
  text-wrap: balance;
  max-width: 26ch;
  margin-bottom: 26px;
  color: var(--charcoal-soft);
  text-shadow: 0 2px 22px rgba(250, 247, 245, 0.9), 0 1px 4px rgba(250, 247, 245, 0.95);
}
.hero-overlay .hero-lede-tight {
  font-size: 1.5rem;
  text-align: center;
  max-width: 28ch;
  margin: 0;
  text-shadow: 0 2px 18px rgba(250, 247, 245, 0.8), 0 1px 4px rgba(250, 247, 245, 0.95);
}
@media (min-width: 900px) {
  .hero-overlay { top: 44%; padding-inline: 14%; }
  .hero-overlay .h1 { font-size: 2rem; max-width: 26ch; margin-bottom: 34px; }
  .hero-overlay .hero-lede-tight { font-size: 1.85rem; max-width: 30ch; }
}

.hero-copy {
  padding: 6px 24px 8px;
  max-width: 640px;
  margin-inline: auto;
}
@media (min-width: 780px) {
  .hero-copy { padding: 14px 48px 10px; max-width: 720px; }
}
/* the hero now carries only the call to action and the reminder, so centre them */
.hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-copy .reminder { text-align: start; max-width: 560px; }

.hero-copy .h1 { margin-bottom: 20px; }
.hero-copy .lede { margin-bottom: 22px; }

.hero-lede-big {
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.55;
  margin-bottom: 26px;
}
@media (min-width: 780px) { .hero-lede-big { font-size: 1.62rem; } }

.hero-callout {
  background: rgba(242, 213, 215, 0.5);
  border-inline-start: 3px solid var(--pink-deep);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 20px 22px;
  margin-block: 26px;
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--ink);
}
[dir="rtl"] .hero-callout { border-radius: var(--radius-md) 0 0 var(--radius-md); }
@media (min-width: 780px) { .hero-callout { padding: 26px 30px; font-size: 1.22rem; } }
.hero-callout strong { font-weight: 700; }

/* ---------------------------------------------------------------------- */
/* testimonials — presented as real, unedited artifacts                  */
/* ---------------------------------------------------------------------- */
.testimonial-row {
  display: flex;
  justify-content: center;
  padding-block: 8px 4px;
  background-image: linear-gradient(rgba(255,255,255,0.72), rgba(255,255,255,0.72)), url("../images/paper-texture.jpg");
  background-size: cover;
  background-position: center;
}
.testimonial {
  background: var(--white);
  border: 1px solid rgba(84, 84, 84, 0.12);
  box-shadow: 0 18px 34px -26px rgba(60, 58, 59, 0.45);
  padding: 12px;
  max-width: 480px;
  width: 100%;
  /* without this a wide capture sets the flex item's min-content width and
     pushes the whole RTL document sideways on narrow screens */
  min-width: 0;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
/* screen-wide captures (Facebook posts) need the extra width to stay legible */
.testimonial.wide { max-width: 760px; }
.testimonial:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 44px -24px rgba(60, 58, 59, 0.55);
}
.testimonial img { width: 100%; height: auto; }

.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  max-width: 980px;
  margin-inline: auto;
}
@media (min-width: 700px) {
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .testimonial-grid { grid-template-columns: repeat(3, 1fr); }
}
.testimonial-grid .testimonial { max-width: none; }

.testimonial-pair {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
}
@media (min-width: 700px) {
  .testimonial-pair { flex-direction: row; align-items: flex-start; justify-content: center; }
  .testimonial-pair .testimonial { max-width: 420px; }
}

.testimonial-bg {
  background-image: var(--paper-texture);
  background-size: cover;
  background-position: center;
}

/* ---------------------------------------------------------------------- */
/* prose sections                                                         */
/* ---------------------------------------------------------------------- */
.prose-section .container { max-width: 760px; }
.prose-section h2 { margin-bottom: 26px; }

/* pull-quote: an existing sentence, re-set large, to break up long prose */
.pull-quote {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--ink);
  border-inline-start: 3px solid var(--pink-deep);
  padding-inline-start: 22px;
  margin-block: 34px;
  max-width: 34ch;
}
@media (min-width: 780px) { .pull-quote { font-size: 1.75rem; max-width: 26ch; } }

/* split layout: prose beside a photo, RTL-natural (first child = right) */
.split-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: center;
}
@media (min-width: 900px) {
  .split-section { grid-template-columns: 1.1fr 0.9fr; gap: 52px; }
}
.split-section img { border-radius: var(--radius-md); width: 100%; height: auto; }
.split-section figcaption { margin-top: 10px; font-size: 0.8rem; color: var(--charcoal-soft); font-family: var(--font-mono); }

/* ---------------------------------------------------------------------- */
/* four-station journey                                                   */
/* ---------------------------------------------------------------------- */
.journey {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.journey-step {
  position: relative;
  padding: 28px 0 28px 28px;
  border-inline-start: 1px solid rgba(84, 84, 84, 0.28);
}
.journey-step:last-child { border-image: none; }
.journey-step::before {
  content: "";
  position: absolute;
  inset-inline-start: -5px;
  top: 32px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pink);
  border: 1px solid var(--ink);
}
.journey-step:nth-child(2)::before { background: var(--aqua); }
.journey-step:nth-child(3)::before { background: var(--lavender); }
.journey-step:nth-child(4)::before { background: var(--white); }
.journey-step .label { margin-bottom: 8px; }
.journey-step h3 { margin-bottom: 10px; }

@media (min-width: 900px) {
  .journey { flex-direction: row; align-items: stretch; gap: 20px; }
  .journey-step {
    flex: 1;
    padding: 0 0 0 24px;
    border-inline-start: 1px solid rgba(84, 84, 84, 0.28);
  }
  .journey-step::before { top: 4px; }
  .journey-step:first-child { padding-inline-start: 0; border-inline-start: none; }
  .journey-step:first-child::before { inset-inline-start: 0; }
}

/* ---------------------------------------------------------------------- */
/* 3x3 benefit grid — parallel items, icon + title + line, no ordinals    */
/* ---------------------------------------------------------------------- */
.benefit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
}
@media (min-width: 640px) { .benefit-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; } }
@media (min-width: 980px) { .benefit-grid { grid-template-columns: repeat(3, 1fr); } }

.benefit {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.benefit-icon {
  width: 46px;
  height: 46px;
  color: var(--ink);
  transition: transform 0.25s var(--ease), color 0.25s var(--ease);
}
.benefit-icon svg { width: 100%; height: 100%; }
.benefit:hover .benefit-icon { transform: translateY(-3px) scale(1.08); color: var(--pink-deep); }
.benefit h3 { font-size: 1.28rem; }
.benefit p { color: var(--charcoal); font-size: 1.18rem; line-height: 1.75; }

/* ---------------------------------------------------------------------- */
/* ten-item capability list (sequential-feeling but not numbered process) */
/* ---------------------------------------------------------------------- */
.cap-list { display: flex; flex-direction: column; }
.cap-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  padding-block: 22px;
  border-top: 1px solid rgba(84, 84, 84, 0.16);
  transition: padding-inline-start 0.25s var(--ease), background-color 0.25s var(--ease);
}
.cap-item:hover { padding-inline-start: 8px; background: rgba(242, 213, 215, 0.16); }
.cap-item:hover .cap-mark span { background: var(--pink-deep); transform: scale(1.3); }
.cap-mark span { transition: transform 0.25s var(--ease), background-color 0.25s var(--ease); }
.cap-item:last-child { border-bottom: 1px solid rgba(84, 84, 84, 0.16); }
.cap-mark { padding-top: 6px; }
.cap-mark span {
  display: block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pink-deep);
}
.cap-item h3 { margin-bottom: 8px; font-size: 1.05rem; }
.cap-item p { font-size: 1.05rem; color: var(--charcoal); line-height: 1.7; }

/* ---------------------------------------------------------------------- */
/* inline lists inside prose                                              */
/* ---------------------------------------------------------------------- */
.marked-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 22px 0 0;
}
.marked-list li {
  position: relative;
  padding-inline-start: 22px;
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--charcoal);
}
.marked-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 12px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pink-deep);
}

.num-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 26px 0 30px;
  padding: 0;
  list-style: none;
  counter-reset: numlist;
}
.num-list li {
  position: relative;
  padding-inline-start: 46px;
  line-height: 1.8;
  color: var(--charcoal);
}
.num-list li::before {
  counter-increment: numlist;
  content: counter(numlist);
  position: absolute;
  inset-inline-start: 0;
  top: 2px;
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--wash-blush);
  border: 1px solid rgba(216, 148, 152, 0.5);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--charcoal);
}

/* ---------------------------------------------------------------------- */
/* scope stat tiles                                                       */
/* ---------------------------------------------------------------------- */
.scope-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 700px) { .scope-grid { grid-template-columns: repeat(4, 1fr); } }

.stat-tile {
  position: relative;
  overflow: hidden;
  background-color: var(--white);
  background-image: linear-gradient(rgba(255,253,252,0.82), rgba(255,253,252,0.82)), url("../images/paper-texture.jpg");
  background-size: auto, cover;
  background-position: center;
  border: 1px solid rgba(84, 84, 84, 0.12);
  border-radius: var(--radius-md);
  padding: 26px 18px;
  text-align: center;
  box-shadow: 0 14px 26px -20px rgba(60, 58, 59, 0.45);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
/* a band of brand colour across the top of each tile, one hue per tile */
.stat-tile::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 5px;
}
.scope-grid .stat-tile:nth-child(1)::before { background: var(--pink); }
.scope-grid .stat-tile:nth-child(2)::before { background: var(--aqua); }
.scope-grid .stat-tile:nth-child(3)::before { background: var(--lavender); }
.scope-grid .stat-tile:nth-child(4)::before { background: var(--pink-deep); }
.scope-grid .stat-tile:nth-child(1) { background-color: rgba(242, 213, 215, 0.28); }
.scope-grid .stat-tile:nth-child(2) { background-color: rgba(213, 242, 240, 0.32); }
.scope-grid .stat-tile:nth-child(3) { background-color: rgba(227, 217, 245, 0.3); }
.scope-grid .stat-tile:nth-child(4) { background-color: rgba(242, 213, 215, 0.2); }
.stat-tile:hover { transform: translateY(-4px); box-shadow: 0 20px 34px -20px rgba(60,58,59,0.5); }
.stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1;
}
.stat-label { margin-top: 8px; font-size: 0.95rem; color: var(--charcoal); line-height: 1.5; }

.scope-total {
  margin: 18px 0 0;
  padding: 20px 18px;
  text-align: center;
  border-radius: var(--radius-md);
  background: var(--wash-blush);
  border: 1px solid rgba(216, 148, 152, 0.42);
  font-size: 1.18rem;
  font-weight: 500;
  color: var(--ink);
}
.scope-total-num {
  font-weight: 700;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}

.scope-wide-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
}
@media (min-width: 700px) { .scope-wide-grid { grid-template-columns: repeat(3, 1fr); } }

.scope-wide {
  background: var(--wash-blush);
  border-radius: var(--radius-md);
  padding: 22px 20px;
}
.scope-wide h3 { font-size: 1rem; margin-bottom: 8px; }
.scope-wide p { font-size: 1rem; color: var(--charcoal); line-height: 1.6; }

/* ---------------------------------------------------------------------- */
/* schedule table                                                         */
/* ---------------------------------------------------------------------- */
.schedule-wrap { overflow-x: auto; border: 1px solid rgba(84, 84, 84, 0.16); border-radius: var(--radius-md); background: var(--white); }
.schedule {
  width: 100%;
  min-width: 420px;
  font-size: 0.95rem;
}
.schedule th, .schedule td {
  padding: 13px 18px;
  text-align: start;
  border-bottom: 1px solid rgba(84, 84, 84, 0.1);
}
.schedule th {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--charcoal-soft);
}
.schedule td:first-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.schedule tr:last-child td { border-bottom: none; }
.schedule-note { margin-top: 18px; font-size: 1rem; color: var(--charcoal-soft); line-height: 1.6; }

.schedule-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  background: var(--white);
  border: 1px solid rgba(84, 84, 84, 0.16);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--ink);
}
.schedule-details summary::-webkit-details-marker { display: none; }
.schedule-details .chev { flex: none; width: 20px; height: 20px; transition: transform 0.22s var(--ease); }
.schedule-details[open] .chev { transform: rotate(45deg); }
.schedule-details[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: -1px; }
.schedule-details .schedule-wrap { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: 0; }

/* ---------------------------------------------------------------------- */
/* about Maya                                                             */
/* ---------------------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 860px) {
  .about-grid { grid-template-columns: 320px 1fr; gap: 56px; }
}
.about-photo img { border-radius: var(--radius-md); }
.about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(84, 84, 84, 0.16);
}
.about-stats .stat-num { font-size: 1.7rem; }
.about-training {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(84, 84, 84, 0.16);
  font-size: 0.9rem;
  color: var(--charcoal-soft);
  line-height: 1.75;
}

/* ---------------------------------------------------------------------- */
/* fit / not-fit                                                          */
/* ---------------------------------------------------------------------- */
.fit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (min-width: 860px) { .fit-grid { grid-template-columns: 1fr 1fr; } }
.fit-panel { padding: 34px 30px; }
.fit-panel.yes { background: var(--wash-aqua); }
.fit-panel.no { background: var(--white); border: 1px solid rgba(84,84,84,0.12); }
.fit-panel h3 { margin-bottom: 16px; font-size: 1.15rem; }
.fit-panel p + p { margin-top: 14px; }
.fit-panel p { font-size: 1.05rem; line-height: 1.7; }

/* ---------------------------------------------------------------------- */
/* pricing                                                                */
/* ---------------------------------------------------------------------- */
.price-card {
  background: var(--white);
  border: 1px solid rgba(84, 84, 84, 0.14);
  border-radius: var(--radius-md);
  padding: 34px 28px;
  max-width: 480px;
}
.price-worth { font-size: 1.02rem; color: var(--charcoal-soft); }
.price-worth s { opacity: 0.75; }
.price-main { margin-top: 10px; display: flex; align-items: baseline; gap: 10px; }
.price-main .num { font-family: var(--font-display); font-weight: 700; font-size: 3rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.price-main .cur { font-size: 1.2rem; color: var(--charcoal-soft); }
.price-sub { margin-top: 6px; font-size: 0.98rem; color: var(--charcoal-soft); line-height: 1.6; }
.coupon-box {
  margin-top: 22px;
  padding: 18px 20px;
  background: var(--wash-blush);
  border-radius: var(--radius-sm);
}
.coupon-box .code {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  background: var(--white);
  border: 1px dashed var(--charcoal-soft);
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.price-confirm { margin-top: 20px; font-size: 0.88rem; color: var(--charcoal-soft); }

/* ---------------------------------------------------------------------- */
/* FAQ — native details/summary, no JS required                          */
/* ---------------------------------------------------------------------- */
.faq-item {
  border-bottom: 1px solid rgba(84, 84, 84, 0.16);
}
.faq-item:first-child { border-top: 1px solid rgba(84, 84, 84, 0.16); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 22px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--ink);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .chev {
  flex: none;
  width: 20px; height: 20px;
  transition: transform 0.22s var(--ease);
}
.faq-item[open] .chev { transform: rotate(45deg); }
.faq-item p { text-align: start; padding-bottom: 22px; color: var(--charcoal); font-size: 1.05rem; line-height: 1.7; max-width: 62ch; }

/* ---------------------------------------------------------------------- */
/* final CTA                                                              */
/* ---------------------------------------------------------------------- */
.final-cta { position: relative; overflow: hidden; }
.final-cta-art {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  height: 100%;
  width: 42%;
  opacity: 0.9;
}
.final-cta-art img { width: 100%; height: 100%; object-fit: cover; }
.final-cta-art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to left, transparent 55%, var(--wash-aqua) 100%);
}
@media (max-width: 899px) {
  .final-cta-art { position: static; width: 100%; height: 220px; margin-bottom: 28px; }
  .final-cta-art::after { background: linear-gradient(to top, var(--wash-aqua) 0%, transparent 45%); }
}
.final-cta .container { position: relative; max-width: 620px; }

/* ---------------------------------------------------------------------- */
/* footer                                                                 */
/* ---------------------------------------------------------------------- */
.site-footer {
  padding-block: 40px;
  border-top: 1px solid rgba(84, 84, 84, 0.16);
  background: var(--paper);
}
.site-footer .container {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  text-align: center;
}
@media (min-width: 700px) {
  .site-footer .container { flex-direction: row; justify-content: space-between; text-align: start; }
}
.site-footer .logo-mark { height: 18px; width: auto; opacity: 0.8; }
.footer-links { display: flex; gap: 22px; font-size: 0.88rem; }
.footer-links a { text-decoration: underline; text-underline-offset: 3px; color: var(--charcoal-soft); }
.footer-fine { font-size: 0.8rem; color: var(--charcoal-soft); }

/* ---------------------------------------------------------------------- */
/* scroll reveal                                                          */
/* ---------------------------------------------------------------------- */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  .reveal.is-visible { opacity: 1; transform: none; }

  /* staggered entrance for repeating grid/list children */
  .stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
  .stagger.is-visible > * { opacity: 1; transform: none; }
  .stagger.is-visible > *:nth-child(1) { transition-delay: 0.02s; }
  .stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
  .stagger.is-visible > *:nth-child(3) { transition-delay: 0.14s; }
  .stagger.is-visible > *:nth-child(4) { transition-delay: 0.2s; }
  .stagger.is-visible > *:nth-child(5) { transition-delay: 0.26s; }
  .stagger.is-visible > *:nth-child(6) { transition-delay: 0.32s; }
  .stagger.is-visible > *:nth-child(7) { transition-delay: 0.38s; }
  .stagger.is-visible > *:nth-child(8) { transition-delay: 0.44s; }
  .stagger.is-visible > *:nth-child(9) { transition-delay: 0.5s; }
  .stagger.is-visible > *:nth-child(10) { transition-delay: 0.56s; }
}

/* ---------------------------------------------------------------------- */
/* testimonial carousel                                                   */
/* ---------------------------------------------------------------------- */
.voices-title { margin-bottom: 34px; }

.carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.carousel-track {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  /* proximity, not mandatory: mandatory snapping cancels programmatic scrolls,
     which left the arrow buttons doing nothing. Smoothness is passed per call
     from the script instead of being forced here for the same reason. */
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-block: 6px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 4px; border-radius: var(--radius-md); }

/* cards are sized so a whole number of them fits — no sliced card at the edge */
.carousel-track > .testimonial {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  scroll-snap-align: start;
}
@media (min-width: 700px) {
  .carousel-track > .testimonial { width: calc((100% - 22px) / 2); }
}
@media (min-width: 1020px) {
  .carousel-track > .testimonial { width: calc((100% - 44px) / 3); }
}

.carousel-nav {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(84, 84, 84, 0.18);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.carousel-nav svg { width: 22px; height: 22px; }
.carousel-nav:hover { background: var(--pink); transform: scale(1.06); }
.carousel-nav:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 3px; }
.carousel-nav[disabled] { opacity: 0.32; cursor: default; transform: none; background: var(--white); }

@media (max-width: 700px) {
  .carousel { gap: 6px; }
  .carousel-nav { width: 38px; height: 38px; }
  .carousel-nav svg { width: 18px; height: 18px; }
}

/* ---------------------------------------------------------------------- */
/* hero reminder line                                                     */
/* ---------------------------------------------------------------------- */
.reminder {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--wash-aqua);
  border: 1px solid rgba(169, 219, 215, 0.7);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.65;
  color: var(--ink);
}
.reminder-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  color: var(--charcoal);
}
.reminder-icon svg { width: 100%; height: 100%; }
.reminder strong { font-family: var(--font-mono); font-size: 0.95em; letter-spacing: 0.01em; }

/* the section that carries the answer gets more weight than the build-up */
.solution { border-block: 1px solid rgba(169, 219, 215, 0.85); }
.solution .h2 { font-size: 2.1rem; }
@media (min-width: 780px) { .solution .h2 { font-size: 2.7rem; } }
.solution .label { color: var(--ink); }

/* ---------------------------------------------------------------------- */
/* promises — line drawing beside each one                                */
/* ---------------------------------------------------------------------- */
.cap-icon {
  width: 48px;
  height: 48px;
  margin-top: 2px;
  color: var(--charcoal);
  opacity: 0.85;
  transition: transform 0.25s var(--ease), color 0.25s var(--ease);
}
.cap-icon svg { width: 100%; height: 100%; }
.cap-item:hover .cap-icon { transform: translateY(-3px); color: var(--pink-deep); }
.cap-item h3 { font-size: 1.35rem; }
.cap-item p { font-size: 1.15rem; line-height: 1.78; }
@media (min-width: 780px) {
  .cap-item h3 { font-size: 1.5rem; }
  .cap-item p { font-size: 1.2rem; }
}

/* ---------------------------------------------------------------------- */
/* fit panels — tick and cross per line                                   */
/* ---------------------------------------------------------------------- */
/* the mark is positioned rather than laid out as a flex item, so bold runs
   inside the paragraph stay part of the normal inline flow */
.fit-line { position: relative; padding-inline-start: 36px; }
.fit-mark {
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.fit-mark svg { width: 15px; height: 15px; }
.fit-mark.ok { background: var(--aqua); color: #2f6b64; }
.fit-mark.no { background: var(--pink); color: #8a4a4f; }

/* ---------------------------------------------------------------------- */
/* programme cards — icon above the title                                 */
/* ---------------------------------------------------------------------- */
.scope-icon {
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  color: var(--charcoal);
  opacity: 0.85;
}
.scope-icon svg { width: 100%; height: 100%; }

/* the three Facebook posts sit under the carousel at full width */
.voices-posts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin-top: 34px;
}

/* ---------------------------------------------------------------------- */
/* practical stretch — keeps the schedule and price from reading flat     */
/* ---------------------------------------------------------------------- */
.price-card { position: relative; overflow: hidden; }
.price-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 4px;
  background: linear-gradient(to left, var(--pink), var(--aqua), var(--lavender));
}

/* ---------------------------------------------------------------------- */
/* written quotes from past participants                                  */
/* ---------------------------------------------------------------------- */
.quotes-section .carousel-track > .quote-card {
  flex: 0 0 auto;
  width: 100%;
  scroll-snap-align: start;
}
@media (min-width: 760px) {
  .quotes-section .carousel-track > .quote-card { width: calc((100% - 22px) / 2); }
}
@media (min-width: 1100px) {
  .quotes-section .carousel-track > .quote-card { width: calc((100% - 44px) / 3); }
}

.quote-card {
  position: relative;
  display: flex;
  background: var(--white);
  border: 1px solid rgba(84, 84, 84, 0.12);
  border-radius: var(--radius-md);
  padding: 30px 26px 26px;
  box-shadow: 0 18px 34px -28px rgba(60, 58, 59, 0.4);
}
.quote-card::before {
  content: "”";
  position: absolute;
  top: 2px;
  inset-inline-start: 20px;
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--pink-deep);
}
.quote-card blockquote {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--charcoal);
}

/* quote cards fill the track so the row reads as one block instead of
   leaving dead space under the shorter quotes */
.quotes-section .carousel-track { align-items: stretch; }
.quotes-section .quote-card { align-items: center; }

/* ---------------------------------------------------------------------- */
/* round 8 refinements                                                    */
/* ---------------------------------------------------------------------- */
/* the reminder sits above the call to action, name on its own line */
.reminder-text { display: block; }
.reminder-word { display: block; margin-bottom: 2px; }
/* the reminder rides up onto the hero artwork, with the CTA under it */
.hero-copy { padding-top: 0; }
.hero-copy .reminder {
  position: relative;
  z-index: 3;
  margin-top: -40px;
  margin-bottom: 20px;
  background: rgba(238, 249, 248, 0.94);
  backdrop-filter: saturate(140%) blur(6px);
  box-shadow: 0 16px 30px -22px rgba(60, 58, 59, 0.5);
}
@media (min-width: 780px) {
  .hero-copy .reminder { margin-top: -52px; }
}

/* the two directions of the work carry more weight than the paragraphs */
.pillar {
  padding: 16px 18px;
  border-inline-start: 3px solid var(--aqua-deep);
  background: rgba(255, 253, 252, 0.6);
  border-radius: var(--radius-sm);
}
.pillar + .pillar { margin-top: 14px; }
.pillar strong { font-size: 1.12em; }

/* a screenshot standing on its own no longer fills the viewport */
.testimonial-row > .testimonial:not(.wide) { max-width: 380px; }

.swipe-hint {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.5em;
  font-weight: 400;
  color: var(--charcoal-soft);
  white-space: nowrap;
}
.swipe-arrow { display: inline-block; animation: swipe-nudge 2.2s var(--ease) infinite; }
@keyframes swipe-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
@media (prefers-reduced-motion: reduce) { .swipe-arrow { animation: none; } }


/* the archival note sits on the far side of the questions heading */
.faq-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}
.faq-note { flex: 0 0 auto; width: 96px; margin: 0; }
.faq-note img { width: 100%; height: auto; border-radius: var(--radius-sm); }
@media (min-width: 780px) { .faq-note { width: 130px; } }

/* the crowd photo sits beside the heading about noise */
.noise-head {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-bottom: 8px;
}
.noise-head .h2 { flex: 1 1 auto; }
.noise-photo {
  flex: 0 0 auto;
  width: 132px;
  margin: 0;
}
.noise-photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  filter: grayscale(1) contrast(0.95);
  opacity: 0.92;
}
@media (min-width: 780px) { .noise-photo { width: 230px; } }

/* ---------------------------------------------------------------------- */
/* centred reading and coloured underlines                                */
/* ---------------------------------------------------------------------- */
/* centred reading is for the narrow screen — on desktop the RTL column reads
   better aligned to the start edge */
@media (max-width: 779px) {
  .prose-section .container,
  .prose-section .measure,
  .section-pad .measure,
  .body-copy,
  .lede,
  .h2,
  .h3,
  .voices-title,
  .cap-item > div,
  .benefit,
  .journey-step,
  .fit-panel,
  .scope-wide,
  .quote-card blockquote {
    text-align: center;
  }
  .measure { margin-inline: auto; }
  .marked-list, .num-list { text-align: start; }
  .label { justify-content: center; }
  .cap-item { justify-items: center; }
  .fit-line { padding-inline: 34px; }
  .fit-mark { inset-inline-start: 0; }
}

/* a soft brand stroke under the words that carry the point */
.body-copy strong,
.lede strong,
.cap-item p strong,
.fit-panel p strong {
  box-shadow: inset 0 -0.34em 0 rgba(242, 213, 215, 0.85);
  padding-inline: 0.06em;
}
.bg-blush .body-copy strong,
.bg-blush .lede strong,
.bg-blush .fit-panel p strong {
  box-shadow: inset 0 -0.34em 0 rgba(213, 242, 240, 0.9);
}

/* the AI paragraph follows straight on from the section above it */
.ai-callout-section { padding-block-start: 0; }

/* standalone screenshots stay modest on a phone */
@media (max-width: 779px) {
  .testimonial-row > .testimonial:not(.wide) { max-width: 250px; }
}

/* a closing statement, heavier than the paragraph it follows */
.statement {
  margin-top: 1.35em;
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.65;
  color: var(--ink);
}
@media (min-width: 780px) { .statement { font-size: 1.42rem; } }

/* the wordmark set inline in a heading, matched to the line it sits in */
.brand-logo {
  display: inline-block;
  height: 1.55em;
  width: auto;
  vertical-align: -0.42em;
  margin-inline-end: 0.02em;
}

/* on a phone the artwork centres with the text it belongs to */
@media (max-width: 779px) {
  .cap-item {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 12px;
  }
  .cap-icon { margin-inline: auto; }
  .benefit { align-items: center; }
  .benefit-icon, .scope-icon { margin-inline: auto; }
  .scope-icon { margin-bottom: 10px; }
  .noise-head, .faq-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .noise-photo { width: 190px; margin-bottom: 6px; }
  .faq-note { width: 110px; margin-bottom: 6px; }
  .reminder { text-align: start; }
  .quote-card::before { inset-inline-start: 50%; transform: translateX(50%); }
}

@media (max-width: 779px) {
  /* the Facebook captures follow the carousel closely instead of floating away */
  .voices-posts { margin-top: 14px; gap: 12px; }
  .carousel-track { padding-block: 4px 0; }
}


/* a slow breath on the call to action so the eye lands on it */
@media (prefers-reduced-motion: no-preference) {
  @keyframes cta-breathe {
    0%, 100% { box-shadow: 0 0 0 6px rgba(242, 213, 215, 0.34), 0 20px 34px -18px rgba(60, 58, 59, 0.6); }
    50%      { box-shadow: 0 0 0 11px rgba(242, 213, 215, 0.22), 0 22px 36px -18px rgba(60, 58, 59, 0.6); }
  }
  .btn-wrap .btn, .price-card .btn { animation: cta-breathe 3.4s var(--ease) infinite; }
  .btn-wrap .btn:hover, .price-card .btn:hover { animation: none; }
}

/* the journey heading is centred; the stations under it stay on the start edge */
.bg-scene-corridors .h2 { text-align: center; }
.bg-scene-corridors .label { justify-content: center; }
.journey-step,
.journey-step .h3,
.journey-step .body-copy {
  text-align: start;
}
/* the wordmark sits on its own line, so it needs breathing room above it */
.bg-scene-corridors .h2 .brand-logo { margin-top: 0.28em; vertical-align: -0.3em; }

/* the full-width button inside the price card has less room than the rest,
   so it wraps instead of being clipped by the card edge */
.price-card .btn {
  white-space: normal;
  text-align: center;
  padding-inline: 1.2em;
  font-size: 1.12rem;
  line-height: 1.35;
}

/* the whole question and answer block reads from the start edge, never centred */
.faq,
.faq-head .h2,
.faq-item summary,
.faq-item p {
  text-align: start;
}
.faq-item summary { text-align: start; }

/* on desktop the closing text is pinned to the start edge so it never runs
   over the folder artwork on the other side */
@media (min-width: 900px) {
  .final-cta .container {
    margin-inline: 0 auto;
    max-width: 660px;
    text-align: start;
  }
}