/* Digital Dropshipping Mastery — one stylesheet for the whole site.
   Brand system is locked and documented in
   /mnt/c/Funnels/Clients/Mohamed Agel/brand-guidelines.md — Montserrat + Inter,
   #c300ff on near-black, purple as the ONLY accent. */

:root {
  --brand: #c300ff;
  --bg: #070707;
  --panel: #0e0c10;
  --text: #f5f5f5;
  --muted: #b0b0b0;
  --faint: #7d7d7d;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(195, 0, 255, 0.35);
  --wrap: 1080px;
  --narrow: 760px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--muted);
  font: 400 17px/1.65 Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, .kicker, .btn, .f-title, .f-option, .f-next {
  font-family: Montserrat, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3 { color: var(--text); margin: 0; line-height: 1.15; }

a { color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: var(--narrow); }

/* Body copy is held to a readable measure. Long lines are the number one
   readability killer on a dark page, not small text. */
.measure { max-width: 64ch; margin-left: auto; margin-right: auto; }

section { padding: 72px 0; }

.em { color: var(--brand); }

/* ---------------------------------------------------------------- kicker */

.kicker {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(195, 0, 255, 0.08);
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/*
 * The dot that breathes.
 *
 * It was on the original and it is not decoration: a slow pulse next to a
 * "reveals" label reads as live, which is the entire job of that pill. Two
 * layers — a solid core and a ring that expands and fades — because a single
 * element fading in and out just looks like a rendering glitch.
 */
.pill-dot {
  position: relative;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 8px var(--brand);
}
.pill-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--brand);
  animation: pill-pulse 2.2s ease-out infinite;
}
@keyframes pill-pulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative;
  padding: 46px 0 56px;
  text-align: center;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(195, 0, 255, 0.16) 0%, transparent 62%),
    var(--bg);
}

.hero h1 {
  margin: 22px auto 0;
  /* ---- NO WIDTH CAP, AND THAT IS THE WHOLE POINT ----

     This carried `max-width: 24ch` and it is the second place the same mistake
     shipped — the form heading had `20ch`. A cap measured in characters looks
     tidy in a stylesheet and has no relationship to the words in the headline:
     it held this one to THREE lines at 1280 where the live page holds two, and
     to five at 390 where the live page manages three.

     Measured off digitaldropmastery.com at both widths rather than chosen:
     44px at 1280 falling to 22px at 390, line-height 1.3, no cap at all. The
     line count of a centred headline is set by the font size and the words,
     never by hand. */
  font-size: clamp(22px, 2.472vw + 12.36px, 44px);
  line-height: 1.3;
  /*
   * 700, NOT 800. Measured against the live GoHighLevel page, whose hero H1 is
   * Montserrat 700 at 44px — the authored sections below are the ones that use
   * 800, deliberately. Shipping 800 here read as a different typeface at a
   * glance, and Kamil spotted it immediately.
   */
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Same again: uncapped, and at the live page's sizes. 18px at 1280 on one
   line, 14px at 390. It was 15px on a 1.65 line-height inside a 60ch cap,
   which put it on two lines under a headline that was already one too many. */
.hero .sub {
  margin: 18px auto 0;
  color: #fff;
  font-size: clamp(14px, 0.449vw + 12.25px, 18px);
  line-height: 1.3;
  font-weight: 400;
}

/* The VSL. A fixed 16:9 box reserved BEFORE the player loads, so the page does
   not jump the moment the video mounts — on paid traffic that shift lands
   exactly when somebody is reaching for the button. */
.vsl {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 30px auto 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--line), 0 30px 90px -30px rgba(195, 0, 255, 0.45);
}
/* No aspect-ratio and no absolute children: the VTurb placeholder reserves the
   16:9 box itself with padding-top, and a second ratio box on the wrapper
   fights it — the player ends up letterboxed inside its own reservation. */

/* --------------------------------------------------------------- buttons */

.cta-block { margin: 30px auto 0; text-align: center; }

