/* ═══════════════════════════════════════════════════
   DERMAPROTOCOL — Design System v2
   Clinical Editorial · Evidence-Based · Premium Trust
   ═══════════════════════════════════════════════════ */

/* ─── TOKENS ─── */
:root {
  --bg:#FAFBF8;--bg-warm:#F3F4F0;--bg-card:#FFFFFF;--bg-card-hover:#FDFDFC;
  --bg-muted:#EEEDEA;--bg-accent:#E8F0E8;--bg-dark:#161A16;--bg-hero:#F5F6F2;
  --text:#1A1D1A;--text-secondary:#4A4D48;--text-muted:#7A7D76;--text-light:#A8AAA4;--text-inverse:#F0F1EC;
  --border:#D4D5D0;--border-light:#E6E7E3;--border-focus:#5E9470;
  --accent:#3D7A52;--accent-light:#5A9A6E;--accent-wash:rgba(61,122,82,0.06);--accent-hover:#2E6640;
  --gold:#A68A30;--gold-wash:rgba(166,138,48,0.06);
  --caution:#B86420;--caution-wash:rgba(184,100,32,0.05);--caution-border:#DDB88A;
  --info:#3A6A94;--info-wash:rgba(58,106,148,0.05);--info-border:#94B8D4;
  --danger:#A84040;--danger-wash:rgba(168,64,64,0.05);
  --evidence-strong:#3D7A52;--evidence-moderate:#A68A30;--evidence-limited:#B86420;--evidence-emerging:#7A6AB0;
  --evidence-strong-wash:rgba(61,122,82,0.08);--evidence-moderate-wash:rgba(166,138,48,0.08);
  --evidence-limited-wash:rgba(184,100,32,0.06);--evidence-emerging-wash:rgba(122,106,176,0.08);
  --green:#3D7A52;--amber:#A68A30;--bg-secondary:var(--bg-muted);--tip-border:#94CCA4;
  --font-display:'Newsreader','Georgia',serif;--font-body:'DM Sans',-apple-system,'Segoe UI',sans-serif;--font-mono:'IBM Plex Mono','Menlo',monospace;
  --fs-xs:0.75rem;--fs-sm:0.875rem;--fs-base:1rem;--fs-md:1.125rem;--fs-lg:1.3rem;
  --fs-xl:1.75rem;--fs-2xl:2.5rem;--fs-3xl:3.25rem;--fs-hero:clamp(2.75rem,5.5vw,4.25rem);
  --sp-1:0.25rem;--sp-2:0.5rem;--sp-3:0.75rem;--sp-4:1rem;--sp-5:1.25rem;--sp-6:1.5rem;
  --sp-8:2rem;--sp-10:2.5rem;--sp-12:3rem;--sp-16:4rem;--sp-20:5rem;--sp-24:6rem;--sp-32:8rem;--sp-40:10rem;
  --r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:20px;--r-full:100px;--radius-md:var(--r-md);--radius-sm:var(--r-sm);
  --shadow-xs:0 1px 2px rgba(26,29,26,0.03);--shadow-sm:0 1px 3px rgba(26,29,26,0.05),0 1px 2px rgba(26,29,26,0.03);
  --shadow-md:0 4px 14px rgba(26,29,26,0.06),0 2px 4px rgba(26,29,26,0.03);
  --shadow-lg:0 10px 30px rgba(26,29,26,0.08),0 4px 8px rgba(26,29,26,0.03);--shadow-xl:0 20px 50px rgba(26,29,26,0.1);
  --ease:cubic-bezier(0.25,0.46,0.45,0.94);--ease-out:cubic-bezier(0.16,1,0.3,1);
  --nav-bg:rgba(250,251,248,0.92);--mobile-nav-bg:rgba(250,251,248,0.97);
  color-scheme:light dark;
}

