/* Shared styles for peptide profile pages, guide pages, and other long-form inner pages */
.profile-hero{ padding:50px 0 8px; }
.crumb{ font-family:var(--font-d); font-weight:600; font-size:.92rem; color:var(--ink-soft); margin-bottom:16px; display:inline-block; }
.crumb a{ color:var(--teal-deep); }
.profile-top{ display:flex; align-items:flex-start; gap:22px; flex-wrap:wrap; margin-bottom:10px; }
.profile-vial{ width:56px; height:88px; border:3px solid var(--ink); border-radius:8px 8px 14px 14px; position:relative; background:#EAF6FF; overflow:hidden; flex:none; box-shadow:var(--hard); }
.profile-vial::before{ content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%); width:26px; height:9px; background:var(--ink); border-radius:3px; }
.profile-vial-fill{ position:absolute; left:0; right:0; bottom:0; height:55%; background:var(--c,var(--teal)); }
.profile-title h1{ font-size:clamp(2rem,4vw,3rem); margin:0 0 8px; }
.profile-badges{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.profile-dek{ font-size:1.15rem; color:var(--ink-soft); max-width:62ch; margin:14px 0 0; }

.callout{ display:flex; gap:14px; align-items:flex-start; padding:20px 22px; margin:30px 0; background:#FFF0EB;
  clip-path:polygon(1.5% 3%, 98.5% 1%, 99% 97%, 1% 99%); }
.callout.warn{ background:#FFF7E0; }
.callout .ico{ font-size:1.5rem; flex:none; }
.callout p{ margin:0; color:var(--ink); font-size:.98rem; line-height:1.55; }
.callout p + p{ margin-top:8px; }

.profile-body{ max-width:780px; margin:0 auto; padding:10px 0 60px; }
.profile-body h2{ font-family:var(--font-d); font-size:1.5rem; margin:44px 0 14px; color:var(--ink); }
.profile-body h2:first-child{ margin-top:0; }
.profile-body p{ font-size:1.05rem; line-height:1.7; color:var(--ink); margin:0 0 16px; }
.profile-body p.soft{ color:var(--ink-soft); }
.profile-body ul:not(.sources-list){ margin:0 0 16px; padding-left:22px; }
.profile-body ul:not(.sources-list) li{ font-size:1.05rem; line-height:1.7; color:var(--ink); margin-bottom:6px; }

.faq-item{ margin-bottom:18px; }
.faq-q{ font-family:var(--font-d); font-weight:600; font-size:1.05rem; margin-bottom:6px; display:flex; gap:8px; }
.faq-q .q-tag{ background:var(--sun); border:2px solid var(--ink); border-radius:100px; padding:0 .6em; font-size:.8rem; flex:none; height:fit-content; }

.sources-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.sources-list li{ background:#fff; border:2px solid var(--ink); padding:12px 16px;
  clip-path:polygon(1% 5%, 99% 2%, 99.3% 96%, 0.7% 98%); font-size:.95rem; }
.sources-list a{ color:var(--teal-deep); font-weight:700; }
.sources-note{ font-size:.85rem; color:var(--ink-soft); margin-top:12px; }

.related-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:20px 0 0; }
@media (max-width:760px){ .related-row{ grid-template-columns:1fr; } }
.related-card{ background:#fff; border:2px solid var(--ink); padding:18px 20px; text-decoration:none; color:var(--ink);
  clip-path:polygon(2% 4%, 98% 1%, 99% 96%, 1% 99%);
  filter:drop-shadow(3px 4px 0 rgba(34,48,74,.28)); transition:transform .18s var(--ease); }
.related-card:hover{ transform:translate(-2px,-3px); }
.related-card .rc-tag{ font-family:var(--font-d); font-weight:700; font-size:.78rem; color:var(--teal-deep); text-transform:uppercase; letter-spacing:.05em; }
.related-card h4{ font-size:1.1rem; margin:6px 0 4px; }
.related-card p{ font-size:.9rem; color:var(--ink-soft); margin:0; }

.byline{ display:flex; align-items:center; gap:12px; margin:26px 0 0; }
.byline svg{ width:44px; height:44px; }
.byline span{ font-size:.9rem; color:var(--ink-soft); }
.byline b{ color:var(--ink); }

/* guide pages: short-version summary box + data tables */
.key-takeaways{ background:#EAF6FF; border:2px solid var(--ink); padding:22px 26px; margin:26px 0 40px;
  clip-path:polygon(1% 3%, 99% 1%, 98.5% 97%, 0.6% 99%); }
.key-takeaways h2{ margin:0 0 10px !important; font-size:1.15rem !important; }
.key-takeaways ul{ margin:0; padding-left:20px; }
.key-takeaways li{ font-size:1rem; line-height:1.6; margin-bottom:6px; }

.table-wrap{ overflow-x:auto; margin:0 0 20px; }
.profile-body table{ width:100%; border-collapse:collapse; font-size:.95rem; background:#fff; }
.profile-body caption{ text-align:left; font-weight:700; font-family:var(--font-d); margin-bottom:8px; color:var(--ink); }
.profile-body th, .profile-body td{ border:2px solid var(--ink); padding:10px 12px; text-align:left; }
.profile-body th{ background:var(--sun); font-family:var(--font-d); font-weight:600; }

.guide-hero .profile-badges{ margin-bottom:14px; }

.profile-body ol{ margin:0 0 20px; padding-left:22px; }
.profile-body ol li{ font-size:1.05rem; line-height:1.7; color:var(--ink); margin-bottom:8px; }
.profile-body hr{ border:none; border-top:2px dashed rgba(34,48,74,.18); margin:36px 0; }

.steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:24px 0; }
@media (max-width:700px){ .steps-grid{ grid-template-columns:1fr 1fr; } }
.step-card{ background:#fff; border:2px solid var(--ink); padding:16px 16px 14px;
  clip-path:polygon(2% 4%, 97% 1.5%, 98.5% 96%, 1% 98.5%); }
.step-num{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; background:var(--sun); border:2px solid var(--ink); font-family:var(--font-d);
  font-weight:700; font-size:.85rem; margin-bottom:8px; }
.step-card h4{ font-family:var(--font-d); font-size:1rem; margin:0 0 4px; }
.step-card p{ font-size:.88rem !important; color:var(--ink-soft); margin:0 !important; line-height:1.5 !important; }

/* library index page */
.lib-hero{ padding:54px 0 38px; }
.lib-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding:0 0 70px; }
@media (max-width:900px){ .lib-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .lib-grid{ grid-template-columns:1fr; } }