/* ============================================================================
   MrMurse — Home page styles
   ----------------------------------------------------------------------------
   Page-specific layout ONLY. Every color/size/timing references a token; this
   file holds composition that is unique to the Home page (hero grid + the
   custom learning-loop illustration) and small layout helpers. No new visual
   language — it composes the Phase 0 system.
   ========================================================================== */

/* ---------------------------------------------------------------- HERO ----- */
/* ---- Hero: Home-specific extras only.
   The shared hero frame (.hero, .hero__grid, .hero__title, .hero__sub,
   .hero__cta) now lives in components.css as the HERO component. Home adds the
   trust line and the exam pills below the CTA. --- */
.hero__trust {
  display: flex; gap: var(--space-3); align-items: center;
  margin-top: var(--space-5); max-width: 520px;
  font-size: var(--fs-body-sm); color: var(--text-muted);
}
.hero__trust .icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); }
.hero__pills { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-5); }

/* ---- The learning-loop illustration ---------------------------------------
   A single restrained composition: a dashed orbit with a teal progress arc, a
   student at the center, and four labeled nodes (Practice → Feedback → Tutor →
   Progress). Communicates the product at a glance without a busy scene.       */
.loop { position: relative; width: 420px; max-width: 100%; aspect-ratio: 1; margin-inline: auto; }
.loop__svg { width: 100%; height: 100%; display: block; }
.loop__arc { animation: loop-draw var(--dur-reveal) var(--ease-out) both; }
@keyframes loop-draw { from { stroke-dashoffset: 1291; } to { stroke-dashoffset: 471; } }
@media (prefers-reduced-motion: reduce) { .loop__arc { animation: none; } }

.loop__center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 132px; height: 132px; border-radius: 50%;
  background: var(--surface); border: var(--border-width) solid var(--border);
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center;
}
.loop__avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--c-teal-tint-10); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.loop__avatar svg { width: 26px; height: 26px; }
.loop__center-label { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--text-muted); letter-spacing: var(--ls-wide); text-transform: uppercase; }

.loop__node {
  position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px;
  transform: translate(-50%, -50%);
}
.loop__chip {
  width: 50px; height: 50px; border-radius: var(--radius-md);
  background: var(--surface); border: var(--border-width) solid var(--border);
  box-shadow: var(--shadow-sm); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.loop__chip .icon { width: 22px; height: 22px; }
.loop__tag {
  font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--text-primary);
  background: var(--surface); border: var(--border-width) solid var(--border);
  padding: 3px 10px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
/* node positions: top, right, bottom, left of the orbit */
.loop__node--1 { top: 8%;  left: 50%; }
.loop__node--2 { top: 50%; left: 92%; }
.loop__node--3 { top: 92%; left: 50%; }
.loop__node--4 { top: 50%; left: 8%; }

/* gentle ambient float, staggered; disabled for reduced motion */
.loop__node { animation: loop-float 6s var(--ease-standard) infinite; }
.loop__node--2 { animation-delay: .8s; }
.loop__node--3 { animation-delay: 1.6s; }
.loop__node--4 { animation-delay: 2.4s; }
@keyframes loop-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@media (prefers-reduced-motion: reduce) { .loop__node { animation: none; } }

/* ---------------------------------------------------- SYSTEM (split) ------- */
.system { align-items: center; }
.system__steps { display: grid; gap: var(--space-5); }
.system__steps .feature-row + .feature-row { margin-top: 0; }
/* On wide screens, let the surface lead visually on the reverse row. */
.system--reverse .system__surface { order: -1; }
@media (max-width: 920px) {
  .system--reverse .system__surface { order: 0; }
}

/* check-list: reused on feedback + platform copy columns */
.check-list { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.check-list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-body-sm); color: var(--text-body); }
.check-list .icon { color: var(--accent); margin-top: 2px; flex-shrink: 0; }

/* ---------------------------------------------------- SURFACE SPACING ------ */
/* Small spacing helpers used inside product surfaces, replacing inline styles
   so the page stays free of one-off style attributes (Phase 0 integrity). */
.surface__note { margin-top: var(--space-4); }
.surface__meters { margin-top: var(--space-5); }
/* the "focus next" summary icon uses the warning role instead of teal */
.summary__ic--warn { background: var(--c-warning-bg); color: var(--c-warning); }

/* ---------------------------------------------------- CREDIBILITY ----------
   Stat-style trust markers: a strong visual number/label plus a supporting
   line. Kept the improved spacing from the polish pass. The "100%" refers to
   original practice questions (see copy), not an outcome claim. */