/* ─── DARK MODE ─── */
[data-theme="dark"]{
  --bg:#111411;--bg-warm:#181B18;--bg-card:#1C1F1C;--bg-card-hover:#222522;
  --bg-muted:#222522;--bg-accent:#1A2A1E;--bg-dark:#0A0C0A;--bg-hero:#141714;
  --text:#E4E6E2;--text-secondary:#A8AAA4;--text-muted:#6A6D66;--text-light:#4A4D46;--text-inverse:#E4E6E2;
  --border:#2A2D2A;--border-light:#222522;--border-focus:#5E9470;
  --accent:#6CB07E;--accent-light:#82C494;--accent-wash:rgba(108,176,126,0.08);--accent-hover:#84CC96;
  --gold:#D0B04E;--gold-wash:rgba(208,176,78,0.08);
  --caution:#D48A3A;--caution-wash:rgba(212,138,58,0.06);--caution-border:#5A3A1A;
  --info:#6A9AC4;--info-wash:rgba(106,154,196,0.06);--info-border:#2A4A60;
  --danger:#CC6060;--danger-wash:rgba(204,96,96,0.06);
  --evidence-strong:#6CB07E;--evidence-moderate:#D0B04E;--evidence-limited:#D48A3A;--evidence-emerging:#9A8ACC;
  --evidence-strong-wash:rgba(108,176,126,0.1);--evidence-moderate-wash:rgba(208,176,78,0.08);
  --evidence-limited-wash:rgba(212,138,58,0.06);--evidence-emerging-wash:rgba(154,138,204,0.08);
  --green:#6CB07E;--amber:#D0B04E;--bg-secondary:#222522;--tip-border:#2A5A34;
  --shadow-xs:0 1px 2px rgba(0,0,0,0.15);--shadow-sm:0 1px 3px rgba(0,0,0,0.2);
  --shadow-md:0 4px 14px rgba(0,0,0,0.25);--shadow-lg:0 10px 30px rgba(0,0,0,0.3);--shadow-xl:0 20px 50px rgba(0,0,0,0.35);
  --nav-bg:rgba(17,20,17,0.92);--mobile-nav-bg:rgba(17,20,17,0.97);
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#111411;--bg-warm:#181B18;--bg-card:#1C1F1C;--bg-card-hover:#222522;
  --bg-muted:#222522;--bg-accent:#1A2A1E;--bg-dark:#0A0C0A;--bg-hero:#141714;
  --text:#E4E6E2;--text-secondary:#A8AAA4;--text-muted:#6A6D66;--text-light:#4A4D46;--text-inverse:#E4E6E2;
  --border:#2A2D2A;--border-light:#222522;--accent:#6CB07E;--accent-light:#82C494;
  --accent-wash:rgba(108,176,126,0.08);--accent-hover:#84CC96;
  --gold:#D0B04E;--gold-wash:rgba(208,176,78,0.08);
  --caution:#D48A3A;--caution-wash:rgba(212,138,58,0.06);--caution-border:#5A3A1A;
  --info:#6A9AC4;--info-wash:rgba(106,154,196,0.06);--info-border:#2A4A60;
  --evidence-strong:#6CB07E;--evidence-moderate:#D0B04E;--evidence-limited:#D48A3A;--evidence-emerging:#9A8ACC;
  --evidence-strong-wash:rgba(108,176,126,0.1);--evidence-moderate-wash:rgba(208,176,78,0.08);
  --evidence-limited-wash:rgba(212,138,58,0.06);--evidence-emerging-wash:rgba(154,138,204,0.08);
  --green:#6CB07E;--amber:#D0B04E;--bg-secondary:#222522;--tip-border:#2A5A34;
  --shadow-xs:0 1px 2px rgba(0,0,0,0.15);--shadow-sm:0 1px 3px rgba(0,0,0,0.2);
  --shadow-md:0 4px 14px rgba(0,0,0,0.25);--shadow-lg:0 10px 30px rgba(0,0,0,0.3);--shadow-xl:0 20px 50px rgba(0,0,0,0.35);
  --nav-bg:rgba(17,20,17,0.92);--mobile-nav-bg:rgba(17,20,17,0.97);
}}

/* ─── RESET ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden}
a{color:inherit;text-decoration:none}ul,ol{list-style:none}img{max-width:100%;display:block}strong{font-weight:600}em{font-style:italic}

/* ─── LAYOUT ─── */
.container{max-width:1120px;margin:0 auto;padding:0 var(--sp-6)}
.container--narrow{max-width:740px;margin:0 auto;padding:0 var(--sp-6)}

