/* CrelioHealth — Competitors Hub comparison pages
   Shared stylesheet. Load AFTER Bootstrap 4.6 so these rules win.
   Fonts: Libertinus Serif Display (headings) + Inter (body). */

:root{
  --brand:#009600; --brand-hover:#007D00; --brand-bright:#00B141;
  --brand-mid:#00A62C; --brand-deep:#00490A; --brand-ink:#007622;
  --black:#000; --ink:#0E0E0E; --body:#4E4E4E; --muted:#909090; --faint:#A0A0A0;
  --line:#F0F0F0; --line-strong:#E9E9E9; --surface:#F8F8F8; --surface-2:#FBFBFB;
  --mint-50:#F4FAF5; --mint-100:#F1F8F1; --mint-200:#E8F6EB;
  --mint-tile:#E5F4E8; --mint-border:#CBEAD1;
  --dark-card:#1B1D1F;
  --container:1320px;
  --serif:"Libertinus Serif Display", Georgia, serif;
  --sans:"Inter", system-ui, -apple-system, sans-serif;
  --green-deep-card:linear-gradient(180deg,#00490A 0%,#006822 100%);
}

*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none;transition:color .16s cubic-bezier(.4,0,.2,1)}
a:hover{color:var(--brand-hover)}
p{text-wrap:pretty}
h1,h2,h3,h4{margin:0}

/* ---------- Layout ---------- */

