/* /active-listening-parents/ (P3) — the ad/story landing page.

   Two things differ from the rest of the site:

   1. Type scale. This page is set much smaller: 44.8 / 32 / 22.4 / 18.4 / 16px
      (2.8 / 2 / 1.4 / 1.15 / 1rem), not the 46/32/32/24/24 the other pages use.

   2. Vertical padding. The source says 11.7% everywhere, but it does NOT render
      as one value, so there is no single formula to apply. A percentage padding
      resolves against the containing block's width, and the live page mixes two
      container types:
        - "full" sections put the padding on the section itself, whose
          containing block is the viewport      -> 11.7% of 1440 = 168.5px
        - "boxed" sections put it on an inner wrapper that the horizontal
          padding has already narrowed          -> 11.7% of 806 = 94.3px
      Each section's value below was measured from live rather than derived. */

/* --- hero --------------------------------------------------------------- */
.alp-hero{
  display:flex; flex-direction:column;
  min-height:100vh;
  gap:0;
  padding:11.7vw 14.8%;
}
.alp-hero h1{
  align-self:center;          /* shrink-to-fit, as on live */
  text-align:center;
  font-size:2.8rem; font-weight:500; line-height:1.4286;
  color:var(--c-secondary);
}
.alp-hero__lede{
  align-self:center; text-align:center;
  padding:5.05vw 0 10.1vw;    /* live 72.7 / 145.4 at 1440 */
}
.alp-hero__lede p{
  font-size:1.15rem; font-weight:400; line-height:1.5;
  color:var(--c-primary);
}
.alp-hero__quotes{ text-align:center; }
.alp-hero__quotes p{
  font-size:1.15rem; font-weight:400; line-height:1.5;
  color:var(--c-brown);
  margin-block-end:29.4px;   /* live pitch is 57px on a 27.6px line */
}

/* --- Gallup stat -------------------------------------------------------- */
.alp-gallup{
  display:flex; flex-direction:row; justify-content:space-between; align-items:flex-start;
  gap:0 10rem;
  padding:8.237vw 14.8%;
  background:var(--c-primary);
}
.alp-gallup__copy{ flex:1 1 0; min-width:0; }
/* body text first: the title and stat rules below have to win on source order */
.alp-gallup__copy p{
  font-size:1.15rem; font-weight:400; line-height:1.5;
  color:var(--c-inverse);
  margin-block-end:0;
}
.alp-gallup__copy > p:last-child{ margin-block-end:40px; }
.alp-gallup__title p{
  font-size:2rem; font-weight:500; line-height:1.1;
  color:var(--c-amber);
  margin-block-end:48px;
}
.alp-gallup__copy p.alp-gallup__stat{
  font-size:5.2rem; font-weight:200; line-height:.4173;
  color:var(--c-amber);
  padding-block:80px 32px; margin-block-end:0;
}
.alp-gallup__media{ flex:1 1 0; min-width:0; }
.alp-gallup__media img{ display:block; width:25vw; max-width:100%; height:auto; margin-inline-start:auto; }   /* live --container-widget-width */

/* --- the glass wall ----------------------------------------------------- */
.alp-wall{
  display:flex; flex-direction:column;
  gap:0;
  padding:11.7vw 22%;
}
.alp-wall p{
  font-size:1.15rem; font-weight:400; line-height:1.5;
  color:var(--c-primary);
  margin-block-end:31px;     /* live pitch between body paragraphs */
}
/* direct child only: `.alp-wall p:last-child` is (0,2,1) and would outrank
   `.alp-wall__title p` (0,1,1), stripping the title's 80px margin. */
.alp-wall > p:last-child{ margin-block-end:0; }
.alp-wall__title p{
  font-size:2rem; font-weight:500; line-height:1.1;
  color:var(--c-secondary);
  margin-block-end:80px;
}
.alp-wall h3{
  width:fit-content;         /* shrink-to-fit, as on live */
  font-size:1.4rem; font-weight:600; line-height:1.2857;
  color:var(--c-primary);
  margin-block:1.5rem;
}

