/* /active-listening/ (P2) */

/* anchor targets sit clear of the sticky header */
.anchor{ position:relative; height:0; scroll-margin-top:90px; }

/* --- hero -------------------------------------------------------------- */
.al-hero{
  display:flex; flex-direction:column;
  min-height:100vh;
  gap:3.625rem 0;
  padding:13.25rem 9.375rem 0;
  background:url("../img/hero-gradient.webp") center center / cover no-repeat;
}
.al-hero__eyebrow{ display:flow-root; align-self:center; text-align:center; color:var(--c-secondary); }
.al-hero__eyebrow p{ font-size:2.5rem; font-weight:500; line-height:1.3; }
.al-hero h1{
  align-self:center; text-align:center;
  font-size:3.625rem; font-weight:600; line-height:1.35;
  color:var(--c-primary);
}

/* --- overview ---------------------------------------------------------- */
.al-intro{
  display:flex; flex-direction:row; justify-content:space-between;
  flex-grow:0; flex-shrink:0;
  min-height:50rem;
  gap:10rem;
  padding:0 9.375rem;
  background:url("../img/intro-bg.webp") center center / cover no-repeat;
}
.al-intro__copy{
  flex:0 1 34.938rem; min-width:0;   /* live --width:559px; both columns shrink
                                        proportionally, holding a 57.1/42.9 split
                                        from 1440 down to the tablet breakpoint */
  display:flex; flex-direction:column;
  padding:7.5rem 0 6rem;     /* live 120/96 — this is what makes the band 848 tall */
}
.al-intro__copy h2{
  font-size:2.5rem; font-weight:500; line-height:1.3;
  color:var(--c-inverse);
  margin-bottom:60px;        /* live widget-container margin */
}
.al-intro__copy p{ font-size:1.5rem; font-weight:400; line-height:1.65; color:var(--c-inverse); margin-block-end:20px; }
/* the poster holds its 26.25rem base; the copy takes whatever is left, which is
   what produces the live 559 / 420 split at 1440 */
.al-intro__media{ flex:0 1 26.25rem; display:flex; align-items:center; justify-content:center; }
.al-intro__media img{ width:100%; max-width:100%; }

/* --- how active listening helps ---------------------------------------- */
.al-help{
  display:flex; flex-direction:column;
  margin-top:10rem;
  padding:0 9.375rem;
}
.al-help__row{
  align-self:center;
  display:flex; flex-direction:row;
  justify-content:space-between; align-items:center;
  gap:0 10rem;
  margin-bottom:8.125rem;
}
.al-help__row:last-child{ margin-bottom:10rem; }
.al-help__row > *{ flex:1 1 0; min-width:0; }
.al-help__copy{ display:flex; flex-direction:column; justify-content:center; gap:1.875rem 0; }
.al-help__copy h3{
  align-self:flex-start; text-align:start;
  font-size:2rem; font-weight:600; line-height:1.4;
  color:var(--c-primary);
}
.al-help__copy p{
  align-self:flex-start; text-align:start;
  font-size:1.5rem; font-weight:400; line-height:1.65;
  color:var(--c-primary);
}
.al-help__media img{ width:100%; max-width:40rem; }

/* --- what you will learn ------------------------------------------------ */
.al-learn{
  align-self:flex-start;
  display:flex; flex-direction:column;
  gap:100px;
  padding:10rem 9.375rem 0;
  background:var(--c-brown);
}
.al-learn h2{
  align-self:center; text-align:center;
  font-size:2.875rem; font-weight:500; line-height:1.3;
  color:var(--c-inverse);
  margin-bottom:100px;      /* live widget-container margin */
}
.al-steps{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:3.75rem;
  margin-bottom:10rem;
}
.al-steps__cell{
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:27.438rem;
  padding:2.5rem 3.75rem 2.813rem;
  background-position:center center; background-size:cover; background-repeat:no-repeat;
}
.al-steps__cell--1{ background-image:url("../img/step-1.webp"); }
.al-steps__cell--2{ background-image:url("../img/step-2.webp"); }
.al-steps__cell--3{ background-image:url("../img/step-3.webp"); }
.al-steps__cell--4{ background-image:url("../img/step-4.webp"); }
.al-steps__num{ font-size:3.625rem; font-weight:600; line-height:1.2; color:var(--c-amber); }
.al-steps__label{ font-size:1.5rem; font-weight:400; line-height:1.65; color:var(--c-inverse); }

