/* ============================================================================
   CONTENT PAGES — About, Contact, Policies, FAQ, Membership
   ----------------------------------------------------------------------------
   Loaded only on pages that use one of the Nutra page templates, so the shop
   and product pages never pay for CSS they cannot use.
   ============================================================================ */

/* ---------------------------------------------------------------- Page hero */
.page-hero{
  position:relative; overflow:hidden;
  padding:52px 0 40px;
  border-bottom:1px solid var(--border);
}
.page-hero__glow{
  position:absolute; left:50%; top:-160px; width:min(760px,100%); aspect-ratio:2/1;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(255,27,60,.22), transparent 68%);
  filter:blur(30px);
}
.page-hero .container{ position:relative; z-index:1; }
.page-hero__title{
  font-family:'Oswald',sans-serif; text-transform:uppercase;
  font-size:clamp(30px,5vw,52px); line-height:1.04; margin:12px 0 0; color:#fff;
}
.page-hero__sub{
  color:var(--text-muted); font-size:clamp(14px,1.6vw,16px);
  max-width:62ch; margin:14px 0 0; line-height:1.65;
}

/* Free-typed editor content, wherever it appears. */
.page-copy{ color:var(--text-muted); font-size:15px; line-height:1.75; max-width:74ch; }
.page-copy h2, .page-copy h3{ color:var(--text); text-transform:uppercase; margin:28px 0 12px; }
.page-copy a{ color:var(--red); }
.page-copy ul, .page-copy ol{ padding-left:20px; margin:12px 0; }
.page-copy li{ margin-bottom:8px; }

/* ------------------------------------------------------------------- About */
.about-intro{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.about-intro__copy h2{ font-size:clamp(24px,3vw,36px); text-transform:uppercase; margin:0 0 18px; }
.about-intro__copy p{ color:var(--text-muted); font-size:15px; line-height:1.75; margin:0 0 16px; }
.about-intro__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.about-intro__media{
  border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--border-strong); box-shadow:0 30px 60px rgba(0,0,0,.55);
}
.about-intro__media img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/5; }

.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.stat-card{
  text-align:center; padding:26px 16px; border-radius:var(--radius-lg);
  background:var(--surface); border:1px solid var(--border-strong);
}
.stat-card b{
  display:block; font-family:'Oswald',sans-serif; font-size:clamp(26px,3.4vw,40px);
  color:var(--volt); line-height:1;
}
.stat-card span{
  display:block; margin-top:8px; font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-faint); font-weight:700;
}