/* --- pricing card (appears twice) --------------------------------------- */
.alp-pricing{
  display:flex; flex-direction:row; justify-content:space-between;
  padding:8.237vw 14.8%;
  background:linear-gradient(193deg, #FBC672 18%, #F3574F 100%);
}
/* card / poster hold a stable 42.6% / 35.5% of the row at every desktop width
   (measured at 1440, 1200 and 1025); the rest is space-between */
/* Every button on this page is amber with dark text, not the site-wide coral.
   This sheet only loads here, and it comes after main.css, so a bare .btn
   rule is both page-scoped and late enough to win. */
.btn{ background:var(--c-amber); color:var(--c-primary); }

.alp-pricing__card{
  flex:0 0 42.6%; min-width:0;
  display:flex; flex-direction:column;
  padding:48px 32px;
  background:var(--c-inverse);
}
.alp-pricing__card h2{
  font-size:1.4rem; font-weight:600; line-height:1.2857;
  color:var(--c-primary);
  margin-block-end:20px;
}
.alp-pricing__lede p{
  font-size:1.15rem; font-weight:400; line-height:1.5;
  color:var(--c-primary);
  margin-block-end:3.125px;
}
.alp-pricing__sale p{
  font-size:1rem; font-weight:400; line-height:1.35;
  color:var(--c-primary);
  margin-block-end:16px;
}
.alp-pricing__price p{
  font-size:2.8rem; font-weight:400; line-height:1.4;
  color:var(--c-primary);
  margin-block-end:1.5rem;
}
.alp-pricing__price s{ color:#B8ABA3; text-decoration-color:#B8ABA3; }
.alp-pricing__card .btn{
  align-self:flex-start;
  width:100%; max-width:23rem;
  font-size:1.15rem; line-height:1.5;
  padding:16px 64px;
}
.alp-pricing__media{ flex:0 0 35.5%; min-width:0; padding:10px; display:flex; align-items:center; justify-content:center; }
.alp-pricing__media img{ width:100%; max-width:26.25rem; height:auto; }

/* --- Easter banner ------------------------------------------------------ */
.alp-easter{
  display:flex; flex-direction:row; justify-content:space-between; align-items:center;
  padding:0.8vw 11%;
  background:#0E402D;
}
.alp-easter__text{ width:50vw; }        /* live --container-widget-width */
.alp-easter__text p{
  font-size:1rem; font-weight:400; line-height:1.35;
  color:var(--c-inverse);
}
.alp-easter__btn{
  width:15vw;                           /* live --container-widget-width */
  font-size:1.15rem; line-height:1.6435;
  padding:7.2px 0;
}

/* --- not another PDF ---------------------------------------------------- */
.alp-notpdf{
  display:flex; flex-direction:column;
  gap:0;
  padding:11.7vw 22%;
}
.alp-notpdf p{
  font-size:1.15rem; font-weight:400; line-height:1.5;
  color:var(--c-primary);
  margin-block-end:31.2px;
}
.alp-notpdf__title p{
  font-size:2rem; font-weight:500; line-height:1.1;
  color:var(--c-secondary);
  margin-block-end:80px;
}

/* --- image strips -------------------------------------------------------
   One full-bleed image with a portrait variant on mobile; the live page ships
   both files and hides one, which <picture> does without the extra download. */
.alp-strip{ display:block; }
.alp-strip img{ width:100%; height:auto; display:block; }

/* --- what else shifts --------------------------------------------------- */
.alp-shifts{
  display:flex; flex-direction:column;
  gap:0;
  padding:11.7vw 14.8% 7.28vw;
}
.alp-shifts__title p{
  font-size:2rem; font-weight:500; line-height:1.1;
  color:var(--c-secondary);
  margin-block-end:80px;
}
.alp-shifts__lede{
  font-size:1.15rem; font-weight:400; line-height:1.5;
  color:var(--c-primary);
  margin-block-end:2.5rem;
}
/* live lays these out two-up in three rows, not stacked */
/* Columns are live's 15%. Rows are not: live declares `row-gap:10%`, but Chrome
   resolves that against a grid box it computes larger than the row content, so
   the percentage cannot be reproduced directly (it lands ~8px tight and leaves
   the section short). The measured gap is used instead, and the section's
   bottom padding is trimmed by the height the real gaps add back. */
.alp-shifts__grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  column-gap:15%; row-gap:72.6px;
}
.alp-shift{ display:flex; flex-direction:column; gap:20px; }
.alp-shift h3{
  font-size:1.4rem; font-weight:600; line-height:1.2857;
  color:var(--c-primary);
  margin-block-end:0;
}
.alp-shift p{
  font-size:1.15rem; font-weight:400; line-height:1.5;
  color:var(--c-primary);
}

/* --- what's inside ------------------------------------------------------ */
.alp-inside{
  align-self:flex-start;
  display:flex; flex-direction:column;
  gap:16px;
  padding:6.552vw 22%;
  background:var(--c-primary);
}
.alp-inside h2{
  font-size:2rem; font-weight:500; line-height:1.1;
  color:var(--c-inverse);
  margin-block-end:80px;
}
.alp-chapter h3{
  font-size:1rem; font-weight:600; line-height:1.2;
  color:var(--c-amber);
  margin-block-end:15px;
}
.alp-chapter p{
  font-size:1rem; font-weight:400; line-height:1.35;
  color:var(--c-inverse);
  margin-block-end:25px;
}
/* live puts a 1px rule between chapters (a divider widget, 2px padding each
   side); the last chapter has none */
.alp-chapter:not(:last-child)::after{
  content:""; display:block;
  height:1px; margin-block:2px;
  background:var(--c-brown);
}

/* --- sample ------------------------------------------------------------- */
.alp-sample{
  display:flex; flex-direction:column;
  gap:0;
  padding:8.237vw 14.8%;
}
.alp-sample h2{
  align-self:center; text-align:center;
  font-size:2rem; font-weight:500; line-height:1.1;
  color:var(--c-secondary);
  margin-bottom:80px;
}
.alp-sample h2.alp-sample__cta-title{ margin-top:118.4px; margin-bottom:80px; }   /* live pads the widget 118.4/80 */
.alp-sample__cta{
  align-self:center;
  width:100%; max-width:21.25rem;
  font-size:1.5rem; line-height:1;
  padding:1.625rem 4rem;
}

/* --- authors' note ------------------------------------------------------ */
.alp-letter{
  display:flex; flex-direction:row; justify-content:space-between; align-items:flex-start;
  gap:0 10rem;
  padding:0 14.8% 8.237vw;   /* live pads only the bottom, 118.61px at 1440 */
}
.alp-letter__copy{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; }
/* This letter is set much smaller than the one on /active-listening/:
   18.4 / 22.4 / 16px, not 46 / 32 / 24. */
.alp-letter__eyebrow{ color:var(--c-secondary); }
.alp-letter__eyebrow p{ font-size:1.15rem; font-weight:600; line-height:1.4; margin-block-end:0; }
.alp-letter__copy h2{
  font-size:1.4rem; font-weight:600; line-height:1.286;
  color:var(--c-primary);
  margin-bottom:40px;
}
.alp-letter__text{
  margin-top:-20px;
  font-size:1.15rem; font-weight:400; line-height:1.73;
  color:var(--c-primary);
}
.alp-letter__text p{ margin-block-end:1.6em; }   /* Astra's paragraph rule */
.alp-letter__more{
  align-self:flex-start;
  padding:0; border:0; background:transparent;
  font-family:var(--f-family); font-weight:600;
  font-size:1.15rem; line-height:1.73;
  color:var(--c-secondary);
  text-decoration:underline;
  cursor:pointer;
}
.alp-letter__media{ flex:1 1 0; min-width:0; }
.alp-letter__picture img{ width:100%; max-width:40rem; height:auto; }

/* --- comment screenshots (a static grid on live, not a carousel).
   The screenshots keep their natural size rather than stretching. ---------- */
.alp-comments{
  display:flex; flex-direction:column;
  gap:0;
  padding:11.7vw 14.8%;
  background:var(--c-primary);
}
.alp-comments__title p{
  font-size:2rem; font-weight:500; line-height:1.1;
  color:var(--c-inverse);
  margin-block-end:80px;
}
.alp-comments__grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  grid-auto-rows:1fr;                 /* live sizes both rows to the tallest tile */
  gap:20px; padding:10px;
  align-items:center; justify-items:start;
}
.alp-comments__grid img{ width:auto; max-width:100%; height:auto; }