.al-topics{ margin-bottom:10rem; }
.al-topics__item{ border:0; }
.al-topics summary{
  list-style:none; cursor:pointer;
  padding:4px 0;
  font-size:2rem; font-weight:600; line-height:1.4;
  color:var(--c-amber);
  text-decoration:underline;
}
.al-topics summary::-webkit-details-marker{ display:none; }
.al-topics__panel{ display:flex; flex-direction:column; gap:2.5rem; padding-top:2.5rem; }
.al-chapter h4{ font-size:2rem; font-weight:600; line-height:1.4; color:var(--c-inverse); }
.al-chapter p{ font-size:1.5rem; font-weight:400; line-height:1.65; color:var(--c-inverse); }

/* --- sample ------------------------------------------------------------ */
.al-sample{
  display:flex; flex-direction:column;
  gap:0;
  padding:10rem 9.375rem;
}
.al-sample h2{
  align-self:center; text-align:center;
  font-size:2.875rem; font-weight:500; line-height:1.3;
  color:var(--c-primary);
  margin-bottom:100px;
}
.al-sample h2.al-sample__cta-title{ margin-top:0; margin-bottom:260px; }
.al-sample__cta{
  align-self:center;
  width:100%; max-width:21.25rem;
  font-size:1.5rem; line-height:1;
  padding:1.625rem 4rem;
}

/* --- creators letter ---------------------------------------------------- */
.al-letter{
  display:flex; flex-direction:row; justify-content:space-between; align-items:flex-start;
  gap:0 10rem;
  padding:6.25rem 9.375rem;
}
.al-letter__copy{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; }
.al-letter__eyebrow{ display:flow-root; color:var(--c-secondary); }
.al-letter__eyebrow p{ font-size:2.875rem; font-weight:500; line-height:1.725rem; margin-block-end:.4rem; }
.al-letter__copy h2{ font-size:2rem; font-weight:600; line-height:1.4; color:var(--c-primary); margin-bottom:40px; }
.al-letter__text{
  margin-top:-20px;
  font-size:1.5rem; font-weight:400; line-height:1.65;
  color:var(--c-primary);
}
.al-letter__text p{ margin-block-end:1.6em; }   /* Astra p rule; 38.4px at 24px, 26.69px at 16.68px */
.al-letter__more{
  align-self:flex-start;
  padding:0; border:0; background:transparent;
  font-family:var(--f-family); font-weight:600;
  font-size:2rem; line-height:1.4;
  color:var(--c-secondary);
  text-decoration:underline;
  cursor:pointer;
}
.al-letter__media{ flex:1 1 0; min-width:0; }
.al-letter__picture img{ width:100%; max-width:40rem; }

