/* ============================================================
   1-1 RESELLING COACHING — APPLICATION PAGE
   White, black, no motion. Mobile first.
   ============================================================ */

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

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

:root {
  --bg:          #fafaf9;   /* warm off-white, not pure white */

  /* Hero panel: slightly deeper than the page, with a dot texture strong
     enough to read as the panel's own surface rather than page noise. */
  --panel:        #f5f4f1;
  --panel-dot:    rgba(0, 0, 0, 0.06);
  --panel-border: #e8e6e1;
  /* Gap between stacked panels. Sourced from here alone — the hero's
     padding-bottom is 0 — so the cards read as one page, not two. */
  --panel-gap:    clamp(28px, 7vw, 44px);
  --panel-pad:    clamp(32px, 7vw, 48px);

  /* Elevation: panels sit on the page, media sits on the panels, and the
     button sits highest of all — it is the only thing meant to be pressed.
     The inset highlight is a lit top edge, which is what makes a flat
     rectangle read as a raised physical control. */
  --shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.04), 0 14px 34px -14px rgba(0, 0, 0, 0.10);
  --shadow-media: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 16px -8px rgba(0, 0, 0, 0.10);
  --shadow-btn:   0 1px 2px rgba(0, 0, 0, 0.24), 0 8px 20px -4px rgba(0, 0, 0, 0.40),
                  inset 0 1px 0 rgba(255, 255, 255, 0.20);
  --shadow-btn-hover: 0 2px 5px rgba(0, 0, 0, 0.28), 0 14px 28px -5px rgba(0, 0, 0, 0.45),
                  inset 0 1px 0 rgba(255, 255, 255, 0.24);
  /* Pressed: elevation drops away, so the button reads as pushed in. */
  --shadow-btn-active: 0 1px 1px rgba(0, 0, 0, 0.22),
                  inset 0 2px 4px rgba(0, 0, 0, 0.45);
  --text:        #111111;
  --text-muted:  #565656;
  --text-faint:  #8a8a8a;
  --border:      #e4e4e4;

  /* Apply button — warm near-black, same temperature as --bg so it sits
     with the page rather than against it. Hover lifts, active deepens. */
  /* Vertical only: lighter at the top, matching the light-from-above that
     the inset highlight and the downward shadows already imply. Pressed
     goes flat — a raised object catches a gradient, a pressed one doesn't.
     Kept shallow (~15 levels) to avoid banding on OLED phones. */
  --btn-bg:         linear-gradient(180deg, #2b2724 0%, #1c1917 100%);
  --btn-bg-hover:   linear-gradient(180deg, #35302c 0%, #241f1d 100%);
  --btn-bg-active:  #1c1917;
  /* Solid edge colours — border-color and outline can't take a gradient. */
  --btn-edge:        #1c1917;
  --btn-edge-hover:  #241f1d;
  --btn-edge-active: #14100f;

  --radius-lg:   18px;   /* video wrappers — kept from the reference */
  --radius:      14px;
  --radius-btn:  12px;

  --section-gap: clamp(56px, 9vw, 96px);
  /* Tighter gap above a section heading than below the section, so the
     heading sits closer to the divider line it belongs to. */
  --section-gap-top: clamp(38px, 6vw, 64px);
  /* Used both above and below the hero apply button, which centres it
     between the VSL and the divider line. Keep the two uses in sync. */
  --hero-cta-gap: clamp(38px, 7vw, 64px);
  --max-w:       860px;
}

body {
  font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Flat warm off-white. The dot texture lives on the hero panel only,
     so it reads as that panel's surface instead of page-wide noise. */
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

/* ── Section label ─────────────────────────────────────────── */
.section-heading {
  font-size: clamp(1.4rem, 5.5vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--text);
  text-align: center;
  margin-bottom: clamp(20px, 3vw, 28px);
}

/* ── Apply button ──────────────────────────────────────────── */
.btn {
  display: inline-block;
  width: auto;
  max-width: 100%;
  background: var(--btn-bg);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  padding: 18px 48px;
  border: 1px solid var(--btn-edge);
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-btn);
  cursor: pointer;
}

.btn:hover  { background: var(--btn-bg-hover);  border-color: var(--btn-edge-hover);  box-shadow: var(--shadow-btn-hover); }
.btn:active { background: var(--btn-bg-active); border-color: var(--btn-edge-active); box-shadow: var(--shadow-btn-active); }

.btn:focus-visible {
  outline: 2px solid var(--btn-edge);
  outline-offset: 3px;
}

/* ============================================================
   1–3. HERO: HEADLINE, VSL, APPLY BUTTON
   Sized so all three sit on the first screen of a phone.
   ============================================================ */
.hero {
  padding-top: clamp(16px, 4vw, 56px);
  padding-bottom: 0;   /* gap to the next card comes from --panel-gap alone */
  text-align: center;
}

/* ── Panel ─────────────────────────────────────────────────────
   Shared surface for every block on the page. Inset at every width so
   each section reads as its own object rather than content floating on
   a flat field. The hero adds the dot texture on top of this. */
.panel {
  margin-inline: 8px;
  background-color: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  box-shadow: var(--shadow-panel);
}

/* Tighter inner gutter than the page default, to claw back some of the
   width the card's inset costs the media inside it on a phone. */
.panel .container {
  padding-inline: clamp(16px, 4vw, 48px);
}

@media (min-width: 640px) {
  .panel {
    max-width: var(--max-w);
    margin-inline: auto;
    border-radius: 24px;
  }
}

/* Only the hero carries the texture, so it stays the focal point. */
.hero__panel {
  background-image: radial-gradient(circle, var(--panel-dot) 1px, transparent 1px);
  background-size: 24px 24px;
  padding-top: clamp(28px, 7vw, 72px);
  padding-bottom: var(--hero-cta-gap);
}

.hero__headline {
  /* 1.5rem min is deliberate: at 1.55rem the headline tips to 6 lines on a
     375px phone. See the line-count table — the threshold is 1.538rem. */
  font-size: clamp(1.5rem, 6.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.032em;
  color: var(--text);
  max-width: 16em;
  margin-inline: auto;
  text-align: center;
  text-wrap: pretty;
}

.video-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  background: #f3f1ec;   /* warmed to sit against the off-white page */
  border: 1px solid var(--border);
  box-shadow: var(--shadow-media);
}

.video-wrap--wistia {
  aspect-ratio: 16 / 9;
  margin-top: clamp(24px, 5vw, 36px);
  margin-bottom: var(--hero-cta-gap);
}

/* ============================================================
   4. VIDEO TESTIMONIALS
   ============================================================ */
/* ============================================================
   4 + 5. TESTIMONIALS (one panel, two groups)
   ============================================================ */
.proof {
  padding-top: var(--panel-gap);
}

.proof .panel {
  padding-block: var(--panel-pad);
}

/* Supporting surface: tint only. The hero keeps the border and shadow so
   it stays the heaviest thing on the page. */
.panel--flat {
  border-color: transparent;
  box-shadow: none;
}

/* Gap from the last video down to the screenshot grid — wider than the
   gap between individual videos so the two formats still read apart. */
.shot-grid {
  margin-top: clamp(48px, 11vw, 72px);
}

/* Apply button closing out the card. */
.proof__cta {
  margin-top: clamp(40px, 9vw, 56px);
  text-align: center;
}

.video-wrap--youtube {
  aspect-ratio: 16 / 9;
}

.video-wrap--youtube iframe { width: 100%; height: 100%; }

/* Spacing between stacked testimonial videos */
.video-wrap--youtube + .video-wrap--youtube { margin-top: clamp(44px, 9vw, 64px); }

/* ============================================================
   5. SCREENSHOT TESTIMONIALS
   ============================================================ */

/* Two explicit columns. Nothing is cropped and there are no ragged
   gaps, and unlike CSS columns the order is fixed — each screenshot
   stays in the column you put it in. To move one, move its .shot
   block between the two .shot-col lists in index.html. */
.shot-grid {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 2vw, 16px);
}

