/* mm-walkthrough.css: the animated walkthroughs, the live-call cards and the
 * Collective room, for the plan pages and the free tier.
 *
 * WHY THIS FILE
 * The owner looked at the plan pages live and said they were not enhanced: no
 * animated walkthrough of how the system works, nothing at all about the Money
 * Reset calls, the office hours or the weekly lives, and too little about what
 * the community itself gives you. Those are the three things this file draws.
 *
 * It sits on top of la-soglia.css and uses its tokens, so the palette stays the
 * light one the owner's boss asked for. Nothing here introduces a dark surface.
 *
 * NO EM DASHES anywhere in this file, including comments. House rule.
 *
 * WHO READS THIS, and what it changes
 * Owner: "make sure our UI is intuitive, we are dealing with women 40-60".
 * Three consequences, each of them a concrete rule rather than a feeling:
 *   1. NOTHING MOVES ON ITS OWN. The walkthrough is manual. Reading at 55 is
 *      slower and more deliberate than at 25, and a panel that jumps to the
 *      next step mid-sentence is the fastest way to make a page feel broken.
 *      There is a Play button for anyone who wants to watch it run, and it is
 *      opt in.
 *   2. A THING YOU CAN CLICK LOOKS LIKE A THING YOU CAN CLICK. The step rows
 *      carry a real border and a real surface rather than a hover-only hint.
 *      A ghost button costs this reader the feature entirely.
 *   3. NO READER-FACING TYPE UNDER 14px in this file. The house --t-fine is
 *      12.5px, which is fine for a legal line and too small for a caption
 *      somebody actually has to read. Targets are 48px, not 44.
 *
 * THE ONE LAYOUT DECISION WORTH READING
 * The walkthrough crossfades between panels of different heights. Absolute
 * positioning would do it, but then the stage has no height of its own and
 * every panel needs a hand-set one. Instead every panel is placed in the SAME
 * grid cell (grid-area:1/1), so the stage is as tall as its tallest panel and
 * switching panels cannot make the page jump. Inactive panels keep their box,
 * which is what holds the height, and are hidden with visibility rather than
 * display so they also leave the tab order and the accessibility tree.
 *
 * Without JavaScript the container never gets .is-live, so the stack collapses
 * to a plain vertical list with every panel visible. The walkthrough degrades
 * into the same content, just longer.
 */

/* ═══ the walkthrough ═════════════════════════════════════════════════════ */

.wt {
  display: grid;
  gap: clamp(22px, 3.4vw, 40px);
  align-items: start;
}
@media (min-width: 900px) {
  .wt {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(28px, 3.6vw, 52px);
  }
}

/* The line that says how to work it. Obvious to whoever built the thing, not
   to whoever meets it, and this reader will not poke at an unfamiliar control
   to find out what it does. One sentence is cheaper than losing the feature. */
.wt-how {
  margin: 0 0 clamp(16px, 2.2vw, 22px);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 60ch;
}

/* ── the step list ─────────────────────────────────────────────────────── */

.wt-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: wt;
}
.wt-steps > li { counter-increment: wt; }
.wt-steps > li + li { margin-top: 8px; }

/* The whole row is the button. A button rather than a link because nothing
   navigates, and a real button so the keyboard and screen readers get it for
   free instead of through roles bolted onto a div. */
.wt-step {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 3px 14px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--body);
  /* A real surface and a real edge. This row is the control for the panel
     beside it, so it has to look like one before it is hovered, not after. */
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule);
  border-radius: 3px;
  cursor: pointer;
  min-height: 48px;
  padding: 15px 16px 16px 14px;
  overflow: hidden;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.wt-step::before {
  content: counter(wt);
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--white);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.wt-step b {
  font-family: var(--display);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  transition: color .3s var(--ease);
}
.wt-step span {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--body);      /* not --muted: this explains the panel, it is not a footnote */
}
@media (hover: hover) {
  .wt-step:hover { background: var(--wash); border-color: var(--clay); }
  .wt-step:hover::before { border-color: var(--clay); color: var(--clay-dark); }
}
.wt-step:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}

/* the active step */
.wt-step[aria-current="true"] {
  background: var(--wash);
  border-color: var(--clay);
  border-left-color: var(--clay);
}
/* "You are here" in words, not only in colour. Colour alone fails anyone with
   a colour-vision difference, and it fails anyone reading in bright sun. */
