/* ====================================================================
   Recover-You — The Critical Window (page layer)
   --------------------------------------------------------------------
   Six page-specific pieces. Everything else reuses the shared layer
   (.ry-split, .ry-prose, .ry-figure, .ry-statement, .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 DEVELOPMENTAL TIMELINE
   --------------------------------------------------------------------
   The page is called The Critical Window and its whole argument is
   about timing, but the legacy page contains no representation of time
   anywhere — the growth figures sit in a bullet list where 25% and 80%
   are just two numbers three lines apart, and the ten-to-eighteen-month
   window is a sentence.

   Drawn so the two claims can be seen against each other: how fast the
   volume arrives, and how early the relational window opens and closes
   inside that rise. The caption states plainly which parts are measured
   and which are drawn for legibility.
   ==================================================================== */
.ry-timeline {
  margin: 34px 0 30px;
  padding: 26px 26px 20px;
  border-radius: 16px;
  border: 1px solid var(--ry-hairline);
  background: var(--ry-glass-bg);
  box-shadow: var(--ry-glass-shadow);
}
.ry-timeline__chart { display: block; width: 100%; height: auto; }

.ry-timeline__axis { stroke: var(--ry-hairline); stroke-width: 1; }
.ry-timeline__grid { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }

/* the serve-and-return window, shaded across the full plot height */
.ry-timeline__band { fill: rgba(255, 47, 110, 0.13); }
.ry-timeline__band-edge { stroke: rgba(255, 47, 110, 0.4); stroke-width: 1; stroke-dasharray: 3 4; }

.ry-timeline__fill { fill: url(#ryCwFade); }
.ry-timeline__line {
  fill: none;
  stroke: var(--ry-red);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ry-timeline__dot { fill: var(--ry-red); }
/* age seven is a range in the source, so it is drawn as one */
.ry-timeline__range { stroke: var(--ry-red); stroke-width: 2; stroke-linecap: round; }

.ry-timeline__value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 19px;
  letter-spacing: 0.05em;
  fill: #fff;
}
.ry-timeline__tick {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--ry-ink-dim);
}
.ry-timeline__bandlabel {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--ry-red);
}
.ry-timeline__bandsub {
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 300;
  fill: var(--ry-ink-faint);
}
.ry-timeline__axlabel {
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--ry-ink-faint);
}
.ry-timeline__arrow { fill: var(--ry-ink-faint); }

.ry-timeline__caption {
  margin: 16px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--ry-hairline);
  font-size: 12.5px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--ry-ink-faint);
}

/* ====================================================================
   2. SERVE AND RETURN
   --------------------------------------------------------------------
   Two halves of one exchange. The legacy page had them as two bullets,
   which loses the fact that the second only exists in answer to the
   first. Set facing each other with the return offset, so the shape of
   the page says what the copy says.
   ==================================================================== */
.ry-serve { margin: 26px 0; padding: 0; list-style: none; }

.ry-serve__item {
  margin: 0;
  position: relative;
  padding: 18px 20px 16px 22px;
  border-radius: 12px;
  border: 1px solid var(--ry-hairline);
  background: rgba(255, 255, 255, 0.03);
}
.ry-serve__item + .ry-serve__item { margin-top: 12px; }
/* the return is answering, so it sits under and inset from the serve */
@media (min-width: 768px) {
  .ry-serve__item--return { margin-left: 46px; }
}
/* both modifiers state their own accent rather than one overriding a
   default, so neither half of the exchange is the special case */
.ry-serve__item::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 2px;
}
.ry-serve__item--serve::before { background: var(--ry-red); }
.ry-serve__item--return::before { background: rgba(255, 255, 255, 0.3); }