/* Measured off the live page, not designed: 337x71, 16px/32px padding, a 5px
   radius, an 18px/600 label and a 15px/400 note at 0.8 opacity.

   ---- THE NOTE BELONGS INSIDE THE BUTTON ----

   Kamil: "why is it that you've made it so that the spots are first come
   first serve is not a part of the button? It should be the sub-headline
   within the button."

   He is right and it is not a cosmetic point. Scarcity printed underneath a
   button is a caption about the page; scarcity printed inside it is part of
   the thing being pressed, so it is read in the same glance as the decision.
   Splitting them also let the note wander — it sat under a centred button in
   one section and under a left-aligned one in another. One element cannot
   drift away from itself. */
.btn {
  display: inline-block;
  padding: 16px clamp(16px, 6vw, 32px);
  border: 0;
  border-radius: 5px;
  background: linear-gradient(180deg, #d43aff 0%, var(--brand) 100%);
  color: #fff;
  /* ONE LINE, ALWAYS. The label wrapped to two lines at 360px and below,
     which is most Android phones and every small iPhone — measured: 2 lines
     at 320 and 360, 1 line at 390. A button that will not fit needs a
     smaller size, not a smaller box, so the type scales with the viewport
     and the side padding comes in with it. */
  white-space: nowrap;
  font-size: clamp(14px, 4.5vw, 18px);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 12px 34px -12px rgba(195, 0, 255, 0.85);
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* The second line inside the button. `display:block` so it stacks under the
   label without a <br>, which would not survive the label being edited. */
.btn-note {
  display: block;
  margin: 3px 0 0;
  white-space: nowrap;
  font-size: clamp(11.5px, 3.8vw, 15px);
  font-weight: 400;
  opacity: 0.8;
}

/* ------------------------------------------------------------ rating row */

.rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  margin-top: 20px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.rating .stars { color: var(--brand); font-size: 18px; letter-spacing: 2px; }
.rating .divider { color: var(--faint); }
.rating a { text-decoration: none; }
.rating a:hover { color: var(--brand); }

/* ---------------------------------------------------------------- panels */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 44px 34px;
}

.lead-in {
  margin: 22px auto 0;
  color: var(--muted);
  font-size: 17px;
}
.lead-in strong { color: var(--text); font-weight: 500; }
.lead-in .punch { color: var(--brand); font-weight: 700; }

h2.big {
  margin: 14px auto 0;
  font-size: clamp(26px, 4.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.015em;
  max-width: 22ch;
}

/* ------------------------------------------------------------ value stack */

.stack { display: grid; gap: 20px; margin-top: 34px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 24px;
}
.card.accent {
  border-color: var(--line-strong);
  background: linear-gradient(180deg, rgba(195, 0, 255, 0.07) 0%, var(--panel) 60%);
}
.card > .kicker { font-size: 11px; }

.row { display: flex; gap: 14px; padding: 15px 0; border-top: 1px solid var(--line); }
.row:first-of-type { border-top: 0; padding-top: 14px; }
.row .tick {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(195, 0, 255, 0.14);
  color: var(--brand);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
}
.row .num {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
  font-family: Montserrat, sans-serif;
  font-size: 14px; font-weight: 800;
}
.row h3 { font-size: 17px; font-weight: 700; }
.row p { margin: 5px 0 0; font-size: 14.5px; line-height: 1.6; }

.closer {
  margin: 30px auto 0;
  text-align: center;
  color: var(--text);
  font-family: Montserrat, sans-serif;
  font-size: clamp(17px, 2.6vw, 21px);
  font-weight: 700;
  line-height: 1.4;
}

/* --------------------------------------------------------- who it is for */

.split { display: grid; gap: 20px; margin-top: 34px; }

.col { border-radius: 14px; padding: 26px 24px; border: 1px solid var(--line); }
.col.yes {
  border-color: var(--line-strong);
  background: linear-gradient(180deg, rgba(195, 0, 255, 0.09) 0%, var(--panel) 55%);
  box-shadow: 0 0 60px -24px rgba(195, 0, 255, 0.5);
}
.col.no { background: var(--panel); opacity: 0.86; }
.col h3 { font-size: 19px; font-weight: 700; }
.col.no h3 { color: var(--muted); }
.col ul { margin: 16px 0 0; padding: 0; list-style: none; }
.col li {
  display: flex; gap: 11px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 15px; line-height: 1.55;
  color: var(--text);
}
.col li:first-child { border-top: 0; }
.col.no li { color: var(--faint); }
.col li .mark { flex: 0 0 auto; color: var(--brand); font-weight: 800; }
.col.no li .mark { color: var(--faint); }

/* ------------------------------------------------------------ proof wall */

.proof-grid {
  display: grid;
  /*
   * Two up on a phone, three up on a laptop — NOT six.
   * `minmax(190px, 1fr)` packed seven of these across a 1280px screen, which
   * made every screenshot a thumbnail nobody can read. A results wall whose
   * numbers cannot be read is not proof of anything.
   */
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 34px;
}
@media (min-width: 760px) {
  .proof-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
.proof-grid img {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
}

/* Testimonial video blocks. Same reserved-box trick as the VSL. */
/* Claim on the left, proof on the right.

   Kamil: *"put the titles on the left, put the videos on the right. It's much
   easier to read if you do the strategy we already used."* He is right about
   the reason as well as the arrangement. Centred, the heading is a banner the
   eye finishes before the video has loaded, and the two read as separate
   items; side by side the sentence and the thing that proves it are one unit,
   and a headline set flush-left is a headline you read at a glance instead of
   scanning back to the middle for each line.

   Stacked below 760px, which is the breakpoint the rest of this page already
   turns at. A 16:9 video next to text in a phone-width column is two things
   nobody can see. */
.testimonial { margin-top: 34px; text-align: center; }
.testimonial h3 {
  font-size: clamp(20px, 3.4vw, 28px);
  font-weight: 700;
  max-width: 22ch;
  margin: 0 auto 18px;
}
.testimonial .frame {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--line);
}
@media (min-width: 760px) {
  .testimonial {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 30px;
    margin-top: 46px;
    text-align: left;
  }
  .testimonial h3 {
    /* No `max-width: 22ch` in this mode. The column is already the cap, and a
       character limit inside a grid track fights the track for the width. */
    max-width: none;
    margin: 0;
    line-height: 1.25;
  }
  .testimonial .frame { max-width: none; margin: 0; }
}
.testimonial .frame > * { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ------------------------------------------------------------------ form */

/* Copied off the live page rather than designed, because it was already
   right and this section is the one Kamil reads most. Measured at two widths
   on digitaldropmastery.com: 38px/700/1.3 at 1280 falling to 26px at 390, no
   width cap, and a 30px→20px italic sub.

   The `max-width: 20ch` that used to sit here is what broke it. A cap in
   characters looks tidy in a stylesheet and has nothing to do with the words
   in the headline: it forced this one onto two lines at 1280 where the live
   page holds it on one, and onto three at the laptop widths in between. The
   line count of a centred headline is not something to set by hand — the
   font size sets it, and the font size here is now the live page's. */
.form-head { text-align: center; }
.form-head h2 {
  font-size: clamp(26px, 1.348vw + 20.74px, 38px);
  line-height: 1.3;
  font-weight: 700;
  margin: 0 auto;
}
.form-head p {
  margin: 10px 0 0;
  color: var(--brand);
  font-family: Montserrat, sans-serif;
  font-size: clamp(20px, 1.124vw + 15.6px, 30px);
  line-height: 1.3;
  font-weight: 700;
  font-style: italic;
}

#ddm-form { margin-top: 30px; }

.f-card {
  max-width: 620px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px 26px 26px;
}
.f-card.is-calendar { max-width: 900px; }

.f-progress {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.f-progress span {
  display: block;
  height: 100%;
  background: var(--brand);
  border-radius: 999px;
  transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.f-count {
  margin: 9px 0 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.f-title {
  margin: 16px 0 20px;
  font-size: clamp(19px, 3vw, 24px);
  font-weight: 700;
  line-height: 1.3;
}

.f-options { display: grid; gap: 10px; }

.f-option {
  width: 100%;
  text-align: left;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
.f-option:hover { border-color: var(--line-strong); background: rgba(195, 0, 255, 0.07); }
.f-option:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.f-option.is-on {
  border-color: var(--brand);
  background: rgba(195, 0, 255, 0.16);
  transform: translateX(2px);
}

.f-field { margin-bottom: 14px; }

.f-input {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  /* 16px minimum. Anything smaller makes iOS Safari zoom the whole page in on
     focus, and it never zooms back out. */
  font: 400 16px/1.4 Inter, sans-serif;
}
.f-input::placeholder { color: var(--faint); }
.f-input:focus { outline: none; border-color: var(--brand); background: rgba(195, 0, 255, 0.06); }
.f-input.is-bad { border-color: #ff4d6d; }

.f-error { margin: 9px 0 0; color: #ff6b83; font-size: 13.5px; }
.f-link { color: var(--brand); }

.f-next {
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #d43aff 0%, var(--brand) 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 30px -14px rgba(195, 0, 255, 0.9);
}
.f-next:hover { filter: brightness(1.06); }
.f-next:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.f-back {
  margin: 16px auto 0;
  display: block;
  border: 0;
  background: none;
  color: var(--faint);
  font-size: 13px;
  cursor: pointer;
}
.f-back:hover { color: var(--muted); }

.f-accepted { text-align: center; margin-bottom: 20px; }
.f-accepted-title {
  margin: 0;
  color: var(--brand);
  font-family: Montserrat, sans-serif;
  font-size: clamp(20px, 3.2vw, 26px);
  font-weight: 800;
}
.f-accepted-sub { margin: 8px 0 0; color: var(--text); font-size: 16px; }

/* ---- THE CALENDLY IFRAME NEEDS A HEIGHT SPELLED OUT ----
   The widget script sizes its iframe from a postMessage the embedded page
   sends, and until that arrives — or if it never does, which is what happens
   when the message is blocked — the iframe sits at its intrinsic 150px and the
   calendar is a letterbox slot nobody can pick a time in. Measured at exactly
   150px on a 390px viewport before this existed.

   So the height is set here rather than waited for. Taller on a phone, not
   shorter: the month grid and the time column sit side by side on a desktop
   and stack on a phone, so the small screen is the one that needs more room. */
.f-calendar { min-height: 820px; }
.f-calendar .calendly-inline-widget,
.f-calendar iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: 820px !important;
  border: 0;
}
@media (min-width: 760px) {
  .f-calendar,
  .f-calendar .calendly-inline-widget,
  .f-calendar iframe { min-height: 700px !important; }
}

.f-saved {
  margin: 14px 0 0;
  text-align: center;
  color: var(--faint);
  font-size: 13px;
}

/* ------------------------------------------------------------------- FAQ */

.faq { max-width: 760px; margin: 26px auto 0; }
.faq details {
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.faq details:first-of-type { border-top: 1px solid var(--line); border-radius: 10px 10px 0 0; }
.faq details:last-of-type { border-radius: 0 0 10px 10px; }
.faq details[open] { border-bottom-color: var(--line-strong); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  color: #fff;
  font-size: 15.5px;
  font-style: italic;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "";
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 180ms ease;
}
.faq details[open] summary::before { transform: rotate(-135deg) translate(-2px, -2px); }
.faq .answer { padding: 0 18px 18px 38px; color: #e8e8e8; font-size: 15px; }

/* ---------------------------------------------------------------- footer */

.disclaimer {
  padding: 34px 20px 44px;
  text-align: center;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.7;
  max-width: 820px;
  margin: 0 auto;
}

/* ------------------------------------------------------------ confirmation */

.confirm-hero { text-align: center; padding: 60px 0 10px; }
.confirm-hero h1 {
  margin: 18px auto 0;
  max-width: 18ch;
  font-size: clamp(27px, 5vw, 42px);
  font-weight: 800;
}
.confirm-hero p { margin: 16px auto 0; max-width: 56ch; font-size: 17px; }

.steps-3 { display: grid; gap: 16px; margin-top: 34px; }

.faq-videos { display: grid; gap: 20px; margin-top: 30px; }
.faq-video h3 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
/* The vTurb player mounts inside this and reserves its own 16:9 box, so the
   wrapper only supplies the frame — no aspect-ratio here, or the two fight. */
.faq-video > div {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
}

/* --------------------------------------------------------------- desktop */

@media (min-width: 760px) {
  section { padding: 88px 0; }
  .panel { padding: 56px 48px; }
  .stack { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr 1fr; align-items: start; }
  .steps-3 { grid-template-columns: repeat(3, 1fr); }
  .faq-videos { grid-template-columns: repeat(2, 1fr); }
  .f-card { padding: 34px 32px 30px; }
}

/* Somebody who has asked their browser to stop moving things gets a form that
   does not move. The progress bar still fills — it just arrives. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}