/* ═══════════════════════════════════════════════════════
   MyLeaderBrand — Shared Stylesheet (consolidated)
════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── TOKENS ────────────────────────────────────────── */
:root {
  --page-bg:       #F4F5F7;
  --surface:       #FFFFFF;
  --surface-mid:   #F8FAFC;
  --border:        rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.14);
  --text-primary:  #0B1220;
  --text-body:     #1E293B;
  --text-muted:    #64748B;
  --text-faint:    #94A3B8;
  --indigo:        #4F46E5;
  --indigo-dark:   #3730A3;
  --indigo-light:  #6366F1;
  --indigo-pale:   #EEF2FF;
  --indigo-border: #C7D2FE;
  --slate:         #334155;
  --slate-dark:    #1E293B;
  --slate-pale:    #F1F5F9;
  --slate-border:  #CBD5E1;
  --gold:          #D97706;
  --gold-pale:     #FFFBEB;
  --gold-border:   #FDE68A;
  --navy:          #0B1220;
  /* Legacy aliases */
  --teal:          #4F46E5;
  --teal-dark:     #3730A3;
  --teal-light:    #6366F1;
  --teal-pale:     #EEF2FF;
  --amber:         #D97706;
  --amber-pale:    #FFFBEB;
  --radius:        8px;
  --radius-lg:     14px;
  --max-line:      65ch;
  --shadow-card:   0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06);
  --shadow-hover:  0 4px 8px rgba(0,0,0,0.06), 0 16px 40px rgba(0,0,0,0.10);
  --shadow-sm:     0 1px 2px rgba(0,0,0,0.05);
}

/* ─── BASE ──────────────────────────────────────────── */
body {
  font-family: 'Inter','Atkinson Hyperlegible',system-ui,sans-serif;
  background: var(--page-bg);
  color: var(--text-body);
  min-height: 100vh;
  overflow-x: hidden;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}


