/* ============================================================================
   SECTION 13 — "4.5 Recovery"  ·  slug 13-recovery-45  ·  Figma node 2785:491
   ----------------------------------------------------------------------------
   Spec: ../../../figma-truth/13-recovery-45.spec.md
   Pixel truth: ../../../figma-truth/sections-en/13-recovery-45.png  (2x)

   WHAT WAS LIFTED, AND FROM WHERE
   The markup is Salient's real "image-background column with overlay + content"
   component, copied verbatim (class strings, data- attributes, nesting) out of
   the live mirror at http://127.0.0.1:5010/salient/resort/index.html — the
   "Weddings / Private events" row, the two `vc_col-sm-6` columns whose bg
   images are `victoria-priessnitz-JFAPl7brL6U-unsplash.jpg` and
   `antenna-FDV1BaKNKEo-unsplash.jpg`. Local copy of that page:
   ../../../salient-truth/resort/index.html
   Every rule this file writes is a RETARGET of that component's paint and
   geometry to the Figma numbers. No Salient class was renamed and no
   `nectar-` / `wpb_` class was invented.
   (Do not write an asterisk-slash pair anywhere in this file's comments — it
   closes the comment early and silently drops the rule that follows it.)

   Salient rules this file relies on (all already in vendor/, do not duplicate):
     .wpb_row .column-image-bg-wrap, … .column-image-bg, … .inner-wrap
         { overflow:hidden; width:100%; height:100%; position:absolute;
           z-index:1; top:0; left:0 }                        style.css
     body .wpb_row .column-image-bg-wrap          { z-index:-1 }   style.css
     .wpb_column .column-bg-overlay-wrap          { z-index:-1; opacity:1 }
     .vc_column-inner .column-overlay-layer       { position:absolute; inset:0 }
     .vc_column_container>.vc_column-inner        { position:relative }
     .wpb_column[data-bg-cover=true] .column-image-bg
         { background-size:cover; background-position:center }
   => photo (-1) → scrim (-1, later in DOM) → caption (auto). Same stack the
   resort demo renders.

   NO RAW HEX. Every colour is a token from css/tokens.css. Literal px values
   are section-local measures and each one carries its spec citation.
   ========================================================================== */


/* ==========================================================================
   1. THE BAND
   spec §1.1 — 1280x1366, fill #f4f9fb, layoutMode HORIZONTAL, padding 0.
   ========================================================================== */

#s13-recovery-45 {
  height: 1366px;                      /* spec §"Section size" — FIXED at 1280 and 1440 */
  background-color: var(--mk-surface-mist);
  overflow: hidden;                    /* the media rail bleeds to x=1280; nothing may
                                          push a horizontal scrollbar (CONVENTIONS §9) */
}

/* The lifted Salient row IS the band. It carries no ground of its own — the
   ground is on .mk-section per CONVENTIONS §2 rule 2 — so its .row-bg stays
   empty, exactly as Salient emits for a row with no background.

   The width pin is not cosmetic. Salient's full-width-content row breaks out of
   its container by 1px on each side (measured: x -1, width 1282 inside a 1280
   frame) to hide subpixel seams between stacked rows. Left alone that puts the
   text rail at x -1 and the caption box at 622/599 instead of 623/597 — a 1px
   error on every horizontal edge in the section. */
#s13-recovery-45 > .wpb_row {
  height: 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  left: auto;
}

/* spec §1.1: `itemSpacing: 43` is INERT. 563 + 717 = 1280 exactly, so
   SPACE_BETWEEN has zero free space and the two rails are FLUSH. Adding a
   43px gap is the single easiest way to get this section wrong. */
#s13-recovery-45 > .wpb_row > .row_col_wrap_12 {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  height: 100%;
}
/* CONVENTIONS §8.7 — a Salient .row/.span_12 clearfix pseudo-element becomes a
   flex item and silently eats a gap. Kill them on every flex container this
   section creates. */
#s13-recovery-45 > .wpb_row > .row_col_wrap_12::before,
#s13-recovery-45 > .wpb_row > .row_col_wrap_12::after,
#s13-recovery-45 .mk-recovery-45__stack::before,
#s13-recovery-45 .mk-recovery-45__stack::after,
#s13-recovery-45 .wpb_wrapper::before,
#s13-recovery-45 .wpb_wrapper::after {
  display: none;
}

/* The lifted inner rows are pure structure here — Salient's own spacing on them
   would fight the Figma stack. Zero them once, centrally.
   `.mk-recovery-45__stack` is excluded because it IS a .row_col_wrap_12_inner
   and it carries the rail's real 4px padding (spec §1.4). */
#s13-recovery-45 .wpb_row.inner_row,
#s13-recovery-45 .wpb_row.inner_row > .row_col_wrap_12_inner:not(.mk-recovery-45__stack) {
  margin: 0;
  padding: 0;
  width: 100%;
  left: auto;
}

