/* How to Use Your Membership — bridging stylesheet */

:root{
  --mg-blue:var(--wp--preset--color--blue,#036089);
  --mg-granite:#142530;
  --mg-green:var(--wp--preset--color--green,#567e41);
  --mg-orange:var(--wp--preset--color--orange,#bc540f);
  --mg-yellow:var(--wp--preset--color--highlight-yellow,#ffcc80);
  --mg-highlight:#fffceb;
  --mg-ghost:#fdf8e9;
  --mg-rule:#dee2e6;
  --mg-mute:#6d777d;
  --mg-shell:#f7f5f0;
  /* Section 4 neutrals */
  --mg-n-line:#dfe2e5;    /* frame border */
  --mg-chip-fill:#f1f3f5; /* chip fill */
  --mg-chip-line:#dfe2e5; /* chip border */
  --mg-n-cap:#f6f7f8;     /* caption bar */
  --mg-n-cap-line:#e3e6e9;/* caption rule */
  --mg-n-dot:#e1e4e7;     /* inactive rail dots */
  --mg-n-shadow:rgba(20,37,48,.18);

  --mg-section-pad:clamp(40px,5vw,62px);
  --mg-tan:#dee2e6;
  --mg-num:clamp(40px,4.4vw,48px);
  --mg-step-indent:clamp(64px,7vw,80px);
}

/* base text size — the theme default of 16px is small */
.smp-mg-intro p,
.smp-mg-head p,
.smp-mg-steps p,
.smp-mg-band p,
.smp-mg-faq p,
.smp-mg-faq li,
.smp-mg-help p{
  font-size:18px;
  line-height:1.7;
}

/* 1. Hero */

/* hero box */
.wp-block-group.smp-logo-box.smp-mg-herobox{
  max-width:880px;
  margin-left:auto;
  margin-right:auto;
  padding-bottom:20px !important;
}
.smp-mg-herobox h4 + h1{margin-top:20px}
.smp-mg-herobox h1{
  margin-bottom:0 !important;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.12;
}
.smp-mg-herobox > p,
.smp-mg-herobox > .wp-block-group__inner-container > p{
  font-size:18px;
  margin-top:0 !important;
  margin-block-start:0 !important;
  margin-bottom:0 !important;
}

/* fact grid */
.smp-mg-facts{
  margin-top:0 !important;
  margin-block-start:0 !important;
  margin-bottom:0 !important;
  padding-top:0;
  border-top:1px solid var(--mg-rule);
  gap:0;
}
.smp-mg-facts .wp-block-column{
  padding:clamp(18px,2.6vw,26px) 12px;
  border-left:1px solid var(--mg-rule);
  flex-basis:25%;
}
.smp-mg-facts .wp-block-column:first-child{border-left:0}
.smp-mg-facts .wp-block-column > p:first-child{
  font-size:12px;
  font-weight:700;
  letter-spacing:normal;
  text-transform:uppercase;
  color:var(--mg-mute);
  margin:0 0 11px;
  line-height:1.3;
}
.smp-mg-facts .wp-block-column > p:last-child{
  margin:0;
  font-size:17px;
  font-weight:700;
  color:var(--mg-granite);
  line-height:1.25;
}
.smp-mg-facts .wp-block-column small{
  display:block;
  font-size:13px;
  font-weight:500;
  color:var(--mg-granite);
  letter-spacing:0;
  line-height:1.3;
  margin-top:10px;
}
@media (max-width:781px){
  .smp-mg-herobox .wp-block-group__inner-container{padding-bottom:20px}
  .wp-block-columns.smp-mg-facts{row-gap:0;column-gap:0}
  .wp-block-columns.smp-mg-facts > .wp-block-column{
    padding:18px 10px;
    border-left:0;
  }
  .wp-block-columns.smp-mg-facts > .wp-block-column + .wp-block-column{
    border-top:1px solid var(--mg-rule);
  }
}

/* 2. Intro + note */
.smp-mg-intro{
  padding-top:var(--mg-section-pad);
  padding-bottom:var(--mg-section-pad);
}
.smp-mg-intro .wp-block-column{align-self:center;padding:0 !important}
.smp-mg-intro > .wp-block-group__inner-container{padding:0 !important}


.smp-mg-intro-copy{padding-left:0 !important;padding-top:0 !important}
.smp-mg-intro-copy p{
  font-size:18px;
  line-height:1.75;
  margin-bottom:22px;
}
.smp-mg-intro-copy > p:first-child{
  margin-top:22px;
  font-size:23px;
  line-height:1.6;
  color:var(--mg-granite);
  margin-bottom:26px;
}

.smp-mg-note{
  border:1px solid #efe4c4;
  border-left:4px solid var(--mg-yellow);
  border-radius:0 4px 4px 0;
  padding:28px 30px !important;
}
.smp-mg-note .wp-block-group__inner-container{
  padding:0 !important;
  margin:0 !important;
}
.smp-mg-note h3{
  font-size:18px;
  line-height:1.25;
  margin:0 0 14px;
  font-weight:700;
  color:var(--mg-granite);
}
.smp-mg-note p{
  font-size:16px;
  line-height:1.65;
  margin:0;
}
.smp-mg-note .wp-block-separator{
  border-color:#e9dcb8;
  background-color:transparent;
  opacity:1;
  margin:20px 0;
}
.smp-mg-note strong{color:var(--mg-orange)}

/* eyebrows — matches the logo-box h4 */
.smp-mg-eyebrow,
.smp-mg-head h4:not(.c-accordion__title),
.smp-mg-band h4:not(.c-accordion__title),
.smp-mg-help h4:not(.c-accordion__title),
.smp-mg-faq h4:not(.c-accordion__title){
  font-size:12px !important;
  font-weight:700;
  letter-spacing:normal !important;
  text-transform:uppercase;
  line-height:1.4;
}
.smp-mg-eyebrow{color:var(--mg-orange);margin:0 0 12px !important}
.smp-mg-note .smp-mg-eyebrow{display:flex;align-items:center;gap:7px}
.smp-mg-intro .smp-mg-note .smp-mg-eyebrow::before{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bc540f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18.5h6M10.5 22h3M12 2.5a6.5 6.5 0 0 0-3.8 11.8V17h7.6v-2.7A6.5 6.5 0 0 0 12 2.5z'/%3E%3C/svg%3E");
}
.smp-mg-note .smp-mg-eyebrow::before{
  content:"";
  width:15px;
  height:15px;
  flex:0 0 15px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bc540f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01M11 12h1v4h1'/%3E%3C/svg%3E") center/contain no-repeat;
}

@media (min-width:782px){
  .smp-mg-intro .wp-block-columns{gap:clamp(40px,7vw,104px)}
  .smp-mg-intro-copy{padding-left:clamp(0px,1.4vw,18px) !important}
}

/* 3. Section headings */
.smp-mg-head{
  padding-top:var(--mg-section-pad);
  padding-bottom:var(--mg-section-pad);
}
.smp-mg-head h2{
  font-weight:700;
  letter-spacing:-.015em;
  font-size:clamp(26px,3.4vw,37px);
  line-height:1.15;
  margin-bottom:28px;
}
.smp-mg-head h4:not(.c-accordion__title){margin-bottom:14px}
.smp-mg-head p{
  max-width:56ch;
  margin-left:auto;
  margin-right:auto;
  font-size:18px;
  line-height:1.7;
}
.smp-mg-head > .wp-block-group__inner-container{padding:0 !important}

/* 4. Steps */
.wp-block-columns.smp-mg-steps{
  background:transparent;
  padding:0 clamp(18px,3.5vw,40px) clamp(16px,2vw,26px);
  margin-top:0;
  gap:clamp(24px,4vw,52px);
}

/* rail */
.smp-mg-rail-col{flex-grow:0}
ul.smp-mg-rail{
  position:sticky;
  top:24px;
  counter-reset:mgrail;
  list-style:none;
  margin:0;
  padding-left:0;
}
ul.smp-mg-rail li{counter-increment:mgrail;margin:0}
ul.smp-mg-rail li a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 0;
  font-size:12.5px;
  font-weight:600;
  color:var(--mg-mute);
  text-decoration:none;
  transition:color 150ms ease;
}
ul.smp-mg-rail li a::before{
  content:counter(mgrail);
  width:22px;
  height:22px;
  flex:0 0 22px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:700;
  background:var(--mg-n-dot);
  color:var(--mg-mute);
  transition:all 180ms ease;
}
ul.smp-mg-rail li a:hover{color:var(--mg-granite)}
ul.smp-mg-rail li a:hover::before{background:var(--mg-blue);color:#fff}
ul.smp-mg-rail li a[aria-current]{color:var(--mg-granite);font-weight:700}
ul.smp-mg-rail li a[aria-current]::before{
  background:var(--mg-blue);
  color:#fff;
  transform:scale(1.14);
}

/* step */
.smp-mg-step-list{counter-reset:mgstep}
.wp-block-group.smp-mg-step{
  counter-increment:mgstep;
  position:relative;
  padding:5px 0 clamp(44px,5.6vw,66px) var(--mg-step-indent);
}
.wp-block-group.smp-mg-step:last-child{
  padding-bottom:0;
  scroll-margin-top:24px;
}
/* the number */
.wp-block-group.smp-mg-step::before{
  content:counter(mgstep);
  position:absolute;
  left:0;
  top:0;
  width:var(--mg-num);
  height:var(--mg-num);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--mg-blue);
  color:#fff;
  font-weight:700;
  font-size:17px;
  box-shadow:0 0 0 6px #fff;
  z-index:2;
}
/* the connecting trail */
.wp-block-group.smp-mg-step::after{
  content:"";
  position:absolute;
  left:calc(var(--mg-num) / 2 - 1px);
  top:6px;
  bottom:-6px;
  width:2px;
  background:repeating-linear-gradient(to bottom,var(--mg-tan) 0 7px,transparent 7px 15px);
  z-index:1;
}
.wp-block-group.smp-mg-step:last-child::after{display:none}
.smp-mg-step .wp-block-group__inner-container{padding:0 !important;margin:0 !important}
.smp-mg-step h3{
  font-size:clamp(18px,2.3vw,23px);
  font-weight:700;
  line-height:1.2;
  margin:5px 0 12px;
}
.smp-mg-step p{max-width:62ch}

/* screenshot frame */
.smp-mg-step .wp-block-image{
  position:relative;
  margin:34px 0 34px;
  border:1px solid var(--mg-n-line);
  border-radius:6px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 4px 14px -10px var(--mg-n-shadow);
}
.smp-mg-step .wp-block-image img{
  display:block;
  width:100%;
  height:auto;
  border:0;
  border-radius:0;
  cursor:zoom-in;
}

/* WP's own lightbox button — made visible rather than adding a second one */
.smp-mg-step .wp-block-image .lightbox-trigger{
  position:absolute;
  top:14px !important;
  bottom:auto !important;
  left:14px !important;
  right:auto !important;
  width:38px !important;
  height:38px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:5px !important;
  background-color:rgba(36,44,49,.82) !important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='20' y1='20' x2='16.2' y2='16.2'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:17px 17px !important;
  box-shadow:0 1px 3px rgba(20,37,48,.1) !important;
  cursor:zoom-in;
  opacity:1 !important;
  transition:background-color 150ms ease,transform 150ms ease;
  z-index:5;
}
.smp-mg-step .wp-block-image:hover .lightbox-trigger,
.smp-mg-step .wp-block-image .lightbox-trigger:focus-visible{
  background-color:var(--mg-blue) !important;
  transform:scale(1.08);
}
.smp-mg-step .wp-block-image .lightbox-trigger svg{display:none !important}
.smp-mg-step .wp-block-image figcaption{
  position:relative;
  margin:0;
  padding:16px;
  border-top:1px solid var(--mg-n-cap-line);
  background:var(--mg-n-cap);
  font-size:14px;
  line-height:1.5;
  font-weight:400;
  color:var(--mg-granite);
  font-style:normal;
  text-align:left;
}
.smp-mg-step .wp-block-image figcaption::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:100%;
  height:14px;
  pointer-events:none;
  background:linear-gradient(to top,rgba(20,37,48,.10),rgba(20,37,48,0));
}

/* tip */
p.smp-mg-tip{
  margin:28px 0;
  padding:20px 24px;
  background:var(--mg-highlight);
  border:1px solid #f2e9c9;
  border-left:4px solid var(--mg-yellow);
  border-radius:0 4px 4px 0;
  font-size:15px;
  max-width:none;
}
p.smp-mg-tip strong{color:var(--mg-orange)}

/* ui chips */
.smp-mg-ui{
  display:inline-block;
  background:var(--mg-chip-fill);
  color:var(--mg-granite);
  border:1px solid var(--mg-chip-line);
  border-radius:3px;
  padding:1px 8px;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
}

@media (max-width:1100px){
  .smp-mg-rail-col{display:none}
}
@media (max-width:781px){
  .wp-block-columns.smp-mg-steps{padding-left:16px;padding-right:16px}
  .wp-block-group.smp-mg-step{
    padding-left:0;
    padding-top:48px;
    padding-bottom:48px;
    border-bottom:1px solid var(--mg-rule);
    margin-bottom:0;
  }
  .wp-block-group.smp-mg-step:last-child{border-bottom:0}
  .wp-block-group.smp-mg-step::after{display:none}
  .wp-block-group.smp-mg-step::before{position:static;margin-bottom:20px}
  .smp-mg-step h3{padding-top:0}
  .smp-mg-step .wp-block-image{margin-bottom:0}
}

/* 5. Band */
.smp-mg-band .wp-block-media-text__content{
  padding:clamp(32px,4.5vw,60px) clamp(24px,4vw,52px);
  align-self:center;
}
.smp-mg-band h4{
  color:#fff !important;
  margin-bottom:16px;
}
.smp-mg-band h2{
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.18;
  margin-bottom:26px;
}
.smp-mg-band p{max-width:46ch}

/* 6. FAQ */
.smp-mg-faq{
  padding-top:var(--mg-section-pad) !important;
  padding-bottom:var(--mg-section-pad) !important;
}
.smp-mg-faq > .wp-block-group__inner-container{padding:0 !important}
.smp-mg-faq h4:not(.c-accordion__title){margin-bottom:14px}
.smp-mg-faq .c-accordion__item:first-of-type{border-top:1px solid #dee2e6}
.smp-mg-faq .c-accordion__item .c-accordion__title:after{
  font-size:1.75rem;
  font-weight:400;
}
.smp-mg-faq .c-accordion__title{
  font-size:18px;
  padding-top:18px;
  padding-bottom:18px;
}
.smp-mg-faq .smp-accordion-group,
.smp-mg-faq .smp-accordion-group > .wp-block-group__inner-container{
  max-width:850px;
  margin-left:auto;
  margin-right:auto;
}

.smp-mg-faq h2{
  font-weight:700;
  letter-spacing:-.015em;
  font-size:clamp(26px,3.4vw,37px);
  line-height:1.15;
}

/* 7. Help */
.smp-mg-help{
  padding-top:var(--mg-section-pad) !important;
  padding-bottom:var(--mg-section-pad) !important;
}
.smp-mg-help > .wp-block-group__inner-container{padding:0 !important}
.smp-mg-help h4:not(.c-accordion__title){margin-bottom:14px}
.smp-mg-help h2{
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.18;
  font-size:clamp(26px,3.4vw,37px);
  margin-bottom:20px;
}
.smp-mg-help-lede{
  max-width:68ch;
  margin-left:auto !important;
  margin-right:auto !important;
}
.smp-mg-help-note{
  max-width:580px;
  margin:44px auto 0 !important;
  text-align:left;
}
.smp-mg-help-note > .wp-block-group__inner-container{padding:0 !important}
.smp-mg-help-note p{font-size:16px;line-height:1.8}
.smp-mg-help-note{
  background-color:#eff5f8 !important;
  border:1px solid #d6e5ee;
  border-left:4px solid #7eb4cd;
}
.smp-mg-help-note strong{color:var(--mg-granite) !important}
.smp-mg-help-note .smp-mg-eyebrow{color:var(--mg-blue)}
.smp-mg-help-note .smp-mg-eyebrow::before{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23036089' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01M11 12h1v4h1'/%3E%3C/svg%3E");
}
.smp-mg-help .wp-block-buttons{margin-top:56px}
.smp-mg-help .wp-block-button__link{margin-top:0 !important;margin-bottom:0 !important}
.smp-mg-legal{margin-top:44px !important;margin-bottom:0 !important}

/* 8. Lightbox */
.smp-mg-lightbox{
  position:fixed;inset:0;z-index:9999;display:none;
  background:rgba(20,37,48,.92);padding:clamp(16px,4vw,48px);
  align-items:center;justify-content:center;
}
.smp-mg-lightbox.is-open{display:flex}
.smp-mg-lightbox img{
  max-width:100%;max-height:100%;border-radius:4px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.smp-mg-lightbox button{
  position:absolute;top:16px;right:18px;width:44px;height:44px;
  border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.08);color:#fff;font-size:22px;
  line-height:1;cursor:pointer;
}
.smp-mg-lightbox button:hover{background:rgba(255,255,255,.18)}

/* 9. Motion */
@media (prefers-reduced-motion:reduce){
  .smp-mg-steps *,
  .smp-mg-lightbox *{transition:none !important;animation:none !important}
}