/* ═══════════════════════════════════════════════════════════
   EMPATHIA LEARN — Homepage layer (Relume)
   Loaded after program.css, on index.html only.

   Section structures are ported from the official Relume React
   library (fetched via the Relume Library MCP) and re-expressed in
   this site's own HTML/CSS with Empathia brand tokens. Each block
   names the Relume component it comes from.

   Relume conventions preserved:
     section padding  py-16 / md:py-24 / lg:py-28  → 64 / 96 / 112px
     header margin    mb-12 / md:mb-18 / lg:mb-20  → 48 / 72 / 80px
     breakpoints      md 768px, lg 992px
     header anatomy   tagline → heading → text → actions
   ═══════════════════════════════════════════════════════════ */

:root{
  --rlm-py: 112px;      /* lg:py-28 */
  --rlm-head-mb: 80px;  /* lg:mb-20 */
  --rlm-gap: 32px;      /* lg:gap-x-8 */
}

/* ── [Relume Header 1] split hero — content left, media right ── */
.hero-rlm{text-align:left;padding:88px 0 112px}
.hero-rlm .hero-inner{max-width:none}
.rlm-hero-grid{
  display:grid;grid-template-columns:1.04fr .96fr;
  gap:clamp(40px,5vw,76px);align-items:center;
}
.hero-rlm .hero-kicker{font-size:18px;margin-bottom:22px;max-width:520px}
.hero-rlm .hero-title{
  display:block;
  font-size:clamp(44px,5.6vw,78px);line-height:1.02;
}
.hero-rlm .hero-sub{margin:26px 0 0;max-width:560px;font-size:19px}
.hero-rlm .hero-actions{justify-content:flex-start;margin-top:36px}
.hero-rlm .hero-try-note{text-align:left}

/* media card reuses .hero-feature chrome (radius, border, caption) */
.hero-rlm .hero-feature{margin-top:0;aspect-ratio:4/4.15;height:100%;min-height:420px}

/* ── [Relume Layout 396] scenario card grid (replaces the rail) ── */
.rlm-scn-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;padding-top:8px;
}
.rlm-scn-grid .scn-card{flex:none;width:auto}

/* ── [Relume Layout 309] split header: heading left, description right ── */
.rlm-split-head{
  display:grid;grid-template-columns:1fr 1fr;
  gap:32px 80px;margin-bottom:var(--rlm-head-mb);
}
.rlm-split-head .section-title{margin:0}
.rlm-split-head .rlm-split-body{
  font-size:18px;line-height:1.6;color:var(--gray);align-self:center;
}
.rlm-split-head .section-eyebrow{grid-column:1/-1;margin-bottom:0}

/* ── [Relume Layout 309] open 4-column item grid (no boxes) ── */
.rlm-steps{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:64px var(--rlm-gap);align-items:start;
}
.rlm-step .rlm-step-n{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:12px;margin-bottom:24px;
  font-family:var(--serif);font-style:italic;font-size:21px;font-weight:500;
  color:var(--accent);background:var(--lavender);
  border:1px solid var(--border);
}
.rlm-step h3{
  font-family:var(--serif);font-size:22px;font-weight:500;line-height:1.18;
  color:var(--ink);margin-bottom:14px;
}
.rlm-step p{font-size:15.5px;line-height:1.62;color:var(--gray)}

/* three-up variant for the rollout / getting-started block */
.rlm-steps.rlm-steps-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rlm-step .rlm-step-k{
  display:block;margin-bottom:10px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--purple-dark);
}

/* ── [Relume Layout 620] hairline-divided columns ── */
.rlm-divided{
  display:grid;grid-template-columns:1fr 1px 1fr 1px 1fr;
  gap:0 var(--rlm-gap);
  border-top:1px solid var(--border);
}
.rlm-divided-rule{background:var(--border);width:1px;height:100%}
.rlm-col{padding:40px 0 8px}
.rlm-col .rlm-col-k{
  display:block;margin-bottom:20px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--purple-dark);
}
.rlm-col h3{
  font-family:var(--serif);font-size:25px;font-weight:500;line-height:1.15;
  color:var(--ink);margin-bottom:16px;
}
.rlm-col p{font-size:15.5px;line-height:1.62;color:var(--gray)}