/* Salient sets `p { padding-bottom: var(--nectar-paragraph-bottom-spacing, 28px) }`
   in style.css and the demo's dynamic styles resolve it to 1.5em — 30px under
   the 20px body and 27px under the 18px caption line. Figma has no such
   spacing: the body node is exactly 10 x 36 = 360 and the caption node is a
   single text node. Left in, it made the centred copy block 522 tall instead of
   492, which pushed every line in the left rail 15px off. */
#s13-recovery-45 p {
  padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   THE no-js TRANSFORM GAP — read this before removing it.
   Salient's own guard is INCOMPLETE. style.css declares
       .wpb_column.has-animation { opacity: 0; position: relative }
       .wpb_column.has-animation[data-animation=fade-in-from-bottom]
                                 { transform: translateY(75px) }
       html:not(.js) .wpb_column.has-animation { opacity: 1 }
   — the no-js fallback restores the OPACITY but not the TRANSFORM. On a real
   salient page that never shows, because the theme removes `no-js`
   synchronously in an inline script at the top of <body>
   (salient-truth/resort/index.html @108383:
        document.documentElement.classList.remove("no-js");).
   build/v1-en/index.html carries class="no-js" and does NOT ship that script
   (see NOTES entry 13-A), so without the line below every has-animation block
   in this section renders 75px BELOW its Figma position until the visitor's
   first scroll/click loads init.js. This completes Salient's existing no-js
   guard; it does not add, remove or retime any animation.
   -------------------------------------------------------------------------- */
html:not(.js) #s13-recovery-45 .wpb_column.has-animation {
  transform: none;
}


/* ==========================================================================
   2. LEFT RAIL — "Text", spec §1.2 / §1.3
   563x1366 fixed (identical at 1280 AND 1440 => a fixed px width, not a span;
   spec §5 "This section does NOT sit on a 12-column grid").
   padding 120 all round -> content box 323 x 1126.
   ========================================================================== */

#s13-recovery-45 .mk-recovery-45__rail {
  flex: 0 0 563px;                     /* spec §5 "left child flex: 0 0 563px" */
  max-width: 563px;
  width: 563px;
}

#s13-recovery-45 .mk-recovery-45__rail > .vc_column-inner {
  box-sizing: border-box;
  height: 100%;
  padding: var(--mk-page-x);           /* 120 / 120 / 120 / 120 — spec §1.2 */
}

/* spec §1.3 — Text group is `primaryAxisAlignItems: CENTER`: the three blocks
   are vertically centred in the 1126px content box, not top-aligned.
   EN stack 24 + 24 + 60 + 24 + 360 = 492 -> (1126-492)/2 = 317 top offset. */
#s13-recovery-45 .mk-recovery-45__rail > .vc_column-inner > .wpb_wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

#s13-recovery-45 .mk-recovery-45__copy > .vc_column-inner > .wpb_wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--mk-space-24);             /* itemSpacing 24 — spec §1.3 */
  width: 323px;                        /* spec §1.3 — fixed measure, not a span */
}

/* Salient's `has-animation` sets position:relative; nothing else about the
   lifted column needs neutralising here. */
#s13-recovery-45 .mk-recovery-45__copy > .vc_column-inner > .wpb_wrapper > * {
  margin: 0;
}


/* -------- 2.1 eyebrow — spec §2.1 / §2.2, node 2785:494 ------------------- */

/* .mk-eyebrow (tokens.css) already supplies Poppins Light 300 / 16 / 24 /
   letter-spacing 3 / text-transform uppercase. Only the fill and the reset of
   Salient's own h5 rules are section work. */
#s13-recovery-45 .mk-recovery-45__eyebrow {
  margin: 0;
  color: var(--mk-ink-strong);         /* #000000 — spec §4, NOT --mk-ink-body */
  font-family: var(--mk-font-sans);
  font-weight: var(--mk-w-light);
  font-size: var(--mk-size-base);
  line-height: var(--mk-lh-node);      /* 24px line box — spec §1.3 (h 24) */
  letter-spacing: var(--mk-track-eyebrow);
  text-transform: uppercase;           /* CONVENTIONS §8.2 — textCase is not
                                          serialised; the string stays sentence
                                          case ("Recovery plan #/#") */
}

/* spec §2.2 — the EN eyebrow is TWO runs. The counter is the emphasised one.
   See LOSSINESS note L1 in the section's NOTES entry: this spec resolves run 1
   as Poppins ExtraLight 200 by ink-area ratio, while 12-recovery-44.spec.md
   §8.1 resolves the same string as Poppins Light 16 and notes ExtraLight only
   "scored marginally better". Light 300 is what the payload's fontSize 16, the
   ES twin's explicit "Poppins Light" and the shipped font set all support, so
   Light 300 is what renders here. */
#s13-recovery-45 .mk-recovery-45__count {
  font-weight: var(--mk-w-medium);     /* 500 — spec §2.2, ink-area 1.032 */
}


/* -------- 2.2 h2 — spec §2.1, node 2785:495 ------------------------------ */