/* --- why now ------------------------------------------------------------ */
.alp-why{
  display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start;
  gap:0;
  padding:8.237vw 14.8%;
}
/* items beside the photo at desktop; the photo moves above them below 1025 */
.alp-why__group{ display:flex; flex-direction:row; gap:0; width:100%; }
.alp-why__items{ flex:1 1 0; min-width:0; }
.alp-why__media{ flex:1 1 0; min-width:0; }
.alp-why__title{ align-self:center; }
.alp-why__title p{
  font-size:2rem; font-weight:500; line-height:1.1;
  color:var(--c-secondary);
  margin-block-end:80px;
}
.alp-why__item{ margin-block-end:2.5rem; }
.alp-why__item h3{
  font-size:1.4rem; font-weight:600; line-height:1.2857;
  color:var(--c-primary);
  margin-block-end:.75rem;
}
.alp-why__item p{
  font-size:1.15rem; font-weight:400; line-height:1.5;
  color:var(--c-primary);
}
.alp-why__media img{ width:100%; height:auto; }

/* --- FAQ ---------------------------------------------------------------- */
.alp-faq{
  display:flex; flex-direction:column; gap:var(--widget-gap);
  padding:8.237vw 14.8%;
}
.alp-faq h2{
  align-self:center; text-align:center;
  font-size:2rem; font-weight:500; line-height:1.1;
  color:var(--c-secondary);
  margin-bottom:80px;
}
.alp-faq__list{ display:flex; flex-direction:column; }
.alp-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 #B8A593;         /* lighter rule than /active-listening/ */
  font-size:1.4rem; font-weight:600; line-height:1.286;
  color:var(--c-primary);
}
.alp-faq__item summary::-webkit-details-marker{ display:none; }
.alp-faq__marker{ display:flex; align-items:center; flex:none; color:var(--c-primary); }
.alp-faq__caret{ width:.938rem; height:1.5rem; }
.alp-faq__caret--open{ display:none; }
.alp-faq__item[open] .alp-faq__caret--closed{ display:none; }
.alp-faq__item[open] .alp-faq__caret--open{ display:block; }
.alp-faq__answer{ padding-bottom:1.5rem; }
.alp-faq__answer p{ font-size:1.5rem; font-weight:400; line-height:1.65; color:var(--c-primary); }