.wt-step[aria-current="true"]::after {
  content: 'Showing now';
  grid-column: 2;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--clay-dark);
}
.wt-step[aria-current="true"]::before {
  background: var(--clay);
  border-color: var(--clay);
  color: var(--white);
}
.wt-step[aria-current="true"] b { color: var(--clay-dark); }

/* The timer bar. It is the only thing on the page that tells you the panel is
   about to change by itself, so it is not decoration: without it the switch
   reads as the page doing something you did not ask for. Width is driven from
   JS so one number controls both the bar and the timeout. */
.wt-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--clay);
  opacity: 0;
}
.wt-step[aria-current="true"] .wt-bar { opacity: .55; }
.wt.is-running .wt-step[aria-current="true"] .wt-bar {
  width: 100%;
  transition: width var(--wt-dur, 7s) linear;
}

/* ── the stage ────────────────────────────────────────────────────────── */

.wt-stage { display: block; }

.wt.is-live .wt-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.wt.is-live .wt-panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(.992);
  transition: opacity .46s var(--ease), transform .46s var(--ease), visibility .46s;
}
.wt.is-live .wt-panel.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

/* Without JS, or before it runs, the panels are a plain list. */
.wt-panel + .wt-panel { margin-top: clamp(18px, 2.6vw, 26px); }
.wt.is-live .wt-panel + .wt-panel { margin-top: 0; }

/* The caption under each panel. Separate from .mmr figcaption because these
   captions say what just happened in the step, not what the screen is. */
.wt-cap {
  margin: 14px 0 0;
  font-size: 15px;          /* not --t-fine. Somebody has to read this. */
  line-height: 1.65;
  color: var(--body);
  max-width: 64ch;
}
.wt-cap b { color: var(--body); font-weight: 600; }

/* ── the controls under the stage ─────────────────────────────────────── */

.wt-ctl {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.wt.is-live .wt-ctl { display: flex; }

.wt-ctl button {
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--body);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 3px;
  min-height: 48px;         /* 48, not 44 */
  padding: 0 20px;
  cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.wt-ctl button[disabled] { opacity: .45; cursor: default; }

/* Play is the only control whose job is not obvious from the step list, so it
   is the one that gets filled in. It is also the only way anything moves. */
.wt-ctl [data-wt-play] {
  background: var(--clay);
  border-color: var(--clay);
  color: var(--white);
}
@media (hover: hover) {
  .wt-ctl [data-wt-play]:hover { background: var(--clay-deep); border-color: var(--clay-deep); }
}
.wt-ctl [data-wt-play]::before {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  margin-right: 9px;
  vertical-align: -1px;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
/* two bars: the universal pause mark, so the button shows what it will do next */
.wt-ctl [data-wt-play].is-playing::before {
  width: 10px; height: 13px;
  margin-right: 10px;
  border: 0;
  vertical-align: -2px;
  background: linear-gradient(to right,
    currentColor 0 3px, transparent 3px 7px, currentColor 7px 10px);
}
@media (hover: hover) {
  .wt-ctl button:hover { border-color: var(--clay); color: var(--clay-dark); }
}
.wt-ctl button:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

.wt-count {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

/* ═══ the live calls ══════════════════════════════════════════════════════ */

/* Three kinds of call, and what happens on each. The owner's note was that we
   were "not talking about those at all", so each card carries an agenda rather
   than an adjective. */

.calls {
  display: grid;
  gap: clamp(18px, 2.6vw, 26px);
  margin-top: clamp(26px, 4vw, 38px);
}
@media (min-width: 840px) {
  .calls--2 { grid-template-columns: 1fr 1fr; }
  .calls--3 { grid-template-columns: repeat(3, 1fr); }
}

.call {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: clamp(22px, 3vw, 30px);
}
.call--lead { border-color: var(--clay); border-width: 1px; box-shadow: 0 1px 0 var(--clay); }

.call-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.call-when {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--clay-dark);
}
.call-len {
  font-size: 14px;
  color: var(--muted);
  margin-left: auto;
  white-space: nowrap;
}
.call h3 {
  font-family: var(--display);
  font-size: var(--t-h3);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 10px;
}
.call > p { margin: 0 0 16px; font-size: 16.5px; line-height: 1.66; color: var(--body); }

/* The agenda. A numbered run of what actually happens, minute by minute where
   we know it, so nobody books a call without knowing what they are booking. */
.call-run {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.call-run li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--body);
}
.call-run li:last-child { border-bottom: 0; }
.call-run i {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  padding-top: 2px;
  white-space: nowrap;
}
.call-run b { color: var(--ink); font-weight: 600; }

.call-foot {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--muted);
}

