/* ====================================================================
   Recover-You — Why Traditional Treatment Falls Short (page layer)
   --------------------------------------------------------------------
   Three page-specific pieces. Everything else reuses the shared layer
   (.ry-prose, .ry-note, .ry-pullquote, .ry-sheet, .ry-finalword,
   .ry-diptych-section, .ry-next-grid).

   Requires ry-article.css for the :root tokens. Nothing here reuses a
   class name that ry-article.css already owns — see check_collisions.py.
   ==================================================================== */

/* ====================================================================
   1. THE LEDGER — what is offered, what is also needed
   --------------------------------------------------------------------
   The page's whole argument lives in two six-item lists that the legacy
   put in two Bootstrap accordions, in two different sections, on
   opposite sides of the page. Five of every six items were collapsed
   behind a JS toggle at any moment.

   That is the wrong shape for this content twice over. First, the
   argument is "the problem isn't any individual piece, it's what the
   model as a whole leaves out" — which cannot be seen while five
   sixths of the model is hidden. Second, the two lists are parallel by
   design and only mean something read against each other.

   So: both open, both numbered, same visual grammar, and the second
   set carries the accent because it is the half that goes missing.
   ==================================================================== */
.ry-ledger { margin: 30px 0; padding: 0; list-style: none; }

.ry-ledger__item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 4px 16px;
  margin: 0;
  padding: 18px 0;
  border-top: 1px solid var(--ry-hairline);
}
.ry-ledger__item:last-child { border-bottom: 1px solid var(--ry-hairline); }

/* both halves state their own accent rather than one overriding a
   default, so neither reads as the special case in the stylesheet */
.ry-ledger__n {
  grid-row: 1 / span 2;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 19px;
  letter-spacing: 0.1em;
  line-height: 1.35;
}
.ry-ledger--offered .ry-ledger__n { color: var(--ry-ink-faint); }
.ry-ledger--needed .ry-ledger__n { color: var(--ry-red); }

.ry-ledger__name {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
}
.ry-ledger__body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  font-weight: 300;
  color: var(--ry-ink-dim);
}

/* the two halves sit side by side once there is room for them to be
   compared rather than scrolled between */
.ry-ledgers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
  margin-top: 8px;
}
@media (max-width: 991.98px) { .ry-ledgers { grid-template-columns: 1fr; gap: 10px; } }

.ry-ledger__head {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ry-hairline);
}
.ry-ledger--offered .ry-ledger__head { color: var(--ry-ink-faint); }
.ry-ledger--needed .ry-ledger__head {
  color: var(--ry-red);
  border-bottom-color: rgba(255, 47, 110, 0.4);
}

/* ====================================================================
   2. THE FOUR BRAINS
   --------------------------------------------------------------------
   Healthy, addicted, trauma-shaped, and both at once. The legacy split
   these across two parallax bands of two cards each. Kept in the same
   two groups, because the page names the groups and the second only
   lands after the first — but set as a single progression inside each
   so the fourth reads as the accumulation of the three before it.
   ==================================================================== */
.ry-models {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 767.98px) { .ry-models { grid-template-columns: 1fr; } }

.ry-model {
  margin: 0;
  padding: 26px 28px 24px;
  border-radius: 16px;
  border: 1px solid var(--ry-hairline);
  background: var(--ry-glass-bg);
  box-shadow: var(--ry-glass-shadow);
}
/* the collision card is the point the section is building to */
.ry-model--collide { border-color: rgba(255, 47, 110, 0.34); }

/* These four are dark line art on a transparent background: the region
   labels and the reality-check footnote are near-black, and on a black
   page they simply are not there. On a light ground they read, and so
   does the thing that matters most — the green-to-orange-to-red
   progression across the four, which was invisible before.

   Flat, not the radial .ry-sheet--plate used elsewhere: that gradient
   exists to make a floating cut-out sit on something. These diagrams
   fill their own frame edge to edge, so a flat ground is correct. */
.ry-model__figure {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
  background: #f4f4f2;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.ry-model__figure img { display: block; width: 100%; height: auto; }

.ry-model__name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 0.03em;
  line-height: 1.12;
  color: #fff;
  margin: 0 0 8px;
}
.ry-model--collide .ry-model__name { color: var(--ry-red); }