/* ─── TYPOGRAPHY ─── */
.display{font-family:var(--font-display);font-weight:500;color:var(--text);line-height:1.15;letter-spacing:-0.02em}
.display--lg{font-size:var(--fs-hero)}.display--md{font-size:var(--fs-2xl)}.display--sm{font-size:var(--fs-xl)}
.heading--md{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:500}
.heading--sm{font-size:var(--fs-md);font-weight:600}
.body{font-size:var(--fs-base);color:var(--text-secondary);line-height:1.7}
.body--lg{font-size:var(--fs-md);color:var(--text-secondary);line-height:1.75;max-width:600px}
.body--sm{font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.6}
.label{font-family:var(--font-mono);font-size:0.7rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent)}

/* ─── BUTTONS ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:0.7rem 1.5rem;font-family:var(--font-body);font-size:var(--fs-sm);font-weight:600;border-radius:var(--r-full);border:1.5px solid transparent;cursor:pointer;transition:all 0.25s var(--ease);line-height:1.2;text-decoration:none}
.btn--ghost{background:none;border:none;color:var(--accent);font-weight:600;padding:0;font-size:var(--fs-sm)}.btn--ghost:hover{color:var(--accent-hover)}

/* ─── CARDS ─── */
.card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--r-xl);padding:var(--sp-8);transition:all 0.3s var(--ease)}
.card:hover{box-shadow:var(--shadow-md);border-color:var(--border)}
.card--interactive{cursor:pointer}.card--interactive:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}

/* ─── BADGES ─── */
.badge{display:inline-flex;align-items:center;gap:var(--sp-1);padding:0.3rem 0.65rem;font-family:var(--font-mono);font-size:0.68rem;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;border-radius:var(--r-full);line-height:1}
.badge--accent{background:var(--accent-wash);color:var(--accent)}.badge--gold{background:var(--gold-wash);color:var(--gold)}
.badge--caution{background:var(--caution-wash);color:var(--caution)}.badge--info{background:var(--info-wash);color:var(--info)}
.badge--neutral{background:var(--bg-muted);color:var(--text-muted)}
.badge--evidence-strong{background:var(--evidence-strong-wash);color:var(--evidence-strong)}
.badge--evidence-moderate{background:var(--evidence-moderate-wash);color:var(--evidence-moderate)}
.badge--evidence-limited{background:var(--evidence-limited-wash);color:var(--evidence-limited)}

/* ─── ALERTS ─── */
.alert{padding:var(--sp-5) var(--sp-6);border-radius:var(--r-lg);font-size:var(--fs-sm);line-height:1.65;border:1px solid}
.alert--info{background:var(--info-wash);border-color:var(--info-border);color:var(--info)}
.alert--caution{background:var(--caution-wash);border-color:var(--caution-border);color:var(--caution)}
.alert--tip{background:var(--accent-wash);border-color:var(--tip-border);color:var(--accent)}
.alert__title{font-weight:600;margin-bottom:var(--sp-1)}

/* ─── SECTIONS ─── */
.section{padding:var(--sp-24) 0}.section--sm{padding:var(--sp-16) 0}.section--lg{padding:var(--sp-32) 0}
.section__header{margin-bottom:var(--sp-10)}.section__header .label{margin-bottom:var(--sp-3);display:block}
.section__header .display{margin-bottom:var(--sp-4)}.section__header .body{max-width:600px}
.grid{display:grid;gap:var(--sp-6)}.grid--2{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid--3{grid-template-columns:repeat(2,1fr)}.grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

/* ═══ NAV ═══ */
.nav{position:sticky;top:0;z-index:100;background:var(--nav-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border-light)}
.nav__inner{max-width:1120px;margin:0 auto;padding:0 var(--sp-6);display:flex;align-items:center;justify-content:space-between;height:64px}
.nav__logo{display:flex;align-items:center;gap:var(--sp-3);font-family:var(--font-display);font-size:1.15rem;font-weight:500;color:var(--text);letter-spacing:-0.01em}
.nav__logo svg{width:22px;height:28px;flex-shrink:0;color:var(--accent)}
.nav__links{display:flex;align-items:center;gap:var(--sp-1)}
.nav__link{padding:0.4rem 0.65rem;font-size:var(--fs-xs);font-weight:500;color:var(--text-muted);border-radius:var(--r-md);transition:color 0.2s,background 0.2s;white-space:nowrap}
.nav__link:hover{color:var(--text);background:var(--bg-muted)}.nav__link--active{color:var(--accent);font-weight:600}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:var(--sp-2)}
.nav__burger span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:0.3s}
.mobile-nav{display:none;position:fixed;inset:0;z-index:99;background:var(--mobile-nav-bg);backdrop-filter:blur(30px);flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-8);opacity:0;pointer-events:none;transition:opacity 0.3s var(--ease)}
.mobile-nav.active{opacity:1;pointer-events:all}
.mobile-nav__link{font-family:var(--font-display);font-size:var(--fs-xl);color:var(--text-secondary);transition:color 0.2s}.mobile-nav__link:hover{color:var(--accent)}
@media(max-width:900px){.nav__links{display:none}.nav__burger{display:flex}.mobile-nav{display:flex}}