.cred { gap: var(--space-6) var(--space-7); margin-top: var(--space-7); }
.stat { text-align: left; }
.stat__num {
  font-size: 2.9rem; font-weight: var(--fw-extra); color: var(--text-primary);
  letter-spacing: var(--ls-tight); line-height: 1;
}
.stat__num .u { font-size: var(--fs-h2); color: var(--accent-2); margin-left: 1px; }
.stat__label { font-size: var(--fs-body-sm); color: var(--text-muted); margin-top: var(--space-4); line-height: var(--lh-snug); }
.cred__note { margin-top: var(--space-7); max-width: 640px; margin-inline: auto; text-align: center; }

/* ---------------------------------------------------- PLATFORM -------------
   Roadmap list sits inside a subtle surface card so the section reads as
   intentional rather than floating in empty horizontal space. */
.platform { align-items: center; gap: var(--space-7); }
.platform__honest { font-size: var(--fs-body-sm); color: var(--text-muted); margin-top: var(--space-4); }
.platform__list {
  display: grid; gap: var(--space-4);
  background: var(--surface); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm);
}
.platform__list .feature-row__title { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* ---------------------------------------------------- RESPONSIVE ----------- */
@media (max-width: 920px) {
  /* shared hero stacking is handled by the HERO component; Home adds its extras */
  .hero__trust { margin-inline: auto; justify-content: center; }
  .hero__pills { justify-content: center; }
  .loop { width: 340px; }
}
@media (max-width: 480px) {
  /* The absolute side-nodes can push their pill tags past the orbit edge on
     narrow screens. Shrink the whole composition, tuck the side nodes inward,
     and reduce the center so nothing clips. */
  .loop { width: 290px; }
  .loop__center { width: 104px; height: 104px; }
  .loop__avatar { width: 40px; height: 40px; }
  .loop__avatar svg { width: 22px; height: 22px; }
  .loop__center-label { font-size: 0.7rem; }
  .loop__chip { width: 40px; height: 40px; }
  .loop__chip .icon { width: 19px; height: 19px; }
  .loop__tag { font-size: 0.7rem; padding: 2px 8px; }
  .loop__node--2 { left: 86%; }
  .loop__node--4 { left: 14%; }
  .hero__cta .btn { width: 100%; }
}
@media (max-width: 380px) {
  .loop { width: 264px; }
  .loop__node--2 { left: 84%; }
  .loop__node--4 { left: 16%; }
}

/* ---------------------------------------------------- LOOP INTRO -----------
   Home's concise introduction of the weekly loop (the detailed workflow lives
   on How It Works). Four compact items + a handoff CTA. */
.loop-intro { margin-top: var(--space-6); }
.loop-intro__item {
  background: var(--surface); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
}
.loop-intro__title { font-size: var(--fs-h4); margin-top: var(--space-3); }
.loop-intro__text { font-size: var(--fs-body-sm); color: var(--text-body); margin-top: var(--space-2); }
.loop-intro__cta { text-align: center; margin-top: var(--space-5); }

/* ---------------------------------------------------- POLISH RHYTHM --------
   Vary section rhythm so the page reads less evenly-stacked and more premium.
   The difference section is tighter/editorial; section heads sit closer to the
   grids that follow them; the trust grid breaks the centered pattern. */

/* "MrMurse difference": pull intro and cards together, slightly left-bias the
   intro so it does not feel like yet another centered block. */
.diff-head { max-width: 620px; margin-inline: auto; }
.diff-head + .loop-intro { margin-top: var(--space-5); }

/* Tighten the gap between a centered section intro and the grid it introduces. */
.section-head { margin-bottom: var(--space-6); }

/* Trust grid: a touch more left-aligned and editorial than the rest. */
.cred .stat { padding-right: var(--space-3); }

/* Compact the alternating sections a little so blocks feel intentional, not
   detached, while keeping generous (not empty) whitespace. */
.section--tight-top { padding-top: var(--space-7); }

/* ---------------------------------------------------- EXAM CARD BADGES -----
   "Who we help" cards carry a small availability badge beside the exam tag.
   The exam title stays the primary element; the badge sits balanced on the
   same row using the shared .badge styles. */
.grid--3 .card__head, .grid--4 .card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.grid--3 .card__head .card__tag, .grid--4 .card__head .card__tag { margin-bottom: 0; }
.grid--3 .card__head .badge, .grid--4 .card__head .badge { flex-shrink: 0; }

/* Hero secondary CTA: a touch lighter beside the primary, still a button. */
.hero__cta .btn--secondary { padding-inline: var(--space-4); }
/* Slightly taller hero buttons for presence; both share the same height. */
.hero__cta .btn { min-height: 56px; }