/* ==========================================================================
   The Science — four evidence bands, each with the site's research filter

   The page reuses the research pattern care-model.css already defines
   (.cm-research__layout, .rpill, .rcard) rather than inventing a second one,
   so a study card here looks like a study card anywhere else on the site.
   What is page-specific: the hero, the four-up index under it, and turning
   the single research block into four independently filtered bands.

   Loads after home.css, care-model.css and mobile.css, so it wins on ties.
   ========================================================================== */

/* ---------- hero ---------- */
.sci-hero{ background:var(--white); padding:96px 0 64px; text-align:center; }
.sci-hero h1{
  max-width:17ch; margin:0 auto;
  font-size:calc(clamp(38px,4.8vw,64px) * var(--type-scale));
  line-height:1.06; letter-spacing:-.02em;
}
.sci-hero__lede{
  max-width:64ch; margin:26px auto 0;
  font-size:clamp(17px,1.7vw,20px); line-height:1.65; color:var(--ink-soft);
}

/* ---------- the four claims, as an index into the bands below ---------- */
.sci-index{ background:var(--white); padding:0; }
.sci-index__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.sci-claim{
  display:flex; flex-direction:column; gap:10px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-card);
  padding:26px 26px 24px; box-shadow:0 10px 30px rgba(28,41,87,.06);
  color:var(--ink); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sci-claim:hover{ transform:translateY(-4px); box-shadow:0 18px 44px rgba(28,41,87,.12); border-color:#cddaf8; color:var(--ink); }
.sci-claim__num{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--soft-blue); color:var(--accent);
  font-family:var(--font-display); font-weight:700; font-size:14px;
}
.sci-claim__t{ font-family:var(--font-display); font-weight:700; font-size:18px; line-height:1.3; color:var(--ink); text-wrap:balance; }
.sci-claim:hover .sci-claim__t{ color:var(--accent); }
.sci-claim__s{ font-size:14px; line-height:1.5; color:var(--ink-soft); }
.sci-claim__go{ margin-top:auto; padding-top:14px; font-size:14px; font-weight:700; color:var(--accent); }
@media (max-width:1020px){ .sci-index__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .sci-index__grid{ grid-template-columns:1fr; } }

/* ---------- evidence bands ---------- */
.sci-band{ background:var(--white); padding:var(--section-y) 0; }
/* Between bands the rule carries the gap, so the section drops its own
   top padding rather than stacking a second one on top of it. */
.sci-band + .sci-band{ padding-top:0; }
.sci-band + .sci-band > .wrap{ border-top:1px solid var(--line); padding-top:var(--section-y); }
.sci-band[id]{ scroll-margin-top:calc(var(--nav-height) + 12px); }
.sci-band__head{ max-width:780px; margin-bottom:52px; }
.sci-band__head h2{ font-size:calc(clamp(30px,3.4vw,44px) * var(--type-scale)); line-height:1.12; letter-spacing:-.02em; }
.sci-band__head p{ margin-top:18px; font-size:17px; line-height:1.7; color:var(--ink-soft); }

/* The shared research block sits on navy in care-model.css; here it is on the
   page's own white, so the few colours that assumed navy are reset. */
.sci-band .cm-research__layout{ margin-top:0; }
.sci-band .cm-research__flabel{ color:var(--accent); }
.sci-band .cm-research__list{ border-top:0; display:flex; flex-direction:column; gap:16px; }
.sci-band .rpill{ border:1.5px solid var(--accent); background:transparent; color:var(--accent); border-radius:16px; }
.sci-band .rpill small{ color:rgba(47,95,227,.72); }
.sci-band .rpill:hover{ background:var(--accent); color:var(--white); }
.sci-band .rpill:hover small{ color:rgba(255,255,255,.8); }
.sci-band .rpill.is-active{ background:var(--accent); border-color:var(--accent); color:var(--white); }
.sci-band .rpill.is-active small{ color:rgba(255,255,255,.8); }
.sci-band .rcard{ padding:28px 30px; border-bottom:0; border:1px solid #e4e9f7; border-radius:20px; background:var(--white); transition:border-color .2s; }
.sci-band .rcard:hover{ border-color:#cddaf8; }
.sci-band .rcard[hidden]{ display:none; }
.sci-band .rcard__cite{ color:var(--accent); }
.sci-band .rcard__q{ background:var(--tint); }
.sci-band .rcard__body{ margin-top:16px; }
.sci-band .rcard__pmid{ white-space:normal; }
.sci-band .rcard__pmid a{ color:var(--ink-soft); border-bottom:1px solid var(--soft-blue); }
.sci-band .rcard__pmid a:hover{ color:var(--accent); }
/* A note card, not a study: no citation colour, no quote mark. */
.sci-band .rcard--note .rcard__cite{ color:var(--ink); }

/* ---------- Cocoa360 band ---------- */
.sci-practice{ background:var(--deep); color:var(--white); padding:var(--section-y) 0; }
.sci-practice__head{ max-width:820px; margin:0 auto 52px; text-align:center; }
.sci-practice__head h2{ color:var(--white); font-size:calc(clamp(30px,3.4vw,44px) * var(--type-scale)); line-height:1.12; letter-spacing:-.02em; }
.sci-practice__head h2 em{ color:var(--gold); }
.sci-practice__head p{ margin-top:18px; font-size:17px; line-height:1.7; color:var(--deep-tint); }
.sci-results{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.sci-result{ background:rgba(255,255,255,.07); border-radius:var(--r-card); padding:28px 26px; }
.sci-result__n{ font-family:var(--font-display); font-weight:700; font-size:clamp(30px,3.2vw,44px); line-height:1; letter-spacing:-.02em; color:var(--white); }
.sci-result__l{ margin-top:12px; font-size:14.5px; line-height:1.5; color:var(--gold); }
@media (max-width:840px){ .sci-results{ grid-template-columns:1fr 1fr; } }
@media (max-width:440px){ .sci-results{ grid-template-columns:1fr; } }
.sci-practice__note{ margin-top:26px; font-size:12.5px; line-height:1.7; color:rgba(255,255,255,.55); max-width:70ch; }

/* ---------- closing ---------- */
.sci-close{ background:var(--cream); padding:calc(var(--section-y) * .55) 0; text-align:center; }
.sci-close h2{ max-width:20ch; margin:0 auto; font-size:calc(clamp(30px,3.4vw,44px) * var(--type-scale)); line-height:1.12; letter-spacing:-.02em; }
.sci-close__ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }

@media (max-width:900px){
  .sci-hero{ padding:64px 0 44px; }
  .sci-band__head{ margin-bottom:38px; }
}