/* Relume keeps mb-12/18/20 between a section header and the block below */
.section-head + .rlm-steps,
.section-head + .rlm-divided,
.section-head + .rlm-timeline{margin-top:var(--rlm-head-mb)}

/* ── [Relume Timeline 20] horizontal rail with dots ── */
.rlm-timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.rlm-tl-item{position:relative}
.rlm-tl-item > .rlm-tl-date,
.rlm-tl-item > p{padding-right:28px}
.rlm-tl-rail{position:relative;display:flex;align-items:center;height:16px;margin-bottom:28px}
.rlm-tl-rail::after{
  content:'';position:absolute;left:0;right:0;height:3px;background:var(--border);
}
.rlm-tl-item:last-child .rlm-tl-rail::after{right:auto;width:15px}
.rlm-tl-dot{
  position:relative;z-index:2;width:15px;height:15px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 7px var(--white);flex:none;
}
.rlm-tl-date{
  display:block;margin-bottom:10px;
  font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--purple-dark);
}
.rlm-tl-item p{font-size:15.5px;line-height:1.6;color:var(--gray)}

/* ── Relume breakpoints (md 768 / lg 992) ── */
@media (max-width:991px){
  :root{--rlm-py:96px;--rlm-head-mb:72px}
  .rlm-hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-rlm{padding:64px 0 88px}
  .hero-rlm .hero-feature{aspect-ratio:16/10;height:auto;min-height:0}
  .rlm-scn-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .rlm-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px var(--rlm-gap)}
  .rlm-steps.rlm-steps-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rlm-timeline{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 0}
  .rlm-split-head{gap:24px 40px}
}
@media (max-width:767px){
  :root{--rlm-py:64px;--rlm-head-mb:48px}
  .hero-rlm{padding:48px 0 72px}
  .hero-rlm .hero-feature{aspect-ratio:4/3}
  .rlm-scn-grid{grid-template-columns:1fr}
  .rlm-split-head{grid-template-columns:1fr}
  .rlm-steps,.rlm-steps.rlm-steps-3{grid-template-columns:1fr;gap:40px}
  /* Relume stacks the divided grid into bordered rows on mobile */
  .rlm-divided{grid-template-columns:1fr}
  .rlm-divided-rule{display:none}
  .rlm-col{padding:28px 0;border-bottom:1px solid var(--border)}
  .rlm-col:last-child{border-bottom:0}
  /* timeline goes vertical: continuous rail down the left, content right */
  .rlm-timeline{grid-template-columns:1fr;gap:0}
  .rlm-tl-item{
    display:grid;grid-template-columns:16px 1fr;grid-template-rows:auto 1fr;
    gap:0 20px;padding-bottom:32px;
  }
  .rlm-tl-item:last-child{padding-bottom:0}
  .rlm-tl-rail{
    grid-column:1;grid-row:1/-1;
    flex-direction:column;height:100%;width:16px;margin:0;align-items:center;
  }
  .rlm-tl-rail::after{left:auto;right:auto;top:0;bottom:-32px;width:3px;height:auto}
  .rlm-tl-item:last-child .rlm-tl-rail::after{bottom:auto;height:15px;width:3px}
  .rlm-tl-item > .rlm-tl-date{grid-column:2;grid-row:1;padding-right:0}
  .rlm-tl-item > p{grid-column:2;grid-row:2;padding-right:0}
}

/* Availability badge on scenario cards — the learner dashboard already
   distinguishes shipped from unshipped scenarios; the public page must too. */
.scn-soon{
  position:absolute;top:14px;right:14px;
  font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy);background:rgba(251,250,253,.94);
  padding:5px 10px;border-radius:6px;border:1px solid var(--border);
}