/* ═══ HERO ═══ */

/* ═══ GOAL CARDS ═══ */
.goal-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--r-xl);padding:var(--sp-8);text-align:left;transition:all 0.3s var(--ease);cursor:pointer;text-decoration:none;display:block}
.goal-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.goal-card__icon{width:44px;height:44px;background:var(--accent-wash);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:var(--sp-5)}
.goal-card__title{font-weight:600;font-size:var(--fs-base);color:var(--text);margin-bottom:var(--sp-2)}
.goal-card__desc{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.55}

/* ═══ STEPS ═══ */

/* ═══ INGREDIENT / PROTOCOL CARDS ═══ */
.ingredient-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--r-xl);overflow:hidden;transition:all 0.3s var(--ease);display:block;text-decoration:none}
.ingredient-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:var(--border)}
.ingredient-card__body{padding:var(--sp-8)}
.ingredient-card__category{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--sp-3)}
.ingredient-card__name{font-family:var(--font-display);font-size:var(--fs-xl);color:var(--text);margin-bottom:var(--sp-3);line-height:1.2}
.ingredient-card__summary{font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.65;margin-bottom:var(--sp-5)}
.ingredient-card__meta{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.protocol-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--r-xl);padding:var(--sp-8);transition:all 0.3s var(--ease);display:block;text-decoration:none}
.protocol-card:hover{box-shadow:var(--shadow-md);border-color:var(--border);transform:translateY(-2px)}
.protocol-card__goal{display:inline-block;font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);background:var(--accent-wash);padding:0.25rem 0.6rem;border-radius:var(--r-full);margin-bottom:var(--sp-4)}
.protocol-card__title{font-family:var(--font-display);font-size:var(--fs-xl);color:var(--text);margin-bottom:var(--sp-2)}
.protocol-card__desc{font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.6}

/* ═══ COMPARISON TABLE ═══ */
.comparison-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--r-xl);overflow:hidden}
.comparison-table th{text-align:left;padding:var(--sp-4) var(--sp-6);font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);background:var(--bg-muted);border-bottom:1px solid var(--border-light)}
.comparison-table td{padding:var(--sp-4) var(--sp-6);font-size:var(--fs-sm);color:var(--text-secondary);border-bottom:1px solid var(--border-light);vertical-align:top}
.comparison-table tr:last-child td{border-bottom:none}
.comparison-table td:first-child{font-weight:500;color:var(--text);white-space:nowrap}

/* ═══ DETAIL PAGES ═══ */
.detail-hero{padding:var(--sp-20) 0 var(--sp-12);border-bottom:1px solid var(--border-light);background:var(--bg-hero)}
.detail-hero .label{margin-bottom:var(--sp-4)}.detail-hero .display{margin-bottom:var(--sp-4)}
.detail-content{padding:var(--sp-16) 0}
.detail-section{margin-bottom:var(--sp-12)}
.detail-section__title{font-family:var(--font-body);font-weight:600;font-size:var(--fs-md);color:var(--text);margin-bottom:var(--sp-5);padding-bottom:var(--sp-3);border-bottom:1px solid var(--border-light)}
.detail-section__body{font-size:var(--fs-base);color:var(--text-secondary);line-height:1.8}
.detail-section__body p{margin-bottom:var(--sp-5)}.detail-section__body ul{padding-left:var(--sp-6);margin-bottom:var(--sp-5)}
.detail-section__body li{margin-bottom:var(--sp-3);list-style:disc;color:var(--text-secondary);line-height:1.7}