/* CONVENTIONS §8.6 — Salient sets heading font/size/weight with id selectors
   and !important in skin-material + salient-dynamic-styles. Every declaration
   below was checked against the computed style; the ones carrying !important
   are the ones Salient actually won. */
#s13-recovery-45 .mk-recovery-45__h2 h2 {
  margin: 0;
  font-family: var(--mk-font-serif) !important;   /* beats skin-material's h2 rule */
  /* opsz pin REMOVED 2026-08-16 — this is the fix for NOTES §13-B, which
     measured this exact h2 at +4.2 % wide and correctly declined to close it
     with a per-section letter-spacing fudge. The cause was never the
     Merriweather cut: the six-size sweep puts Figma ink at 190.00 and this
     node at 198.00 under the pin, 190.50 under `auto`. tokens.css
     "MERRIWEATHER OPTICAL SIZE" now supplies auto page-wide. */
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
  font-weight: var(--mk-w-light) !important;      /* 300 — spec §2.1 */
  font-size: var(--mk-size-display) !important;   /* 48 */
  line-height: var(--mk-lh-display) !important;   /* 60 per line — node h 60, 1 line */
  letter-spacing: 0;
  color: var(--mk-ink-strong);                    /* #000000 */
  text-transform: none;
}


/* -------- 2.3 body — spec §2.1 / §2.3, node 2785:496 --------------------- */

#s13-recovery-45 .mk-recovery-45__body p {
  margin: 0;
  font-family: var(--mk-font-sans);
  font-weight: var(--mk-w-regular);
  font-size: var(--mk-size-body);      /* 20 */
  line-height: var(--mk-lh-body);      /* 180% -> 36px; 10 lines x 36 = 360 ✓ */
  letter-spacing: 0;
  color: var(--mk-ink-body);           /* #1a2328 — NOT black; spec §4 */
}

/* spec §2.2 "EN body underlines" — `textDecoration: mixed`; the underline pixel
   runs map to exactly two journal names, and the sentence comma after each is
   OUTSIDE the underline. ES carries no textDecoration at all (spec §2.2), so
   this rule is EN-only by construction — the ES build simply omits <cite>. */
#s13-recovery-45 .mk-recovery-45__body cite {
  font-style: normal;                  /* UA default italicises <cite>; Figma does not */
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.14em;       /* matched to the 2x render; see NOTES L4 */
  color: inherit;
}


/* ==========================================================================
   3. RIGHT RAIL — "Images", spec §1.4
   FILL width: 717 at 1280, 877 at 1440 — it absorbs the whole width delta
   while the text rail never moves. Height check: 4 + 450 + 4 + 450 + 4 + 450
   + 4 = 1366 ✓
   ========================================================================== */

#s13-recovery-45 .mk-recovery-45__media {
  flex: 1 1 auto;                      /* spec §5 "right child flex: 1 1 auto" */
  min-width: 0;
  width: auto;
  max-width: none;
}

/* Height has to reach the stack: media column -> .vc_column-inner ->
   .wpb_wrapper -> .wpb_row.inner_row -> .row_col_wrap_12_inner (the stack). */
#s13-recovery-45 .mk-recovery-45__media > .vc_column-inner,
#s13-recovery-45 .mk-recovery-45__media > .vc_column-inner > .wpb_wrapper,
#s13-recovery-45 .mk-recovery-45__cards {
  box-sizing: border-box;
  height: 100%;
  padding: 0;
  min-height: 0;
}

/* .mk-stack-4 (grid.css) gives `display:flex; flex-direction:column; gap:4px;
   padding:4px`. spec §1.4 wants padding top 4 / right 0 / bottom 4 / left 0. */
#s13-recovery-45 .mk-recovery-45__stack {
  padding-block: var(--mk-space-4);    /* spec §1.4 — padding top 4 / bottom 4 … */
  padding-inline: 0;                   /* … and 0 left / 0 right */
  height: 100%;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
}

/* spec §1.4 cornerRadius: topLeft 0 / topRight 4 / bottomRight 4 / bottomLeft 0.
   Deliberately WITHOUT overflow:hidden. LOSSINESS #5 says clipsContent is not
   exposed; the 2x render settles it — card 1's top-right corner is SQUARE at
   x=1280 (figma-truth/_scratch/13-build/corner_tr.png), so the Images frame
   does NOT clip its children. The radius is therefore inert on a frame with no
   fill, and is declared only so the value is not lost. */
#s13-recovery-45 .mk-recovery-45__stack {
  border-radius: 0 var(--mk-radius-card) var(--mk-radius-card) 0;
}


/* ==========================================================================
   4. THE THREE CARDS — spec §1.5
   717x450 each, cornerRadius topLeft 4 / topRight 0 / bottomRight 0 /
   bottomLeft 4. Card height is FIXED 450 in BOTH languages — widening
   717 -> 877 crops the photo horizontally only.
   ========================================================================== */

#s13-recovery-45 .mk-recovery-45__card {
  flex: 0 0 450px;                     /* spec §1.5 — fixed card height */
  width: 100%;
  max-width: none;
}

