/* ============================================================================
   NurseVerdict — Hub / landing page ("front door" linking all 4 phases)
   Loads AFTER nurseverdict-shared.css and reuses its tokens throughout —
   no new hues, just the existing brand + phase-accent colors already used
   inside the app itself.
   ============================================================================ */
.frame{max-width:1040px;}
body{background:var(--paper);}

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */
.hub-hero{background:var(--maroon); color:#fff; padding:56px 28px 64px; text-align:center; position:relative; overflow:hidden;}
.hub-hero::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% -10%, rgba(255,255,255,.10), transparent 60%); pointer-events:none;}
.hub-mark{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:#E9C9D3; opacity:.9; margin-bottom:18px;}
.hub-hero h1{font-family:var(--font-display); font-size:clamp(2rem,5vw,2.9rem); margin:0 0 14px; font-weight:700; letter-spacing:-.01em;}
.hub-hero p{max-width:560px; margin:0 auto; color:#F3D9E1; font-size:1rem; line-height:1.6;}
.hub-hero-stats{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:30px;}
.hub-hero-stats .chip{background:rgba(255,255,255,.14);}

/* ---------------------------------------------------------------------------
   The journey — four phases as one continuous, numbered path. A connecting
   spine (not decoration: this genuinely is a fixed sequence, each phase
   building on the last) runs behind the cards.
   --------------------------------------------------------------------------- */
.journey{padding:54px 24px 20px; position:relative;}
.journey-head{text-align:center; max-width:640px; margin:0 auto 40px;}
.journey-head .eyebrow{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--maroon-ink); font-weight:700; margin-bottom:10px;}
.journey-head h2{font-family:var(--font-display); font-size:1.6rem; margin:0 0 10px;}
.journey-head p{color:var(--muted); font-size:.92rem; line-height:1.6; margin:0;}

.phase-path{position:relative; max-width:900px; margin:0 auto;}
.phase-path::before{
  content:""; position:absolute; left:29px; top:14px; bottom:14px; width:2px;
  background:repeating-linear-gradient(to bottom, var(--line) 0 8px, transparent 8px 14px);
}
@media (min-width:760px){
  .phase-path::before{ left:50%; transform:translateX(-1px); }
}

.phase-stop{position:relative; display:grid; grid-template-columns:60px 1fr; gap:18px; margin-bottom:22px; align-items:start;}
.phase-num{position:relative; z-index:2; width:60px; height:60px; border-radius:50%; background:var(--panel); border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:1.15rem; color:var(--accent, var(--maroon-ink)); flex-shrink:0;}
.phase-card{background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--accent, var(--maroon-ink)); border-radius:0 12px 12px 0; padding:20px 22px; animation:nv-fade-up .4s var(--ease) both;}
.phase-card .pc-eyebrow{font-family:var(--font-mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.1em; color:var(--accent, var(--maroon-ink)); font-weight:700; margin-bottom:6px;}
.phase-card h3{font-family:var(--font-display); font-size:1.25rem; margin:0 0 8px; color:var(--ink);}
.phase-card p{color:var(--muted); font-size:.88rem; line-height:1.6; margin:0 0 16px;}
.phase-card .pc-tags{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px;}
.phase-card .pc-tags .type-chip{border-color:var(--accent, var(--line)); color:var(--accent, var(--muted));}
.phase-card .pc-go{display:inline-flex; align-items:center; gap:7px; background:var(--accent, var(--maroon)); color:#fff; text-decoration:none; padding:0 20px; min-height:44px; border-radius:24px; font-weight:700; font-size:.85rem; font-family:var(--font-ui);}
.phase-card .pc-go:hover{filter:brightness(0.92);}
.phase-card .pc-go .arrow{transition:transform var(--dur) var(--ease);}
.phase-card .pc-go:hover .arrow{transform:translateX(3px);}

@media (min-width:760px){
  .phase-stop{grid-template-columns:1fr 60px 1fr; gap:0;}
  .phase-num{grid-column:2; justify-self:center;}
  .phase-card{grid-row:1;}
  .phase-stop:nth-child(odd) .phase-card{grid-column:3; border-left:4px solid var(--accent, var(--maroon-ink)); border-radius:0 12px 12px 0; margin-left:20px;}
  .phase-stop:nth-child(even) .phase-card{grid-column:1; border-left:none; border-right:4px solid var(--accent, var(--maroon-ink)); border-radius:12px 0 0 12px; margin-right:20px; text-align:right;}
  .phase-stop:nth-child(even) .pc-tags{justify-content:flex-end;}
}

/* ---------------------------------------------------------------------------
   Footer note
   --------------------------------------------------------------------------- */
.hub-footer{text-align:center; padding:40px 24px 60px; color:var(--muted); font-size:.78rem; line-height:1.7;}
.hub-footer .settings-note{margin-top:6px;}

@media (prefers-reduced-motion: reduce){
  .phase-card{ animation:none; }
}