/* ═══ ROUTINE BUILDER ═══ */
.builder-goal{padding:var(--sp-5) var(--sp-6);background:var(--bg-card);border:2px solid var(--border-light);border-radius:var(--r-xl);cursor:pointer;transition:all 0.25s var(--ease);text-align:center}
.builder-goal:hover{border-color:var(--accent)}.builder-goal.active{border-color:var(--accent);background:var(--accent-wash)}
.builder-goal__name{font-weight:600;font-size:var(--fs-sm);color:var(--text)}
.routine-block{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--r-xl);overflow:hidden;margin-bottom:var(--sp-6)}
.routine-block__header{padding:var(--sp-4) var(--sp-6);background:var(--bg-muted);border-bottom:1px solid var(--border-light);font-weight:600;font-size:var(--fs-sm);display:flex;align-items:center;gap:var(--sp-3)}
.routine-block__body{padding:var(--sp-6)}
.routine-step{display:flex;gap:var(--sp-4);padding:var(--sp-3) 0;border-bottom:1px solid var(--border-light)}.routine-step:last-child{border-bottom:none}
.routine-step__order{flex-shrink:0;width:30px;height:30px;background:var(--accent-wash);color:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600}
.routine-step__name{font-weight:500;font-size:var(--fs-sm);color:var(--text)}.routine-step__detail{font-size:var(--fs-xs);color:var(--text-muted);margin-top:2px}

/* ═══ STACK CHECKER ═══ */
.checker-input{display:flex;flex-wrap:wrap;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);min-height:56px;align-items:center;position:relative}
.checker-tag{display:inline-flex;align-items:center;gap:var(--sp-2);padding:0.35rem 0.8rem;background:var(--accent-wash);color:var(--accent);font-size:var(--fs-sm);font-weight:500;border-radius:var(--r-full)}
.checker-tag__remove{background:none;border:none;color:inherit;font-size:1rem;cursor:pointer;padding:0;line-height:1;opacity:0.5}.checker-tag__remove:hover{opacity:1}
.checker-text-input{border:none;outline:none;font-family:var(--font-body);font-size:var(--fs-sm);background:transparent;color:var(--text);flex:1;min-width:120px}
.checker-text-input::placeholder{color:var(--text-light)}
.checker-result{padding:var(--sp-5) var(--sp-6);border-radius:var(--r-lg);margin-bottom:var(--sp-4);border-left:3px solid}
.checker-result--redundancy{background:var(--gold-wash);border-color:var(--gold)}.checker-result--tip{background:var(--accent-wash);border-color:var(--accent)}
.checker-result--synergy{border-left:3px solid var(--green);background:rgba(108,176,126,0.05)}
.checker-result--synergy .checker-result__type{color:var(--green);text-transform:uppercase;font-size:0.68rem;letter-spacing:0.05em;font-weight:600}
.checker-result__type{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:var(--sp-1)}
.checker-result__text{font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.65}
.checker-suggestions{position:absolute;left:0;right:0;top:100%;background:var(--bg-card);border:1px solid var(--border);border-radius:0 0 var(--r-lg) var(--r-lg);z-index:10;max-height:240px;overflow-y:auto;box-shadow:var(--shadow-md)}
.checker-suggestion{padding:var(--sp-3) var(--sp-5);cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-sm);color:var(--text-secondary);transition:background 0.15s}
.checker-suggestion:hover{background:var(--bg-muted)}
.checker-suggestion__cat{font-size:0.65rem;text-transform:uppercase;letter-spacing:0.05em;padding:2px 8px;border-radius:var(--r-sm);background:var(--bg-muted);color:var(--text-muted)}
.checker-suggestion__cat--supp{background:rgba(108,176,126,0.1);color:var(--green)}

/* ═══ DISCLAIMER ═══ */
.disclaimer{background:var(--bg-muted);border-radius:var(--r-xl);padding:var(--sp-10);text-align:center}
.disclaimer__title{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--sp-3)}
.disclaimer__text{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.7;max-width:600px;margin:0 auto}