/* --- feature list: ALP variant -------------------------------------------
   The shared component lives in main.css (the / and /active-listening/
   sizing). ALP's lists are smaller: 1rem icons, a 0.5rem icon gap and 8px
   item spacing. Measured from live 67ad0e6 (not-a-PDF) and
   6b65c57d / b99e451 (both pricing cards).                                */
.feature-list{ margin:0; }
.feature-list .icon{ padding-inline-end:0.5rem; }
.feature-list .icon svg{ width:1rem; height:1rem; }
.feature-list li:not(:last-child){ padding-block-end:calc(1rem / 2); }
.feature-list li:not(:first-child){ margin-block-start:calc(1rem / 2); }
.alp-pricing .feature-list{ padding:2.5rem 0; }
.alp-pricing .feature-list li{ font-size:1rem; line-height:1.35; }
.alp-notpdf .feature-list li{ font-size:var(--fs-text); line-height:var(--lh-text); }

/* --- tablet -------------------------------------------------------------- */
@media (max-width:1024px){
  /* section padding measured from live at this breakpoint */
  .alp-hero{ padding:16vw 7%; }
  .alp-gallup{ padding:13.76vw 7%; }
  .alp-wall{ padding:16vw 7%; }
  .alp-pricing{ padding:14.4vw 5%; }
  .alp-easter{ padding:1.5vw 2.5%; }
  .alp-notpdf{ padding:16vw 7%; }
  .alp-shifts{ padding:16vw 7% 5.68vw; }
  .alp-shifts__grid{ row-gap:89.7px; }
  .alp-inside{ padding:13.76vw 7%; }
  .alp-sample{ padding:13.76vw 7%; }
  .alp-letter{ padding:0 7%; }
  .alp-comments{ padding:16vw 7%; }
  .alp-why{ padding:13.76vw 7%; }
  .alp-faq{ padding:13.76vw 7%; }
  .alp-gallup{ gap:0 80.256px; }
  .alp-pricing{ gap:0 105.792px; }
  .alp-letter{ gap:0 80.256px; }

  /* live keeps the hero h1 at its desktop size here and adds a bottom pad */
  .alp-hero{ gap:2.5rem 0; }
  .alp-hero h1{ width:41rem; max-width:100%; padding-bottom:6.875vw; }
  .alp-hero__lede{ padding:6.79vw 0 13.59vw; }

  .alp-gallup__title p{ margin-block-end:4rem; }   /* live 58.368px; size stays 2rem */
  .alp-gallup__copy > p:last-child{ margin-block-end:2.5rem; }
  .alp-gallup__copy p.alp-gallup__stat{ font-size:4.2rem; line-height:.3333; padding-block:5rem 2rem; }
  .alp-gallup__media img{ width:50vw; }

  .alp-wall p{ font-size:1.143rem; }
  .alp-wall h3{ font-size:1.286rem; }
  .alp-wall__title p{ font-size:2rem; line-height:1.1; margin-block-end:5rem; }   /* live 72.96px */

  .alp-pricing__card{ flex:0 0 44.9%; padding:27px 22px 36px; }
  .alp-pricing__card h2{ font-size:1.4rem; margin-block-end:1.25rem; }
  .alp-pricing__sale p{ font-size:1rem; margin-block-end:1rem; }
  .alp-pricing__price p{ font-size:2.714rem; line-height:1; margin-block-end:1.5rem; }
  .alp-pricing__card .btn{ padding:.938rem; }

  .alp-easter__text p{ font-size:1.143rem; }
  .alp-easter__btn{ font-size:1.143rem; padding:.75rem 1.5rem; }

  .alp-notpdf__title p{ font-size:1.286rem; }
  .alp-notpdf p{ font-size:1.143rem; }

  .alp-shifts__title p{ font-size:1.714rem; }
  .alp-shifts__lede{ font-size:1.143rem; }

  .alp-shift h3{ font-size:1.286rem; }
  .alp-shift p{ font-size:1.143rem; }

  .alp-inside h2{ font-size:1.714rem; }
  .alp-inside{ gap:0; }                    /* live stacks the chapters flush */
  .alp-chapter{ padding:6.594px 0; }
  .alp-chapter h3{ margin-block-end:.5rem; }
  .alp-chapter p{ margin-block-end:1rem; }

  .alp-sample h2{ font-size:1.714rem; margin-bottom:3.75rem; }
  .alp-sample h2.alp-sample__cta-title{ margin-bottom:11.25rem; }
  .alp-sample__cta{ font-size:1.143rem; padding:.938rem; }

  .alp-letter{ gap:1.75rem; }
  .alp-letter__eyebrow p{ font-size:1.714rem; }
  .alp-letter__copy h2{ font-size:1.286rem; margin-bottom:0; }
  .alp-letter__text{ font-size:1.143rem; line-height:1.65; }
  .alp-letter__more{ font-size:1.143rem; line-height:1.35; }

  .alp-comments__title p{ font-size:1.714rem; }
  .alp-comments__grid{ padding:10px; }   /* live keeps two columns here */
  .alp-why__group{ flex-direction:column-reverse; }

  .alp-why__title p{ font-size:1.714rem; }
  .alp-why__item h3{ font-size:1.286rem; }
  .alp-why__item p{ font-size:1.143rem; }

  .alp-faq h2{ font-size:1.714rem; margin-bottom:2.5rem; }
  .alp-faq__item summary{ font-size:1.4rem; padding:1.25rem 0; }
  .alp-faq__answer p{ font-size:1.143rem; }
}

