/* Landing page — Candlelit Grimoire key (reuses theme.css tokens + .hero-title,
   .card-grid, .card). Just the bits the shared components don't cover: the hero
   band, lede, CTA row, and the "under the hood" detail block. */

.home-hero {
  text-align: center;
  padding: clamp(1.75rem, 6vw, 4.5rem) 0 clamp(1.5rem, 4vw, 2.75rem);
  max-width: 70ch;
  margin: 0 auto;
}
.home-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--sp-8);
}
.home-hero .hero-title { margin: 0 0 1.125rem; }
.home-lede {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.4vw, 1.4375rem);
  line-height: 1.45;
  color: var(--text);
  margin: 0 auto 1.625rem;
  max-width: 58ch;
}
.home-cta { display: flex; gap: var(--sp-7); justify-content: center; flex-wrap: wrap; }
.home-cta .btn { padding: 0.6875rem 1.375rem; font-size: var(--fs-md); }
.home-meta {
  margin: 1.375rem 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* faint ember vignette behind the hero for depth */
.home-hero::before {
  content: "";
  position: absolute;
  inset: var(--topbar-h, 3.5rem) 0 auto 0;
  height: 26.25rem;
  background: radial-gradient(60% 70% at 50% 0%, rgba(var(--accent-rgb), 0.10), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* feature grid */

.home-features .card { display: flex; flex-direction: column; }
.home-features .card-foot { margin-top: auto; padding-top: var(--sp-6); color: var(--accent); }
.home-features .card-arrow { transition: transform 200ms var(--ease-soft); display: inline-block; }
.home-features .card:hover .card-arrow { transform: translateX(0.25rem); }

/* under-the-hood detail */







/* ── section heading (member summary + guest "what's inside") ───────────── */


/* member hero — compact + personal */
.member-hero { padding: clamp(1.375rem, 4vw, 2.875rem) 0 clamp(0.875rem, 3vw, 1.75rem); }
.member-hero .member-name { margin: 0 0 var(--sp-7); font-size: clamp(2.125rem, 6vw, 3.375rem); }

/* ── Quick Start ────────────────────────────────────────────────────────── */
.qs { max-width: 57.5rem; margin: 0 auto clamp(1.75rem, 5vw, 3.25rem); padding: clamp(1.375rem, 3vw, 1.875rem); }














.qs-step.is-next { border-color: rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .05); }
.qs-step.is-done { opacity: .82; }

.qs-step.is-next .qs-step-n { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.qs-step.is-done .qs-step-n { color: var(--gold); border-color: rgba(var(--gold-rgb), .5); background: rgba(var(--gold-rgb), .1); }







@media (max-width: 560px) {
  .qs-step { flex-wrap: wrap; row-gap: var(--sp-6); }
  .qs-step-main { flex: 1 1 100%; order: 3; }
  .qs-step-act { order: 4; flex: 1 1 100%; }
  .qs-step-act .btn { flex: 1; text-align: center; }
}

/* ============================================================================
   FIT-TO-SCREEN landing — no page scroll on desktop; spreads into the horizontal
   space. Mobile keeps natural scroll (no horizontal room to spread into).
   ============================================================================ */
.home-fit { width: 100%; display: flex; flex-direction: column; }
@media (min-width: 760px) {
  body:has(.home-fit) main.app-main {
    flex: 0 0 auto;
    height: calc(100dvh - var(--topbar-h, 3.5rem));
    max-height: calc(100dvh - var(--topbar-h, 3.5rem));
    min-height: 0; overflow: hidden;
    display: flex; flex-direction: column; padding-top: var(--sp-7);
  }
  body:has(.home-fit) main.app-main > #app { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .home-fit { flex: 1 1 auto; min-height: 0; overflow: hidden; }
}

/* member head: "Welcome back / Name" + tagline */

.home-fit-head .home-eyebrow { margin: 0 0 var(--sp-1); }
.fit-name { font-family: var(--font-display); font-size: clamp(1.875rem, 4vw, 2.875rem); color: var(--text);
  margin: 0; line-height: 1; }
.fit-tag { color: var(--muted); font-size: var(--fs-md); margin: 0; }

.home-fit-body { flex: 1 1 auto; min-height: 0; }
.member-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.125rem;
  height: 100%; align-items: stretch; }



/* Quick Start fills its column; the steps scroll INTERNALLY only if they ever overflow */





/* compact feature menu (member side column) */
.feat-menu { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-5); overflow-y: auto; }
.feat-mini { display: flex; align-items: center; gap: var(--sp-7); padding: 0.6875rem var(--sp-8); border-radius: var(--r-xl);
  background: var(--bg); border: 0.0625rem solid var(--border-soft); color: var(--text); text-decoration: none;
  transition: border-color .14s var(--ease-soft), background .14s var(--ease-soft); }
.feat-mini:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), .06); text-decoration: none; }
.feat-mini-ico { font-size: var(--fs-sub); flex: 0 0 auto; line-height: 1; }
.feat-mini-text { display: flex; flex-direction: column; gap: 0.0625rem; flex: 1 1 auto; min-width: 0; }
.feat-mini-tt { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--text); line-height: 1.1; }
.feat-mini-bl { font-size: var(--fs-sm); color: var(--muted); }
.feat-mini-arrow { color: var(--muted); flex: 0 0 auto; transition: transform .18s var(--ease-soft); }
.feat-mini:hover .feat-mini-arrow { color: var(--accent); transform: translateX(0.1875rem); }

/* guest: compact centred hero + a wide feature grid filling the rest */
.fit-hero { padding: clamp(0.75rem, 3vw, 2rem) 0 clamp(0.625rem, 2vw, 1.25rem); }
.guest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); height: 100%; }
.guest-grid .card { display: flex; flex-direction: column; }
.guest-grid .card-body { font-size: var(--fs-base); line-height: 1.5; }
.guest-grid .card-foot { margin-top: auto; padding-top: var(--sp-4); color: var(--accent); }
@media (min-width: 760px) { .guest-grid { grid-auto-rows: 1fr; } }

/* responsive: collapse to one column on small screens (page scrolls naturally) */
@media (max-width: 759px) {
  .member-grid { grid-template-columns: 1fr; gap: var(--sp-9); height: auto; }
  .home-col-side { margin-top: var(--sp-3); }
  .guest-grid { grid-template-columns: 1fr; height: auto; }
}