/* ─── LOGO ──────────────────────────────────────────── */
.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.logo-wordmark {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}
.logo-accent { color: #818CF8; }

/* ─── HEADER ────────────────────────────────────────── */
.site-header {
  background: var(--navy);
  padding: 0 40px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 200;
}
.header-nav { display:flex; gap:28px; align-items:center; }
.header-nav a { font-size:0.78rem; font-weight:500; color:rgba(255,255,255,0.5); text-decoration:none; transition:color 0.15s; letter-spacing:0.01em; }
.header-nav a:hover, .header-nav a.active { color:#fff; }

/* ─── FOOTER ────────────────────────────────────────── */
.site-footer { text-align:center; padding:24px 32px; font-size:0.75rem; color:var(--text-faint); border-top:1px solid var(--border); background:var(--surface); }
.site-footer a { color:var(--indigo); text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }

/* ─── BUTTONS ───────────────────────────────────────── */
.btn-primary {
  display:inline-block; background:var(--indigo); color:#fff;
  font-family:inherit; font-size:0.9rem; font-weight:600; letter-spacing:0.02em;
  padding:13px 32px; border:none; border-radius:100px; cursor:pointer;
  transition:background 0.18s, transform 0.15s, box-shadow 0.18s;
  box-shadow:0 2px 8px rgba(79,70,229,0.30); white-space:nowrap;
}
.btn-primary:hover { background:var(--indigo-dark); transform:translateY(-1px); box-shadow:0 4px 16px rgba(79,70,229,0.35); }
.btn-primary:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.btn-primary:disabled { opacity:0.35; cursor:not-allowed; box-shadow:none; transform:none; }

.btn-secondary {
  display:inline-block; background:transparent; border:1.5px solid var(--border-strong);
  border-radius:100px; color:var(--text-muted); font-family:inherit;
  font-size:0.88rem; font-weight:600; padding:11px 26px; cursor:pointer;
  transition:border-color 0.18s, color 0.18s, background 0.18s; white-space:nowrap;
}
.btn-secondary:hover { border-color:var(--indigo); color:var(--indigo); background:var(--indigo-pale); }

/* ─── FORMS ─────────────────────────────────────────── */
.text-group { margin-bottom:22px; }
.text-group label { display:block; font-size:0.83rem; font-weight:600; color:var(--text-primary); margin-bottom:7px; }
.text-group textarea, .text-group input {
  width:100%; background:var(--surface); border:1.5px solid var(--border-strong);
  border-radius:var(--radius); color:var(--text-body); font-family:inherit;
  font-size:0.95rem; padding:12px 14px; resize:vertical; transition:border-color 0.18s, box-shadow 0.18s;
  outline:none; line-height:1.7;
}
.text-group textarea { height:110px; }
.text-group textarea:focus, .text-group input:focus { border-color:var(--indigo); box-shadow:0 0 0 3px rgba(79,70,229,0.12); }
.text-group textarea::placeholder, .text-group input::placeholder { color:var(--text-faint); }

/* ─── CHIPS ─────────────────────────────────────────── */
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.chip { padding:8px 18px; border:1.5px solid var(--border-strong); border-radius:100px; font-size:0.83rem; font-weight:600; cursor:pointer; background:var(--surface); color:var(--text-muted); font-family:inherit; transition:all 0.15s; }
.chip:hover { border-color:var(--indigo); color:var(--indigo); background:var(--indigo-pale); }
.chip.selected { border-color:var(--indigo); background:var(--indigo); color:#fff; }

/* ─── SECTION VISIBILITY ────────────────────────────── */
.page-section { display:none; }
.page-section.active { display:block; }

/* ─── TOOL HERO BAND ────────────────────────────────── */
.tool-hero { padding:48px 48px 36px; position:relative; overflow:hidden; }
.tool-hero::before { content:''; position:absolute; right:-40px; top:-40px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,0.05); }
.tool-hero::after { content:''; position:absolute; right:60px; bottom:-60px; width:140px; height:140px; border-radius:50%; background:rgba(255,255,255,0.03); }
.tool-hero-prog { font-size:0.65rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:6px; position:relative; z-index:1; }
.tool-hero-icon { font-size:2.2rem; margin-bottom:12px; display:block; position:relative; z-index:1; }
.tool-hero h1 { font-family:'DM Serif Display',Georgia,serif; font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:400; color:#ffffff; line-height:1.15; margin-bottom:10px; letter-spacing:-0.025em; position:relative; z-index:1; }
.tool-hero-q { font-size:0.92rem; color:rgba(255,255,255,0.6); line-height:1.65; position:relative; z-index:1; max-width:560px; margin:0; }

/* ─── TOOL INTRO CONTENT ────────────────────────────── */
.tool-intro-content { max-width:680px; padding:36px 48px 52px; }
.tool-intro-content > p { font-size:0.95rem; color:var(--text-muted); line-height:1.8; margin-bottom:20px; }
.framework-note { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 18px; margin-bottom:22px; font-size:0.82rem; color:var(--text-muted); line-height:1.7; box-shadow:var(--shadow-sm); }
.framework-note strong { color:var(--text-primary); }
.process-steps { display:flex; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:28px; box-shadow:var(--shadow-sm); }
.process-step { flex:1; padding:16px 20px; border-right:1px solid var(--border); text-align:center; }
.process-step:last-child { border-right:none; }
.process-step-num { font-family:'DM Serif Display',Georgia,serif; font-size:1.6rem; color:var(--indigo); font-weight:400; line-height:1; margin-bottom:4px; }
.process-step-label { font-size:0.78rem; font-weight:700; color:var(--text-primary); margin-bottom:2px; }
.process-step-sub { font-size:0.7rem; color:var(--text-faint); }

/* ─── PHASE BAR ─────────────────────────────────────── */
.phase-bar { background:#fff; border-bottom:1px solid var(--border); box-shadow:var(--shadow-sm); padding:16px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; position:sticky; top:58px; z-index:50; }
.phase-eyebrow { font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:700; color:var(--indigo); margin-bottom:1px; }
.phase-title { font-family:'DM Serif Display',Georgia,serif; font-size:1.05rem; color:var(--text-primary); font-weight:400; }
.phase-steps { display:flex; gap:5px; align-items:center; }
.phase-dot { width:26px; height:26px; border-radius:50%; border:2px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-size:0.68rem; font-weight:700; color:var(--text-faint); background:var(--page-bg); transition:all 0.3s; }
.phase-dot.active { background:var(--indigo-pale); border-color:var(--indigo); color:var(--indigo); }
.phase-dot.done { background:var(--indigo); border-color:var(--indigo); color:#fff; }
.phase-line { width:16px; height:2px; background:var(--border); border-radius:1px; }
.phase-line.done { background:var(--indigo); }
.prog-pill { background:var(--indigo); color:#fff; font-weight:700; font-size:0.85rem; padding:5px 14px; border-radius:100px; transition:background 0.3s; white-space:nowrap; }
.prog-pill.warn { background:var(--gold); }
.prog-pill.good { background:var(--indigo-dark); }
.counter-pill { background:var(--indigo); color:#fff; font-weight:700; font-size:0.85rem; padding:5px 14px; border-radius:100px; transition:background 0.3s; white-space:nowrap; min-width:80px; text-align:center; }
.counter-pill.warning { background:var(--gold); }
.counter-pill.success { background:var(--indigo-dark); }

/* ─── TOOL LAYOUT ───────────────────────────────────── */
.tool-layout { display:flex; min-height:calc(100vh - 120px); }
.content-area { flex:1; padding:32px 44px; max-width:900px; }
.action-bar, .action-row { display:flex; align-items:center; gap:12px; padding-top:20px; border-top:1px solid var(--border); flex-wrap:wrap; }
.action-hint { font-size:0.8rem; color:var(--text-faint); font-style:italic; }
.instr-banner, .instruction-banner { background:#FFFBEB; border:1.5px solid var(--gold-border); border-radius:var(--radius); padding:12px 16px; margin-bottom:24px; display:flex; gap:10px; align-items:flex-start; }
.instr-banner .icon, .instruction-banner .icon { font-size:1.1rem; flex-shrink:0; margin-top:1px; }
.instr-banner p, .instruction-banner p { font-size:0.83rem; color:#92400E; font-weight:700; line-height:1.55; margin:0; }

/* ─── RESULTS (shared) ──────────────────────────────── */
.results-eyebrow { font-size:0.68rem; letter-spacing:0.14em; color:var(--indigo); text-transform:uppercase; font-weight:700; margin-bottom:10px; }
.results-title { font-family:'DM Serif Display',Georgia,serif; font-size:clamp(1.7rem,4vw,2.6rem); font-weight:400; color:var(--text-primary); margin-bottom:36px; line-height:1.15; letter-spacing:-0.02em; }
.results-page { padding:56px 44px 72px; max-width:860px; margin:0 auto; }
.results-grid, .results-2col { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.result-block { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px 24px; box-shadow:var(--shadow-sm); }
.result-block-title { font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--indigo); font-weight:700; margin-bottom:12px; }
.result-block-content { font-size:0.9rem; color:var(--text-body); line-height:1.75; }
.result-block-content ul { padding-left:16px; }
.result-block-content li { margin-bottom:7px; }
.results-divider { height:1px; background:var(--border); margin:32px 0; }
.results-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.insight-card { background:var(--indigo-pale); border-left:5px solid var(--indigo); border-radius:0 var(--radius-lg) var(--radius-lg) 0; padding:24px 28px; margin-bottom:20px; }
.insight-label, .insight-card-label { font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:700; color:var(--indigo); margin-bottom:10px; }
.insight-text, .insight-card-text { font-size:0.92rem; color:var(--text-body); line-height:1.85; }
.insight-text p, .insight-card-text p { margin-bottom:10px; }
.insight-text p:last-child, .insight-card-text p:last-child { margin-bottom:0; }
.amber-block, .result-block-full { background:var(--gold-pale); border:1px solid var(--gold-border); border-radius:var(--radius-lg); padding:22px 24px; margin-bottom:16px; box-shadow:var(--shadow-sm); }
.amber-block .result-block-title, .result-block-full .result-block-title { color:var(--gold); }
.result-block-full .result-block-content { font-style:italic; }

/* ─── LOADING ────────────────────────────────────────── */
.loading-state { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:60vh; gap:24px; }
.loading-ring { width:52px; height:52px; border:3px solid var(--border); border-top-color:var(--indigo); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-text { font-size:0.95rem; color:var(--text-muted); font-weight:600; text-align:center; }
.loading-sub { font-size:0.82rem; color:var(--text-faint); margin-top:4px; }
.loading-ring-wrap { width:52px; height:52px; }

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width:768px) {
  .site-header { padding:0 16px; height:52px; }
  .header-nav { display:none; }
  .results-grid, .results-2col { grid-template-columns:1fr; }
  .content-area { padding:20px 18px; }
  .tool-intro-content { padding:24px 20px 40px; }
  .tool-hero { padding:32px 20px 28px; }
  .results-page { padding:28px 16px 56px; }
  .process-steps { flex-direction:column; }
  .process-step { border-right:none; border-bottom:1px solid var(--border); }
  .process-step:last-child { border-bottom:none; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { transition:none !important; animation:none !important; } }