.cr-section{padding:100px clamp(20px,4vw,60px)}
.cr-section--faq{padding:60px clamp(20px,4vw,60px) 100px}
.cr-bg-white{background:#fff}
.cr-bg-surface{background:var(--surface)}
.cr-bg-mint{background:var(--mint-50)}
.cr-bg-black{background:var(--black)}
.cr-bg-black-cta{background:var(--green-deep-card)}

/* ---------- Typography ---------- */
.cr-eyebrow{display:inline-block;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
.cr-eyebrow-pill{display:inline-flex;align-items:center;height:32px;padding:0 16px;border-radius:999px;border:1px solid var(--mint-border);background:#fff;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
.cr-eyebrow-pill--dark{border:1px solid rgba(255,255,255,.2);background:transparent;color:var(--brand-bright)}
.cr-display{font-family:var(--serif);font-weight:400;font-size:clamp(38px,5vw,64px);line-height:1.06;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.cr-h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.9vw,48px);line-height:1.1;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.cr-h3{font-size:20px;font-weight:600;color:var(--ink)}
.cr-h4{font-size:18px;font-weight:500;color:var(--ink)}
.cr-lead{font-size:18px;line-height:1.5;color:var(--muted)}
.cr-body{font-size:16px;line-height:1.6;color:var(--body)}
.text-brand{color:var(--brand)}
.cr-on-dark{color:#fff}
.cr-on-dark .cr-h2,.cr-on-dark .cr-h4{color:#fff}
.cr-on-dark .cr-body{color:rgba(255,255,255,.72)}
.cr-on-dark .cr-lead{color:rgba(255,255,255,.6)}

/* ---------- Buttons ---------- */
.cr-btn{display:inline-flex;align-items:center;height:48px;padding:0 28px;border-radius:999px;font-size:15px;font-weight:500;border:1px solid transparent;cursor:pointer;transition:background-color .16s cubic-bezier(.4,0,.2,1),color .16s}
.cr-btn:hover{font-size: 15px;}
.cr-btn--primary{background:var(--brand);color:#fff}
.cr-btn--primary:hover{background:var(--brand-hover);color:#fff}
.cr-btn--secondary{background:var(--mint-200);color:var(--brand)}
.cr-btn--secondary:hover{background:#DCF0E0;color:var(--brand)}
.cr-btn--light{background:#fff;color:var(--ink)}
.cr-btn--light:hover{background:#F0F0F0;color:var(--ink)}
.cr-btn--glass{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff}
.cr-btn--glass:hover{background:rgba(255,255,255,.22);color:#fff}
.cr-btn--nav{height:40px;padding:0 22px;font-size:14px;background:var(--brand);color:#fff}
.cr-btn--nav:hover{background:var(--brand-hover);color:#fff}
.cr-btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* ---------- Nav ---------- */
.cr-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.cr-nav__inner{max-width:var(--container);margin:0 auto;padding:0 clamp(20px,4vw,60px);height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.cr-logo{display:flex;align-items:center;gap:10px}
.cr-logo__word{font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.cr-nav__links{display:flex;align-items:center;gap:30px}
.cr-nav__links a{color:var(--ink);font-size:15px}
.cr-nav__links a:hover{color:var(--brand)}
@media (max-width:991px){.cr-nav__links{display:none}}

/* ---------- Hero ---------- */
.cr-hero{padding:120px 0 60px;background:#fff;overflow:hidden}
.cr-hero .cr-display{max-width:16ch;margin-top:22px}
.cr-hero__note{margin:12px 0 0;font-size:16px;color:var(--muted)}
.cr-hero__dek{margin:18px 0 0;font-size:clamp(18px,1.8vw,21px);line-height:1.4;color:var(--ink);max-width:42ch;font-weight:500}
.cr-hero__desc{margin:20px 0 0;font-size:16px;line-height:1.6;color:var(--body);max-width:58ch}
.cr-hero__media{position:relative}
.cr-hero__glow{position:absolute;inset:-12% -8%;background:radial-gradient(58% 54% at 55% 55%,rgba(0,150,0,.22),transparent 70%);pointer-events:none}
.cr-hero__frame{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.10);border:1px solid var(--line);background:var(--surface);aspect-ratio:4/3}
.cr-hero__img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- Stats ---------- */
.cr-stats{margin-top:24px}
.cr-stat{padding:20px 0;border-top:1px solid var(--line)}
.cr-stat__num{font-family:var(--serif);font-size:clamp(34px,4vw,40px);line-height:1;color:var(--brand)}
.cr-stat__label{margin-top:8px;font-size:14px;color:var(--muted)}

/* ---------- Comparison table ---------- */
.cr-cmp{margin-top:40px;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#fff}
.cr-cmp--mint{border-color:var(--line-strong)}
.cr-cmp__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cr-cmp__grid{min-width:820px}
.cr-cmp__head,.cr-cmp__row{display:grid;grid-template-columns:1.2fr 1fr 1fr}
.cr-cmp__row{border-top:1px solid var(--line)}
.cr-cell{padding:18px 22px;font-size:15px;color:var(--body)}
.cr-cell--headlabel{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cr-cell--label{font-weight:500;color:var(--ink);text-transform: capitalize;}
.cr-cell--crelio{background:var(--mint-50);color:var(--ink)}
.cr-cell--crelio-strong{font-weight:500}
.cr-cell--muted{color:var(--muted)}
.cr-cell--head-crelio{background:var(--green-deep-card);color:#fff;font-size:16px;font-weight:600}
.cr-cell--head-comp{background:var(--surface);color:var(--ink);font-size:16px;font-weight:600}
.cr-cmp__group{padding:14px 22px;background:var(--mint-100);border-top:1px solid var(--line-strong);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-ink)}

/* ---------- Notes / callouts ---------- */
.cr-note{margin-top:32px;display:flex;gap:16px;padding:24px 28px;border-radius:16px}
.cr-note--mint{background:var(--mint-100);border:1px solid var(--mint-border)}
.cr-note--mint .cr-note__label{color:var(--brand-ink)}
.cr-note--surface{background:var(--surface);border:1px solid var(--line)}
.cr-note--surface .cr-note__label{color:var(--ink)}
.cr-note--green{margin-top:16px;padding:28px 32px;background:var(--green-deep-card)}
.cr-note--green .cr-note__label{color:#fff}
.cr-note--green .cr-note__text{color:rgba(255,255,255,.9);font-size:16px}
.cr-note__label{flex:0 0 auto;font-weight:600}
.cr-note__text{margin:0;font-size:15px;line-height:1.6;color:var(--body)}

/* ---------- Fit guide ---------- */
.cr-fit-card{height:100%;border:1px solid var(--line);border-radius:16px;padding:32px;background:#fff}
.cr-fit-card--surface{background:var(--surface)}
.cr-fit-card .cr-h3{margin-bottom:20px}
.cr-check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.cr-check{display:flex;gap:12px;font-size:15px;line-height:1.5;color:var(--body)}
.cr-check__mark{flex:0 0 auto;color:var(--brand);font-weight:700}
.cr-check__mark--muted{color:var(--muted)}

/* ---------- Why (dark cards) ---------- */
.cr-card-dark{height:100%;background:var(--dark-card);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:28px}
.cr-card-dark .cr-h4{margin-bottom:8px}
.cr-icon-tile{width:44px;height:44px;border-radius:10px;background:rgba(0,177,65,.14);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.cr-why__intro{margin-top:20px}

/* ---------- Horizon seam ---------- */
.cr-horizon{height:180px;background:linear-gradient(180deg,#000 0%,#003110 22%,#00561A 34%,#009F2B 46%,#60C177 62%,#C3E5CC 80%,#FFFFFF 100%)}

/* ---------- FAQ ---------- */
.cr-faq{max-width:900px;margin:0 auto}
.cr-faq__list{margin-top:32px;border-top:1px solid var(--line)}
.cr-faq__item{border-bottom:1px solid var(--line)}
.cr-faq__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:none;padding:22px 0;text-align:left;cursor:pointer;font-family:var(--sans)}
.cr-faq__q > span:first-child{font-size:17px;font-weight:500;color:var(--ink)}
.cr-faq__icon{flex:0 0 auto;font-size:22px;line-height:1;color:var(--brand)}
.cr-faq__icon::after{content:"+"}
.cr-faq__item.is-open .cr-faq__icon::after{content:"\2013"}
.cr-faq__a{margin:0;padding:0 0 24px;font-size:15px;line-height:1.65;color:var(--body);display:none}
.cr-faq__item.is-open .cr-faq__a{display:block}

/* ---------- CTA ---------- */
.cr-cta{text-align:center}
.cr-cta .cr-display{color:#fff;font-size:clamp(32px,4.4vw,56px);line-height:1.1;letter-spacing:-.01em;max-width:none}
.cr-cta__sub{margin:20px auto 0;font-size:17px;line-height:1.6;color:rgba(255,255,255,.72);max-width:62ch}
.cr-cta__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:36px}
.cr-cta__inner{max-width:820px;margin:0 auto}

/* ---------- Footer ---------- */
.cr-footer{background:#fff;border-top:1px solid var(--line-strong);padding:48px clamp(20px,4vw,60px)}
.cr-footer__top{max-width:var(--container);margin:0 auto;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
.cr-footer__meta{font-size:14px;color:var(--muted)}
.cr-footer__legal{max-width:var(--container);margin:24px auto 0;padding-top:20px;border-top:1px solid var(--line-strong);font-size:13px;color:var(--faint)}

/* ---------- Section headers helper ---------- */
.cr-sec-head .cr-h2{margin-top:14px}
.cr-sec-head .cr-lead{margin-top:16px;max-width:78ch}

/* ---------- Responsive ---------- */
@media (max-width:991px){
  .cr-section{padding:64px clamp(20px,4vw,60px)}
  .cr-section--faq{padding:48px clamp(20px,4vw,60px) 64px}
}