/* C04/C07 presentation successor, derived from the retained C03/C01 article rules.
   The measured tall-header exception below applies only on these two articles. */
.bf-c04-c07-shell{width:100%;max-width:864px;margin-inline:auto;padding:16px;box-sizing:border-box}
.bf-c04-c07-shell .bf-c04-c07-category{margin:0 0 20px}
.bf-c04-c07-shell .bf-c04-c07-category .article-category{display:inline-block;width:auto;max-width:100%;margin:0;padding:6px 16px;border:0;border-radius:16px;background:#d1ebff;color:#0034ad;font:500 12px/1.5 Roboto,Arial,sans-serif;text-align:center;text-decoration:none;box-sizing:border-box}
.bf-c04-c07-shell .bf-c04-c07-category .article-category:focus-visible{outline:2px solid #35678e;outline-offset:4px}
:is(#bf-creatine-c04,#bf-creatine-c07){--bf-text:#243144;--bf-muted:#56677c;--bf-line:#dce5ee;--bf-heading:#173958;--bf-accent:#35678e;--bf-soft:#f1f6fb;color:var(--bf-text);background:#fff;font:17px/1.65 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;width:100%;max-width:none;margin:0;padding:0;min-width:0;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased;text-align:left;text-transform:none}
:is(#bf-creatine-c04,#bf-creatine-c07) *,:is(#bf-creatine-c04,#bf-creatine-c07) *::before,:is(#bf-creatine-c04,#bf-creatine-c07) *::after{box-sizing:border-box}
:is(#bf-creatine-c04,#bf-creatine-c07) :where(h1,h2,h3,p,figure,dl){margin:0}
:is(#bf-creatine-c04,#bf-creatine-c07) :where(h1,h2,h3){font-family:inherit;color:var(--bf-heading);text-transform:none;max-width:none;width:auto;white-space:normal}
:is(#bf-creatine-c04,#bf-creatine-c07) h1{max-width:800px;font-size:clamp(35.2px,4.5vw,52px);line-height:1.13;font-weight:600;letter-spacing:-.045em;text-wrap:balance}
:is(#bf-creatine-c04,#bf-creatine-c07) h2{font-size:clamp(26.4px,3vw,32px);line-height:1.2;font-weight:550;letter-spacing:-.025em;max-width:none}
:is(#bf-creatine-c04,#bf-creatine-c07) h3{font-size:18px;line-height:1.4;font-weight:600;letter-spacing:-.015em;margin-top:26.4px}
:is(#bf-creatine-c04,#bf-creatine-c07) > header{margin-bottom:28px;display:block;padding:0;border:0;background:none}
:is(#bf-creatine-c04,#bf-creatine-c07) > header p{color:var(--bf-muted);margin-top:16px}
:is(#bf-creatine-c04,#bf-creatine-c07) > header .eyebrow{font-size:14px;font-weight:600;line-height:1.4;letter-spacing:.055em;text-transform:uppercase;margin:0 0 16px;color:var(--bf-accent)}
:is(#bf-creatine-c04,#bf-creatine-c07) > header .article-meta{margin-top:12px;font-size:14px}
:is(#bf-creatine-c04,#bf-creatine-c07) .article-copy{width:100%;max-width:none;min-width:0}
:is(#bf-creatine-c04,#bf-creatine-c07) p,:is(#bf-creatine-c04,#bf-creatine-c07) li{color:var(--bf-text);font-size:inherit;font-family:inherit;line-height:1.65}
:is(#bf-creatine-c04,#bf-creatine-c07) p{margin-top:16px}
:is(#bf-creatine-c04,#bf-creatine-c07) strong{color:inherit;font-weight:650}
:is(#bf-creatine-c04,#bf-creatine-c07) .article-copy > h2{margin-top:52px;padding-top:32px;border-top:1px solid var(--bf-line);margin-bottom:20px}
:is(#bf-creatine-c04,#bf-creatine-c07) :where(ul,ol){padding-left:21.6px;margin-block:16px}
:is(#bf-creatine-c04,#bf-creatine-c07) li+li{margin-top:9.6px}
:is(#bf-creatine-c04,#bf-creatine-c07) li::marker{color:var(--bf-muted)}
:is(#bf-creatine-c04,#bf-creatine-c07) a{color:#285c86;text-decoration-line:underline;text-underline-offset:.2em;text-decoration-thickness:1px;text-decoration-color:#9fbcd3}
:is(#bf-creatine-c04,#bf-creatine-c07) a:hover{color:var(--bf-heading);text-decoration-thickness:2px}
:is(#bf-creatine-c04,#bf-creatine-c07) :where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--bf-accent);outline-offset:4px}
:is(#bf-creatine-c04,#bf-creatine-c07) [id]{scroll-margin-top:var(--bf-c04-c07-anchor-offset,188px)}
:is(#bf-creatine-c04,#bf-creatine-c07) .answer-box{padding:24px 25.6px;border:1px solid #c8dced;border-radius:12.8px;background:var(--bf-soft);margin-top:24px;color:var(--bf-text)}
:is(#bf-creatine-c04,#bf-creatine-c07) .answer-box p{margin-top:9.6px}
:is(#bf-creatine-c04,#bf-creatine-c07) .answer-box p:first-of-type{margin-top:0;font-size:18.24px;line-height:1.55}
:is(#bf-creatine-c04,#bf-creatine-c07) .table-wrap{width:100%;max-width:100%;overflow:visible;margin-top:24px;border:1px solid var(--bf-line);border-radius:10.4px;background:#fff}
:is(#bf-creatine-c04,#bf-creatine-c07) table{width:100%;max-width:100%;min-width:0;table-layout:fixed;border-collapse:collapse;text-align:left;font-size:15px;line-height:1.6}
:is(#bf-creatine-c04,#bf-creatine-c07) :where(th,td){padding:16px;border-bottom:1px solid var(--bf-line);vertical-align:top;font-family:inherit;font-size:15px;line-height:1.6;color:var(--bf-text);overflow-wrap:anywhere;text-align:left}
:is(#bf-creatine-c04,#bf-creatine-c07) thead th{color:var(--bf-heading);background:var(--bf-soft);font-weight:600}
:is(#bf-creatine-c04,#bf-creatine-c07) tbody th{color:var(--bf-heading);background:#fafcfe;font-weight:600}
:is(#bf-creatine-c04,#bf-creatine-c07) tbody tr:last-child > *{border-bottom:0}
:is(#bf-creatine-c04,#bf-creatine-c07) .sources{margin-top:52px;padding-top:32px;border-top:1px solid var(--bf-line);color:#000;font-size:15px;font-weight:500;line-height:1.7;letter-spacing:.005em}
:is(#bf-creatine-c04,#bf-creatine-c07) .sources h2{color:#000;font-weight:600;margin-bottom:20px}
:is(#bf-creatine-c04,#bf-creatine-c07) .sources li{padding-left:4.8px;color:#000;font-size:15px;line-height:1.7}
:is(#bf-creatine-c04,#bf-creatine-c07) .sources li+li{margin-top:16px}
:is(#bf-creatine-c04,#bf-creatine-c07) .sources li::marker{color:#000;font-weight:500}
:is(#bf-creatine-c04,#bf-creatine-c07) .sources a{color:#000;font-weight:600;text-decoration-color:currentColor}
:is(#bf-creatine-c04,#bf-creatine-c07) .sources a:hover,:is(#bf-creatine-c04,#bf-creatine-c07) .sources a:focus-visible{color:#000;text-decoration-thickness:2px}
:is(#bf-creatine-c04,#bf-creatine-c07) .sources > p:last-child{padding-top:24px;margin-top:32px;border-top:1px solid var(--bf-line);color:var(--bf-muted);font-size:14px;line-height:1.6}
@media(max-width:680px){
 :is(#bf-creatine-c04,#bf-creatine-c07){font-size:16px}
 :is(#bf-creatine-c04,#bf-creatine-c07) h1{font-size:clamp(32px,7.5vw,40px)}
 :is(#bf-creatine-c04,#bf-creatine-c07) .answer-box{padding:18.4px}
 :is(#bf-creatine-c04,#bf-creatine-c07) .answer-box p:first-of-type{font-size:16.64px}
 :is(#bf-creatine-c04,#bf-creatine-c07) .article-copy > h2,:is(#bf-creatine-c04,#bf-creatine-c07) .sources{margin-top:37.6px;padding-top:26.4px}
 /* One semantic table, no duplicated comparisons: header associations remain explicit on each cell. */
 :is(#bf-creatine-c04,#bf-creatine-c07) .table-wrap{border:0;border-radius:0;overflow:visible}
 :is(#bf-creatine-c04,#bf-creatine-c07) table,:is(#bf-creatine-c04,#bf-creatine-c07) tbody,:is(#bf-creatine-c04,#bf-creatine-c07) tbody tr,:is(#bf-creatine-c04,#bf-creatine-c07) tbody th,:is(#bf-creatine-c04,#bf-creatine-c07) tbody td{display:block;width:100%;max-width:100%}
 :is(#bf-creatine-c04,#bf-creatine-c07) colgroup{display:none}
 :is(#bf-creatine-c04,#bf-creatine-c07) thead{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
 :is(#bf-creatine-c04,#bf-creatine-c07) tbody tr{margin:0 0 16px;border:1px solid #c8dced;border-radius:10.4px;background:#fff;overflow:hidden}
 :is(#bf-creatine-c04,#bf-creatine-c07) tbody :where(th,td){padding:13px 16px;border-bottom:1px solid var(--bf-line);font-size:15px;line-height:1.6}
 :is(#bf-creatine-c04,#bf-creatine-c07) tbody th{background:var(--bf-soft);font-weight:600}
 :is(#bf-creatine-c04,#bf-creatine-c07) tbody :where(th,td)::before{content:attr(data-label);display:block;margin-bottom:5px;color:var(--bf-heading);font-size:12px;line-height:1.4;letter-spacing:.025em;font-weight:650}
 :is(#bf-creatine-c04,#bf-creatine-c07) tbody tr > :last-child{border-bottom:0}
 :is(#bf-creatine-c04,#bf-creatine-c07) tbody tr:last-child > :not(:last-child){border-bottom:1px solid var(--bf-line)}
}
@media(prefers-reduced-motion:reduce){:is(#bf-creatine-c04,#bf-creatine-c07),:is(#bf-creatine-c04,#bf-creatine-c07) *,:is(#bf-creatine-c04,#bf-creatine-c07) *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}


/* Approved C04/C07 hero, disclosure, concept guide and compact native details navigation. */
:is(#bf-creatine-c04,#bf-creatine-c07) .editorial-disclosure{font-size:14px;line-height:1.6;color:#43566d;margin:0 0 20px}
:is(#bf-creatine-c04,#bf-creatine-c07) .answer-box h2{font-size:18px;line-height:1.4;letter-spacing:0;font-weight:650;margin:0 0 14px;padding:0;border:0}
:is(#bf-creatine-c04,#bf-creatine-c07) .hero{margin:28px 0;width:100%;min-width:0}
:is(#bf-creatine-c04,#bf-creatine-c07) .hero img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:5/2;object-fit:contain;border-radius:10px}
:is(#bf-creatine-c04,#bf-creatine-c07) :where(.hero,.diagram) figcaption{font-size:13px;line-height:1.6;color:#43566d;margin:10px 0 0}
:is(#bf-creatine-c04,#bf-creatine-c07) .toc{margin:26px 0 30px;padding:20px;border:1px solid #c8d8e5;border-radius:12px;background:#fff}
:is(#bf-creatine-c04,#bf-creatine-c07) .toc summary{font:700 22px/1.4 Roboto,Arial,sans-serif;letter-spacing:0;color:#173958;cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none}
:is(#bf-creatine-c04,#bf-creatine-c07) .toc summary::-webkit-details-marker{display:none}
:is(#bf-creatine-c04,#bf-creatine-c07) .toc summary::after{content:'+';display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border:1px solid #b9cede;border-radius:6px;background:#f2f7fc;font-size:22px;line-height:1;color:#285c86}
:is(#bf-creatine-c04,#bf-creatine-c07) .toc[open] summary::after{content:'\2212'}
:is(#bf-creatine-c04,#bf-creatine-c07) .toc ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none;margin:16px 0 0;padding:0}
:is(#bf-creatine-c04,#bf-creatine-c07) .toc li{margin:0;min-width:0;display:flex}
:is(#bf-creatine-c04,#bf-creatine-c07) .toc a{position:relative;display:flex;align-items:center;width:100%;min-height:58px;padding:14px 40px 14px 16px;border:1px solid #b9cede;border-radius:8px;background:#f2f7fc;color:#234f74;font:600 17px/1.45 Roboto,Arial,sans-serif;text-decoration:none;cursor:pointer}
:is(#bf-creatine-c04,#bf-creatine-c07) .toc a::after{content:'';position:absolute;right:17px;top:50%;width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateY(-50%) rotate(45deg)}
:is(#bf-creatine-c04,#bf-creatine-c07) .toc a:hover,:is(#bf-creatine-c04,#bf-creatine-c07) .toc a:focus-visible{background:#e2eef8;border-color:#7098b6;color:#173958;text-decoration:underline;text-underline-offset:.18em}
:is(#bf-creatine-c04,#bf-creatine-c07) .toc summary:hover{color:#285c86}
:is(#bf-creatine-c04,#bf-creatine-c07) .diagram{margin:30px 0;padding:22px;border:1px solid #bdd2e3;border-radius:12px;background:#f1f6fb;min-width:0}
:is(#bf-creatine-c04,#bf-creatine-c07) .diagram svg{display:block;width:100%;max-width:440px;height:auto;aspect-ratio:360/535;margin-inline:auto}
:is(#bf-creatine-c04,#bf-creatine-c07) .diagram text{font-family:Arial,sans-serif}
:is(#bf-creatine-c04,#bf-creatine-c07) thead th{background:#173958;color:#fff;border-bottom-color:#436582;font-weight:650}
@media(max-width:680px){
 :is(#bf-creatine-c04,#bf-creatine-c07) .toc{padding:16px;margin:20px 0 24px}
 :is(#bf-creatine-c04,#bf-creatine-c07) .toc summary{font-size:21px}
 :is(#bf-creatine-c04,#bf-creatine-c07) .toc ol{grid-template-columns:minmax(0,1fr);gap:10px}
 :is(#bf-creatine-c04,#bf-creatine-c07) .diagram{padding:16px 10px;margin:24px 0}
}
@media print{:is(#bf-creatine-c04,#bf-creatine-c07) .toc{display:none}}

/* Only C04/C07 opt in, and only while the native header would consume too much
   of the viewport. Keep its content and wrapper in normal flow. */
body.bf-c04-c07-header-flow .page_header_wrapper{height:auto!important}
body.bf-c04-c07-header-flow .page_header{position:relative!important;top:auto!important;left:auto!important;right:auto!important;transition:none!important}