#s13-recovery-45 .mk-recovery-45__card > .vc_column-inner {
  box-sizing: border-box;
  height: 100%;
  padding: var(--mk-space-60);         /* spec §1.6 — caption inset 60 all round */
  border-radius: var(--mk-radius-card) 0 0 var(--mk-radius-card);
  overflow: hidden;                    /* clips the photo + scrim to the radius.
                                          Verified against the 2x render: card 1's
                                          TOP-LEFT corner is rounded ~4px
                                          (_scratch/13-build/corner_tl.png). */
}

/* -------- 4.1 the photo ---------------------------------------------------
   spec §4.2. Only the TOPMOST image fill is visible; the index-0 photos on
   cards 1 and 3 are fully occluded dead layers and are not shipped.
   The three files are the ORIGINAL Figma image bytes, not a re-render: they
   were pulled out of an SVG export of each card node (Figma inlines raster
   fills as base64 in SVG) and each file's SHA-1 equals the Figma `imageHash`
   verbatim —
       card 1  61e1c29e9b58cbde741665db3da73fc086a903f4
       card 2  ed64d86065fccf9130c6f9a698042b834128edf4
       card 3  ad1b76a91186abd401c19d6c3770522fc4fbdfc2
   All three source files are 1376x768.
   -------------------------------------------------------------------------- */

/* Cards 2 and 3 — scaleMode FILL, transform is a plain centred cover fit.
   Decoded from the SVG pattern matrix (0.000817207, 0.00130208, -0.0622385, 0):
   806.25 x 450.00 drawn at x -44.625 — which is exactly `cover` + `center`
   for a 1376x768 source in a 717x450 box. Salient's own
   `[data-bg-cover=true] .column-image-bg` rule already declares both; repeated
   here only so the reading is explicit. */
#s13-recovery-45 .mk-recovery-45__card .column-image-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* -------- 4.1b subtle parallax-on-hover, R8-08 ----------------------------
   Founder ask: "a little bit of a parallax when you hover over it so that
   you know that it's interactive," pointing at the reference row on
   http://127.0.0.1:5010/salient/architect (Perfect Exterior Lines /
   Square footage optimization row). Measured live off that donor:
   `.nectar-fancy-box:hover .box-bg{transform:scale(1.13)}`, transition
   `.6s cubic-bezier(.24,1,.3,1)`. These cards are Salient's plain
   image-background COLUMN component (see file header), not `nectar-fancy-
   box`, so that donor's `.box-bg` rule and Salient's own vendored
   `short_zoom`/`data-bg-animation` mechanic (used for the same fix on
   09-recovery-42, 11-recovery-43, 12-recovery-44 — see 09-recovery-42.html's
   note) do not reach `.column-image-bg` at all; there is no attribute route
   here. Reproducing the donor's own scale + easing directly is therefore the
   correct match, not an invention — same numbers, same technique, ported to
   the one element type here that needed its own rule. `.vc_column-inner`
   already carries `overflow:hidden` (this file, card padding/radius rule
   above), so the scaled image cannot bleed past the card. */
#s13-recovery-45 .mk-recovery-45__card .column-image-bg {
  transition: transform 0.8s cubic-bezier(0.24, 1, 0.3, 1);
}
#s13-recovery-45 .mk-recovery-45__card:hover .column-image-bg {
  transform: scale(1.13);
}
/* No explicit prefers-reduced-motion override here: css/reduced-motion.css
   already pins `transition-duration: 0.01ms !important` on `*, *::before,
   *::after` site-wide, which already collapses this transition to near-
   instant. A second declaration would be dead code beaten by that
   !important and would misattribute ownership of a behaviour it doesn't
   own — build/COMPONENT-hover-cursor.md §10b.3 records this exact trap
   from an earlier lane on this same build. */

#s13-recovery-45 .mk-recovery-45__card--1 .column-image-bg {
  background-image: url("../img/13-recovery-45/card-1-probiotics.webp");
  /* spec §4.2 — card 1 is scaleMode CROP, NOT fill, and the crop is
     non-uniform (SVG export carries preserveAspectRatio="none").
     SVG pattern matrix (0.00095158, 0.00162458, -0.260028, -0.184664) decodes
     to: draw 938.8212 x 561.4548 at (-186.4401, -83.0988) inside 717x450.
     Expressed as percentages so it scales with the card instead of pinning to
     1280:  size  938.8212/717 = 130.9374%   561.4548/450 = 124.7677%
            pos-x -186.4401/(717-938.8212) = 84.0507%
            pos-y  -83.0988/(450-561.4548) = 74.5615%
     Verified: compositing this placement + the §4.1 scrim against the 2x
     section render gives mean |delta| = 1.4/255 over the photo area (resampler
     noise only). */
  background-size: 130.9374% 124.7677%;
  background-position: 84.0507% 74.5615%;
}
#s13-recovery-45 .mk-recovery-45__card--2 .column-image-bg {
  background-image: url("../img/13-recovery-45/card-2-mental-health.webp");
}
#s13-recovery-45 .mk-recovery-45__card--3 .column-image-bg {
  background-image: url("../img/13-recovery-45/card-3-housing.webp");
}