.ry-model__lede {
  margin: 0 0 16px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--ry-hairline);
  font-size: 14px;
  line-height: 1.66;
  font-weight: 300;
  color: var(--ry-ink);
}
.ry-model__points { margin: 0; padding: 0; list-style: none; }
.ry-model__points li {
  position: relative;
  margin: 0;
  padding: 0 0 11px 20px;
  font-size: 13.5px;
  line-height: 1.66;
  font-weight: 300;
  color: var(--ry-ink-dim);
}
.ry-model__points li:last-child { padding-bottom: 0; }
.ry-model__points li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 9px; height: 1px;
  background: var(--ry-red);
  opacity: 0.7;
}
.ry-model__tail {
  margin: 16px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--ry-hairline);
  font-size: 13.5px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--ry-ink-dim);
}

/* ---- the standard-vs-trauma comparison chart ----
   The shared .ry-sheet--diagram caps at 700px, which is right for a
   square diagram and too tight for this one: it is a wide two-track
   timeline with real body text inside it, and at 700px that text is at
   the edge of legible. Scoped override, ~13% wider, with the column
   widened to match so the cap is what governs rather than the column. */
.ry-chartwide .ry-sheet--diagram { max-width: 790px; }
/* The sheet centres itself inside the column, but the caption did not —
   it sat against the column's left edge while the chart floated in the
   middle, so its left rule lined up with nothing. Same width, same
   centring, and the rule now starts where the chart starts. */
.ry-chartwide figcaption {
  max-width: 790px;
  margin-left: auto;
  margin-right: auto;
}

/* the short line the page drops between the two models */
.ry-turn {
  margin: 0;
  padding: 30px 0;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ry-ink);
}
.ry-turn strong { color: #fff; font-weight: 600; }
.ry-turn i { color: var(--ry-red); font-style: normal; }

/* ====================================================================
   3. WHERE THE MODEL BREAKS
   Eight observations and a closing distinction. Cards, because they are
   independent observations rather than a sequence — no numbering, no
   implied order.
   ==================================================================== */
/* Two columns, not auto-fit. Inside this container auto-fit resolved to
   three ~290px tracks, which is too narrow for seventy words of body
   copy — and it left a single card orphaned on the last row. Six
   observations in two columns is three even rows and a comfortable
   measure. */
.ry-breaks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0;
  padding: 0;
  list-style: none;
  align-items: start;
}
@media (max-width: 767.98px) { .ry-breaks { grid-template-columns: 1fr; } }

/* the lead and the closer are single full-width cards, so they do not
   need a grid at all — but they share the list semantics */
.ry-breaks--lead,
.ry-breaks--close { grid-template-columns: 1fr; }
.ry-breaks--lead { margin-top: 30px; }
.ry-breaks--close { margin-bottom: 30px; }

/* The personal account runs 329 words against ~70 for each observation.
   In one grid it forced every card beside it to stretch to its height,
   leaving columns of empty box. It gets the full width and a wider
   measure instead. */
.ry-break--lead {
  border-color: rgba(255, 255, 255, 0.16);
}
.ry-break--lead .ry-break__title { font-size: 19px; }
@media (min-width: 992px) {
  .ry-break--lead .ry-break__body { column-count: 2; column-gap: 40px; }
  .ry-break--lead .ry-break__body > * { break-inside: avoid; }
  .ry-break--lead .ry-break__body > :first-child { margin-top: 0; }
}
.ry-break {
  margin: 0;
  padding: 28px 30px 26px;
  border-radius: 15px;
  border: 1px solid var(--ry-hairline);
  background: var(--ry-glass-bg);
  box-shadow: var(--ry-glass-shadow);
}
.ry-break__title {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  margin: 0 0 14px;
}
.ry-break--accent .ry-break__title { color: var(--ry-red); }
.ry-break__body { font-size: 14px; line-height: 1.75; font-weight: 300; color: var(--ry-ink-dim); }
.ry-break__body > :last-child { margin-bottom: 0; }
.ry-break__body em { color: rgba(255, 255, 255, 0.85); }
.ry-break__body strong { color: #fff; font-weight: 600; }

/* the closing card runs full width and carries the distinction the
   whole section has been circling */
.ry-break--wide { border-color: rgba(255, 47, 110, 0.3); }
.ry-break__kicker {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ry-ink-faint);
  margin-bottom: 8px;
}