/* The honest note on a tier that does not include a given call. Rise does not
   get a Money Reset, and saying so plainly is better than leaving a woman to
   find out after she pays. */
.call--locked { background: var(--wash); }
.call--locked .call-when { color: var(--muted); }
.call--locked h3 { color: var(--muted); }

/* ═══ the Collective ══════════════════════════════════════════════════════ */

/* A drawn room rather than a screenshot, for the same reason as the system
   mockups: a screenshot of a members area would show real women's names. */

.room {
  --c-line: #E4DACB;
  --c-ink: #3D3330;
  --c-mute: #7A6B60;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  container-type: inline-size;
}
.room-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--c-line);
  background: var(--wash);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--c-ink);
}
.room-bar .live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clay-dark);
}
.room-bar .live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clay);
  animation: roomPulse 2.2s ease-in-out infinite;
}
@keyframes roomPulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

.room-body { padding: 13px; display: grid; gap: 10px; background: #FCFAF6; }

.room-post {
  background: var(--white);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  padding: 11px 12px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease) var(--pd, 0s), transform .5s var(--ease) var(--pd, 0s);
}
.mmr.is-in .room-post,
.room.is-in .room-post,
.wt-panel.is-on .room-post { opacity: 1; transform: none; }

.room-who { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.room-av {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--white);
  background: var(--clay);
}
.room-av.b { background: #7A8B7F; }
.room-av.c { background: #8A7B6B; }
.room-av.d { background: #6E7F8A; }
.room-who b { font-size: 11.5px; font-weight: 600; color: var(--c-ink); }
.room-who small { font-size: 10.5px; color: var(--c-mute); margin-left: auto; }

.room-post p { margin: 0; font-size: 12px; line-height: 1.62; color: #5A4F48; }
.room-react {
  display: flex;
  gap: 6px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid #F0EAE1;
}
.room-react span {
  font-size: 10px;
  color: var(--c-mute);
  background: var(--wash);
  border-radius: 20px;
  padding: 3px 8px;
}

/* the reflection of the day, which is a different shape from a post */
.room-refl {
  background: linear-gradient(180deg, #FBF5ED 0%, #FFFFFF 100%);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  padding: 13px;
}
.room-refl .lbl {
  display: block;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clay-dark);
  margin-bottom: 7px;
}
.room-refl q {
  quotes: none;
  display: block;
  font-family: var(--display);
  font-size: 14.5px;
  font-style: italic;
  line-height: 1.5;
  color: var(--c-ink);
}

/* the live call tile */
.room-live {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  background: var(--white);
  border: 1px solid var(--clay);
  border-radius: 6px;
  padding: 11px 12px;
}
.room-live .dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--clay-wash);
  display: grid;
  place-items: center;
  font-size: 15px;
}
.room-live b { display: block; font-size: 12px; font-weight: 600; color: var(--c-ink); }
.room-live small { display: block; font-size: 10.5px; color: var(--c-mute); margin-top: 2px; }
.room-live .join {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--white);
  background: var(--clay);
  border-radius: 5px;
  padding: 6px 11px;
  white-space: nowrap;
}

@container (max-width: 360px) {
  .room-live { grid-template-columns: auto minmax(0, 1fr); }
  .room-live .join { grid-column: 1 / -1; text-align: center; }
}

/* ═══ what the membership gives you, as a ledger with weight ══════════════ */

/* Sits between a bullet list and a table: each line is a thing you get, a
   plain sentence about why it matters, and which tiers carry it. */
.gives { display: grid; gap: clamp(14px, 2vw, 20px); margin-top: clamp(24px, 3.6vw, 34px); }
@media (min-width: 760px) { .gives--2 { grid-template-columns: 1fr 1fr; } }

.give {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 4px 13px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}
.give-ic {
  grid-row: 1 / span 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--clay-wash);
  display: grid;
  place-items: center;
  font-size: 13px;
  line-height: 1;
}
.give b { font-size: 17px; font-weight: 600; color: var(--ink); }
.give span { font-size: 15.5px; line-height: 1.65; color: var(--body); }

/* ═══ reduced motion ═════════════════════════════════════════════════════ */

/* Everything above still works; it just arrives rather than moves. The timer
   bar is hidden outright because a bar that does not fill is a broken bar, and
   the JS does not auto-advance under this query either. */