.ry-serve__term {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ry-red);
  margin-bottom: 6px;
}
.ry-serve__item--return .ry-serve__term { color: var(--ry-ink-faint); }
.ry-serve__body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--ry-ink);
}
.ry-serve__body strong { color: #fff; font-weight: 600; }

/* ====================================================================
   3. CRITICAL vs SENSITIVE PERIODS
   --------------------------------------------------------------------
   The distinction the page's title rests on. As two list items it read
   as two definitions; as a pair it reads as the choice it actually is —
   one window that shuts, one that narrows.
   ==================================================================== */
.ry-period {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 30px 0;
}
@media (max-width: 767.98px) { .ry-period { grid-template-columns: 1fr; } }

.ry-period__item {
  padding: 26px 26px 24px;
  border-radius: 14px;
  border: 1px solid var(--ry-hairline);
  background: var(--ry-glass-bg);
  box-shadow: var(--ry-glass-shadow);
}
.ry-period__item--critical { border-color: rgba(255, 47, 110, 0.32); }

.ry-period__name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 27px;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 6px;
}
.ry-period__shape {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ry-red);
  margin-bottom: 15px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--ry-hairline);
}
.ry-period__item--sensitive .ry-period__shape { color: var(--ry-ink-faint); }
.ry-period__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.78;
  font-weight: 300;
  color: var(--ry-ink-dim);
}
.ry-period__body strong { color: #fff; font-weight: 600; }

/* ====================================================================
   4. WHAT CHRONIC STRESS LANDS ON
   Three structures, named. Kept deliberately plain: this is a list of
   consequences, and dressing it up would be the wrong register.
   ==================================================================== */
/* One column, not auto-fit. These sit in a half-width split panel, where
   auto-fit resolved to two columns and left the third structure alone on
   a ragged second row — three named consequences should read as a list,
   not as a grid that ran out. */
.ry-harm {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 26px 0;
  padding: 0;
  list-style: none;
}
.ry-harm__item {
  margin: 0;
  padding: 18px 20px 16px;
  border-radius: 12px;
  border: 1px solid var(--ry-hairline);
  background: rgba(255, 255, 255, 0.03);
}
.ry-harm__name {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ry-red);
  margin-bottom: 8px;
}
.ry-harm__body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--ry-ink-dim);
}

/* ====================================================================
   5. THE LONG SHADOW — ACE OUTCOMES
   Three rows, each labelled by the system it lands in. The legacy used
   FontAwesome glyphs; words carry it without a webfont dependency.
   ==================================================================== */
.ry-outcome { margin: 26px 0; padding: 0; list-style: none; }
.ry-outcome__item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
  padding: 17px 0;
  border-top: 1px solid var(--ry-hairline);
}
.ry-outcome__item:last-child { border-bottom: 1px solid var(--ry-hairline); }
@media (max-width: 575.98px) {
  .ry-outcome__item { grid-template-columns: 1fr; gap: 5px; }
}
.ry-outcome__system {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ry-red);
}
.ry-outcome__body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--ry-ink);
}

/* ====================================================================
   6. SHAME BUSTER
   --------------------------------------------------------------------
   A named recurring device on the site, and the one block on this page
   that asks the reader to do something rather than understand
   something. Given its own frame and a numbered sequence so it reads as
   an instruction, not another paragraph.
   ==================================================================== */
.ry-buster {
  padding: 34px 36px 30px;
  border-radius: 18px;
  border: 1px solid rgba(255, 47, 110, 0.28);
  background: var(--ry-glass-bg);
  box-shadow: var(--ry-glass-shadow);
}
@media (max-width: 575.98px) { .ry-buster { padding: 26px 22px 24px; } }

.ry-buster__eyebrow {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ry-red);
  margin-bottom: 12px;
}
.ry-buster__title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(26px, 3.4vw, 36px);
  letter-spacing: 0.03em;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 20px;
}

.ry-buster__steps {
  margin: 26px 0;
  padding: 0;
  list-style: none;
  counter-reset: ry-buster;
}
.ry-buster__step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid var(--ry-hairline);
}
.ry-buster__step::before {
  counter-increment: ry-buster;
  content: counter(ry-buster);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  line-height: 1.3;
  color: var(--ry-red);
}
.ry-buster__label {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}
.ry-buster__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  font-weight: 300;
  color: var(--ry-ink-dim);
}
/* same trailing-margin trim as .ry-note: the closing paragraph's margin
   would otherwise stack on the panel's bottom padding */
.ry-buster > .ry-prose:last-child > :last-child { margin-bottom: 0; }