/* ===========================================================
   Learn to Earn Through Content — additions on top of home.css,
   theme.css and ai.css, which are the AI for Content Creation
   page's stylesheets used as-is so the workshops read as one family.

   Only what this page has and that one does not lives here: the
   price beside the hero CTA, the reach band under the hero, the
   bonus photos (landscape, not square) and written testimonials
   in place of video ones.
   =========================================================== */

/* ---------- Price beside the hero CTA ---------- */

.le-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}
.le-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-family: var(--dis);
}
.le-price b { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); }
.le-price s { font-size: 17px; color: var(--fg-3); }
.le-price span {
  align-self: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(var(--glow), 0.16);
  color: var(--accent-ink);
  font-family: var(--mn);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lp-strip s { opacity: 0.7; margin-left: 4px; }

/* ---------- Reach band ---------- */

.le-reach { padding-block: 0 clamp(28px, 4vw, 44px); }
.le-reach-in {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--rule);
  border-radius: 18px;
  overflow: hidden;
}
.le-reach-in > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 22px;
}
.le-reach-in > div + div { border-left: 1px solid var(--rule); }
.le-reach b {
  font-family: var(--dis);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: -0.02em;
  color: var(--fg);
}
.le-reach span { font-size: 13.5px; color: var(--fg-2); }

/* ---------- Bonus photos ---------- */

.lp-bonus-art img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

/* ---------- Written testimonials ---------- */

.le-quote {
  flex-basis: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  margin: 0;
  padding: 24px 22px 20px;
  background: #ffffff;
  border-color: var(--rule);
}
.le-quote blockquote {
  position: relative;
  margin: 0;
  padding-top: 28px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--fg-2);
}
.le-quote blockquote::before {
  content: "\201C";
  position: absolute;
  top: -14px;
  left: -2px;
  font-family: var(--dis);
  font-size: 60px;
  line-height: 1;
  color: var(--volt);
}
.le-quote figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--fg);
}
.le-quote figcaption img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

@media (max-width: 640px) {
  .le-reach-in { grid-template-columns: minmax(0, 1fr); }
  .le-reach-in > div + div { border-left: 0; border-top: 1px solid var(--rule); }
  .le-reach-in > div { flex-direction: row; align-items: baseline; justify-content: space-between; padding: 14px 18px; }
  .le-quote { flex-basis: 260px; }
}

/* home.css lifts the hero copy's children into the grid on phones and
   orders them one by one; the CTA here sits inside .le-buy, so the
   wrapper takes the CTA's place in that order. */
@media (max-width: 860px) {
  .le-buy { order: 4; }
}

/* ---------- Reach band: platform logos ---------- */

.le-reach-label { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.le-socials { display: inline-flex; gap: 6px; }
.le-socials img { display: block; width: 20px; height: 20px; object-fit: contain; }

/* ---------- Hero headline ----------
   The workshop name is the headline; "Live Workshop" sits under it as
   a smaller tag line rather than a second headline. */
.lp-hero h1 em {
  margin-top: 10px;
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: 0.01em;
}
@media (max-width: 860px) {
  .lp-hero h1 em { font-size: min(5.2vw, 20px); margin-top: 6px; }
}

/* ---------- Enrol bar: scroll-only ----------
   home.css raises the bar from first paint on desktop. Here it waits for
   le.js on every width (see le.js for when it comes in). */
.lp-sticky[data-le-sticky] { transform: translate(-50%, 170%); }
.lp-sticky[data-le-sticky].is-in { transform: translate(-50%, 0); }

/* On a phone the nav's Enroll is a second copy of the hero button, then
   of the bar, so it goes. */
@media (max-width: 860px) {
  .lp-nav .lp-cta-xs { display: none; }
}

/* ---------- Testimonials: second rail and voice note ---------- */

.le-rail-written { margin-top: clamp(36px, 5vw, 56px); }
.le-sub-head {
  margin: 0;
  font-family: var(--dis);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -0.02em;
  color: var(--fg);
}

.le-voice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(22px, 4vw, 52px);
  align-items: center;
  margin-top: clamp(36px, 5vw, 56px);
  padding: clamp(24px, 4vw, 44px);
  border-radius: 26px;
  background:
    radial-gradient(520px 260px at 100% 0%, rgba(var(--glow), 0.28), transparent 70%),
    #03426a;
  color: #ffffff;
  overflow: hidden;
}

