/* MetricFit Theme — main.css v1.0 */
:root{
  --brand:#80D8D0; --brand-2:#50D0C8; --brand-3:#A8F8F0;
  --ink:#404040; --ink-deep:#0A231D; --accent:#E85828; --paper:#FFFFFF; --muted:#6B7280;
  --line:rgba(64,64,64,.12); --bg:#F7FCFB;
  --r-card:16px; --r-btn:999px;
  --ease:cubic-bezier(0.25, 1, 0.5, 1);
  --font-serif:"Source Serif 4","Source Serif Pro",Georgia,serif;
  --font-sans:"Inter",system-ui,-apple-system,sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--font-sans); color:var(--ink); background:var(--bg); font-size:16px; line-height:1.6; }
img{ max-width:100%; display:block; }
a{ color:var(--brand-2); }
h1,h2,h3,h4,h5,h6{ line-height:1.3; }

/* Topbar */
.topbar{ background:var(--brand); color:#155e56; text-align:center; font-size:.875rem; padding:10px 16px; min-height:44px; }
.topbar a{ color:#155e56; font-weight:700; }

/* Nav */
.nav{ position:sticky; top:0; z-index:50; background:rgba(247,252,251,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav__inner{ max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:24px; padding:14px 24px; }
.nav__logo{ display:flex; align-items:center; text-decoration:none; color:var(--ink); }
.nav__logo-img{ display:block; height:26px; width:auto; }
.nav__links{ display:flex; gap:4px; margin-left:auto; }
.nav__links a{ color:var(--ink); text-decoration:none; font-size:.9375rem; padding:10px 14px; border-radius:8px; transition:all 0.3s var(--ease); min-height:44px; display:inline-flex; align-items:center; }
.nav__links a:hover{ background:var(--brand-3); }
.nav__cta{ margin-left:8px; }
.nav__home{ min-height:44px; padding:0 18px; font-size:.875rem; border-radius:999px; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 28px; border-radius:var(--r-btn); font-weight:700; font-size:1rem; text-decoration:none; border:none; cursor:pointer; transition:all 0.3s var(--ease); white-space:nowrap; font-family:var(--font-sans); }
.btn--accent{ background:var(--accent); color:#fff; }
.btn--ghost{ background:transparent; border:1.5px solid var(--line); color:var(--ink); }
.btn:hover{ transform:translateY(-4px); box-shadow:0 10px 20px rgba(13,44,34,0.05); }

/* Hero */
.hero{ position:relative; min-height:max(620px, 88vh); display:flex; align-items:center; overflow:hidden; background:var(--bg); }
.hero__inner{ position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:48px 24px 64px; display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; width:100%; }
.hero__left{ display:flex; flex-direction:column; }
.hero__label{ font-family:var(--font-serif); font-weight:600; font-size:1.05rem; color:var(--ink); margin-bottom:26px; }
.hero__carousel{ min-height:10em; display:flex; flex-direction:column; justify-content:center; margin-bottom:20px; }
.hc-line{ display:block; font-family:var(--font-serif); font-weight:600; font-size:clamp(1.4rem, 3vw, 2.5rem); line-height:1.5; color:var(--ink); }
.hc-line.hc-b{ margin-top:6px; }
.hc-line em{ font-style:normal; color:var(--accent); }
.hc-cursor{ display:inline-block; width:.5em; height:1.02em; background:var(--brand-2); margin-left:6px; vertical-align:-0.12em; animation:hc-blink .8s steps(1) infinite; }
@keyframes hc-blink{ 50%{ opacity:0; } }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
.hero__trust{ display:flex; gap:22px; flex-wrap:wrap; list-style:none; font-size:.875rem; color:var(--muted); }
.hero__trust li::before{ content:"✓ "; color:var(--brand-2); font-weight:700; }
.hero__bg{ position:absolute; right:-160px; top:-160px; width:560px; height:560px; border-radius:50%; background:radial-gradient(circle at 35% 35%, var(--brand-3), transparent 65%); z-index:0; }
.hero__bg2{ position:absolute; left:-120px; bottom:-200px; width:460px; height:460px; border-radius:50%; background:radial-gradient(circle at 50% 50%, rgba(128,216,208,.25), transparent 65%); z-index:0; }

/* Report Card */
.report-card{ background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:26px; box-shadow:0 24px 60px rgba(13,44,34,.10); transform:rotate(1.5deg); transition:all 0.3s var(--ease); }
.report-card__head{ display:flex; justify-content:center; align-items:center; text-align:center; margin-bottom:18px; }
.report-card__head b{ font-family:var(--font-serif); font-size:1.05rem; }
.report-card__badge{ font-size:.6875rem; background:var(--brand-3); color:#155e56; font-weight:700; padding:4px 12px; border-radius:999px; }
.rc-row{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px dashed var(--line); font-size:.9375rem; }
.rc-row:last-child{ border-bottom:none; }
.rc-row .chip{ color:var(--brand-2); font-weight:700; font-size:.875rem; padding:0 2px; }
.rc-bar{ height:8px; border-radius:999px; background:rgba(64,64,64,.08); overflow:hidden; margin:10px 0 4px; }
.rc-bar i{ display:block; height:100%; width:72%; border-radius:999px; background:linear-gradient(90deg,var(--brand-2),var(--brand)); }
.rc-foot{ font-size:.75rem; color:var(--muted); margin-top:14px; }

/* Sections */
.section{ max-width:1200px; margin:0 auto; padding:88px 24px; }
#why{ padding-top:48px; }
#posts{ padding-top:48px; }
.section--full{ max-width:100%; }
.section__head{ text-align:center; max-width:680px; margin:0 auto 56px; }
.section__head .k{ font-size:.8125rem; letter-spacing:.16em; color:var(--brand-2); font-weight:700; margin-bottom:12px; }
.section__head h1, .section__head h2{ font-family:var(--font-serif); font-weight:600; font-size:clamp(1.75rem,4vw,2.5rem); line-height:1.25; }
.section__head p{ color:var(--muted); margin-top:12px; }

/* Written intro (About / Evidence System pages) */
.prose{ max-width:760px; margin:0 auto 56px; font-size:1rem; line-height:1.85; color:var(--ink); }
.prose p{ margin-bottom:1.4em; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ color:var(--ink-deep); font-weight:700; }

/* WHY editorial list */
.why-list{ max-width:880px; margin:0 auto; }
.why-item{ display:grid; grid-template-columns:100px 1fr; gap:0 32px; padding:32px 0; border-bottom:1px solid var(--line); transition:background 0.3s var(--ease); }
.why-item:first-child{ border-top:1px solid var(--line); }
.why-item:hover{ background:rgba(128,216,208,.04); }
.why-item__num{ font-family:var(--font-serif); font-size:2.8rem; font-weight:700; color:var(--brand-2); line-height:1; }
.why-item__body h3{ font-size:1.125rem; margin-bottom:8px; font-weight:700; }
.why-item__body p{ font-size:.9063rem; color:var(--muted); line-height:1.75; }

/* Evidence band */
.evidence-band{ background:var(--ink-deep); padding:88px 24px; }
.evidence-band .section__head{ margin-bottom:64px; }
.evidence-nums{ display:flex; justify-content:center; max-width:1100px; margin:0 auto; }
.evidence-item{ flex:1; text-align:center; padding:0 24px; position:relative; }
.evidence-item:not(:last-child)::after{ content:""; position:absolute; right:0; top:20%; height:60%; width:1px; background:rgba(255,255,255,.14); }
.evidence-item b{ display:block; font-family:var(--font-serif); font-size:clamp(2.4rem,5vw,3.4rem); font-weight:700; color:var(--accent); line-height:1.1; margin-bottom:8px; }
.evidence-item span{ font-size:.875rem; color:rgba(255,255,255,.62); }

/* Cover flow: infinite scrolling strip of all 21 categories */
.cover-flow{ overflow:hidden; position:relative; margin-top:44px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.cover-flow__track{ display:flex; gap:12px; width:max-content; animation:coverFlow 55s linear infinite; }
.cover-flow:hover .cover-flow__track{ animation-play-state:paused; }
.cover-flow__track span{ white-space:nowrap; font-size:1rem; font-weight:600; color:var(--ink-deep); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:10px 22px; }
@keyframes coverFlow{ to{ transform:translateX(-50%); } }

/* Timeline */
.timeline{ display:flex; max-width:960px; margin:0 auto; position:relative; }
.timeline::before{ content:""; position:absolute; top:22px; left:calc(16.67% + 22px); right:calc(16.67% + 22px); height:2px; background:var(--brand); opacity:.4; }
.tl-step{ flex:1; text-align:center; padding:0 20px; position:relative; }
.tl-step__circle{ width:44px; height:44px; border-radius:50%; background:var(--brand); color:#155e56; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1rem; margin:0 auto 18px; position:relative; z-index:1; }
.tl-step h3{ font-size:1.0625rem; margin-bottom:8px; }
.tl-step p{ font-size:.875rem; color:var(--muted); line-height:1.65; }

/* Posts */
.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.post{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; transition:all 0.3s var(--ease); text-decoration:none; color:var(--ink); display:block; }
.post:hover{ transform:translateY(-4px); }
.post__media{ aspect-ratio:1200/630; background:linear-gradient(135deg,var(--brand-3),var(--brand) 60%,var(--brand-2)); }
.post__media--2{ background:linear-gradient(135deg,#EAF7F1,#D2EFE4 55%,#9EDCC8); }
.post__media--3{ background:linear-gradient(135deg,#FFF1E8,#FFD9C4 55%,#FFB99A); }
.post__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.post__body{ padding:22px; }
.post__meta{ font-size:.75rem; color:var(--muted); margin-bottom:8px; }
.post__meta b{ color:var(--brand-2); }
.post h3{ font-size:1.0625rem; line-height:1.4; margin-bottom:8px; }
.post p{ font-size:.875rem; color:var(--muted); }

/* About + Evidence System pages */
.article-cover{ border-radius:var(--r-card); overflow:hidden; margin-bottom:36px; }
.article-cover img{ width:100%; height:auto; display:block; }
.gate-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:1100px; margin:0 auto; }
.gate{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); padding:24px; }
.gate__num{ font-family:var(--font-serif); font-size:1.5rem; font-weight:700; color:var(--brand-2); margin-bottom:8px; }
.gate h3{ font-size:1rem; margin-bottom:8px; }
.gate p{ font-size:.875rem; color:var(--muted); line-height:1.7; }

/* Footer */
.footer{ background:var(--ink); color:#E8ECEA; }
.footer__inner{ max-width:1200px; margin:0 auto; padding:64px 24px 32px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.4fr; gap:32px; }
.footer h4{ font-size:.9375rem; margin-bottom:14px; color:#fff; }
.footer a{ color:#B9C4C1; text-decoration:none; font-size:.875rem; display:block; padding:6px 0; transition:color 0.3s var(--ease); min-height:32px; }
.footer a:hover{ color:var(--brand); }
.footer__logo-img{ display:block; height:30px; width:auto; margin-bottom:14px; }
.footer__brand p{ font-size:.8125rem; color:#9AA8A4; max-width:24em; }
.footer__email{ display:flex; gap:8px; margin-top:10px; }
.footer__email input{ flex:1; min-height:50px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); border-radius:999px; padding:0 18px; color:#fff; font-size:.875rem; }
.footer__bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:32px; padding-top:24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.75rem; color:#9AA8A4; }

/* Generic page */
.page-content{ max-width:760px; margin:0 auto; padding:48px 24px 80px; }
.page-content--wide{ max-width:1200px; }
.page-content h1{ font-family:var(--font-serif); font-size:clamp(1.75rem,4vw,2.5rem); margin:0 0 24px; }
.page-content h2{ font-family:var(--font-serif); font-size:1.375rem; margin:32px 0 12px; }
.page-content p{ margin-bottom:16px; color:var(--ink); }
.page-content ul,.page-content ol{ margin:0 0 16px 24px; }
.page-content li{ margin-bottom:8px; }

/* Single post */
.single-content{ max-width:720px; margin:0 auto; padding:48px 24px 80px; }
.single-content h1{ font-family:var(--font-serif); font-size:clamp(1.75rem,4vw,2.5rem); margin:0 0 12px; line-height:1.3; }
.single-content .post-meta{ font-size:.8125rem; color:var(--muted); margin-bottom:32px; }
.single-content .post-meta b{ color:var(--brand-2); }
.single-content h2{ font-family:var(--font-serif); font-size:1.375rem; margin:36px 0 14px; }
.single-content p{ margin-bottom:18px; }
.single-content .eeat-refs{ margin-top:40px; border:1px solid var(--line); border-radius:12px; padding:16px 20px; background:var(--paper); }
.single-content .eeat-refs summary{ font-weight:700; cursor:pointer; font-size:.9375rem; }
.single-content .eeat-refs ol{ margin:12px 0 0 20px; font-size:.875rem; color:var(--muted); }
.single-content .eeat-refs li{ margin-bottom:8px; }

/* Responsive */
@media (max-width:1199px){
  .hero__inner{ grid-template-columns:1fr; padding:48px 24px 64px; gap:40px; }
  .report-card{ max-width:560px; margin:0 auto; }
  .evidence-nums{ flex-wrap:wrap; gap:24px; }
  .evidence-item{ flex:1 1 40%; }
  .evidence-item:not(:last-child)::after{ display:none; }
  .footer__inner{ grid-template-columns:1fr 1fr; }
  .diff-grid{ grid-template-columns:repeat(2,1fr); }
  .scenarios{ grid-template-columns:repeat(2,1fr); }
  .gate-grid{ grid-template-columns:repeat(2,1fr); }
  .page-content--wide .posts{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px){
  .nav__links{ display:none; }
  .nav__home{ min-height:40px; padding:0 14px; font-size:.8125rem; }
  .timeline{ flex-direction:column; gap:32px; }
  .timeline::before{ display:none; }
  .scene-cols{ grid-template-columns:1fr; }
  .diff-grid{ grid-template-columns:1fr; }
  .hero__cta .btn{ width:100%; }
  .hero{ min-height:auto; }
  .hero__inner{ padding:40px 20px 56px; }
  .hero__carousel{ min-height:0; }
  .hc-line{ font-size:clamp(1.2rem, 5vw, 1.6rem); }
  .section{ padding:64px 20px; }
  #why, #posts{ padding-top:40px; }
  .evidence-band{ padding:64px 20px; }
  .footer__inner{ grid-template-columns:1fr; }
  .report-card{ transform:none; }
  .gate-grid{ grid-template-columns:1fr; }
  .page-content--wide .posts{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

/* Cookie consent */
.cookie-demo{ background:#fff; border-top:1px solid var(--line); padding:16px 24px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; max-width:1200px; margin:0 auto; }
.cookie-demo p{ font-size:.8125rem; color:var(--muted); flex:1 1 320px; }
.cookie-demo .btn{ min-height:44px; padding:0 20px; font-size:.875rem; }