/* ==========================================================================
   Remuda Reserve — American Whiskey Forum Enrollment

   Built from two Figma frames in Remuda Reserve — Master File:
     desktop  2108:1943  ([D] American Whiskey Forum Enrollment, 1440px)
     mobile   8092:8155  ([M] Enrollment, 393px)

   Structure: fluid base that reproduces the 1440 comp exactly at >=1440px,
   then a breakpoint ladder down to the 393 mobile comp.

     >=1440   desktop comp, 1:1
     <1440    same layout, fluid widths
     <1200    rebates band and FAQ rows stack (they need ~1000px of run)
     <1100    benefit cards go 2x2
     <900     how-it-works buttons stack, seal dropped
     <700     mobile comp — cards 1-up, reduced type scale, seal hidden
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  /* Palette — from Figma variables */
  --red:        #da291c;   /* Stroke/Red, Text/Red   */
  --gold:       #bca57a;   /* Stroke/Gold            */
  --black:      #000000;   /* Backgrounds/Midnight   */
  --white:      #ffffff;   /* Primaries/0, Text/White*/
  --stamp-red:  #721716;   /* $25 overprint          */

  /* Type — served by the Adobe Fonts (Typekit) web project fik0ghu, linked in
     the document head. Family names below are the kit's CSS names, which
     differ from the names Figma shows.

     Figma style          -> kit family                    weights in kit
     Headers              -> boucherie-block               400
     Body                 -> akzidenz-grotesk-next-pro     400, 700
     Buttons (Extended)   -> akzidenz-grotesk-next-extend  400, 700
     Family/Body,Buttons  -> gotham                        400, 700

     Note: the bare `akzidenz-grotesk-next` family in the kit only carries
     weights 200 and 800, so Body maps to `-pro` for Regular/Bold. */
  --font-header:  "boucherie-block", "Bookman Old Style", Rockwell, Georgia, serif;
  --font-body:    "akzidenz-grotesk-next-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-buttons: "akzidenz-grotesk-next-extend", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-gotham:  "gotham", "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --page-w: 1440px;

  /* Section gutters — narrowed by the breakpoint ladder. */
  --gutter-benefits: 87px;
  --gutter-enroll: 200px;
  --gutter-letter: 48px;
}

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  overflow-x: hidden;
}

img { display: block; max-width: none; border: 0; }
p, h1, h2, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.page {
  width: 100%;
  max-width: var(--page-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  isolation: isolate;
  background: var(--white);
}

/* Shared: a decorative layer that must never eat clicks. */
.hero__image, .benefits__texture, .benefits__overlay,
.letter__texture, .letter__mark, .letter__seal, .letter__seal-centre, .letter__horse,
.enroll__texture, .enroll__deco, .enroll__overlay,
.faqs__texture, .faqs__overlay, .footer__bg,
.card__media, .card__shadow {
  pointer-events: none;
}

/* ============================================================== 1. HERO == */
.hero {
  position: relative;
  z-index: 6;
  width: 100%;
  height: 870px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}

.hero__image {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--page-w);
  height: 870px;
  overflow: hidden;
}
.hero__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 937.256px;
  object-fit: cover;
}

.hero__login {
  position: absolute;
  top: 0;
  right: 0;
  padding: 48px 80px;
  font-family: var(--font-header);
  font-size: 18px;
  line-height: normal;
  color: var(--white);
  text-align: center;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
  white-space: nowrap;
}

.hero__text {
  position: relative;
  height: 872px;
  max-width: 100%;
  padding: 16px 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  border-radius: 20px;
}

.hero__stack {
  width: 550px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

.hero__copy {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.hero__title {
  width: 100%;
  font-family: var(--font-header);
  font-size: 64px;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
}

.hero__body {
  width: 100%;
  max-width: 428.584px;
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.28px;
  color: var(--white);
  text-align: center;
}

/* Underlined text CTA (hero) */
.btn-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  padding: 18px 22px;
  text-decoration: none;
}
.btn-link__label {
  font-family: var(--font-buttons);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4.8px;
  text-transform: uppercase;
  color: var(--red);
  white-space: nowrap;
}
.btn-link__rule { width: 100%; height: 1px; }

/* ====================================================== 2. KEY BENEFITS == */
.benefits {
  position: relative;
  z-index: 5;
  width: 100%;
  padding: 80px var(--gutter-benefits);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 66px;
  background: var(--white);
  overflow: hidden;
}

.benefits__texture {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--page-w);
  height: 3239.26px;
  overflow: hidden;
}
.benefits__texture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 99.88%;
}

