/* ==========================================================================
   Hems Digital — Free Masterclass Funnel
   A standalone stylesheet. Deliberately does NOT share tokens, components,
   or visual language with /css/styles.css (the main website). This funnel
   is meant to feel like a dedicated premium landing page, not another page
   on the corporate site.
   ========================================================================== */

:root{
  --ink:            #14141A;
  --ink-soft:       #4B4B58;
  --ink-faint:      #8A8A96;
  --paper:          #FFFFFF;
  --paper-tint:     #FAFAFB;
  --line:           #ECECF0;
  --accent:         #2F5CFF;
  --accent-dark:    #1E42D6;
  --accent-tint:    #EEF2FF;
  --whatsapp:       #22B558;
  --whatsapp-dark:  #1B9147;
  --success:        #1C8A5E;
  --error:          #D8402F;
  --radius-sm:      12px;
  --radius:         20px;
  --radius-lg:      28px;
  --shadow-soft:    0 20px 44px -26px rgba(20,20,26,0.18);
  --shadow-lift:    0 28px 60px -24px rgba(20,20,26,0.28);
  --content-w:      680px;
  --content-w-wide: 1040px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Manrope', sans-serif;
  color:var(--ink-soft);
  background:var(--paper);
  line-height:1.65;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Bricolage Grotesque', sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--ink);
  line-height:1.12;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

.wrap{ max-width:var(--content-w); margin:0 auto; padding:0 22px; }
.wrap-wide{ max-width:var(--content-w-wide); margin:0 auto; padding:0 22px; }

/* Minimal top bar — no navigation, no menu */
.mc-topbar{
  padding:20px 0;
  text-align:center;
  border-bottom:1px solid var(--line);
}
.mc-topbar .wordmark{
  font-family:'Bricolage Grotesque', sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink);
}
.mc-topbar .wordmark span{ color:var(--accent); }
.mc-topbar .presents{
  display:block;
  font-family:'Manrope', sans-serif;
  font-weight:500;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-top:3px;
}

/* Eyebrow / kicker */
.mc-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:0.04em;
  color:var(--accent-dark);
  background:var(--accent-tint);
  padding:8px 16px;
  border-radius:100px;
}

/* Sections */
.mc-section{ padding:64px 0; }
.mc-section-tight{ padding:48px 0; }
@media (min-width:760px){
  .mc-section{ padding:96px 0; }
  .mc-section-tight{ padding:64px 0; }
}
.mc-section-alt{ background:var(--paper-tint); }
.mc-head{ text-align:center; margin-bottom:36px; }
.mc-head h2{ font-size:clamp(26px,4.6vw,38px); margin-top:14px; }
.mc-head p{ font-size:17px; margin-top:14px; color:var(--ink-soft); max-width:520px; margin-left:auto; margin-right:auto; }

/* Hero */
.mc-hero{ padding:52px 0 20px; text-align:center; }
@media (min-width:760px){ .mc-hero{ padding:80px 0 32px; } }
.mc-hero h1{
  font-size:clamp(32px, 6.4vw, 54px);
  margin:20px 0 18px;
}
.mc-hero .lede{
  font-size:clamp(16px,2.4vw,19px);
  color:var(--ink-soft);
  max-width:560px;
  margin:0 auto;
}

/* Registration panel */
.mc-panel{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift);
  padding:28px 24px;
  max-width:460px;
  margin:36px auto 0;
  position:relative;
  overflow:hidden;
}
@media (min-width:540px){ .mc-panel{ padding:36px 34px; } }

.mc-form{ transition:opacity .22s var(--ease), transform .22s var(--ease); }
.mc-form.is-leaving{ opacity:0; transform:translateY(-6px); }

.mc-field{ margin-bottom:16px; text-align:left; }
.mc-field label{
  display:block; font-size:13px; font-weight:700; color:var(--ink);
  margin-bottom:7px; letter-spacing:0.01em;
}
.mc-field input{
  width:100%; padding:15px 16px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font-size:16px; font-family:'Manrope'; color:var(--ink); background:var(--paper-tint);
  transition:border-color .15s, background .15s;
}
.mc-field input:focus{ outline:none; border-color:var(--accent); background:var(--paper); }
.mc-field input.invalid{ border-color:var(--error); }
.mc-field .form-error{ font-size:12.5px; color:var(--error); margin-top:6px; display:none; }
.mc-field.has-error .form-error{ display:block; }