@media (prefers-reduced-motion: reduce) {
  .wt.is-live .wt-panel { transition: none; }
  .wt-bar { display: none; }
  .room-bar .live::before { animation: none; }
  .room-post { opacity: 1; transform: none; transition: none; }
}

/* ═══ touch ══════════════════════════════════════════════════════════════ */

@media (pointer: coarse) {
  .wt-step { padding-top: 17px; padding-bottom: 18px; }
  .wt-ctl button { min-height: 48px; padding: 0 20px; }
}

/* One size up again on a phone, where this reader is holding the thing at
   arm's length rather than sitting at a desk with her glasses on. */
@media (max-width: 560px) {
  .wt-step b { font-size: 20px; }
  .wt-step span { font-size: 16px; }
  .wt-cap { font-size: 15.5px; }
  .call-run li { font-size: 16px; }
  .give span { font-size: 16px; }
}

/* ═══ icons ════════════════════════════════════════════════════════════════
   Owner: "we never use emojis only icons". Every pictograph on these pages is
   a drawn stroke on a 24 grid inheriting currentColor, so one set works on the
   cream ledger and on a white card without a second palette, and it renders
   the same on every device. An emoji does not: it is a font the reader's OS
   chooses, which is why the same character is a flat glyph on one phone and a
   cartoon on another.
   ═══════════════════════════════════════════════════════════════════════════ */

.ic {
  width: 19px;
  height: 19px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The play triangle is the one solid shape: a stroked triangle reads as an
   outline of a button rather than as a play mark. */
.give-ic .ic path[d^="M5 3.5v17"],
.room-live .dot .ic path[d^="M5 3.5v17"] { fill: currentColor; stroke-width: 1; }

.give-ic .ic { color: var(--clay-dark); }
.room-live .dot .ic { width: 17px; height: 17px; color: var(--clay-dark); }

/* Inside a filled avatar circle the icon has to invert. */
.ic--av { stroke: #fff; width: 16px; height: 16px; margin: auto; }
.room-av .ic--av { width: 14px; height: 14px; }
.mmr-cl-av .ic--av { width: 17px; height: 17px; }
.mmr-cl-ask .ic--av { stroke: var(--clay-dark); width: 15px; height: 15px; }

@media (max-width: 560px) {
  .ic { width: 21px; height: 21px; }
}

/* ── width containment ───────────────────────────────────────────────────────
   At 320px the walkthrough measured 324px wide and pushed the document 21px
   sideways. box-sizing is already border-box globally, so the cause was a grid
   item's min-content refusing to shrink: a drawn mockup inside a panel has
   fixed pixel columns, and a grid track sized to minmax(auto, ...) grows to fit
   its content rather than clipping it.

   Every link in that chain now declares min-width:0, which is the one-line
   answer to "my CSS grid child will not shrink". max-width:100% is belt and
   braces for the same thing measured a different way.

   The mockups keep their own overflow, so a 660px-wide drawn screen scrolls or
   clips inside its frame instead of widening the page. A page that scrolls
   sideways on a phone reads as broken no matter how good the content is, and
   the owner found exactly that before I did.
   ──────────────────────────────────────────────────────────────────────────── */

.wt,
.wt-steps,
.wt-steps > li,
.wt-stage,
.wt-panel,
.wt-step { min-width: 0; max-width: 100%; }

.wt-panel .mmr,
.wt-panel figure { max-width: 100%; min-width: 0; }

/* A last line of defence on the sections this file owns. `clip` rather than
   `hidden` on purpose: hidden would make each section a scroll container, which
   breaks position:sticky for anything inside it. */
#walk, #collective { overflow-x: clip; }

/* The step label can be a long phrase. Let it wrap rather than set a wide
   min-content that the grid then honours. */
.wt-step b,
.wt-step span { overflow-wrap: anywhere; }

/* The line and button under the system walkthrough. Somebody who has just
   watched a month go past is at the most persuadable point on the page, and
   until now the nearest buy button was a full screen away in either direction.
   Owner: "we need to convert them." */
.walk-close {
  margin-top: clamp(26px, 4vw, 40px);
  padding-top: clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
}
.walk-close p {
  margin: 0;
  flex: 1 1 22ch;
  min-width: 0;
  font-family: var(--display);
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.4;
  color: var(--ink);
}
@media (max-width: 560px) {
  .walk-close { display: block; }
  .walk-close p { margin-bottom: 18px; }
  .walk-close .btn { width: 100%; }
}