:root{--page-title-display:none;}/* Start custom CSS *//* ==========================================================================
   Nutritics — section components
   Tokens + 4 components: approach-steps, credentials, why-grid, who-grid
   Fonts are NOT loaded here — set them in Elementor Global Fonts.
   ========================================================================== */

:root{
  /* colour */
  --nt-green-500:#50A41B;
  --nt-green-tint-bg:#FAFDF8;
  --nt-green-tint-border:#F3FAED;
  --nt-line:#D9E2D6;
  --nt-border:#EEF2EE;
  --nt-danger:#DC2626;
  --nt-text-primary:#1F2937;
  --nt-text-secondary:#4B5563;
  --nt-text-muted:#6B7280;
  --nt-surface:#ffffff;

  /* type */
  --nt-font-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --nt-font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --nt-fs-body:16px;
  --nt-fs-title:19px;

  /* shape + rhythm */
  --nt-radius-md:12px;
  --nt-radius-lg:16px;
  --nt-pad-card:24px;
  --nt-gap:20px;

  --nt-max:1280px;
}

/* Tablet */
@media (max-width:1024px){
  :root{
    --nt-fs-body:15.5px;
    --nt-fs-title:18px;
    --nt-pad-card:20px;
    --nt-gap:16px;
  }
}

/* Mobile */
@media (max-width:767px){
  :root{
    --nt-fs-body:15px;
    --nt-fs-title:17px;
    --nt-pad-card:18px;
    --nt-gap:14px;
    --nt-radius-lg:14px;
    --nt-radius-md:10px;
  }
}

@media (max-width:380px){
  :root{
    --nt-fs-body:14.5px;
    --nt-fs-title:16.5px;
  }
}

/* --------------------------------------------------------------------------
   1. Approach steps — numbered timeline
   -------------------------------------------------------------------------- */

.nt-steps{
  list-style:none;
  margin:0;
  padding:0;
  max-width:var(--nt-max);
  font-family:var(--nt-font-body);
  --step-size:52px;
  --step-gap:25px;
  --step-space:56px;
  --step-num-fs:21px;
}

.nt-steps__item{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:var(--step-gap);
  padding-bottom:var(--step-space);
}
.nt-steps__item:last-child{padding-bottom:0}

.nt-steps__item:not(:last-child)::before{
  content:"";
  position:absolute;
  left:calc(var(--step-size) / 2 - 1px);
  top:var(--step-size);
  bottom:0;
  width:2px;
  background:var(--nt-line);
}

.nt-steps__num{
  flex:0 0 var(--step-size);
  width:var(--step-size);
  height:var(--step-size);
  border-radius:50%;
  background:var(--nt-green-500);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:1;
  font-family:var(--nt-font-display);
  font-weight:500;
  font-size:var(--step-num-fs);
  line-height:1;
  letter-spacing:.5px;
  padding-top:1px;
}

.nt-steps__content{padding-top:2px}

.nt-steps__title{
  margin:0 0 8px;
  color:var(--nt-text-primary);
  font-family:var(--nt-font-body); /* swap to var(--nt-font-display) for serif headings */
  font-size:var(--nt-fs-title);
  font-weight:700;
  line-height:1.35;
  letter-spacing:-.1px;
}

.nt-steps__text{
  margin:0;
  color:var(--nt-text-secondary);
  font-size:var(--nt-fs-body);
  font-weight:400;
  line-height:1.6;
  max-width:70ch;
}

@media (max-width:1024px){
  .nt-steps{--step-size:48px;--step-gap:20px;--step-space:44px;--step-num-fs:20px}
}
@media (max-width:767px){
  .nt-steps{--step-size:42px;--step-gap:16px;--step-space:34px;--step-num-fs:18px}
  .nt-steps__title{margin-bottom:6px}
  .nt-steps__text{line-height:1.55}
  .nt-steps__content{padding-top:0}
}
@media (max-width:380px){
  .nt-steps{--step-size:38px;--step-gap:14px}
}

/* --------------------------------------------------------------------------
   2. Credentials — dot bullet list
   -------------------------------------------------------------------------- */

.nt-creds{
  list-style:none;
  margin:0;
  padding:0;
  max-width:var(--nt-max);
  font-family:var(--nt-font-body);
  --cred-dot:7px;
  --cred-gap:15px;
  --cred-space:16px;
}

