/* Ozemback visual upgrade · Sprint 1+2+3 */

/* Icon system */
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.125em;flex-shrink:0;color:currentColor;fill:currentColor;stroke:currentColor}
.ico-lg{width:36px;height:36px}
.ico-xl{width:48px;height:48px}
.ico-bg{width:56px;height:56px;padding:14px;background:rgba(184,224,75,.12);border-radius:50%;color:#B8E04B;box-sizing:content-box}
.ico-bg-light{background:rgba(184,85,60,.1);color:#B8553C}
.ico-bg-forest{background:#1E3A2A;color:#B8E04B;width:48px;height:48px;padding:14px}

/* Motion · fade-up on scroll */
.fade-up{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.65,.2,1),transform .9s cubic-bezier(.2,.65,.2,1);will-change:opacity,transform}
.fade-up.in-view{opacity:1;transform:none}
.fade-up.delay-1{transition-delay:.08s}
.fade-up.delay-2{transition-delay:.16s}
.fade-up.delay-3{transition-delay:.24s}
.fade-up.delay-4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.fade-up{opacity:1;transform:none;transition:none}}

/* Animated emphasized italic — peptide-yellow underline */
h1 em,h2 em{position:relative;display:inline-block}
h1 em::after,h2 em::after{content:"";position:absolute;left:0;bottom:.04em;width:100%;height:.12em;background:linear-gradient(90deg,#B8E04B 0%,rgba(184,224,75,0) 100%);transform:scaleX(0);transform-origin:left center;transition:transform 1.2s cubic-bezier(.2,.65,.2,1) .2s;opacity:.55}
.fade-up.in-view h1 em::after,.fade-up.in-view h2 em::after,.in-view h1 em::after,.in-view h2 em::after{transform:scaleX(1)}

/* Hover transforms · cards & images */
.peptide-card,.what-card,.t-card,.toc-card,.problem-card{transition:transform .35s cubic-bezier(.2,.65,.2,1),box-shadow .35s cubic-bezier(.2,.65,.2,1),background .25s,border-color .25s}
.peptide-card:hover,.what-card:hover,.toc-card:hover,.problem-card:hover{transform:translateY(-4px)}
.t-card:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(30,58,42,.08)}
.lifestyle-cell img,.post-img img,.feature-img img,.hero-img img{transition:transform 1s cubic-bezier(.2,.65,.2,1)}
.lifestyle-cell:hover img,.post:hover .post-img img,.feature-img:hover img{transform:scale(1.04)}

/* Gradient bridges between sections */
.bridge-cream-forest{background:linear-gradient(180deg,var(--cream,#EDE6D9) 0%,var(--forest,#1E3A2A) 100%);height:120px}
.bridge-forest-ivory{background:linear-gradient(180deg,var(--forest,#1E3A2A) 0%,var(--ivory,#F4EFE6) 100%);height:120px}
.bridge-ivory-cream{background:linear-gradient(180deg,var(--ivory,#F4EFE6) 0%,var(--cream,#EDE6D9) 100%);height:80px}

/* Section break SVG container */
.section-break{display:block;width:100%;height:auto;line-height:0}
.section-break svg{width:100%;height:auto;display:block}

/* Cover image enhancement */
.guide-cover-svg{display:block;width:100%;max-width:340px;margin:0 auto;box-shadow:0 36px 70px rgba(30,58,42,.32),0 14px 28px rgba(0,0,0,.2);transform:rotate(-2.5deg);transition:transform .6s cubic-bezier(.2,.65,.2,1);aspect-ratio:3/4}
.guide-cover-svg:hover{transform:rotate(0) translateY(-6px)}

/* Hero pattern overlay */
.hero-pattern{position:absolute;inset:0;pointer-events:none;opacity:.85;mix-blend-mode:screen;z-index:1}
.hero-copy-col{position:relative;z-index:2}

/* Card icons in homepage cards */
.card-icon{width:42px;height:42px;color:#B8E04B;margin-bottom:18px;display:block}
.card-icon-tc{color:#B8553C}
.what-card .card-icon,.peptide-card .card-icon{margin-bottom:14px}

/* Dataviz container */
.dataviz-row{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:14px;max-width:1100px;margin:48px auto 0;padding:0 28px}
.dataviz-row svg{width:100%;height:auto;display:block;border-radius:2px}
@media(max-width:880px){.dataviz-row{grid-template-columns:1fr;gap:14px}}

/* Section padding tight on guide bridges */
.peptides{position:relative}
.peptides::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(184,224,75,.4),transparent)}

/* Improve homepage what-card icon row */
.what-grid{position:relative}

/* Soft underline on inline em accents in body copy */
article em,p em{font-style:italic;color:#B8553C}

/* === Responsive audit fixes === */

/* Peptides grid — 2 cols on tablet, 1 on mobile */
@media (max-width: 980px) {
  .peptides-grid { grid-template-columns: 1fr 1fr !important; }
  .peptides-stats { grid-template-columns: 1fr 1fr !important; }
  .peptides-stat { border-right: none !important; }
  .peptide-card { padding: 28px 22px !important; }
}
@media (max-width: 600px) {
  .peptides-grid { grid-template-columns: 1fr !important; }
  .peptides-stats { grid-template-columns: 1fr 1fr !important; gap: 0 !important; }
  .peptides-stat-num { font-size: 28px !important; }
  .peptides-head h2 { font-size: 32px !important; }
  .peptides-lead { font-size: 16px !important; }
}

/* Dataviz row — stack on tablet */
@media (max-width: 880px) {
  .dataviz-row { grid-template-columns: 1fr !important; gap: 18px !important; padding: 0 20px !important; }
  .dataviz-row img { max-height: none !important; }
}

/* Cover SVGs — make sure they don't blow up on small screens */
.guide-cover-svg, .hero-cover-img { max-width: 100% !important; height: auto !important; }
@media (max-width: 700px) {
  .guide-cover-svg { max-width: 280px !important; }
  .hero-cover-img { max-width: 280px !important; padding: 24px !important; }
  .hero-cover-img .ttl { font-size: 28px !important; }
}

/* Pricing card mobile */
@media (max-width: 600px) {
  .pricing-card { padding: 32px 22px !important; }
  .price-now { font-size: 48px !important; }
  .pricing h2 { font-size: 32px !important; }
  .pricing-card h3 { font-size: 26px !important; }
}

/* Section breaks on mobile — keep aspect */
.section-break img { width: 100% !important; height: auto !important; min-height: 80px; }
@media (max-width: 600px) {
  .section-break img { min-height: 60px; }
}

/* Hero image on mobile — proper aspect */
@media (max-width: 1060px) {
  .hero-img-col { height: auto !important; aspect-ratio: 16/10 !important; }
  .hero-img-col img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
}

/* Lifestyle mosaic mobile */
@media (max-width: 700px) {
  .lifestyle-mosaic { grid-template-columns: 1fr !important; grid-template-rows: auto !important; }
  .lifestyle-cell { min-height: 240px; }
  .lifestyle-cell--tall { grid-row: auto !important; }
}

/* Nav links — ensure mobile shows hamburger */
@media (max-width: 700px) {
  nav .nav-links li:not(:last-child) { display: none; }
}

/* Toc cards stack mobile */
@media (max-width: 720px) {
  .toc-grid { grid-template-columns: 1fr !important; }
  .related-grid { grid-template-columns: 1fr !important; }
  .problem-grid { grid-template-columns: 1fr !important; }
  .what-grid { grid-template-columns: 1fr !important; }
}

/* Blog post heroes mobile - wide enough on small screens */
@media (max-width: 700px) {
  .hero-img { aspect-ratio: 16/10 !important; margin: 32px 0 40px !important; }
}

/* Footer links wrap nicely */
@media (max-width: 600px) {
  .footer-links { gap: 16px !important; flex-wrap: wrap !important; }
  .footer-links a { font-size: 9px !important; }
}

/* Pre-order banner mobile */
@media (max-width: 600px) {
  body > div[style*="PRE-ORDER"] { font-size: 9px !important; padding: 10px 12px !important; letter-spacing: .12em !important; }
}

/* Safety guard: any fade-up not yet in-view becomes visible after 1.5s as fallback */
.fade-up{animation:fadeup-fallback 0s linear 1.5s forwards}
@keyframes fadeup-fallback{to{opacity:1;transform:none}}
.fade-up.in-view{animation:none}

/* === Preview visual modules === */
.viz-block{margin:48px 0;border-radius:0}
.viz-block svg{width:100%;height:auto;display:block}
.viz-illus{margin:48px 0}
.viz-illus img{width:100%;height:auto;display:block}

/* Stat hero strip — large numbers floated */
.stat-hero{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:#1E3A2A;color:#F4EFE6;margin:48px 0;border-top:4px solid #B8E04B}
.stat-hero > div{padding:38px 28px;border-right:1px solid rgba(244,239,230,.12);text-align:center}
.stat-hero > div:last-child{border-right:none}
.stat-hero .num{font-family:'Fraunces',serif;font-size:62px;font-weight:600;color:#B8E04B;line-height:1;letter-spacing:-.02em;margin-bottom:10px}
.stat-hero .num em{color:#F4EFE6;font-style:normal;font-size:.6em;font-weight:300}
.stat-hero .lbl{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,239,230,.7);font-weight:700;line-height:1.45}
@media(max-width:700px){.stat-hero{grid-template-columns:1fr}.stat-hero > div{border-right:none;border-bottom:1px solid rgba(244,239,230,.12);padding:28px 22px}.stat-hero .num{font-size:46px}}

/* Big pull-quote block — full-width drama */
.big-pull{background:#1E3A2A;color:#F4EFE6;padding:72px 48px;margin:60px 0;text-align:center;position:relative}
.big-pull::before{content:'';position:absolute;top:0;left:50%;width:72px;height:4px;background:#B8E04B;transform:translateX(-50%)}
.big-pull p{font-family:'Fraunces',serif;font-size:32px;line-height:1.35;font-weight:300;color:#F4EFE6;font-style:italic;max-width:680px;margin:0 auto;letter-spacing:-.005em}
.big-pull p em{color:#B8E04B;font-weight:400}
@media(max-width:700px){.big-pull{padding:48px 28px}.big-pull p{font-size:22px}}

/* Comparison cards — 2 side-by-side panels */
.compare-row{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:48px 0;border:1px solid #D9CFBD}
.compare-row > div{padding:32px 30px}
.compare-row > div:first-child{border-right:1px solid #D9CFBD;background:#F4EFE6}
.compare-row > div:last-child{background:#1E3A2A;color:#F4EFE6}
.compare-row .tag{font-family:'Space Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px;display:block}
.compare-row > div:first-child .tag{color:#B8553C}
.compare-row > div:last-child .tag{color:#B8E04B}
.compare-row h4{font-family:'Fraunces',serif;font-size:22px;font-weight:500;line-height:1.25;margin-bottom:14px;color:inherit}
.compare-row > div:last-child h4{color:#F4EFE6}
.compare-row p{font-size:15px;line-height:1.7;margin-bottom:10px}
.compare-row > div:last-child p{color:rgba(244,239,230,.82)}
.compare-row ul{margin:14px 0 0 18px;padding:0}
.compare-row li{font-size:14px;line-height:1.65;margin-bottom:8px}
.compare-row > div:last-child li{color:rgba(244,239,230,.78)}
@media(max-width:700px){.compare-row{grid-template-columns:1fr}.compare-row > div:first-child{border-right:none;border-bottom:1px solid #D9CFBD}}

/* Decision block — dual choice with verdict */
.decision-block{background:#EDE6D9;padding:36px 40px;margin:48px 0;border-left:4px solid #B8553C}
.decision-block .label{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#B8553C;font-weight:700;margin-bottom:14px;display:block}
.decision-block h4{font-family:'Fraunces',serif;font-size:24px;font-weight:500;color:#1E3A2A;margin-bottom:18px;line-height:1.25}
.decision-block .verdict{margin-top:24px;padding-top:20px;border-top:1px solid #D9CFBD;font-family:'Fraunces',serif;font-size:18px;font-style:italic;color:#1E3A2A}
.decision-block .verdict strong{color:#B8553C;font-style:normal;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:6px}

/* Week grid (training visualization) */
.week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin:36px 0;font-family:'Space Mono',monospace}
.week-grid > div{aspect-ratio:1;background:#EDE6D9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8px;border-radius:0;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6B6B6B;font-weight:700}
.week-grid > div.active{background:#1E3A2A;color:#B8E04B}
.week-grid > div.active .day{color:#F4EFE6}
.week-grid > div .day{font-family:'Fraunces',serif;font-size:24px;font-weight:600;color:#1E3A2A;line-height:1;font-style:normal;margin-bottom:6px;letter-spacing:0}
.week-grid > div.active .icon{color:#B8E04B}
.week-grid > div .icon{margin-top:4px}
@media(max-width:700px){.week-grid{grid-template-columns:repeat(7,1fr);gap:4px}.week-grid > div{padding:6px;font-size:9px}.week-grid > div .day{font-size:18px}}

/* Movement icons row */
.movement-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin:36px 0}
.movement-cell{text-align:center;padding:20px 12px;background:#F4EFE6;border-top:2px solid #B8E04B}
.movement-cell svg{width:32px;height:32px;color:#1E3A2A;margin:0 auto 10px;display:block}
.movement-cell .lbl{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#1E3A2A;font-weight:700;line-height:1.4}
@media(max-width:700px){.movement-row{grid-template-columns:repeat(3,1fr);gap:8px}}

/* Mini stat chip row */
.chip-row{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}
.stat-chip{background:#EDE6D9;padding:12px 18px;border-left:3px solid #B8E04B;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#1E3A2A;font-weight:700;display:flex;align-items:baseline;gap:10px}
.stat-chip strong{font-family:'Fraunces',serif;font-size:22px;font-weight:600;color:#B8553C;letter-spacing:0;text-transform:none}

/* Caption under viz */
.viz-caption{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#6B6B6B;text-align:center;margin-top:14px;line-height:1.6}