.le-voice-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-family: var(--mn);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffd166;
}
.le-voice-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #25d366;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  animation: le-ping 1.8s ease-out infinite;
}
.le-voice h3 {
  margin: 0 0 12px;
  font-family: var(--dis);
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.025em;
}
.le-voice-copy p:last-child { margin: 0; font-size: 16px; line-height: 1.65; color: #cfe0ec; }
.le-voice-copy b { color: #ffffff; }

/* The chat: a WhatsApp-ish wallpaper with one incoming voice bubble. */
.le-voice-chat {
  padding: clamp(18px, 3vw, 28px);
  border-radius: 20px;
  background-color: #0b2a3f;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.2px);
  background-size: 14px 14px;
}

.le-bubble {
  position: relative;
  max-width: 440px;
  padding: 12px 14px 8px;
  border-radius: 4px 18px 18px 18px;
  background: #ffffff;
  color: #03263d;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.le-bubble::before {
  content: "";
  position: absolute;
  top: 0; left: -8px;
  border-top: 10px solid #ffffff;
  border-left: 10px solid transparent;
}

.le-player { display: flex; align-items: center; gap: 12px; }

.le-play {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--volt);
  color: var(--on-volt);
  cursor: pointer;
}
.le-play svg { width: 22px; height: 22px; }
.le-play .i-play { margin-left: 2px; }
.le-play .i-pause { display: none; }
.le-voice.is-playing .le-play .i-play { display: none; }
.le-voice.is-playing .le-play .i-pause { display: block; }
.le-play:focus-visible, .le-speed:focus-visible, .le-wave:focus-visible { outline: 2px solid #03426a; outline-offset: 3px; }

/* Autoplay was refused: the button asks for the tap. */
.le-voice.needs-tap .le-play { animation: le-ping-volt 1.6s ease-out infinite; }

.le-wave {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 38px;
  cursor: pointer;
}
.le-wave i {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: rgba(3, 66, 106, 0.22);
  transition: background-color 0.2s ease;
}
.le-wave i.on { background: #03426a; }
.le-voice.is-playing .le-wave i.on:last-of-type,
.le-voice.is-playing .le-wave i.on + i:not(.on) { background: var(--volt); }

.le-speed {
  flex: none;
  min-width: 42px;
  padding: 5px 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(3, 66, 106, 0.08);
  color: #03426a;
  font-family: var(--mn);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

.le-bubble-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  padding-left: 58px;
  font-family: var(--mn);
  font-size: 11px;
  color: #6f8594;
}
.le-ticks { color: #34b7f1; }

.le-voice-hint {
  margin: 12px 0 0;
  font-family: var(--mn);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9fbad0;
}

@keyframes le-ping { to { box-shadow: 0 0 0 9px rgba(37, 211, 102, 0); } }
@keyframes le-ping-volt {
  0% { box-shadow: 0 0 0 0 rgba(var(--glow), 0.7); }
  100% { box-shadow: 0 0 0 16px rgba(var(--glow), 0); }
}

@media (max-width: 860px) {
  .le-voice { grid-template-columns: minmax(0, 1fr); }
  .le-bubble-meta { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .le-voice-dot, .le-voice.needs-tap .le-play { animation: none; }
}

/* ---------- Footer legal links ---------- */

.le-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.le-legal a { font-size: 14px; }

/* 56 bars at 2px plus gaps outgrow a phone's bubble and push the speed
   button out, so the wave is allowed to shrink and the chrome tightens. */
.le-wave { min-width: 0; }
@media (max-width: 520px) {
  .le-voice { padding: 22px 16px; }
  .le-voice-chat { padding: 14px 10px; }
  .le-player { gap: 8px; }
  .le-play { width: 40px; height: 40px; }
  .le-wave { gap: 1px; }
  .le-wave i { min-width: 1px; }
  .le-speed { min-width: 36px; padding: 4px 6px; }
}

/* ---------- Hero photo ----------
   The cut-out is cropped at the waist (the source's dark fade is gone)
   and already fades out at its foot, so home.css's mask is not needed.
   It is never cropped by the box: on a phone home.css switches to
   cover in a shorter box, which took the top of the head off. */
.lp-hero-media > img {
  object-fit: contain;
  object-position: 50% 100%;
  -webkit-mask-image: none;
  mask-image: none;
}
@media (max-width: 860px) {
  .lp-hero-media { aspect-ratio: 500 / 380; }
  .lp-hero-media > img { object-fit: contain; }
}

/* ---------- Full-width Enroll buttons on phones ---------- */
@media (max-width: 860px) {
  .le-buy { width: 100%; }
  main .lp-cta { display: flex; width: 100%; justify-content: center; box-sizing: border-box; }
}
@media (max-width: 860px) {
  main .lp-cta.lp-cta-sm { width: 100%; max-width: none; align-self: stretch; }
}

/* ---------- Hero headline: two lines of equal width ----------
   "Learn to Earn" is set larger and "Through Content" smaller so the two
   lines end at the same edge. The ratio is measured against the display
   face; the line sizes are in em of the span home.css already sizes. */
.lp-hero h1 .le-h1-a,
.lp-hero h1 .le-h1-b { display: block; white-space: nowrap; }
.lp-hero h1 .le-h1-a { font-size: 1.2em; }
.lp-hero h1 .le-h1-b { font-size: 0.935em; }

/* ---------- Hero CTA: wider on desktop ---------- */
@media (min-width: 861px) {
  .le-buy .lp-cta { min-width: 300px; padding-inline: 48px; }
}

/* ---------- Hero photo: framed in a solid arch ----------
   The full-length cut-out (500×471, down to the waist), with the source's
   dark backdrop, blue circle and dashed ring taken out so it sits on the
   cream page. The arch is as wide as the pair and starts just above
   Kavya's head, so Lokesh's head breaks out over it. The photo fades
   into the LIVE badge, which sits on the arch's foot. */
@media (min-width: 861px) {
  .lp-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.lp-hero-media { aspect-ratio: 500 / 471; max-width: 520px; width: 100%; margin-inline: auto; }
.lp-hero-media::before {
  inset: 9.5% 8% 0;
  border-radius: 999px 999px 18px 18px;
  background: linear-gradient(180deg, rgba(var(--glow), 0.3), rgba(var(--glow), 0.16));
  border: 1px solid rgba(var(--glow), 0.4);
}
.lp-hero-media::after { content: none; }
.lp-hero-media > img {
  height: 100%;
  object-fit: contain;
  object-position: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
}
.lp-hero-media .lp-flag { bottom: 0; transform: translate(-50%, 50%); }
@media (max-width: 860px) { .lp-hero-media { margin-bottom: 18px; } }

/* The workshop is a recording now: the red dot stays as a REC mark but
   no longer pulses like a live broadcast. */
.lp-flag .lp-live-dot { animation: none; }