.nt-creds__item{
  position:relative;
  padding-left:calc(var(--cred-dot) + var(--cred-gap));
  margin-bottom:var(--cred-space);
  color:var(--nt-text-secondary);
  font-size:var(--nt-fs-body);
  font-weight:400;
  line-height:1.5;
}
.nt-creds__item:last-child{margin-bottom:0}

.nt-creds__item::before{
  content:"";
  position:absolute;
  left:0;
  top:calc(0.75em - var(--cred-dot) / 2);
  width:var(--cred-dot);
  height:var(--cred-dot);
  border-radius:50%;
  background:var(--nt-green-500);
}

@media (max-width:1024px){
  .nt-creds{--cred-gap:13px;--cred-space:14px}
  .nt-creds__item{line-height:1.55}
}
@media (max-width:767px){
  .nt-creds{--cred-dot:6px;--cred-gap:12px;--cred-space:14px}
  .nt-creds__item{line-height:1.6}
}

/* --------------------------------------------------------------------------
   3. Why grid — myth / counter comparison cards
   -------------------------------------------------------------------------- */

.nt-why{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--nt-gap);
  max-width:var(--nt-max);
  margin:0;
  padding:0;
  list-style:none;
  font-family:var(--nt-font-body);
  --why-icon-gap:14px;
  --why-icon:20px;
  --why-split:14px;
}

.nt-why__card{
  background:var(--nt-surface);
  border:1px solid var(--nt-border);
  border-radius:var(--nt-radius-lg);
  padding:var(--nt-pad-card);
}

.nt-why__row{
  display:flex;
  align-items:flex-start;
  gap:var(--why-icon-gap);
  margin:0;
  font-size:var(--nt-fs-body);
  line-height:1.45;
}

.nt-why__row--no{
  color:var(--nt-text-muted);
  font-weight:400;
  padding-bottom:var(--why-split);
  border-bottom:1px solid var(--nt-border);
}

.nt-why__row--yes{
  color:var(--nt-text-primary);
  font-weight:700;
  padding-top:var(--why-split);
}

.nt-why__icon{
  flex:0 0 var(--why-icon);
  width:var(--why-icon);
  height:var(--why-icon);
  margin-top:1px;
}
.nt-why__icon--no{color:var(--nt-danger)}
.nt-why__icon--yes{color:var(--nt-green-500)}

@media (max-width:1024px){
  .nt-why{grid-template-columns:1fr;--why-icon-gap:12px}
}
@media (max-width:767px){
  .nt-why{--why-icon-gap:11px;--why-icon:18px;--why-split:12px}
  .nt-why__row{line-height:1.5}
}

/* --------------------------------------------------------------------------
   4. Who grid — tinted pill cards
   -------------------------------------------------------------------------- */

.nt-who{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:17px;
  max-width:var(--nt-max);
  margin:0;
  padding:0;
  list-style:none;
  font-family:var(--nt-font-body);
  --who-dot:7px;
  --who-dot-gap:12px;
  --who-pad-y:16px;
  --who-pad-x:25px;
}

.nt-who__item{
  display:flex;
  align-items:center;
  gap:var(--who-dot-gap);
  min-height:59px;
  padding:var(--who-pad-y) var(--who-pad-x);
  background:var(--nt-green-tint-bg);
  border:1px solid var(--nt-green-tint-border);
  border-radius:var(--nt-radius-md);
  color:var(--nt-text-secondary);
  font-size:var(--nt-fs-body);
  font-weight:400;
  line-height:1.45;
}

.nt-who__item::before{
  content:"";
  flex:0 0 var(--who-dot);
  width:var(--who-dot);
  height:var(--who-dot);
  border-radius:50%;
  background:var(--nt-green-500);
}

@media (max-width:1024px){
  .nt-who{grid-template-columns:repeat(2,1fr);gap:14px;--who-pad-x:20px;--who-pad-y:14px;--who-dot-gap:11px}
}
@media (max-width:767px){
  .nt-who{grid-template-columns:1fr;gap:10px;--who-dot:6px;--who-dot-gap:10px;--who-pad-x:16px;--who-pad-y:13px}
  .nt-who__item{min-height:0}
}/* End custom CSS */