.benefits__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: -596px;
  left: 0;
  background: var(--black);
  mix-blend-mode: multiply;
  opacity: 0.3;
}

.benefits__frame {
  position: relative;
  width: 100%;
  max-width: 1266px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  border: 2px solid var(--black);
}

/* ------------------------------------------------------ benefit cards --- */
.cards {
  display: flex;
  align-items: center;
  gap: 36px;
  width: 100%;
}

.card {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: 265px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  overflow: hidden;
}

.card__media {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  transform: translateY(-50%);
  height: 265px;
  overflow: hidden;
}

.card__crop {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.card__crop img { position: absolute; }

.card__crop--1 { width: 265px; height: 265px; }
.card__crop--1 img { top: -23.77%; left: -42.86%; width: 185.71%; height: 123.77%; }

.card__crop--2 { width: 265px; height: 264.5px; top: calc(50% + 0.25px); }
.card__crop--2 img { top: 0; left: -6.86%; width: 106.86%; height: 107.07%; }

.card__crop--3 { width: 265px; height: 265px; }
.card__crop--3 img { top: 0; left: -25%; width: 150%; height: 100%; }

.card__crop--4 { width: 265px; height: 265px; }
.card__crop--4 img { top: -19.52%; left: -87.13%; width: 207.61%; height: 138.41%; }

/* The shadow SVG ships at exactly its bleed size, so it just centres. */
.card__shadow {
  position: absolute;
  top: calc(50% + 0.76px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 311.289px;
  height: 228.98px;
}

.card__label {
  position: absolute;
  top: calc(50% - 4.52px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 226.75px;
  font-family: var(--font-buttons);
  font-size: 12px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 4.8px;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
}

/* ----------------------------------------------------- rebates band ----- */
.rebates {
  position: relative;
  width: 100%;
  padding: 32px 80px;
  display: flex;
  align-items: center;
  gap: 159px;
  background: var(--red);
}

.rebates__stamp {
  position: absolute;
  top: 69.5px;
  left: 318.38px;
  transform: translateX(-50%) rotate(-15deg);
  width: 77.348px;
  font-family: var(--font-header);
  font-size: 52px;
  line-height: 1.148;
  color: var(--stamp-red);
  text-align: center;
  white-space: nowrap;
}

.rebates__wordmark {
  flex: none;
  font-family: var(--font-header);
  font-size: 64px;
  line-height: 84.385%;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
  white-space: nowrap;
}

/* Figma marks this shrink-0 / nowrap. At the real font widths the row needs
   1005px of the 1006px available — one pixel of slack — so it does sit on a
   single line as designed, but nothing absorbs a change. Letting the copy
   shrink and wrap is inert at those widths while keeping the band from
   clipping if the webfont fails to load or metrics shift slightly. */
.rebates__copy {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  color: var(--white);
}
.rebates__head {
  font-family: var(--font-header);
  font-size: 36px;
  line-height: normal;
  text-align: center;
}
.rebates__detail {
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.3px;
}
.rebates__detail strong { font-weight: 700; }
.rebates__legal {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.24px;
}

/* ------------------------------------------------------- how it works --- */
.how {
  position: relative;
  width: 100%;
  padding: 48px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  background: var(--black);
}

.how__inner {
  width: 100%;
  max-width: 774px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.how__text {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--white);
  text-align: center;
}
.how__title {
  font-family: var(--font-header);
  font-size: 36px;
  line-height: normal;
}
.how__body {
  width: 100%;
  max-width: 480.6px;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.28px;
}

.how__actions {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

/* ------------------------------------------------------------ buttons --- */
.btn {
  height: 44px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  border: 1px solid var(--white);
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
}
.btn--wide { width: 297px; }
.btn--wide .btn__label { flex: 1 0 0; min-width: 0; text-align: left; }

.btn__label {
  font-family: var(--font-buttons);
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 4.8px;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}
.btn__icon { flex: none; width: 20px; height: 20px; }

.btn--solid {
  width: 284px;
  height: auto;
  background: var(--white);
  border: 0;
}
.btn--solid .btn__label {
  font-family: var(--font-gotham);
  font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--black);
  text-align: left;
}

/* ================================================ 3. LETTER / SIGNATURE == */
.letter {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 2104px;
  padding: 80px var(--gutter-letter) 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 66px;
  background: var(--white);
  overflow: hidden;
}

.letter__texture {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: var(--page-w);
  height: 3239.26px;
  overflow: hidden;
}
.letter__texture--a { top: -495.26px; }
.letter__texture--b { top: -940.97px; }
.letter__texture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 99.88%;
}

/* Watermark seal — absolute px in section coordinates (Figma node metadata). */
/* Figma puts this at left 123.71 in a 1440 frame, i.e. exactly centred
   (720 - 1192.586/2), so it can just centre on any width. */
.letter__mark {
  position: absolute;
  top: 189.21px;
  left: 50%;
  transform: translateX(-50%);
  width: 1192.586px;
  height: 1192.586px;
  object-fit: cover;
}

.letter__seal {
  position: absolute;
  top: 1118.77px;
  left: 50%;
  margin-left: 313.19px;   /* 1033.19 - 720 */
  overflow: visible;
}
.letter__seal-text {
  font-family: var(--font-buttons);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4.8px;
  text-transform: uppercase;
  fill: var(--white);
}

.letter__seal-centre {
  position: absolute;
  top: 1146.28px;
  left: 50%;
  margin-left: 343.46px;   /* 1063.46 - 720 */
  width: 226.75px;
  font-family: var(--font-buttons);
  font-size: 12px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 4.8px;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
}

.letter__portrait {
  position: relative;
  flex: none;
  width: 400px;
  height: 400px;
  max-width: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.letter__body {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.letter__quote-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.letter__quote {
  width: 100%;
  max-width: 913.688px;
  margin-bottom: -27px;
  font-family: var(--font-header);
  font-size: 64px;
  line-height: 84.385%;
  text-transform: uppercase;
  color: var(--black);
  text-align: center;
}

.signature {
  position: relative;
  flex: none;
  width: 350px;
  max-width: 100%;
  aspect-ratio: 350 / 140;
}
.signature img { position: absolute; }
.signature__base { top: 0; left: 0; width: 100%; height: 100%; }
.signature__s1 { top: 38.53%; left: 43.13%; width: 11.20%; height: 25.96%; }
.signature__s2 { top: 52.53%; left: 53.51%; width: 11.81%; height: 6.61%; }
.signature__s3 { top: 33.86%; left: 62.35%; width: 11.57%; height: 42.86%; }
.signature__s4 { top: 51.88%; left: 70.37%; width: 8.15%;  height: 2.40%; }
.signature__s5 { top: 52.75%; left: 77.78%; width: 4.46%;  height: 1.24%; }

.letter__attribution {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--black);
  text-align: center;
}
.letter__name {
  font-family: var(--font-buttons);
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 4.8px;
  text-transform: uppercase;
}
.letter__role {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.32px;
}

.letter__horse {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -730.47px;   /* Figma left -10.47 in a 1440 frame */
  width: 1459.161px;
  height: 862.266px;
  object-fit: cover;
  mix-blend-mode: darken;
}

/* ================================================= 4. ENROLLMENT / FORM == */
.enroll {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 120px var(--gutter-enroll);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  overflow: hidden;
}

/* Texture is mirrored (Figma applies rotate(180deg) + scaleY(-1)). */
.enroll__texture {
  position: absolute;
  top: calc(50% + 405.04px);
  left: 50%;
  transform: translate(-50%, -50%) scaleX(-1);
  width: var(--page-w);
  height: 3239.26px;
  overflow: hidden;
}
.enroll__texture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 99.88%;
}

.enroll__deco { position: absolute; opacity: 0.7; overflow: hidden; }
.enroll__deco img { position: absolute; top: 0; height: 100%; }

.enroll__deco--tl { top: 65.34px;   left: -26.37px;  width: 484.125px; height: 557.165px; }
.enroll__deco--tl img { left: -36.2%;  width: 172.53%; }

.enroll__deco--bl { top: 1017px;    left: -187.09px; width: 466.447px; height: 496.462px; }
.enroll__deco--bl img { left: -29.83%; width: 159.65%; }

.enroll__deco--r  { top: 420.77px;  right: -70.05px;  width: 466.447px; height: 496.462px; }
.enroll__deco--r img  { left: -29.83%; width: 159.65%; }

.enroll__overlay {
  position: absolute;
  inset: 0;
  background: var(--black);
  mix-blend-mode: multiply;
  opacity: 0.7;
}

.enroll__intro {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 35px;
}

.enroll__title {
  width: 100%;
  max-width: 505px;
  font-family: var(--font-header);
  font-size: 64px;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
}

.enroll__details {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 35px;
}

.enroll__eyebrow {
  font-family: var(--font-gotham);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
}

.price {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--white);
  text-align: center;
}
.price__amount {
  width: 100%;
  max-width: 505px;
  margin-bottom: -11px;
  font-family: var(--font-header);
  font-size: 64px;
  line-height: normal;
}
.price__period {
  width: 100%;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.32px;
}

.perks {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 35px;
}

.perks__ornament { position: relative; flex: none; width: 284px; max-width: 100%; }
.perks__ornament img { position: absolute; left: 50%; }

.perks__ornament--top { height: 27px; }
.perks__ornament--top img {
  top: 0;
  transform: translateX(-50%);
  width: 361.574px;
  height: 95.896px;
}

.perks__ornament--bottom { height: 24px; }
.perks__ornament--bottom img {
  top: -72px;
  transform: translateX(-50%) scaleY(-1);
  width: 363.977px;
  height: 98.296px;
}

.perks__list {
  width: 100%;
  max-width: 734px;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  color: var(--white);
  text-align: center;
}

.perk {
  width: 100%;
  max-width: 700px;
  min-height: 49px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.perk__title {
  width: 100%;
  font-family: var(--font-header);
  font-size: 18px;
  line-height: normal;
  text-transform: uppercase;
}
.perk__body {
  width: 100%;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.32px;
}

/* --------------------------------------------------- enrollment card ---- */
.signup {
  position: relative;
  width: 100%;
  max-width: 734px;
  padding: 56px 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 46px;
  background: var(--red);
  border-radius: 21px;
  overflow: hidden;
}

/* Masked highlight shape behind the card content. */
.signup__mask {
  position: absolute;
  top: -177.63px;
  left: -94.91px;
  width: 877.712px;
  height: 988.179px;
  background: var(--white);
  -webkit-mask-image: url("assets/form-mask.webp");
          mask-image: url("assets/form-mask.webp");
  -webkit-mask-size: 647.196px 647.196px;
          mask-size: 647.196px 647.196px;
  -webkit-mask-position: 138.314px 76.032px;
          mask-position: 138.314px 76.032px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  pointer-events: none;
}

.signup__head {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.signup__title {
  width: 100%;
  font-family: var(--font-header);
  font-size: 36px;
  line-height: normal;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
}
.signup__sub {
  width: 100%;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.32px;
  color: var(--white);
  text-align: center;
}
.signup__sub-em { color: var(--white); }

.signup__fields {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.field {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.field__label {
  width: 100%;
  font-family: var(--font-gotham);
  font-size: 12px;
  line-height: 18px;
  color: var(--white);
  text-align: center;
}
.field__control {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  border: 1px solid var(--white);
}
.field__input {
  flex: 1 0 0;
  min-width: 0;
  height: 100%;
  padding: 8px 12px;
  font-family: var(--font-gotham);
  font-size: 16px;
  line-height: 22px;
  color: var(--white);
  text-align: center;
  background: transparent;
  border: 0;
  outline-offset: 2px;
}
.field__input::placeholder { color: var(--white); opacity: 0.4; }

.signup__foot {
  position: relative;
  width: 100%;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.28px;
  color: var(--white);
  text-align: center;
}
.signup__foot a {
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

/* ============================================================== 5. FAQS == */
.faqs {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 120px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  background: var(--black);
  overflow: hidden;
}

.faqs__texture {
  position: absolute;
  top: calc(50% + 701.04px);
  left: 50%;
  transform: translate(-50%, -50%) scaleX(-1);
  width: var(--page-w);
  height: 3239.26px;
  opacity: 0.66;
  overflow: hidden;
}
.faqs__texture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 99.88%;
}

.faqs__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: -592px;
  left: 0;
  background: var(--black);
  mix-blend-mode: overlay;
}

.faqs__inner {
  position: relative;
  width: 100%;
  max-width: 1204px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}

.faqs__title {
  font-family: var(--font-header);
  font-size: 36px;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}

.faqs__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.faq {
  width: 100%;
  padding: 36px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid var(--gold);
}

.faq__q {
  width: 493px;
  max-width: 100%;
  font-family: var(--font-header);
  font-size: 24px;
  line-height: normal;
  text-transform: uppercase;
  color: var(--white);
}

.faq__a {
  width: 559px;
  max-width: 100%;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.28px;
  color: var(--white);
}
.faq__a--grouped {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.faq__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq__a-lead { font-weight: 700; }

/* The indicator is a 2px gold bar (a "collapse" rule), centred in a 41px band. */
.faq__chevron {
  flex: none;
  width: 16px;
  height: 2px;
  margin-top: 19.5px;
}

/* ============================================================ 6. FOOTER == */
.footer {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 562px;
  padding: 138px 104px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: var(--black);
  overflow: hidden;
}

.footer__bg {
  position: absolute;
  top: calc(50% - 0.13px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--page-w);
  height: 561px;
  overflow: hidden;
}
.footer__bg-texture {
  position: absolute;
  top: -2553.51px;
  left: 0;
  width: 100%;
  height: 3235.458px;
  object-fit: cover;
}
.footer__bg-photo {
  position: absolute;
  top: 53.33px;
  left: 0;
  width: 100%;
  height: 508.61px;
  object-fit: cover;
  mix-blend-mode: darken;
}
.footer__bg-fade {
  position: absolute;
  top: 439.2px;
  left: 0;
  width: 100%;
  height: 121.804px;
  background: linear-gradient(to bottom, rgba(3, 3, 3, 0), rgba(3, 3, 3, 0.5));
}

.footer__top {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.footer__contact {
  font-family: var(--font-buttons);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 3.6px;
  text-transform: uppercase;
  color: var(--black);
  white-space: nowrap;
}
.footer__contact strong { font-weight: 700; }
.footer__contact a {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

.footer__legal {
  position: relative;
  width: 100%;
  font-family: var(--font-buttons);
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 4.8px;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
}

/* =============================================================== LOGOS === */
/* Five overlapping SVG fragments; insets are identical between the two
   sizes, so only the container box differs. */
.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  flex: none;
  max-width: 100%;
}
.logo__inner { position: relative; overflow: hidden; flex: none; max-width: 100%; }
.logo__inner img { position: absolute; }

.logo--hero { width: 197.147px; }
.logo--hero .logo__inner { width: 197.147px; height: 117.415px; }

.logo--footer { width: 337.416px; }
.logo--footer .logo__inner { width: 253.093px; height: 150.735px; }

.logo__p1 { top: 0;      left: 0;      width: 100%;    height: 69.40%; }
.logo__p2 { top: 77.41%; left: 12.80%; width: 17.96%;  height: 11.30%; }
.logo__p3 { top: 77.65%; left: 72.68%; width: 13.99%;  height: 2.93%;  }
.logo__p4 { top: 85.56%; left: 71.88%; width: 15.59%;  height: 2.92%;  }
.logo__p5 { top: 71.13%; left: 44.06%; width: 12.08%;  height: 28.78%; }

/* ==========================================================================
   RESPONSIVE LADDER
   ========================================================================== */

/* ---------------------------------------------------- < 1440: go fluid -- */
@media (max-width: 1439px) {
  :root {
    --gutter-benefits: 48px;
    --gutter-enroll: 80px;
    --gutter-letter: 32px;
  }

  /* Below 1440 the section sizes to its content, so the fixed height no
     longer holds the horse clear of the attribution — reserve that band as
     bottom padding instead (horse is 862.266px tall here). */
  .letter { height: auto; min-height: 0; padding-bottom: 900px; }
  .letter__mark { top: 120px; }
  /* Seal sits at a fixed 1440 offset — pull it in so it stays on canvas. */
  .letter__seal      { margin-left: 180px; }
  .letter__seal-centre { margin-left: 210px; }
}

/* ------------------------ < 1200: rebates + FAQ rows need too much run -- */
@media (max-width: 1199px) {
  .rebates {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 32px 48px;
  }
  .rebates__stamp { left: auto; right: 48px; top: 32px; transform: rotate(-15deg); }
  .rebates__head { text-align: left; }

  .faq { gap: 24px; }
  .faq__q { width: auto; flex: 1 1 340px; min-width: 0; }
  .faq__a { width: auto; flex: 1 1 420px; min-width: 0; }

  .enroll__deco--tl, .enroll__deco--bl, .enroll__deco--r { display: none; }
}

/* ------ < 1100: four 265px cards in a row get too narrow, so go 2x2 ----- */
@media (max-width: 1099px) {
  .cards { flex-wrap: wrap; gap: 24px; }
  .card { flex: 1 1 calc(50% - 12px); }
}

/* ----------------------------- < 900: stacked how-it-works buttons ------ */
@media (max-width: 899px) {
  .how { padding: 32px 24px; }
  .how__actions { flex-direction: column; align-items: stretch; width: 100%; gap: 16px; }
  .btn--wide { width: 100%; }
  .how__actions .btn { width: 100%; }

  .signup { padding: 40px 32px; }

  .letter { padding-bottom: 690px; }   /* horse is 650px tall at this step */
  .letter__mark { width: 900px; height: 900px; top: 140px; }
  /* Off-canvas on the mobile comp; drop it rather than let it collide. */
  .letter__seal, .letter__seal-centre { display: none; }
  .letter__quote { font-size: 48px; }
  .letter__horse { width: 1100px; height: 650px; margin-left: 0; transform: translateX(-50%); }

  .faqs__inner { padding: 0 24px; }

  /* Two columns need ~832px of run; below that stack the answer under the
     question and keep the gold rule on the question's row. */
  .faq { padding: 28px 0; gap: 16px; }
  .faq__q { order: 1; flex: 1 1 0; min-width: 0; width: auto; }
  .faq__chevron { order: 2; margin-top: 10px; }
  .faq__a { order: 3; flex: 1 1 100%; width: 100%; }
}

/* =============================================== < 700: MOBILE COMP ===== */
/* Figma 8092:8155 ([M] Enrollment) at 393px. */
@media (max-width: 699px) {
  :root {
    --gutter-benefits: 28px;
    --gutter-enroll: 24px;
    --gutter-letter: 24px;
  }

  /* ---- hero: photo cropped to the right, gradient darkening the left --- */
  .hero {
    height: 670px;
    padding: 0 var(--gutter-benefits);
    justify-content: center;
    gap: 50px;
  }
  .hero__image {
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }
  .hero__image img {
    width: 282%;      /* 1108.966 / 393 */
    height: 100%;
    left: -83%;       /* -325.63 / 393 */
    object-fit: cover;
  }
  .hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
  }

  .hero__text {
    width: 100%;
    height: auto;
    padding: 16px 0;
    align-items: center;
  }
  .hero__stack { width: 100%; gap: 48px; }
  .hero__title { font-size: 48px; }
  .hero__login { padding: 24px 28px; }

  /* ---- key benefits: cards stack full-width x 164 --------------------- */
  .benefits { padding: 60px var(--gutter-benefits); gap: 48px; }
  .benefits__frame { padding: 16px; gap: 24px; }

  .cards { flex-direction: column; gap: 24px; }
  .card { flex: none; width: 100%; height: 164px; }
  /* Cards 1 and 4 crop hard off-centre at desktop width; at 164px tall the
     media just covers the box. */
  .card__media { height: 164px; }
  .card__crop--1,
  .card__crop--2,
  .card__crop--3,
  .card__crop--4 { width: 100%; height: 100%; top: 50%; }
  .card__crop img {
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
  }

  /* ---- rebates band --------------------------------------------------- */
  .rebates { padding: 16px; gap: 24px; }
  .rebates__stamp {
    top: 36px;
    right: auto;
    left: 194px;
    font-size: 42.752px;
    transform: translateX(-50%) rotate(-15deg);
  }
  .rebates__wordmark { font-size: 40px; line-height: 1.148; }
  .rebates__head { font-size: 24px; }
  .rebates__detail, .rebates__legal { font-size: 12px; letter-spacing: 0.24px; }

  /* ---- how it works --------------------------------------------------- */
  .how { padding: 16px; gap: 32px; }
  .how__title { font-size: 24px; }
  .how__actions { gap: 24px; }

  /* ---- letter --------------------------------------------------------- */
  .letter {
    min-height: 0;
    /* 313.727px horse + breathing room, so the attribution clears it */
    padding: 60px var(--gutter-letter) 360px;
    gap: 48px;
  }
  .letter__texture { width: 816px; }
  .letter__mark {
    width: 755.318px;
    height: 755.318px;
    top: 164.4px;
  }
  .letter__portrait { width: 225.695px; height: 225.695px; }
  .letter__quote { font-size: 32px; line-height: 1.148; margin-bottom: -16px; }
  .letter__body { gap: 32px; }
  .letter__horse {
    width: 530.901px;
    height: 313.727px;
    margin-left: 0;
    transform: translateX(-50%);
  }

  /* ---- enrollment ----------------------------------------------------- */
  .enroll { padding: 60px var(--gutter-enroll); gap: 48px; }
  .enroll__title { font-size: 40px; line-height: 1.148; }
  .price__amount { font-size: 40px; line-height: 1.148; }
  .perks { gap: 24px; }
  .perks__list { gap: 24px; }

  .signup { padding: 32px 20px; gap: 32px; border-radius: 21px; }
  .signup__title { font-size: 24px; }
  .signup__sub { font-size: 14px; }
  .btn--solid { width: 100%; }
  .btn--solid .btn__label { text-align: center; }

  /* ---- faqs: question + rule on one line, answer beneath -------------- */
  .faqs { padding: 60px 0; gap: 32px; }
  .faqs__inner { gap: 32px; padding: 0 24px; }
  .faq { padding: 24px 0; }
  .faq__q { font-size: 18px; }

  /* ---- footer --------------------------------------------------------- */
  .footer { height: 559px; padding: 111px 20px 64px; }
  .footer__bg { width: 393px; height: 559px; }
  .footer__bg-texture { top: -1800px; height: 2400px; }
  .footer__bg-photo { top: 180px; height: 380px; }
  .footer__bg-fade { top: 437px; height: 122px; }
  .footer__top { gap: 32px; }
  .logo--footer { width: 100%; max-width: 253.093px; }
  .footer__contact { letter-spacing: 2.4px; }
  .footer__legal { letter-spacing: 2.4px; font-size: 11px; }
}

/* ---- < 360: below the 393 comp width, ease the display sizes down ------ */
/* Must stay under 393 so the mobile comp's own type scale wins at 393. */
@media (max-width: 359px) {
  .hero__title { font-size: 40px; }
  .letter__quote { font-size: 28px; }
  .enroll__title { font-size: 34px; }
  .rebates__wordmark { font-size: 34px; }
  .footer__legal { letter-spacing: 1.6px; }
}

/* ------------------------------------------------------------ a11y ------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================== FULL-BLEED BACKGROUNDS ==
   On screens wider than the 1440px canvas, CONTENT stays on the canvas but
   each section's BACKGROUND extends to the viewport. Mechanism: sections
   trade `overflow: hidden` for a clip that still crops vertically at the
   section bounds but lets the (widened) background layers reach the screen
   edges; body{overflow-x:hidden} guards against scrollbars. Decorative
   elements that relied on the old 1440 edge-crop now crop themselves.
   Below 1441px nothing here applies — the original design is untouched. */

@media (min-width: 1441px) {
  /* Sections: vertical-only clip (negative horizontal inset = no side crop). */
  .hero, .benefits, .letter, .enroll, .faqs, .footer {
    overflow: visible;
    clip-path: inset(0 -50vw);
  }

  /* Centered background layers stretch to the viewport… */
  .hero__image,
  .benefits__texture,
  .letter__texture,
  .enroll__texture,
  .faqs__texture,
  .footer__bg {
    width: 100vw;
  }
  /* …and their fills crop instead of stretching. */
  .benefits__texture img,
  .letter__texture img,
  .enroll__texture img,
  .faqs__texture img,
  .footer__bg-texture,
  .footer__bg-photo {
    object-fit: cover;
  }

  /* Edge-anchored overlays become centered viewport-wide bands. */
  .benefits__overlay,
  .enroll__overlay,
  .faqs__overlay {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
  }

  /* Solid black section grounds extend behind the widened art. */
  .faqs::before,
  .footer::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background: var(--black);
    z-index: -1;
  }

  /* Enroll decos were cropped by the section's 1440 edge; self-crop now. */
  .enroll__deco--tl { clip-path: inset(0 0 0 26.37px); }
  .enroll__deco--bl { clip-path: inset(0 0 0 187.09px); }
  .enroll__deco--r  { clip-path: inset(0 70.05px 0 0); }
}