/* -------- 4.2 the scrim ---------------------------------------------------
   spec §4.1 — GRADIENT_LINEAR, stops #00000000 @0 -> #000000bf @1.
   gradientTransform row 1 is [0,1,0], i.e. t = y, so the axis runs top->bottom.
   It is the LAST entry in each card's fills array, which is what establishes
   that the array is ordered bottom->top.
   Identical on all 3 cards, both languages. Painted at rest, never faded in.
   -------------------------------------------------------------------------- */
#s13-recovery-45 .mk-recovery-45__card .column-overlay-layer {
  background: linear-gradient(180deg,
              rgba(0, 0, 0, 0) 0%,
              rgba(0, 0, 0, 0.749) 100%);   /* #000000bf = 191/255 = 0.74902 */
  opacity: 1;
}

/* -------- 4.3 the caption -------------------------------------------------
   spec §1.6. Rendered geometry, pixel-measured on the 2x render: the caption
   box sits 60px from the card's LEFT edge and 60px from the card's BOTTOM
   edge, width = card width - 120 (597 at 717, 757 at 877).
   Cards 2 and 3 reach that via a full-height text node with bottom-aligned
   content (spec LOSSINESS #3 — textAlignVertical is inferred from the render,
   not read); card 1 via a 97px hug. All three render identically, so one rule
   serves all three.
   The two `rotation: -180` values in the payload are a horizontal-mirror pair
   that cancels (spec §1.6). Builder instruction is explicit: ignore both.
   -------------------------------------------------------------------------- */
#s13-recovery-45 .mk-recovery-45__card > .vc_column-inner > .wpb_wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;           /* bottom-aligned — spec §1.6 */
  align-items: flex-start;
  height: 100%;
  min-height: 100%;
  width: 100%;
}
/* CAPTION PARAGRAPH SPACING — 21.4, NOT the spec's 24. Read the evidence.
   The two caption paragraphs are ONE Figma text node separated by a single
   `\n`. `paragraphSpacing` is not exposed by the MCP, so spec §2.2 DERIVES 24
   and immediately flags it: "the total-height arithmetic does not close exactly
   (43.2 + 24 + 32.4 = 99.6 vs Figma's reported node height of 97), so the value
   carries +/-1.5px. Verify against the reference render."
   Verified. 24 renders the title ink bottom at abs y 330.5; the 2x reference
   has it at 333.5. Solving the node height instead — 97 - 43.2 - 32.4 = 21.4 —
   moves it to 333.1 (residual 0.4px) and simultaneously improves the spec's
   other check: predicted baseline-to-baseline becomes 57.1 against the 56.6 the
   spec measured, where 24 predicts 59.7.
   So 21.4 closes BOTH of the spec's own tests and 24 closes neither. The two
   Figma-reported facts are consistent with each other; the derived 24 was the
   odd one out. See NOTES entry 13-C. */
#s13-recovery-45 .mk-recovery-45__caption > .vc_column-inner > .wpb_wrapper {
  display: flex;
  flex-direction: column;
  gap: 21.4px;
}
#s13-recovery-45 .mk-recovery-45__card .wpb_wrapper > * {
  margin: 0;
  max-width: 100%;
}

/* spec §2.3 — DROP_SHADOW #00000080, offset (0,4), radius 14, no spread.
   Applied to the TEXT node on all 3 cards in both languages. Nothing else in
   the section carries an effect. Figma blur radius maps to a CSS blur radius
   of the same number (the SVG export writes stdDeviation 7 = 14/2). */
#s13-recovery-45 .mk-recovery-45__caption-title h3,
#s13-recovery-45 .mk-recovery-45__caption-line p {
  color: var(--mk-ink-inverse);        /* #ffffff */
  text-shadow: 0 4px 14px var(--mk-shadow-50);
  letter-spacing: 0;
  margin: 0;
}

/* Caption line 1 — spec §2.2: Poppins Light 300, 24px, line-height 180%.
   Resolved by ink-area ratio (Light 1.001/1.002 vs Regular 0.801/0.829 and
   ExtraLight 1.553/1.558), not read from the payload — the MCP cannot expand
   styled runs. It is an <h3>, so tokens.css's serif rule for h1/h2/h3 has to
   be turned off here: Figma says Poppins for every card title. */
#s13-recovery-45 .mk-recovery-45__caption-title h3 {
  font-family: var(--mk-font-sans) !important;
  font-variation-settings: normal;
  font-optical-sizing: auto;
  font-weight: var(--mk-w-light) !important;
  font-size: var(--mk-size-title) !important;   /* 24 */
  line-height: var(--mk-lh-body) !important;    /* 180% -> 43.2 */
  text-transform: none;
}