/* --- testimonials ------------------------------------------------------- */
.al-testimonials{
  display:flex; flex-direction:column; gap:var(--widget-gap);
  padding:10rem 9.375rem;
}
.al-testimonials h2{
  align-self:center; text-align:center;
  font-size:2.875rem; font-weight:500; line-height:1.3;
  color:var(--c-secondary);
  margin-bottom:100px;
}
.carousel{ position:relative; padding-top:70px; background:var(--c-primary); }
.carousel__viewport{ overflow:hidden; }
.carousel__track{ display:flex; }
.carousel__slide{
  flex:0 0 100%;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
/* the quote is a share of the slide with a 15% bottom padding — that
   percentage is what gives the live slide most of its height. It sits on the
   inner block so it resolves against the quote's own width, as live does. */
.al-quote{
  margin:0; padding:0;
  width:70%; max-width:70%;
  font-size:1.5rem; font-weight:400; line-height:1.65;
  color:var(--c-inverse);
}
.al-quote p{ margin-block-end:0; padding-block-end:15%; }
.al-quote .hl{ color:var(--c-amber); }
.al-quote__avatar{
  width:100%; max-width:5rem; height:auto;
  border-radius:100%;
}
.al-quote__name{
  align-self:center;     /* shrink-to-fit, so the padding below resolves against
                            the name's own width the way the live widget does */
  font-size:1.25rem; font-weight:600; line-height:1.4;
  color:var(--c-inverse);
}
.al-quote__name p{ padding-block:10%; margin-block-end:0; }

.carousel__arrow{
  position:absolute; top:46%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer;
  color:var(--c-inverse);
  padding:0;
}
.carousel__arrow svg{ width:1rem; height:1rem; }
.carousel__arrow--prev{ left:9rem; }    /* live centres a 304px hit box on the edge */
.carousel__arrow--next{ right:9rem; }
.carousel__dots{ display:flex; justify-content:center; align-items:center; gap:1.876rem; height:12px; margin-top:37px; margin-bottom:37px; }
.carousel__dot{
  width:.625rem; height:.625rem; padding:0;
  border:0; border-radius:50%;
  background:var(--c-inverse); opacity:.2;
  cursor:pointer;
}
.carousel__dot.is-active{ opacity:1; }

/* --- pricing ------------------------------------------------------------ */
.al-pricing{
  display:flex; flex-direction:row; justify-content:space-between;
  gap:10rem;
  padding:10rem 9.375rem;
  background:url("../img/guides-bg.webp") center left / cover no-repeat;
}
.al-pricing__card{
  /* same card/poster relationship as the homepage guides band: the split tracks
     the available width linearly rather than holding a fixed ratio */
  flex:0 0 calc(57.08% - 30.7px);
  display:flex; flex-direction:column;
  padding:4.688rem 3.75rem 5rem 5rem;
  background:#FFFFFF;
}
.al-pricing__card h2{ font-size:2rem; font-weight:600; line-height:1.4; color:var(--c-primary); }
.al-pricing__price{ margin:1.563rem 0; font-size:3.625rem; font-weight:400; line-height:1.4; color:var(--c-primary); }
.al-pricing__desc{ max-width:35rem; font-size:1.5rem; font-weight:400; line-height:1.65; color:var(--c-primary); }
.al-pricing__card .btn{
  align-self:flex-start; max-width:21.25rem; width:100%;
  font-size:1.5rem; line-height:1; padding:1.625rem 4rem;
}
.al-pricing__media{ flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; }
.al-pricing__media img{ width:100%; max-width:26.25rem; }

/* --- FAQ ---------------------------------------------------------------- */
.al-faq{
  display:flex; flex-direction:column; gap:var(--widget-gap);
  padding:10rem 9.375rem;
}
.al-faq h2{
  align-self:center; text-align:center;
  font-size:2.875rem; font-weight:500; line-height:1.3;
  color:var(--c-primary);
  margin-bottom:65px;
}
.al-faq__list{ display:flex; flex-direction:column; }
.al-faq__item summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:0 10px;
  padding:2.188rem 0;                        /* live 35.008px */
  border-bottom:1px solid var(--c-primary);  /* live keeps it on the last row too */
  font-size:2rem; font-weight:600; line-height:1.35;
  color:var(--c-primary);
}
.al-faq__item summary::-webkit-details-marker{ display:none; }
.al-faq__marker{ display:flex; align-items:center; flex:none; color:var(--c-primary); }
.al-faq__caret{ width:.938rem; height:1.5rem; }
.al-faq__caret--open{ display:none; }
.al-faq__item[open] .al-faq__caret--closed{ display:none; }
.al-faq__item[open] .al-faq__caret--open{ display:block; }
.al-faq__answer{ padding-bottom:1.5rem; }
.al-faq__answer p{ font-size:1.5rem; font-weight:400; line-height:1.65; color:var(--c-primary); }