.mc-submit{
  width:100%; background:var(--accent); color:#fff; border:none; border-radius:var(--radius-sm);
  padding:17px 20px; font-size:16.5px; font-weight:700; font-family:'Bricolage Grotesque';
  cursor:pointer; letter-spacing:0.01em; transition:transform .12s, background .15s, box-shadow .15s;
  box-shadow:0 16px 30px -12px rgba(47,92,255,0.55);
  margin-top:4px;
}
.mc-submit:hover{ background:var(--accent-dark); transform:translateY(-1px); }
.mc-submit:active{ transform:scale(.98); }
.mc-submit:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

.form-submit-error{ font-size:13.5px; color:var(--error); margin-top:12px; text-align:center; min-height:0; }
.mc-panel.has-submit-error .form-submit-error{ min-height:18px; }

.mc-trust{
  font-size:12.5px; color:var(--ink-faint); margin-top:14px; text-align:center; line-height:1.55;
}

/* Success state (Step 2) */
.register-success{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:36px 28px; opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
  background:var(--paper);
}
.register-success.is-shown{ opacity:1; pointer-events:auto; }
.mc-panel.is-success .mc-form{ visibility:hidden; }
.register-success .icon-circle{
  width:56px; height:56px; border-radius:50%; background:var(--accent-tint); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:14px;
}
.register-success h3{ font-size:20px; margin-bottom:6px; }
.register-success p{ color:var(--ink-soft); font-size:14.5px; }

/* Buttons (shared CTA styling outside the form) */
.mc-btn{
  display:inline-flex; align-items:center; gap:10px; padding:17px 30px; border-radius:100px;
  font-family:'Bricolage Grotesque'; font-weight:700; font-size:16px; cursor:pointer; border:none;
  text-decoration:none; letter-spacing:0.01em; transition:transform .12s, background .15s, box-shadow .15s;
}
.mc-btn-primary{ background:var(--accent); color:#fff; box-shadow:0 16px 30px -12px rgba(47,92,255,0.5); }
.mc-btn-primary:hover{ background:var(--accent-dark); transform:translateY(-1px); }
.mc-btn-whatsapp{ background:var(--whatsapp); color:#fff; box-shadow:0 16px 30px -12px rgba(34,181,88,0.5); }
.mc-btn-whatsapp:hover{ background:var(--whatsapp-dark); transform:translateY(-1px); }
.mc-btn-outline{ background:transparent; color:var(--ink); border:1.5px solid var(--line); box-shadow:none; }
.mc-btn-outline:hover{ border-color:var(--ink); }

/* Video */
.mc-video-frame{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lift);
  background:#000;
  max-width:420px;
  margin:32px auto 0;
}
.mc-video-frame video{ width:100%; display:block; max-height:640px; }

/* Numbered basics grid */
.mc-basics{ display:grid; grid-template-columns:1fr; gap:14px; max-width:var(--content-w); margin:0 auto; }
@media (min-width:640px){ .mc-basics{ grid-template-columns:1fr 1fr; } }
.mc-basic-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; background:var(--paper);
  text-align:left;
}
.mc-basic-card h3{ font-size:16.5px; margin-bottom:8px; }
.mc-basic-card p{ font-size:14.5px; }