/* --- mobile -------------------------------------------------------------- */
@media (max-width:767px){
  .alp-pricing .feature-list li{ line-height:1.3; }   /* live 18.9696px on 14.592px root */
  /* section padding measured from live at this breakpoint */
  .alp-hero{ gap:0; padding:22vw 7.9%; }
  .alp-hero h1{ font-size:2.8rem; line-height:1.214; padding-bottom:0; }
  .alp-hero__lede{ padding:18.52vw 0 37.05vw; }   /* live 103.73 / 207.47 at 560 */
  .alp-gallup{ padding:0 0 22vw; }   /* live 123.19px at 560, 82.5 at 375 */
  .alp-wall{ padding:22vw 7.9%; }
  .alp-pricing{ padding:20.26vw 3.95%; }
  .alp-easter{ padding:3vw 5%; }
  .alp-notpdf{ padding:22vw 7.9%; }
  .alp-shifts{ padding:0 7.9% 11vw; }        /* live 41.25px below, none above */
  .alp-shifts__grid{ grid-template-columns:1fr; row-gap:0; column-gap:0; }   /* live drops the gap here */
  .alp-inside{ padding:18.52vw 7.9%; }
  .alp-sample{ padding:18.52vw 7.9%; }
  .alp-letter{ padding:0 7.9% 18.52vw; }
  .alp-comments{ padding:11vw 7.9%; }
  .alp-why{ padding:22vw 0; }
  .alp-why__media{ padding:0 .938rem 3rem; }   /* live insets the photo here */
  .alp-faq{ padding:18.52vw 7.9%; }
  .alp-gallup{ flex-direction:column-reverse; gap:54.72px; }
  .alp-letter{ gap:54.72px; }
  .alp-inside{ gap:0; }
  .alp-chapter{ padding:3.156px 0; }


  .alp-pricing{ flex-direction:column; gap:0; }   /* the spacing sits under the poster */
  /* stacked: the desktop 42.6%/35.5% bases would become HEIGHTS in a column */
  .alp-pricing__card,
  .alp-pricing__media{ flex:0 0 auto; }
  .alp-pricing__card h2{ font-size:1.4rem; line-height:1.214; padding:1rem 0 1.5rem; margin-block-end:0; }
  .alp-pricing__lede p{ line-height:1.6; margin-block-end:3rem; }
  .alp-pricing .feature-list{ padding:0 0 3rem; }
  .alp-pricing__price p{ font-size:2.4rem; line-height:1; }
  .alp-pricing__card .btn{ padding:.875rem; }
  .alp-pricing__media{ order:-1; padding-bottom:10vw; }
  .alp-pricing__media img{ width:73.7vw; max-width:100%; }   /* live 276 at 375, 413 at 560 */

  .alp-easter__text{ width:58vw; }        /* live --container-widget-width */
  .alp-easter__btn{ width:25vw; }

  .alp-shifts__title p,
  .alp-inside h2,
  .alp-comments__title p,
  .alp-why__title p,
  .alp-sample h2,
  .alp-faq h2{ font-size:2rem; }

  .alp-comments__grid{ grid-template-columns:1fr; grid-auto-rows:auto; }   /* live sizes each row to its tile here */
  .alp-sample h2{ margin-bottom:58.78px; }
  .alp-sample h2.alp-sample__cta-title{ margin-top:69.44px; margin-bottom:34.72px; }

  .alp-shifts__title p{ margin-block-end:3rem; }      /* live 43.776px */
  .alp-shifts__lede{ line-height:1.6; margin-block-end:1.75rem; }
  .alp-shift{ gap:0; }                                /* live stacks these flush */
  .alp-shift p{ line-height:1.6; margin-block-end:2rem; }

  .alp-why__item h3,
  .alp-wall h3,
  .alp-notpdf__title p{ font-size:1.429rem; }
  .alp-wall__title p{ font-size:2rem; line-height:1.1; margin-block-end:2rem; }   /* live 29.184px */
  .alp-shift h3,
  .alp-chapter h3{ font-size:1.4rem; line-height:1.214; }
  .alp-shift h3{ margin-block-end:.5rem; }
  /* body copy first — this and the title rule are both (0,1,1), so the one
     that comes last wins */
  .alp-gallup__copy p{ line-height:1.6; margin-block-end:20px; }
  .alp-gallup__title p{ margin-block-end:3rem; }   /* live 43.776px */
  .alp-gallup__copy{ padding:0 1.875rem; }
  .alp-gallup__copy > p:last-child{ margin-block-end:0; }
  .alp-gallup__copy p.alp-gallup__stat{ font-size:6rem; line-height:.65; padding-block:2.6rem 1.3rem; }
  .alp-gallup__media{ padding:.938rem .938rem 0; }
  .alp-gallup__media img{ width:100%; }

  .alp-letter{ flex-direction:column; gap:54.72px; }
  .alp-letter__eyebrow p{ font-size:2rem; }
  .alp-letter__copy h2{ font-size:1.429rem; }

  /* live pads below the first strip and insets the second one */
  .alp-strip{ padding-bottom:22vw; }
  .alp-strip--inset{ padding:0 3.95% 20.26vw; }
  .alp-strip img{ width:100%; }

  .alp-faq__item summary{ font-size:1.4rem; line-height:1.214; padding:1.25rem 0; }
}