/* --- tablet -------------------------------------------------------------- */
@media (max-width:1024px){
  .al-hero{ gap:2.5rem 0; padding:20.438rem 3.286rem; background-image:url("../img/hero-gradient-tablet.webp"); }
  .al-hero__eyebrow p{ font-size:2.286rem; }
  .al-hero h1{ font-size:3.143rem; width:41rem; max-width:100%; }   /* live --container-widget-width */

  .al-intro{ min-height:0; gap:8rem; padding:0 3.286rem; background-image:url("../img/intro-bg-tablet.webp"); }
  .al-intro__copy{ flex:0 1 23rem; padding:4.375rem 0; }   /* live --width:23rem */
  .al-intro__copy h2{ font-size:1.429rem; margin-bottom:3.125rem; width:19rem; max-width:100%; align-self:flex-start; }
  .al-intro__copy p{ font-size:1.143rem; margin-block-end:16px; }
  .al-intro__media{ flex:0 1 auto; }
  .al-intro__media img{ width:auto; max-width:14.75rem; }   /* live 215.23px */

  .al-help{ margin-top:7.5rem; padding:0 3.286rem; }
  .al-help__row{ gap:1.75rem; margin-bottom:5rem; }
  .al-help__row:last-child{ margin-bottom:7.5rem; }
  .al-help__copy{ gap:1.25rem; }
  .al-help__copy h3{ font-size:1.286rem; line-height:1.3; }
  .al-help__copy p{ font-size:1.143rem; }

  .al-learn{ gap:0; padding:7.5rem 3.286rem 0; }
  .al-learn h2{ font-size:1.714rem; margin-bottom:3.75rem; }
  .al-steps{ margin-bottom:7.5rem; }
  .al-topics{ margin-bottom:7.5rem; }
  .al-steps{ gap:1.75rem; }
  .al-steps__cell{ min-height:16.688rem; padding:1.375rem; }
  .al-steps__cell--1{ background-image:url("../img/step-1-tablet.webp"); }
  .al-steps__cell--2{ background-image:url("../img/step-2-tablet.webp"); }
  .al-steps__cell--3{ background-image:url("../img/step-3-tablet.webp"); }
  .al-steps__cell--4{ background-image:url("../img/step-4-tablet.webp"); }
  .al-steps__num{ font-size:2.714rem; }
  .al-steps__label{ font-size:1.143rem; }
  .al-topics summary{ font-size:1.143rem; }
  .al-chapter h4{ font-size:1.286rem; }
  .al-chapter p{ font-size:1.143rem; }

  .al-sample{ padding:7.5rem 3.286rem; }
  .al-sample h2{ font-size:1.714rem; margin-bottom:3.75rem; }
  .al-sample h2.al-sample__cta-title{ margin-bottom:11.25rem; }
  .al-sample__cta{ font-size:1.286rem; padding:1.313rem 7.688rem; }

  .al-letter{ gap:5.5rem; padding:7.5rem 3.286rem 0; }
  .al-letter__copy{ flex:0 1 70%; }
  .al-letter__media{ flex:0 1 16.5rem; }
  .al-letter__picture img{ max-width:16.5rem; }
  .al-letter__eyebrow p{ font-size:1.143rem; line-height:1.4; margin-block-end:0; }
  .al-letter__copy h2{ font-size:1.286rem; margin-bottom:2.5rem; }
  .al-letter__text{ font-size:1.143rem; }
  .al-letter__more{ font-size:1.143rem; line-height:1.35; }

  .al-testimonials{ padding:11.125rem 3.286rem 7.5rem; }
  .al-testimonials h2{ font-size:1.714rem; margin-bottom:3.75rem; }
  .carousel__slide{ padding:0 8.75vw; }
  .al-quote{ width:60%; max-width:60%; font-size:1.143rem; }   /* live 322.56 of 537.6 */
  .carousel{ padding-top:3.125rem; }                  /* live 45.6px */
  .carousel__dots{ gap:1.25rem; height:.475rem; margin-top:1.145rem; margin-bottom:2.255rem; }
  .carousel__dot{ width:.375rem; height:.375rem; }
  .carousel__arrow--prev{ left:6rem; }
  .carousel__arrow--next{ right:6rem; }
  .al-quote__avatar{ margin:3.125rem 0 1.25rem; max-width:3.75rem; }
  .al-quote__name{ font-size:.75rem; }

  .al-pricing{ gap:7.25rem; padding:7.5rem 3.286rem; background-image:url("../img/guides-bg-tablet.webp"); }
  .al-pricing__card{ flex:0 1 50%; padding:1.875rem 1.5rem 2.5rem; }   /* live --width:50% */
  .al-pricing__card h2{ font-size:1.286rem; }
  .al-pricing__price{ font-size:2.714rem; line-height:1; }
  .al-pricing__desc{ font-size:1.143rem; }
  .al-pricing__card .btn{ font-size:1.143rem; padding:.938rem; }

  .al-faq{ gap:0; padding:7.5rem 3.286rem; }   /* live has no widget gap below 1025 */
  .al-faq h2{ font-size:1.714rem; margin-bottom:2.5rem; }
  .al-faq__item summary{ font-size:1.286rem; padding:1.25rem 0; }
  .al-faq__answer p{ font-size:1.143rem; }
}