.value-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.value-card{
  padding:28px; border-radius:var(--radius-lg);
  background:var(--surface); border:1px solid var(--border-strong);
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.value-card:hover{ border-color:rgba(255,27,60,.4); transform:translateY(-3px); }
.value-card__ic{
  display:grid; place-items:center; width:46px; height:46px; border-radius:13px;
  background:rgba(255,27,60,.1); border:1px solid rgba(255,27,60,.28); color:var(--red);
  margin-bottom:16px;
}
.value-card__ic svg{ width:22px; height:22px; }
.value-card h3{ font-size:16px; text-transform:uppercase; margin:0 0 10px; }
.value-card p{ margin:0; color:var(--text-muted); font-size:14px; line-height:1.7; }

.process-list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.process-list__item{
  display:flex; gap:22px; padding:24px 26px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--border);
}
.process-list__item:first-child{ border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.process-list__item:last-child{ border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.process-list__n{
  font-family:'Oswald',sans-serif; font-size:30px; line-height:1; color:var(--volt);
  opacity:.6; flex-shrink:0; min-width:46px;
}
.process-list__item h3{ font-size:15px; text-transform:uppercase; margin:0 0 8px; }
.process-list__item p{ margin:0; color:var(--text-muted); font-size:14px; line-height:1.7; }

.cta-band{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:38px 40px; border-radius:var(--radius-lg);
  background:linear-gradient(120deg, rgba(255,27,60,.14), rgba(20,20,24,.9));
  border:1px solid rgba(255,27,60,.3);
}
.cta-band h2{ font-size:clamp(20px,2.6vw,28px); text-transform:uppercase; margin:0 0 8px; }
.cta-band p{ margin:0; color:var(--text-muted); font-size:13.5px; }

/* ----------------------------------------------------------------- Contact */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:34px; align-items:start; }
.contact-channels{ display:flex; flex-direction:column; gap:12px; }
.contact-card{
  display:flex; align-items:center; gap:15px; padding:18px 20px;
  border-radius:var(--radius-lg); background:var(--surface);
  border:1px solid var(--border-strong); color:var(--text);
  transition:border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
a.contact-card:hover{ border-color:rgba(255,27,60,.5); transform:translateX(3px); }
.contact-card--wa{ border-color:rgba(37,211,102,.35); }
a.contact-card--wa:hover{ border-color:rgba(37,211,102,.7); background:rgba(37,211,102,.06); }
.contact-card__ic{
  display:grid; place-items:center; width:42px; height:42px; border-radius:12px; flex-shrink:0;
  background:rgba(255,255,255,.05); border:1px solid var(--border-strong); color:var(--red);
}
.contact-card--wa .contact-card__ic{ color:#25D366; border-color:rgba(37,211,102,.35); }
.contact-card__ic svg{ width:20px; height:20px; }
.contact-card__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.contact-card__body b{ font-size:14.5px; overflow-wrap:anywhere; }
.contact-card__body small{ color:var(--text-faint); font-size:12.5px; line-height:1.5; }
.contact-card__go{ color:var(--text-faint); font-size:18px; transition:transform .25s var(--ease); }
a.contact-card:hover .contact-card__go{ transform:translateX(3px); color:var(--red); }
.contact-card--static{ cursor:default; }

.contact-form-wrap{
  padding:32px 34px; border-radius:var(--radius-lg);
  background:var(--surface); border:1px solid var(--border-strong);
}
.contact-form-wrap h2{ font-size:20px; text-transform:uppercase; margin:0 0 8px; }
.contact-form-wrap__note{ color:var(--text-faint); font-size:13px; margin:0 0 24px; }

.contact-form{ display:flex; flex-direction:column; gap:18px; }
.cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.cf-field{ display:flex; flex-direction:column; gap:7px; }
.cf-field label{
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-faint); font-weight:700;
}
.cf-field label span{ color:var(--red); }
.cf-field input,
.cf-field select,
.cf-field textarea{
  width:100%; padding:13px 15px; border-radius:var(--radius-md);
  background:rgba(255,255,255,.03); border:1.5px solid var(--border-strong);
  color:var(--text); font-size:14.5px; font-family:inherit;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.cf-field textarea{ resize:vertical; min-height:120px; line-height:1.6; }
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus{
  outline:none; border-color:var(--red); background:rgba(255,255,255,.05);
}
.cf-field.has-error input,
.cf-field.has-error textarea{ border-color:#ff4d6a; }
.cf-err{ font-size:12px; color:#ff8095; min-height:0; }
.cf-err:empty{ display:none; }

/* Honeypot. Off-screen rather than display:none — some bots skip anything
   that is not rendered, which would defeat the trap. */
.cf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.cf-submit{ align-self:flex-start; min-width:190px; }
.cf-submit__spin{
  display:none; width:14px; height:14px; margin-left:9px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:nutraSpin .7s linear infinite;
}
.cf-submit.is-loading .cf-submit__spin{ display:inline-block; }
.cf-submit.is-loading .cf-submit__label{ opacity:.75; }

.cf-status{
  margin:0; padding:13px 16px; border-radius:var(--radius-md); font-size:14px; line-height:1.6;
}
.cf-status.is-ok{ background:rgba(46,204,113,.1); border:1px solid rgba(46,204,113,.4); color:#8ef0b4; }
.cf-status.is-bad{ background:rgba(255,27,60,.1); border:1px solid rgba(255,27,60,.4); color:#ffb0bd; }

/* Map — poster until asked for. */
.map-embed{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--border-strong); background:var(--surface);
  aspect-ratio:21/9; cursor:pointer; margin-top:26px;
}
.map-embed:focus-visible{ outline:2px solid var(--volt); outline-offset:3px; }
.map-embed__poster{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; text-align:center; padding:24px;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,27,60,.12), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 12px, transparent 12px 24px);
}
.map-embed__poster svg{ width:38px; height:38px; color:var(--red); }
.map-embed__poster b{ font-size:15px; color:var(--text); max-width:44ch; }
.map-embed__poster small{ color:var(--text-faint); font-size:11.5px; }
.map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.map-embed.is-loaded{ cursor:default; }

/* ------------------------------------------------------------------- Legal */
.legal-layout{ display:grid; grid-template-columns:250px 1fr; gap:44px; align-items:start; }
.legal-toc{
  position:sticky; top:calc(var(--header-h) + 20px);
  padding:22px; border-radius:var(--radius-lg);
  background:var(--surface); border:1px solid var(--border-strong);
}
.legal-toc h4{
  margin:0 0 14px; font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--text-faint);
}
.legal-toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.legal-toc li{ counter-increment:toc; margin-bottom:9px; }
.legal-toc a{
  display:flex; gap:9px; font-size:13px; color:var(--text-muted); line-height:1.45;
  transition:color .18s var(--ease);
}
.legal-toc a::before{ content:counter(toc,decimal-leading-zero); color:var(--red); font-weight:800; font-size:11px; padding-top:2px; }
.legal-toc a:hover{ color:var(--text); }
.legal-toc__updated{ margin:16px 0 0; padding-top:14px; border-top:1px solid var(--border); font-size:11.5px; color:var(--text-faint); }

.legal-section{ margin-bottom:34px; scroll-margin-top:calc(var(--header-h) + 20px); }
.legal-section h2{
  font-size:17px; text-transform:uppercase; letter-spacing:.04em;
  margin:0 0 14px; padding-bottom:12px; border-bottom:1px solid var(--border);
}
.legal-section ul{ list-style:none; margin:0; padding:0; }
.legal-section li{
  position:relative; padding-left:22px; margin-bottom:11px;
  color:var(--text-muted); font-size:14.5px; line-height:1.72;
}
.legal-section li::before{
  content:''; position:absolute; left:2px; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--red);
}
.legal-note{
  margin-top:30px; padding:16px 20px; border-radius:var(--radius-md);
  background:rgba(255,255,255,.03); border:1px solid var(--border);
  color:var(--text-faint); font-size:13px; line-height:1.7;
}

/* --------------------------------------------------------------------- FAQ */
.faq-wrap{ max-width:820px; margin-inline:auto; }
.faq-group{ margin-bottom:38px; }
.faq-group__title{
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red); margin:0 0 14px;
}
.faq-item{
  border:1px solid var(--border-strong); border-radius:var(--radius-md);
  background:var(--surface); margin-bottom:10px; overflow:hidden;
  transition:border-color .22s var(--ease);
}
.faq-item[open]{ border-color:rgba(255,27,60,.4); }
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:17px 20px; cursor:pointer; list-style:none;
  font-size:15px; font-weight:700; color:var(--text);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--red); }