/* Course intro card */
.mc-course-card{
  background:var(--ink); color:#fff; border-radius:var(--radius-lg); padding:40px 30px; text-align:center;
  max-width:var(--content-w); margin:0 auto;
}
.mc-course-card .mc-eyebrow{ background:rgba(255,255,255,0.12); color:#C7D3FF; }
.mc-course-card h2{ color:#fff; font-size:clamp(24px,4.4vw,32px); margin:16px 0 12px; }
.mc-course-card p{ color:#C4C4CE; max-width:480px; margin:0 auto 26px; }

/* Testimonials */
.mc-testimonial-grid{
  display:grid; grid-template-columns:1fr; gap:16px; max-width:var(--content-w-wide); margin:0 auto;
}
@media (min-width:620px){ .mc-testimonial-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:960px){ .mc-testimonial-grid{ grid-template-columns:repeat(3,1fr); } }
.mc-testimonial-card{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft);
  background:var(--paper);
}
.mc-testimonial-card img{ width:100%; height:auto; display:block; }

/* WhatsApp CTA bands */
.mc-cta-band{ text-align:center; }
.mc-cta-band .mc-eyebrow{ background:rgba(34,181,88,0.12); color:var(--whatsapp-dark); }
.mc-cta-band h2{ margin:16px 0 10px; font-size:clamp(24px,4.2vw,32px); }
.mc-cta-band p{ max-width:460px; margin:0 auto 26px; }

/* Community card */
.mc-community-card{
  border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:40px 28px; text-align:center;
  max-width:560px; margin:0 auto;
}
.mc-community-card h2{ margin:16px 0 10px; font-size:clamp(22px,4vw,30px); }
.mc-community-card p{ color:var(--ink-soft); max-width:440px; margin:0 auto 24px; }

/* Founder / about */
.mc-founder{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px;
  max-width:560px; margin:0 auto;
}
@media (min-width:640px){ .mc-founder{ flex-direction:row; text-align:left; } }
.mc-founder picture{
  flex:0 0 auto; width:120px; height:150px; display:block;
}
.mc-founder img{
  width:120px; height:150px; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow-soft); flex:0 0 auto;
}
.mc-founder h3{ font-size:19px; margin-bottom:3px; }
.mc-founder .role{ font-size:13px; color:var(--accent-dark); font-weight:700; margin-bottom:10px; }
.mc-founder p{ font-size:14.5px; }

/* Final CTA */
.mc-final{ text-align:center; }
.mc-final h2{ font-size:clamp(24px,4.4vw,34px); margin-bottom:12px; }
.mc-final p{ max-width:480px; margin:0 auto 28px; }
.mc-btn-row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* Minimal footer */
.mc-footer{ padding:36px 0; border-top:1px solid var(--line); text-align:center; }
.mc-footer p{ font-size:12.5px; color:var(--ink-faint); }
.mc-footer a{ color:var(--ink-faint); text-decoration:underline; }

/* Scroll reveal */
html.js-reveal [data-reveal]{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
html.js-reveal [data-reveal].is-visible{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   v2 — alternating BLUE / WHITE / BLACK section rhythm, to match the
   same design discipline now used on hemsdigital.com.ng's main pages
   (kept as an independent implementation — no classes shared with
   /css/styles.css — so the funnel still doesn't depend on the main site).
   ========================================================================== */

.mc-band-dark{ background:#0A0A0F; color:#fff; }
.mc-band-dark h1, .mc-band-dark h2, .mc-band-dark h3{ color:#fff; }
.mc-band-dark p{ color:#B7B7C4; }
.mc-band-dark .mc-eyebrow{ background:rgba(255,255,255,0.1); color:#AFC0FF; }
.mc-band-dark .mc-basic-card,
.mc-band-dark .mc-testimonial-card{ background:#15151C; border-color:#26262F; }
.mc-band-dark .mc-basic-card p{ color:#B7B7C4; }

.mc-band-blue{ background:linear-gradient(155deg, var(--accent-dark) 0%, var(--accent) 100%); color:#fff; }
.mc-band-blue h1, .mc-band-blue h2, .mc-band-blue h3{ color:#fff; }
.mc-band-blue p{ color:#DCE6FF; }
.mc-band-blue .mc-eyebrow{ background:rgba(255,255,255,0.16); color:#fff; }

.mc-band-dark .lede{ color:#C7C7D6; }

/* Hero on a dark backdrop needs its trust/panel text re-checked for contrast —
   the panel itself stays white (it's a floating card), so no change needed there. */

/* Testimonial carousel — swipe-native via scroll-snap, same pattern used
   sitewide, reimplemented here with mc- prefixed classes to keep this
   stylesheet independent. */
.mc-carousel{ position:relative; }
.mc-carousel-track{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:6px 6px 18px; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.mc-carousel-track::-webkit-scrollbar{ display:none; }
.mc-carousel-slide{
  flex:0 0 82%; scroll-snap-align:center; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:var(--paper); box-shadow:var(--shadow-soft);
}
.mc-carousel-slide img{ width:100%; height:auto; display:block; }
.mc-carousel-slide .cap{ padding:12px 14px 14px; font-size:13px; color:var(--ink-soft); border-top:1px solid var(--line); }
@media (min-width:640px){ .mc-carousel-slide{ flex-basis:45%; } }
@media (min-width:960px){ .mc-carousel-slide{ flex-basis:31%; } }
.mc-carousel-controls{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:4px; }
.mc-carousel-arrow{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--paper);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .15s, background .15s;
}
.mc-carousel-arrow:hover{ border-color:var(--accent); background:var(--accent-tint); }
.mc-carousel-arrow svg{ width:17px; height:17px; color:var(--ink); }
.mc-carousel-dots{ display:flex; gap:7px; }
.mc-carousel-dot{ width:7px; height:7px; border-radius:50%; background:var(--line); border:none; padding:0; cursor:pointer; transition:background .15s, transform .15s; }
.mc-carousel-dot.is-active{ background:var(--accent); transform:scale(1.3); }
@media (max-width:859px){ .mc-carousel-arrow{ display:none; } }