/* --- mobile -------------------------------------------------------------- */
@media (max-width:767px){
  .al-hero{ padding:12.813rem 1.875rem; background-image:url("../img/hero-gradient-mobile.webp"); }
  .al-hero__eyebrow p{ font-size:1.857rem; }
  .al-hero h1{ font-size:2.5rem; width:100%; }

  .al-intro{ flex-direction:column; gap:0; padding:0 1.875rem; background-image:url("../img/intro-bg-mobile.webp"); }
  .al-intro__copy{ padding:3.75rem 0 0; }
  .al-intro__copy h2{ font-size:1.714rem; margin-bottom:1.375rem; width:100%; }
  .al-intro__copy p{ margin-block-end:14px; }
  .al-intro__media{ margin:9.125rem 0 5rem; }   /* live widget margins around the 215px poster */

  .al-help{ margin-top:5.625rem; padding:0 1.875rem; }
  .al-help__row{ flex-wrap:wrap; gap:2.5rem; margin-bottom:3.125rem; }
  .al-help__row:last-child{ margin-bottom:5.625rem; }
  .al-help__media{ order:0; flex:1 1 100%; }
  .al-help__copy{ order:1; flex:1 1 100%; }
  .al-help__copy h3{ font-size:1.429rem; }
  .al-help__media img{ max-width:100%; }

  .al-learn{ gap:0; padding:5.625rem 1.875rem; }
  .al-learn h2{ font-size:2rem; margin-bottom:3.75rem; }
  .al-steps{ margin-bottom:5.625rem; }
  .al-topics{ margin-bottom:0; }
  .al-steps{ grid-template-columns:1fr; gap:1.75rem; }
  .al-steps__cell{ min-height:16.5rem; padding:1.125rem; }
  .al-steps__cell--1{ background-image:url("../img/step-1-mobile.webp"); }
  .al-steps__cell--2{ background-image:url("../img/step-2-mobile.webp"); }
  .al-steps__cell--3{ background-image:url("../img/step-3-mobile.webp"); }
  .al-steps__cell--4{ background-image:url("../img/step-4-mobile.webp"); }
  .al-chapter h4{ font-size:1.429rem; }

  .al-sample{ padding:5.625rem 1.875rem; }
  .al-sample h2{ font-size:2rem; margin-bottom:2.5rem; }
  .al-sample h2.al-sample__cta-title{ margin-bottom:8.1rem; }

  .al-letter{ flex-direction:column; gap:3.75rem; padding:5.625rem 1.875rem; }
  .al-letter__copy h2{ font-size:1.429rem; margin-bottom:2.5rem; }
  .al-letter__picture img{ max-width:100%; }

  .al-testimonials{ padding:5.625rem 1.875rem; }
  .al-testimonials h2{ font-size:2rem; margin-bottom:3.75rem; width:15rem; }   /* live --container-widget-width */
  /* live's slide height is content-driven, so its 10% row-gap resolves to zero */
  .carousel__slide{ gap:0; padding:0; }
  .al-quote{ width:66%; max-width:66%; font-size:1.15rem; }   /* live 211.19 of 320.28 */
  .al-quote p{ padding-block-end:20%; }
  .al-quote__avatar{ margin:0; max-width:2.875rem; }
  .carousel__arrow--prev{ left:2.125rem; }
  .carousel__arrow--next{ right:2.125rem; }
  .al-quote__name{ font-size:.875rem; }
  .al-quote__name p{ padding-block:20%; }
  .carousel{ padding-top:1.875rem; }                  /* live 27.36px */
  .carousel__dots{ height:7px; margin-top:1.2rem; margin-bottom:1.6rem; }

  .al-pricing{ flex-direction:column; gap:3.75rem; padding:5.625rem .938rem; background-image:url("../img/guides-bg-mobile.webp"); }
  .al-pricing__card{ flex:0 1 auto; }   /* the tablet 50% basis would size the column instead */
  .al-sample__cta{ font-size:1.143rem; padding:.875rem 4.438rem; }
  .al-pricing__media{ order:-1; padding:0 2.375rem; }
  .al-pricing__media img{ width:auto; max-width:100%; }

  .al-faq{ padding:5.625rem 1.875rem; }
  .al-faq h2{ font-size:2rem; margin-bottom:3.75rem; }
  .al-faq__item summary{ font-size:1.429rem; padding:1.25rem 0; }
  .al-faq__caret{ width:.625rem; height:1rem; }
}