.shot-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vw, 16px);
}

.shot {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #ffffff;   /* pure white so cards lift off the panel */
  box-shadow: var(--shadow-media);
}

.shot img { width: 100%; height: auto; }

/* ============================================================
   7. DISCLAIMER
   ============================================================ */
.disclaimer {
  padding-top: var(--panel-pad);
  padding-bottom: clamp(28px, 4vw, 40px);
}

.disclaimer p {
  font-size: 0.7rem;
  line-height: 1.7;
  color: var(--text-faint);
  text-align: center;
}

.disclaimer strong { color: var(--text-muted); font-weight: 600; }

.disclaimer__links { margin-top: 12px; }
.disclaimer__links a { color: var(--text-faint); }

/* ============================================================
   CONFIRMATION PAGE (confirmation.html)
   Reuses the hero panel + .video-wrap--wistia. Overrides are scoped to
   .hero--confirm so the landing hero is never affected.
   ============================================================ */

/* Bigger and slightly bolder than the landing headline — this line is
   short, so it can carry more size. */
.hero--confirm .hero__headline {
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 700;
}

/* Muted line under the headline, sitting just above the video. The
   video's own margin-top provides the gap below it. */
.confirm__sub {
  margin: 12px auto 0;
  max-width: 26em;
  font-size: clamp(0.85rem, 3vw, 0.95rem);
  line-height: 1.3;   /* tight, since it wraps to two lines */
  color: var(--text-muted);
  text-wrap: pretty;
}

/* The video is the last element now, so drop its bottom margin — the
   panel's own padding-bottom supplies the space beneath it. */
.hero--confirm .video-wrap--wistia {
  margin-bottom: 0;
}

/* ============================================================
   LARGER SCREENS
   ============================================================ */