/* ============================================================
   NeoPep — shared interior-page components (pages.css)
   Used by: why-neopep, partners, resources, faqs, legal pages
   Pairs with site.css (tokens, nav, footer, buttons)
   Default accent = --accent (aqua); set body{--c:...} per page.
   ============================================================ */
:root{ --c: var(--accent); }

/* page hero (simple heading block) */
.phead{ padding:clamp(120px,16vh,180px) var(--pad) clamp(30px,5vh,52px); max-width:1320px; margin:0 auto; }
.phead__crumb{ font-size:.8rem; color:var(--ink-soft); margin-bottom:16px; }
.phead__crumb a{ color:var(--ink-soft); text-decoration:none; } .phead__crumb a:hover{ color:var(--ink); }
.phead__eyebrow{ font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600; color:var(--c); }
.phead h1{ margin-top:14px; font-size:clamp(2.3rem,4.6vw,3.7rem); line-height:1.02; letter-spacing:-.035em; font-weight:560; color:var(--ink); max-width:20ch; }
.phead__lead{ margin-top:18px; max-width:64ch; font-size:clamp(1.05rem,1.3vw,1.25rem); line-height:1.55; color:var(--ink-soft); }
.phead__cta{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }

/* section shell */
.sec{ padding:clamp(48px,7vh,92px) var(--pad); }
.sec--tint{ background:linear-gradient(180deg,#f7fbfb,#fff); }
.sec--dark{ background:#0d1012; }
.sec__inner{ max-width:1320px; margin:0 auto; }
.sec__eyebrow{ font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600; color:var(--c); }
.sec h2{ margin-top:14px; font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.08; letter-spacing:-.03em; font-weight:560; color:var(--ink); max-width:24ch; }
.sec__lead{ margin-top:16px; max-width:70ch; font-size:1.05rem; line-height:1.65; color:var(--ink-soft); }
.sec--dark .sec h2, .sec--dark h2{ color:#fff; } .sec--dark .sec__lead{ color:rgba(255,255,255,.68); }
.prose{ margin-top:22px; max-width:80ch; } .prose p{ font-size:1.05rem; line-height:1.7; color:var(--ink-soft); } .prose p + p{ margin-top:16px; }
.prose b{ color:var(--ink); font-weight:560; }

/* checklist grid */
.ck-grid{ margin-top:clamp(24px,4vh,40px); display:grid; grid-template-columns:repeat(2,1fr); gap:12px 26px; }
.ck-grid.cols3{ grid-template-columns:repeat(3,1fr); }
.ck{ display:flex; gap:12px; align-items:flex-start; }
.ck__b{ flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb,var(--c) 14%,#fff); margin-top:1px; }
.ck__b svg{ width:14px; height:14px; fill:none; stroke:var(--c); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.ck p{ font-size:.98rem; line-height:1.45; color:var(--ink); } .ck p span{ display:block; font-size:.85rem; color:var(--ink-soft); margin-top:2px; }

/* icon-card grid */
.card-grid{ margin-top:clamp(26px,4vh,44px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px); }
.card-grid.cols2{ grid-template-columns:repeat(2,1fr); } .card-grid.cols4{ grid-template-columns:repeat(4,1fr); }
.card{ padding:clamp(22px,2vw,30px); border-radius:18px; background:#fff; border:1px solid rgba(13,16,18,.07); transition:transform .4s ease, box-shadow .4s ease; }
.card:hover{ transform:translateY(-5px); box-shadow:0 26px 50px -36px rgba(40,70,80,.4); }
.card__ico{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:color-mix(in srgb,var(--c) 12%,#fff); }
.card__ico svg{ width:24px; height:24px; fill:none; stroke:var(--c); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.card h3{ margin-top:16px; font-size:1.08rem; font-weight:560; color:var(--ink); }
.card p{ margin-top:8px; font-size:.93rem; line-height:1.55; color:var(--ink-soft); }
.card__more{ margin-top:14px; font-size:.82rem; font-weight:560; color:var(--c); }

/* video block / youtube placeholder */
.ytph{ position:relative; margin-top:clamp(24px,4vh,40px); max-width:960px; border-radius:22px; overflow:hidden; border:1px solid rgba(13,16,18,.08); box-shadow:0 34px 74px -52px rgba(40,70,80,.55); background:#0d1416; }
.ytph--center{ margin-left:auto; margin-right:auto; }
.ytph__frame{ position:relative; width:100%; aspect-ratio:16/9; }
.ytph__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.ytph__ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px; background:radial-gradient(120% 130% at 50% 0%, #17323a, #0d1416); color:#fff; }
.ytph__play{ width:74px; height:74px; border-radius:50%; background:#ff0000; display:grid; place-items:center; box-shadow:0 14px 34px -8px rgba(255,0,0,.5); transition:transform .3s ease; }
.ytph:hover .ytph__play{ transform:scale(1.06); }
.ytph__play svg{ width:30px; height:30px; fill:#fff; margin-left:3px; }
.ytph__label{ font-size:1.05rem; font-weight:560; letter-spacing:-.01em; }
.ytph__note{ font-size:.82rem; color:rgba(255,255,255,.6); max-width:46ch; line-height:1.5; }
.ytph__cap{ padding:14px 18px; font-size:.86rem; color:var(--ink-soft); background:#fff; border-top:1px solid rgba(13,16,18,.06); }

/* numbered steps */
.steps{ margin-top:clamp(26px,4vh,44px); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,1.6vw,24px); }
.step{ position:relative; padding:clamp(22px,2vw,30px); border-radius:18px; background:#fff; border:1px solid rgba(13,16,18,.07); }
.step__no{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--c); color:#fff; font-weight:600; font-size:.9rem; }
.step h3{ margin-top:16px; font-size:1.08rem; font-weight:560; color:var(--ink); }
.step p{ margin-top:8px; font-size:.92rem; line-height:1.5; color:var(--ink-soft); }

/* table */
.tbl-wrap{ margin-top:clamp(22px,3.5vh,38px); overflow-x:auto; border-radius:18px; border:1px solid rgba(13,16,18,.09); }
.tbl{ width:100%; border-collapse:collapse; min-width:560px; }
.tbl th, .tbl td{ padding:14px 20px; text-align:left; font-size:.94rem; line-height:1.45; border-bottom:1px solid rgba(13,16,18,.07); vertical-align:top; }
.tbl tr:last-child td{ border-bottom:0; }
.tbl thead th{ font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; background:color-mix(in srgb,var(--c) 8%,#fff); }
.tbl td:first-child, .tbl th:first-child{ font-weight:560; color:var(--ink); }
.tbl tbody tr:hover{ background:#fafcfc; }

/* stat row */
.stats{ margin-top:clamp(26px,4vh,44px); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,24px); }
.stat{ padding:clamp(22px,2vw,30px); border-radius:18px; background:#fafcfc; border:1px solid rgba(13,16,18,.06); }
.stat b{ display:block; font-size:clamp(1.8rem,3vw,2.6rem); font-weight:600; letter-spacing:-.02em; color:var(--c); }
.stat span{ display:block; margin-top:8px; font-size:.9rem; line-height:1.4; color:var(--ink-soft); }

/* split */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4vw,64px); align-items:center; }
.split__list{ margin-top:22px; list-style:none; display:flex; flex-direction:column; gap:12px; }
.split__list li{ display:flex; gap:12px; align-items:flex-start; font-size:.98rem; line-height:1.5; color:var(--ink-soft); }
.split__list svg{ width:20px; height:20px; flex:none; margin-top:2px; fill:none; stroke:var(--c); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.split__list b{ color:var(--ink); font-weight:560; }
.split__visual{ aspect-ratio:1/1; border-radius:26px; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(120% 120% at 50% 14%, color-mix(in srgb,var(--c) 12%,#fff), #fff 74%); border:1px solid rgba(13,16,18,.07); }
.split__visual img{ width:72%; filter:drop-shadow(0 24px 38px rgba(50,80,90,.16)); }

/* faq accordion */
.faq{ margin-top:clamp(24px,4vh,40px); max-width:920px; border-top:1px solid rgba(13,16,18,.1); }
.faq-item{ border-bottom:1px solid rgba(13,16,18,.1); }
.faq-q{ width:100%; text-align:left; background:none; border:0; padding:20px 44px 20px 0; font-family:inherit; font-size:1.02rem; font-weight:500; color:var(--ink); cursor:pointer; position:relative; }
.faq-ico{ position:absolute; right:4px; top:22px; width:18px; height:18px; }
.faq-ico::before, .faq-ico::after{ content:""; position:absolute; background:var(--c); border-radius:2px; transition:transform .35s ease, opacity .35s ease; }
.faq-ico::before{ left:0; top:8px; width:18px; height:2px; } .faq-ico::after{ left:8px; top:0; width:2px; height:18px; }
.faq-item.open .faq-ico::after{ transform:scaleY(0); opacity:0; }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s ease; } .faq-item.open .faq-a{ grid-template-rows:1fr; }
.faq-a__in{ overflow:hidden; } .faq-a p{ padding:0 44px 22px 0; font-size:.97rem; line-height:1.6; color:var(--ink-soft); }
.faq-a ul{ margin:2px 44px 22px 0; padding-left:20px; } .faq-a li{ font-size:.97rem; line-height:1.55; color:var(--ink-soft); }

/* cta band */
.cta2{ padding:0 var(--pad) clamp(56px,9vh,110px); }
.cta2__box{ max-width:1320px; margin:0 auto; border-radius:30px; padding:clamp(40px,6vw,72px); text-align:center;
  background:radial-gradient(120% 140% at 12% 0%, color-mix(in srgb,var(--c) 16%,#fff), #fff 68%); border:1px solid color-mix(in srgb,var(--c) 18%,#fff); }
.cta2 h2{ font-size:clamp(1.8rem,3.4vw,2.8rem); line-height:1.05; letter-spacing:-.03em; font-weight:560; color:var(--ink); max-width:none; }
.cta2 p{ margin:14px auto 0; max-width:60ch; color:var(--ink-soft); line-height:1.55; }
.cta2__btns{ margin-top:26px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.buy{ background:var(--c); border-color:var(--c); } .buy:hover{ background:var(--c); filter:brightness(.94); }

/* legal / long-form document */
.doc{ max-width:820px; margin:0 auto; padding:clamp(120px,15vh,168px) var(--pad) clamp(60px,9vh,110px); }
.doc__meta{ margin-top:10px; font-size:.86rem; color:var(--ink-soft); }
.doc__note{ margin:26px 0 8px; padding:16px 20px; border-radius:14px; background:color-mix(in srgb,var(--c) 8%,#fff); border:1px solid color-mix(in srgb,var(--c) 20%,#fff); font-size:.9rem; line-height:1.55; color:var(--ink); }
.doc h2{ margin-top:40px; font-size:1.3rem; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.doc h3{ margin-top:26px; font-size:1.05rem; font-weight:560; color:var(--ink); }
.doc p{ margin-top:12px; font-size:1rem; line-height:1.7; color:var(--ink-soft); }
.doc ul{ margin-top:12px; padding-left:22px; } .doc li{ font-size:1rem; line-height:1.65; color:var(--ink-soft); margin-top:6px; }
.doc a{ color:var(--c); }

@media (max-width:1000px){
  .card-grid, .card-grid.cols4{ grid-template-columns:1fr 1fr; } .stats{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr 1fr; } .split{ grid-template-columns:1fr; } .split__visual{ max-width:420px; }
}
@media (max-width:600px){
  .ck-grid, .ck-grid.cols3, .card-grid, .card-grid.cols2, .card-grid.cols4, .stats, .steps{ grid-template-columns:1fr; }
}

/* ============================================================
   Visual richness — animated mesh heroes, aurora blobs, media
   ============================================================ */
@keyframes meshDrift{ 0%{ transform:translate3d(0,0,0) scale(1) } 50%{ transform:translate3d(3%, -3%,0) scale(1.08) } 100%{ transform:translate3d(0,0,0) scale(1) } }
@keyframes meshDrift2{ 0%{ transform:translate3d(0,0,0) scale(1.05) } 50%{ transform:translate3d(-4%, 2%,0) scale(1) } 100%{ transform:translate3d(0,0,0) scale(1.05) } }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }

/* mesh hero background layer — add class .phead--mesh */
.phead{ position:relative; overflow:hidden; }
.phead--mesh::before, .phead--mesh::after{ content:""; position:absolute; z-index:-1; border-radius:50%; filter:blur(60px); opacity:.55; pointer-events:none; }
.phead--mesh::before{ width:52vw; height:52vw; max-width:720px; max-height:720px; top:-22%; right:-10%;
  background:radial-gradient(circle at 40% 40%, color-mix(in srgb,var(--c) 60%,#fff), transparent 68%); animation:meshDrift 16s ease-in-out infinite; }
.phead--mesh::after{ width:42vw; height:42vw; max-width:560px; max-height:560px; bottom:-30%; left:-8%;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--accent) 46%,#fff), transparent 66%); animation:meshDrift2 20s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .phead--mesh::before, .phead--mesh::after{ animation:none; } }

/* decorative floating patch/gel visual */
.floatvis{ animation:floaty 7s ease-in-out infinite; }

/* image media treatment */
.media{ border-radius:22px; overflow:hidden; border:1px solid rgba(13,16,18,.07); box-shadow:0 30px 60px -44px rgba(40,70,80,.5); background:#eef4f5; }
.media img{ display:block; width:100%; height:100%; object-fit:cover; }
.media--tall{ aspect-ratio:3/4; } .media--wide{ aspect-ratio:16/10; } .media--sq{ aspect-ratio:1/1; }

/* split with image */
.imgsplit{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4vw,64px); align-items:center; }
.imgsplit--rev .imgsplit__txt{ order:2; }
@media (max-width:900px){ .imgsplit{ grid-template-columns:1fr; } .imgsplit--rev .imgsplit__txt{ order:0; } }

/* photo band with tint overlay */
.photoband{ position:relative; border-radius:26px; overflow:hidden; min-height:280px; display:flex; align-items:flex-end; padding:clamp(24px,4vw,44px);
  background:#0d1012; }
.photoband img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; }
.photoband__in{ position:relative; z-index:1; color:#fff; max-width:60ch; }
.photoband__in h3{ font-size:clamp(1.3rem,2.4vw,1.9rem); font-weight:560; letter-spacing:-.02em; }
.photoband__in p{ margin-top:8px; color:rgba(255,255,255,.8); line-height:1.55; }

/* ---------- ARTICLE (blog post) ---------- */
.art{ max-width:760px; margin:0 auto; padding:0 var(--pad) clamp(60px,9vh,110px); }
.art__hd{ max-width:820px; margin:0 auto; padding:clamp(110px,15vh,170px) var(--pad) clamp(20px,3vh,34px); text-align:center; }
.art__eyebrow{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--accent); }
.art__hd h1{ margin-top:14px; font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.12; letter-spacing:-.03em; font-weight:560; color:var(--ink); }
.art__meta{ margin-top:16px; font-size:.86rem; color:var(--ink-soft); }
.art__lead{ margin:0 auto; max-width:640px; font-size:clamp(1.08rem,1.5vw,1.28rem); line-height:1.55; font-weight:400; color:var(--ink); }
.art__body{ margin-top:clamp(28px,4vh,44px); }
.art__body h2{ margin:clamp(30px,4.5vh,52px) 0 12px; font-size:clamp(1.35rem,2.2vw,1.85rem); line-height:1.2; letter-spacing:-.02em; font-weight:560; color:var(--ink); }
.art__body h3{ margin:clamp(22px,3vh,32px) 0 8px; font-size:clamp(1.1rem,1.6vw,1.32rem); font-weight:560; letter-spacing:-.01em; color:var(--ink); }
.art__body p{ margin-top:14px; font-size:1.04rem; line-height:1.72; color:var(--ink-soft); }
.art__body a{ color:var(--accent); }
.art__body ul, .art__body ol{ margin:14px 0 14px 1.1em; padding:0; }
.art__body li{ margin-top:9px; font-size:1.04rem; line-height:1.65; color:var(--ink-soft); padding-left:6px; }
.art__body li b, .art__body p b{ color:var(--ink); font-weight:600; }
.art__body ul li{ list-style:none; position:relative; }
.art__body ul li::before{ content:""; position:absolute; left:-14px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.art__tablewrap{ margin:22px 0; overflow-x:auto; border:1px solid rgba(13,16,18,.1); border-radius:14px; }
.art__table{ width:100%; border-collapse:collapse; min-width:520px; font-size:.94rem; }
.art__table th, .art__table td{ padding:12px 16px; text-align:left; line-height:1.45; border-bottom:1px solid rgba(13,16,18,.08); vertical-align:top; }
.art__table thead th{ font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--ink); background:#f4fafb; }
.art__table tbody tr:last-child td{ border-bottom:0; }
.art__table td:first-child, .art__table th:first-child{ font-weight:560; color:var(--ink); }
.art__note{ margin-top:clamp(30px,4vh,46px); padding:16px 20px; border-radius:14px; background:#f7fbfb; border:1px solid rgba(13,16,18,.07); font-size:.9rem; line-height:1.6; color:var(--ink-soft); }
.art__cta{ margin-top:clamp(34px,5vh,56px); padding:clamp(26px,3vw,40px); border-radius:22px; text-align:center; background:radial-gradient(120% 140% at 15% 0%, #d8eff2, #fff 72%); border:1px solid rgba(47,168,180,.16); }
.art__cta h3{ font-size:clamp(1.3rem,2vw,1.7rem); font-weight:560; letter-spacing:-.02em; color:var(--ink); }
.art__cta p{ margin:10px auto 18px; max-width:48ch; color:var(--ink-soft); line-height:1.55; }
.art__back{ display:inline-flex; align-items:center; gap:7px; margin-top:clamp(30px,4vh,44px); font-size:.9rem; font-weight:560; color:var(--accent); text-decoration:none; }
.art__hero{ display:block; width:100%; max-width:820px; margin:0 auto clamp(10px,2vh,24px); border-radius:18px; aspect-ratio:16/9; object-fit:cover; border:1px solid rgba(13,16,18,.06); }

/* === related articles (blog posts) === */
.related{ background:linear-gradient(180deg,#f7fbfb,#fff); padding:clamp(44px,7vh,84px) var(--pad); border-top:1px solid rgba(13,16,18,.06); }
.related__wrap{ max-width:1160px; margin:0 auto; }
.related__h{ font-size:clamp(1.4rem,2.4vw,2rem); letter-spacing:-.02em; font-weight:560; color:var(--ink); margin-bottom:clamp(22px,3vh,34px); }
.related__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,28px); }
.rcard{ display:flex; flex-direction:column; border-radius:18px; overflow:hidden; background:#fff; text-decoration:none; color:inherit;
  border:1px solid rgba(13,16,18,.07); box-shadow:0 20px 44px -34px rgba(40,70,80,.5); transition:transform .4s ease, box-shadow .4s ease; }
.rcard:hover{ transform:translateY(-6px); box-shadow:0 40px 70px -44px rgba(40,70,80,.55); }
.rcard__img{ position:relative; aspect-ratio:1.7; background:#2fa8b4; }
.rcard__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.03); mix-blend-mode:multiply; }
.rcard__tag{ position:absolute; left:13px; top:13px; padding:6px 12px; border-radius:100px; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:#fff; background:rgba(0,0,0,.24); backdrop-filter:blur(4px); }
.rcard__body{ padding:clamp(16px,1.5vw,22px); display:flex; flex-direction:column; flex:1; }
.rcard__meta{ font-size:.76rem; font-weight:500; color:var(--ink-soft); }
.rcard__title{ margin-top:9px; font-size:1.02rem; line-height:1.32; letter-spacing:-.02em; font-weight:560; color:var(--ink); }
.rcard__more{ margin-top:auto; padding-top:14px; display:inline-flex; align-items:center; gap:7px; font-size:.84rem; font-weight:560; color:var(--accent); }
.rcard__more svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s; }
.rcard:hover .rcard__more svg{ transform:translateX(4px); }
@media(max-width:900px){ .related__grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .related__grid{ grid-template-columns:1fr; } }