/* Caption line 2 — spec §2.2: Poppins Regular 400, 18px, line-height 180%. */
#s13-recovery-45 .mk-recovery-45__caption-line p {
  font-family: var(--mk-font-sans);
  font-weight: var(--mk-w-regular);
  font-size: var(--mk-size-body-sm);   /* 18 */
  line-height: var(--mk-lh-body);      /* 180% -> 32.4 */
}


/* ==========================================================================
   5. RESPONSIVE
   spec §6. The 1440 case is FREE — the text rail is fixed, the media rail is
   `flex: 1`, and the photos crop horizontally. No breakpoint is needed down to
   1280. EVERYTHING BELOW 1280 IS INFERRED: Figma contains no tablet or mobile
   frame for this section in EITHER language (spec §6, LOSSINESS #7).
   ========================================================================== */

@media (max-width: 1279px) {
  /* The card is no longer exactly 717 wide, so pin nothing to it. Card 1's
     percentage background survives verbatim — that is why it is expressed as a
     percentage rather than in px. */
  #s13-recovery-45 { height: auto; }
  #s13-recovery-45 > .wpb_row > .row_col_wrap_12 { min-height: 1366px; }
}

/* 2026-09-02 — WAS `(max-width: 1024px)`. An iPad Pro 13" in portrait is 1024px wide: >=1000 runs the DESKTOP recovery engine (the founder's rule: landscape/>=1000 = desktop treatment), which positions the panels for the ROW layout, while this block had already broken the row into a column — MEASURED at 1024x1366: step 1's panel rendered as a 65px sliver (_tools/_scratch/eyes/ipadpro-rail). The tablet stack now ends where the engine begins. */
@media (max-width: 999px) {
  /* spec §6: at ~1024 the 563px rail is >55% of the viewport and the media rail
     collapses toward unusable. Switch HORIZONTAL -> VERTICAL: text first, then
     the media stack full-bleed. */
  #s13-recovery-45 { height: auto; }
  #s13-recovery-45 > .wpb_row > .row_col_wrap_12 {
    flex-direction: column;
    min-height: 0;
  }
  #s13-recovery-45 .mk-recovery-45__rail {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
  }
  #s13-recovery-45 .mk-recovery-45__rail > .vc_column-inner {
    height: auto;
    padding: var(--mk-page-x) var(--mk-page-x) var(--mk-space-60);
  }
  /* spec §6: "Text group vertical centring must be dropped when stacked" —
     otherwise a short text block floats in dead space. */
  #s13-recovery-45 .mk-recovery-45__rail > .vc_column-inner > .wpb_wrapper {
    justify-content: flex-start;
    height: auto;
  }
  #s13-recovery-45 .mk-recovery-45__copy > .vc_column-inner > .wpb_wrapper {
    width: 100%;
  }
  #s13-recovery-45 .mk-recovery-45__stack { height: auto; }
}

@media (max-width: 767px) {
  /* spec §6 "Mobile (<768)" — every number below is the spec's own inferred
     scaling, nothing invented here. The 4px seams and 4px radii hold at every
     size, which is why they are not touched. */
  #s13-recovery-45 .mk-recovery-45__card { flex: 0 0 300px; }         /* 450 -> 280..320 */
  #s13-recovery-45 .mk-recovery-45__card > .vc_column-inner {
    padding: var(--mk-space-24);                                       /* 60 -> 24..32 */
  }
  #s13-recovery-45 .mk-recovery-45__h2 h2 {
    font-size: 34px !important;                                        /* 48 -> 32..36 */
    line-height: 42px !important;
  }
  #s13-recovery-45 .mk-recovery-45__body p { font-size: 17px; }        /* 20 -> 17..18 */
  #s13-recovery-45 .mk-recovery-45__caption-title h3 {
    font-size: 20px !important;                                        /* 24 -> 20 */
  }
  #s13-recovery-45 .mk-recovery-45__caption-line p { font-size: 16px; }/* 18 -> 16 */
}

/* ==========================================================================
   13 · MK-RPLAN BINDING — D23 / D24 / D26.  Component + trace: 09-recovery-42.css
   RETIRED: section height 1366 + overflow:hidden; row_col_wrap_12 flex row at
   100% height; rail flex 0 0 563 / max-width 563; stack padding-block 4 with
   height:100%; card flex 0 0 450 and its left-only card radius.
   `overflow: hidden` on the section has to go with them: with a sticky rail
   inside, `overflow` on any ancestor creates a new scroll container and the
   sticky silently stops sticking. That is the single most common way this
   component is broken, so it is called out rather than just deleted.
   ========================================================================== */