.faq-item__chev{
  flex-shrink:0; width:11px; height:11px; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .25s var(--ease); color:var(--text-faint);
}
.faq-item[open] .faq-item__chev{ transform:rotate(-135deg) translate(-2px,-2px); color:var(--red); }
.faq-item__body{ padding:0 20px 19px; }
.faq-item__body p{ margin:0; color:var(--text-muted); font-size:14.5px; line-height:1.75; }

.faq-cta{
  text-align:center; padding:34px; border-radius:var(--radius-lg);
  background:linear-gradient(120deg, rgba(255,27,60,.12), rgba(20,20,24,.9));
  border:1px solid rgba(255,27,60,.28);
}
.faq-cta h3{ font-size:19px; text-transform:uppercase; margin:0 0 8px; }
.faq-cta p{ margin:0 0 20px; color:var(--text-muted); font-size:14px; }
.faq-cta__btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* -------------------------------------------------------------- Membership */
.member-status{
  padding:30px 34px; border-radius:var(--radius-lg);
  background:linear-gradient(125deg, rgba(255,27,60,.12), rgba(20,20,24,.92));
  border:1px solid rgba(255,27,60,.3);
}
.member-status__head{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.member-status__head h2{ font-size:22px; text-transform:uppercase; margin:0 0 5px; }
.member-status__head p{ margin:0; color:var(--text-muted); font-size:13.5px; }
.member-status__badge{
  padding:9px 20px; border-radius:var(--radius-pill); font-size:12px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:#0b0b0d; white-space:nowrap;
  background:linear-gradient(135deg,#c9ccd4,#8e939d);
}
.member-status__badge--warrior{ background:linear-gradient(135deg,#ffd479,#c8912a); }
.member-status__badge--beast{ background:linear-gradient(135deg,#ff5b76,#c00d28); color:#fff; }
.member-status__progress{ margin-top:24px; }
.member-status__bar{ height:8px; border-radius:8px; background:rgba(255,255,255,.1); overflow:hidden; }
.member-status__bar span{ display:block; height:100%; border-radius:8px; background:linear-gradient(90deg,var(--volt),var(--volt-dark)); transition:width .6s var(--ease); }
.member-status__progress p{ margin:10px 0 0; font-size:13px; color:var(--text-muted); }
.member-status__top{ margin:20px 0 0; font-size:13.5px; color:var(--text-muted); }
.member-status__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }

.member-note{ color:var(--text-muted); font-size:14px; max-width:66ch; margin:0 0 26px; }
.tier-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }
.tier-card{
  position:relative; padding:30px 26px; border-radius:var(--radius-lg);
  background:var(--surface); border:1px solid var(--border-strong);
  transition:transform .25s var(--ease), border-color .25s var(--ease);
}
.tier-card:hover{ transform:translateY(-4px); }
.tier-card--warrior{ border-color:rgba(255,196,70,.32); }
.tier-card--beast{ border-color:rgba(255,27,60,.42); }
.tier-card.is-current{ box-shadow:0 0 0 1.5px var(--volt), 0 20px 46px rgba(255,27,60,.2); }
.tier-card__you{
  position:absolute; top:-11px; left:26px; padding:5px 13px; border-radius:var(--radius-pill);
  background:var(--volt); color:#fff; font-size:10.5px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
}
.tier-card h3{ font-family:'Oswald',sans-serif; font-size:23px; text-transform:uppercase; margin:0 0 6px; }
.tier-card__from{ margin:0 0 14px; font-size:12.5px; font-weight:700; color:var(--volt); }
.tier-card__blurb{ margin:0 0 18px; font-size:13.5px; color:var(--text-faint); line-height:1.6; }
.tier-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.tier-card li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--text-muted); line-height:1.55; }
.tier-card li svg{ width:14px; height:14px; flex-shrink:0; color:var(--volt); margin-top:3px; }

.member-join{
  display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center;
  padding:38px 40px; border-radius:var(--radius-lg);
  background:var(--surface); border:1px solid var(--border-strong);
}
.member-join__copy h2{ font-size:clamp(21px,2.6vw,29px); text-transform:uppercase; margin:10px 0 14px; }
.member-join__copy p{ margin:0 0 18px; color:var(--text-muted); font-size:14.5px; line-height:1.7; }
.member-join__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.member-join__list li{ position:relative; padding-left:22px; font-size:14px; color:var(--text-muted); }
.member-join__list li::before{ content:''; position:absolute; left:2px; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--red); }
.member-join__cta{ text-align:center; }
.member-join__cta .btn-lg{ padding:17px 34px; font-size:14.5px; width:100%; }
.member-join__cta p{ margin:16px 0 6px; font-size:13.5px; color:var(--text-muted); }
.member-join__cta a{ color:var(--red); font-weight:700; }
.member-join__cta small{ display:block; font-size:11.5px; color:var(--text-faint); line-height:1.6; }

/* ------------------------------------------------------------- Responsive */
@media (max-width:1000px){
  .about-intro{ grid-template-columns:1fr; gap:30px; }
  .about-intro__media img{ aspect-ratio:16/10; }
  .contact-grid{ grid-template-columns:1fr; gap:26px; }
  .legal-layout{ grid-template-columns:1fr; gap:26px; }
  .legal-toc{ position:static; }
  .tier-grid{ grid-template-columns:1fr; }
  .member-join{ grid-template-columns:1fr; gap:28px; padding:28px 24px; }
  .value-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .page-hero{ padding:36px 0 30px; }
  .stat-row{ grid-template-columns:repeat(2,1fr); }
  .contact-form-wrap{ padding:24px 20px; }
  .cf-row{ grid-template-columns:1fr; }
  .cf-submit{ align-self:stretch; }
  .process-list__item{ gap:14px; padding:20px 18px; }
  .process-list__n{ font-size:23px; min-width:34px; }
  .cta-band{ padding:28px 22px; }
  .map-embed{ aspect-ratio:4/3; }
}
@media (prefers-reduced-motion:reduce){
  .value-card, .tier-card, .contact-card, .contact-card__go, .member-status__bar span{ transition:none; }
  .cf-submit__spin{ animation:none; }
}