/* ═══ FOOTER ═══ */
.footer{background:var(--bg-dark);color:var(--text-inverse);padding:var(--sp-20) 0 var(--sp-12)}
[data-theme="dark"] .footer{background:#0A0C0A}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .footer{background:#0A0C0A}}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--sp-12);margin-bottom:var(--sp-16)}
.footer__brand-name{font-family:var(--font-display);font-size:var(--fs-lg);margin-bottom:var(--sp-3)}
.footer__brand-desc{font-size:var(--fs-sm);color:rgba(240,241,236,0.6);line-height:1.6;max-width:280px}
.footer__col h4{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:0.08em;text-transform:uppercase;color:rgba(240,241,236,0.4);margin-bottom:var(--sp-5)}
.footer__col a{display:block;font-size:var(--fs-sm);color:rgba(240,241,236,0.65);margin-bottom:var(--sp-3);transition:color 0.2s}.footer__col a:hover{color:var(--text-inverse)}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;padding-top:var(--sp-8);border-top:1px solid rgba(240,241,236,0.1)}
.footer__bottom p{font-size:var(--fs-xs);color:rgba(240,241,236,0.4)}.footer__disclaimer{max-width:500px;line-height:1.5}
@media(max-width:768px){.footer__grid{grid-template-columns:1fr 1fr;gap:var(--sp-8)}.footer__brand{grid-column:1/-1}.footer__bottom{flex-direction:column;gap:var(--sp-4)}}

/* ═══ ANIMATIONS ═══ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.7s var(--ease-out),transform 0.7s var(--ease-out)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:0.1s}.reveal-d2{transition-delay:0.2s}.reveal-d3{transition-delay:0.3s}.reveal-d4{transition-delay:0.4s}

/* ═══ PROSE ═══ */
.prose{color:var(--text-secondary);line-height:1.85}
.prose h2{font-family:var(--font-display);font-size:var(--fs-xl);color:var(--text);margin:var(--sp-12) 0 var(--sp-5);line-height:1.2}
.prose h3{font-weight:600;font-size:var(--fs-lg);color:var(--text);margin:var(--sp-10) 0 var(--sp-4)}
.prose h4{font-weight:600;font-size:var(--fs-md);color:var(--text);margin:var(--sp-8) 0 var(--sp-3)}
.prose p{margin-bottom:var(--sp-6)}.prose ul,.prose ol{padding-left:var(--sp-6);margin-bottom:var(--sp-6)}
.prose li{margin-bottom:var(--sp-3);list-style:disc;line-height:1.75}.prose ol li{list-style:decimal}
.prose strong{color:var(--text)}.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}.prose a:hover{text-decoration-thickness:2px}