#s13-recovery-45 { height: auto; min-height: 100svh; overflow: visible; }
#s13-recovery-45 > .wpb_row { height: auto; }
#s13-recovery-45 > .wpb_row > .row_col_wrap_12 {
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: start;
  height: auto;
  min-height: 0;
}
#s13-recovery-45 .mk-recovery-45__rail  { flex: none; width: auto; max-width: none; }
#s13-recovery-45 .mk-recovery-45__rail > .vc_column-inner {
  height: 100svh;
  padding: var(--mk-page-x);
  padding-right: var(--mk-space-60);
}
#s13-recovery-45 .mk-recovery-45__copy > .vc_column-inner > .wpb_wrapper { width: 100%; }
#s13-recovery-45 .mk-recovery-45__media { flex: none; }
#s13-recovery-45 .mk-recovery-45__media > .vc_column-inner,
#s13-recovery-45 .mk-recovery-45__media > .vc_column-inner > .wpb_wrapper { height: auto; }
#s13-recovery-45 .mk-recovery-45__stack { padding: 0; height: auto; display: block; }
#s13-recovery-45 .mk-recovery-45__card  { flex: none; height: 100svh; width: 100%; }
#s13-recovery-45 .mk-recovery-45__card > .vc_column-inner {
  height: 100%;
  padding: var(--mk-space-60);
  border-radius: 0;
}
/* 13 is the one section whose caption is not a direct child of the panel — it
   sits two Salient wrappers down — so the component's own z-index rule cannot
   reach it. Stated here rather than loosening the component's selector. */
#s13-recovery-45 .mk-recovery-45__card > .vc_column-inner { position: relative; z-index: 11; }

/* --------------------------------------------------------------------------
   D26, SECOND INSTANCE. Card 1's photo was placed from Figma's own SVG export:
       background-size:     130.9374% 124.7677%
       background-position:  84.0507%  74.5615%
   decoded from a `scaleMode: CROP` fill whose export carries
   preserveAspectRatio="none". 130.94 / 124.77 = 1.0495, so the probiotic
   bottles were rendered 5% wider than tall — anamorphic, and verified at
   mean |delta| 1.4/255 against the Figma render, which is exactly why it
   shipped: the build was right about Figma and Figma was wrong about the photo.
   This is the same defect as sections/10-recovery-41.css's `object-fit: fill`
   on its own CROP fill. Two independent lanes reproduced a dragged crop handle
   as a specification; that is what makes it a predicate and not an incident.
   Reverted to an aspect-preserving cover, like its two siblings.
   -------------------------------------------------------------------------- */
#s13-recovery-45 .mk-recovery-45__card--1 .column-image-bg {
  background-size: cover;
  background-position: center;
}

/* ==========================================================================
   R3 · 13 · MK-RPLAN ROUND-3 BINDING — D04 · D05 · D06 · D07
   Component + rationale: sections/09-recovery-42.css block "R3 · MK-RPLAN".
   ========================================================================== */
/* +1 class over css/rhythm.css §B04's `.mk-page #s13-recovery-45
   .mk-recovery-45__card` — 09's R3-5. */
.mk-page #s13-recovery-45 .mk-recovery-45__card.mk-rplan__panel { height: var(--mk-rplan-panel-h); }
#s13-recovery-45 .mk-recovery-45__card > .vc_column-inner {
  border-radius: var(--mk-rplan-radius) 0 0 var(--mk-rplan-radius);
  overflow: hidden;
}
/* spec §1.4 already asks for padding-block 4 on the stack; the component adds
   the 4px inter-card margin, so this restores the authored
   4 + h + 4 + h + 4 + h + 4 rhythm the round-2 pass flattened. */
#s13-recovery-45 .mk-recovery-45__stack { padding-block: var(--mk-rplan-gap) 0; }
/* D04's left gutter is css/rhythm.css §D04's — see 09's block R3-2. The rail
   height stays 100svh: rhythm.css §B04 excludes the rails on purpose (a sticky
   rail taller than the viewport can never be fully pinned) and so does this. */
/* D05 — placement, from the rendered crops (scratchpad/crop-sim2.png).
   card 1 also drops the anamorphic Figma CROP override two blocks up: that
   rule already reverted the size to `cover`, this one moves the window so the
   third probiotic bottle is not sliced by the right edge.
   card 2: the seated figure is centred; `center` is correct and is stated so
           the next reader knows it was checked, not skipped.
   card 3: the couple with the moisture meter run 0.50-0.72. */
#s13-recovery-45 .mk-recovery-45__card--1 .column-image-bg { background-position: 80% center; }
#s13-recovery-45 .mk-recovery-45__card--2 .column-image-bg { background-position: 50% center; }
#s13-recovery-45 .mk-recovery-45__card--3 .column-image-bg { background-position: 58% center; }

/* D04 — the page gutter the row's `padding-inline` used to supply, moved onto
   the rail so the media column can bleed to the glass. Rationale, the
   measurement and the rhythm.css interaction: 09-recovery-42.css block R3-2.
   MUST be the last padding declaration for this rail in this file. */
#s13-recovery-45 .mk-recovery-45__rail > .vc_column-inner { padding-left: var(--mk-rplan-gutter); }