/* ═══ EVIDENCE BAR ═══ */
.evidence-bar{display:inline-flex;align-items:center;gap:var(--sp-3)}
.evidence-bar__blocks{display:flex;gap:3px}
.evidence-bar__block{width:22px;height:10px;border-radius:3px;background:var(--bg-muted);border:1px solid var(--border-light);transition:background 0.2s,border-color 0.2s}
.evidence-bar__block--filled{border-color:transparent}
.evidence-bar__label{font-size:var(--fs-xs);font-weight:600;letter-spacing:0.02em;text-transform:uppercase}
.evidence-bar--strong .evidence-bar__block--filled{background:var(--green)}.evidence-bar--strong .evidence-bar__label{color:var(--green)}
.evidence-bar--moderate .evidence-bar__block--filled{background:var(--amber)}.evidence-bar--moderate .evidence-bar__label{color:var(--amber)}
.evidence-bar--limited .evidence-bar__block--filled{background:#D07030}.evidence-bar--limited .evidence-bar__label{color:#D07030}
.evidence-bar--emerging .evidence-bar__block--filled{background:#9070C0}.evidence-bar--emerging .evidence-bar__label{color:#9070C0}
[data-theme="dark"] .evidence-bar--limited .evidence-bar__block--filled{background:var(--caution)}[data-theme="dark"] .evidence-bar--limited .evidence-bar__label{color:var(--caution)}
.evidence-bar--compact .evidence-bar__block{width:16px;height:7px}.evidence-bar--compact .evidence-bar__label{font-size:0.65rem}
@media(max-width:600px){.evidence-bar__block{width:18px;height:8px}}

/* ═══ FEATURED GRID ═══ */
.featured-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp-10)}
.featured-col__header{margin-bottom:var(--sp-6)}.featured-col__header .label{display:block;margin-bottom:var(--sp-2)}
.featured-item{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5) var(--sp-6);background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--r-lg);margin-bottom:var(--sp-3);text-decoration:none;transition:all 0.25s var(--ease)}
.featured-item:hover{border-color:var(--accent);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.featured-item__title{font-family:var(--font-display);font-size:var(--fs-base);font-weight:500;color:var(--text);line-height:1.3}
.featured-item .badge{align-self:flex-start}
@media(max-width:900px){.featured-grid{grid-template-columns:1fr 1fr;gap:var(--sp-8)}}
@media(max-width:600px){.featured-grid{grid-template-columns:1fr;gap:var(--sp-8)}}

/* ═══ THEME TOGGLE ═══ */
.theme-toggle{background:none;border:1px solid var(--border);border-radius:var(--r-full);width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color 0.2s,background 0.2s;flex-shrink:0;color:var(--text-muted)}
.theme-toggle:hover{border-color:var(--accent);background:var(--bg-muted);color:var(--text)}
.theme-toggle svg{width:16px;height:16px}
.theme-toggle__sun{display:none}.theme-toggle__moon{display:block}
[data-theme="dark"] .theme-toggle__sun{display:block}[data-theme="dark"] .theme-toggle__moon{display:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-toggle__sun{display:block}:root:not([data-theme="light"]) .theme-toggle__moon{display:none}}

/* ═══ RESPONSIVE ═══ */
@media(max-width:600px){
  .section{padding:var(--sp-16) 0}.section--lg{padding:var(--sp-20) 0}
  .display--lg{font-size:var(--fs-2xl)}.detail-hero{padding:var(--sp-12) 0 var(--sp-8)}
  .detail-content{padding:var(--sp-10) 0}
  .comparison-table{font-size:var(--fs-xs)}.comparison-table th,.comparison-table td{padding:var(--sp-3) var(--sp-4)}
}

/* ═══════════════════════════════════════════════════

/* ═══════════════════════════════════════════════════
   HOMEPAGE — Condensed dramatic layout
   ═══════════════════════════════════════════════════ */

/* ─── HERO ─── */
.hp-hero{
  background:linear-gradient(170deg,#0C1A10 0%,#142018 40%,#1A2E20 70%,#0E1A12 100%);
  padding:clamp(5rem,10vh,8rem) 0 clamp(4rem,8vh,6rem);text-align:center;
  position:relative;overflow:hidden;
}
.hp-hero::before{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:radial-gradient(ellipse 80% 60% at 50% 30%,rgba(61,122,82,0.12) 0%,transparent 70%);
  pointer-events:none;
}
.hp-hero__inner{max-width:720px;margin:0 auto;padding:0 var(--sp-6);position:relative;z-index:1}
.hp-hero__badge{
  display:inline-block;padding:0.35rem 0.9rem;
  background:rgba(108,176,126,0.12);border:1px solid rgba(108,176,126,0.2);
  border-radius:var(--r-full);font-family:var(--font-mono);font-size:0.68rem;
  font-weight:500;letter-spacing:0.12em;text-transform:uppercase;
  color:#8CCCA0;margin-bottom:var(--sp-6);
}
.hp-hero__title{
  font-family:var(--font-display);font-size:clamp(2.25rem,5.5vw,4rem);
  font-weight:400;line-height:1.08;letter-spacing:-0.03em;
  color:#F0F1EC;margin-bottom:var(--sp-6);
}
.hp-hero__title em{font-style:italic;color:#6CB07E}
.hp-hero__sub{
  font-size:clamp(0.95rem,1.4vw,1.1rem);color:rgba(240,241,236,0.6);
  line-height:1.7;max-width:540px;margin:0 auto var(--sp-8);
}
.hp-hero__actions{display:flex;gap:var(--sp-4);justify-content:center;flex-wrap:wrap;margin-bottom:var(--sp-10)}
.btn--hero{
  padding:0.8rem 2rem;background:#3D7A52;color:#F0F1EC;
  border:1.5px solid #3D7A52;border-radius:var(--r-full);
  font-weight:600;font-size:var(--fs-sm);transition:all 0.25s var(--ease);
}
.btn--hero:hover{background:#2E6640;border-color:#2E6640;transform:translateY(-2px);box-shadow:0 8px 30px rgba(61,122,82,0.3)}
.btn--hero-ghost{
  padding:0.8rem 2rem;background:transparent;
  color:rgba(240,241,236,0.75);border:1.5px solid rgba(240,241,236,0.18);
  border-radius:var(--r-full);font-weight:600;font-size:var(--fs-sm);
  transition:all 0.25s var(--ease);
}
.btn--hero-ghost:hover{border-color:rgba(240,241,236,0.4);color:#F0F1EC}
.hp-hero__stats{
  display:flex;justify-content:center;align-items:center;gap:var(--sp-5);flex-wrap:wrap;
  font-size:var(--fs-xs);color:rgba(240,241,236,0.35);letter-spacing:0.03em;
}
.hp-hero__dot{width:3px;height:3px;border-radius:50%;background:rgba(240,241,236,0.25)}

/* ─── EXPLORE (pillars + tools) ─── */
.hp-explore{padding:var(--sp-16) 0 var(--sp-12)}
.hp-explore__header{text-align:center;max-width:560px;margin:0 auto var(--sp-10)}
.hp-explore__header .label{margin-bottom:var(--sp-3);display:block}
.hp-explore__header .display{margin-bottom:var(--sp-3)}
.hp-explore__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
.hp-pillar{
  display:flex;flex-direction:column;padding:var(--sp-8);
  background:var(--bg-card);border:1px solid var(--border-light);
  border-radius:var(--r-xl);transition:all 0.3s var(--ease);text-decoration:none;
}
.hp-pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.hp-pillar--accent{background:linear-gradient(160deg,var(--bg-card) 0%,rgba(61,122,82,0.04) 100%);border-color:rgba(61,122,82,0.15)}
.hp-pillar__icon{
  width:44px;height:44px;background:var(--accent-wash);border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-5);
}
.hp-pillar__icon svg{width:22px;height:22px;color:var(--accent)}
.hp-pillar__title{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:500;color:var(--text);margin-bottom:var(--sp-2)}
.hp-pillar__desc{font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.65;flex:1;margin-bottom:var(--sp-5)}
.hp-pillar__link{font-size:var(--fs-sm);font-weight:600;color:var(--accent)}
@media(max-width:768px){.hp-explore__grid{grid-template-columns:1fr}}

/* Tool strip */
.hp-explore__tools{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);
  margin-top:var(--sp-8);padding-top:var(--sp-8);border-top:1px solid var(--border-light);
}
.hp-explore__tool{
  display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-4) var(--sp-5);
  border:1px solid var(--border-light);border-radius:var(--r-lg);text-decoration:none;
  transition:all 0.25s var(--ease);
}
.hp-explore__tool:hover{border-color:var(--accent);background:var(--accent-wash)}
.hp-explore__tool strong{font-size:var(--fs-xs);color:var(--text)}
.hp-explore__tool span{font-size:10px;color:var(--text-muted);line-height:1.35}
@media(max-width:900px){.hp-explore__tools{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.hp-explore__tools{grid-template-columns:1fr 1fr}}

/* ─── GOALS ─── */
.hp-goals{padding:var(--sp-16) 0;background:var(--bg-warm)}
[data-theme="dark"] .hp-goals{background:var(--bg-warm)}

/* ─── BROWSE (evidence + featured merged) ─── */
.hp-browse{padding:var(--sp-16) 0}
.hp-browse__evidence{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8);
  padding:var(--sp-6) var(--sp-8);background:var(--bg-card);
  border:1px solid var(--border-light);border-radius:var(--r-xl);
}
.hp-browse__evidence-text h3{font-family:var(--font-display);font-size:var(--fs-md);font-weight:500;color:var(--text);margin-bottom:var(--sp-1)}
.hp-browse__evidence-text p{font-size:var(--fs-sm);color:var(--text-muted)}
.hp-browse__evidence-text a{color:var(--accent);font-weight:600}
.hp-browse__evidence-bars{display:flex;gap:var(--sp-4);flex-shrink:0;flex-wrap:wrap}
@media(max-width:768px){
  .hp-browse__evidence{flex-direction:column;align-items:flex-start;gap:var(--sp-4)}
  .hp-browse__evidence-bars{gap:var(--sp-3)}
}

/* ─── BLOG ─── */
.hp-blog__grid{display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
.hp-blog__item{
  display:flex;align-items:center;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-6);background:var(--bg-card);
  border:1px solid var(--border-light);border-radius:var(--r-lg);
  text-decoration:none;transition:all 0.25s var(--ease);
}
.hp-blog__item:hover{border-color:var(--accent);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.hp-blog__meta{display:flex;gap:var(--sp-2);flex-shrink:0}
.hp-blog__title{font-size:var(--fs-sm);font-weight:500;color:var(--text);line-height:1.35}