/* THE PINNED RAIL, AT ID SPECIFICITY.  The component states the pin in
   09-recovery-42.css block R3-A at (0,3,0), and four of the five sections pin
   their rail width with an id rule of their own (12 uses 100%, 13 uses auto)
   that out-ranks it.  MEASURED with only the component rule: 12 and 13
   computed 1512px wide instead of 756 when fixed — a rail spread across the
   whole viewport, on top of its own photographs.  A width of 100% of a grid
   AREA and of the VIEWPORT are the same number until the element leaves flow,
   which is exactly why this only appears once something is pinned.  Restated
   here, per file, where it wins.
   grid-column is belt: a fixed rail is out of grid flow, so without an
   explicit track the stage would auto-place into column 1. */
#s13-recovery-45[data-rplan-rail] .mk-recovery-45__rail {
  position: fixed;
  top: 0;
  left: var(--mk-rplan-pin-x, 0px);
  width: var(--mk-rplan-pin-w, 50%);
  height: 100svh;
}
#s13-recovery-45 .mk-rplan__rail  { grid-column: 1; }
#s13-recovery-45 .mk-rplan__stage { grid-column: 2; }

/* ==========================================================================
   13 · MOBILE STRIP MATES (<=999px) — for 09-recovery-42.css block R4-M.
   Rationale at 09's twin block. 13 is the Salient-markup outlier: the strip
   padding and the 100svh live one level down, on the rail's
   `.vc_column-inner`, so the release happens there — an inner left at
   100svh would hold the measured "natural" height at a full screen and the
   strip with it.
   ========================================================================== */
@media (max-width: 999px) {
  #s13-recovery-45 > .wpb_row > .row_col_wrap_12 { grid-template-columns: 100%; }
  #s13-recovery-45 .mk-rplan__rail,
  #s13-recovery-45 .mk-rplan__stage { grid-column: auto; }
  #s13-recovery-45 .mk-recovery-45__rail > .vc_column-inner {
    height: auto;
    padding: var(--mk-rplan-strip-top) var(--mk-page-x)
             var(--mk-rplan-strip-bot, var(--mk-space-24));  /* R5 item 2 */
  }
  /* Caption: NOT restated. Round 6 retires the top-band squeeze (R5-STACK,
     deleted in 09-recovery-42.css) that this id-rank mate used to restore
     against — 13's caption reverts to its own authored bottom anchor
     (`.wpb_wrapper { justify-content: flex-end }`), default type sizes, and
     default `.column-overlay-layer` scrim, unmodified. */
  /* (A round-9 margin-bottom slot mate briefly lived here — retired within
     the hour: slots moved to the stage's grid row-gap, where they must be,
     because a margin-bottom slot is part of the card's own margin box and
     eats its sticky displacement allowance — see 09-recovery-42.css R4-M.
     grid-system.css's `[data-column-margin=none] .col { margin-bottom: 0 }`
     now agrees with the design instead of fighting it.) */
  /* R4-M round-9 mate — WIDTH, id-ranked (FT-20260901: "your image on
     5/5 is not placed properly, you've got it full width" — the founder's
     own numbering: 13 is step 5/5). This file's OWN block-B/binding rule
     `#s13-recovery-45 .mk-recovery-45__card { ...width: 100% }` (line
     ~598, UNGATED — applies at every width) is id-scoped, so it outranks
     the shared `.mk-rplan-js .mk-rplan .mk-rplan__panel { width: auto }`
     (0,3,0) the same way section 10's vendor post-grid rule did — same
     defect, third markup shape. `width: 100%` plus the shared rule's own
     `margin: 0 var(--mk-page-x)` occupies 100% + 2×page-x, edge-to-edge
     and past it, which is the missing inset AND very likely why the
     founder read the last card as "never shows up" — a full-bleed,
     shifted card can render mostly or entirely off the visible frame at
     a narrow viewport depending on the row's own overflow. */
  /* MARGIN, id-ranked too — width alone was NOT sufficient. MEASURED: with
     only the width fix above, computed margin-left/-right were still 0,
     because `html body .vc_row-fluid > .span_12 > .wpb_column:not([class
     *="offset-"])` (grid-system.q-dcb972ee3c.css, no media guard) matches
     this card (it IS a `.wpb_column` inside a `.span_12` inside a
     `.vc_row-fluid`) at (0,4,2) — 4 classes/pseudo-classes beat the shared
     rule's (0,3,0) regardless of source order, the same way width did.
     `width: auto` with 0 margins just centers a full-bleed box instead of
     insetting one — this is what was actually still full-width. */
  #s13-recovery-45 .mk-rplan__panel { width: auto; margin: 0 var(--mk-page-x); }
  /* BREATHING ROOM BEFORE THE NEXT PAGE SECTION (FT-20260901): "there
     needs to be some spacing between where your long-term housing image
     is, and then our next section." 13 is the LAST recovery step —
     unlike 09->10->11->12->13, which are internal handoffs within one
     component and stay edge-to-edge on purpose (D23), what follows 13 is
     a genuinely different section, and the shared `.mk-rplan__tail` (its
     own height is scroll-HOLD room for the fade above, not visual
     ground) currently hands off to it with zero gap. id-scoped, 13 only —
     09-12 are untouched. */
  #s13-recovery-45 { padding-bottom: var(--mk-space-60); }
}