/* Desktop sales page, first half: hero, ribbon, pillars, library, coach, reviews.
   Figma frame 53:143 (1440w). Prefix: sda- */

.sda-h2 {
  font-weight: 900; font-size: 48px; line-height: 56px; letter-spacing: -0.48px;
}
.sda-blue { color: var(--blue); }
.sda-emoji { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-weight: 400; }

/* ---------- Hero ---------- */
.sda-hero {
  background: var(--bf-black);
  display: flex; align-items: center; gap: 64px;
  /* Figma: copy 580 + gap 64 + visual 540 starts at 168 and runs past the 1104 grid (right edge 88px). */
  padding: 72px max(16px, calc(var(--pad-d) - 80px)) 72px var(--pad-d);
}
.sda-hero__copy {
  flex: 0 1 580px; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
}
.sda-hero__tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  background: var(--gold); color: var(--bf-black);
  font-weight: 900; font-size: 14px; white-space: nowrap;
}
.sda-hero__tag-t { letter-spacing: 1.4px; }
.sda-hero__h {
  font-weight: 900; font-size: 64px; line-height: 1.02; letter-spacing: -1px;
  color: #FFFFFF; max-width: 580px;
  text-wrap: wrap;
}
.sda-hero__h-g { color: var(--gold); }
.sda-hero__sub { font-size: 19px; line-height: 30px; color: var(--gray-on-black); }
.sda-hero__price { display: flex; align-items: center; gap: 14px; white-space: nowrap; flex-wrap: wrap; }
.sda-hero__was { font-weight: 700; font-size: 28px; color: var(--strike); }
.sda-hero__now { font-weight: 900; font-size: 56px; color: var(--gold); }
.sda-hero__term { font-weight: 600; font-size: 18px; color: #FFFFFF; }
.sda-hero__save {
  background: var(--red); color: #FFFFFF; border-radius: 6px; padding: 6px 10px;
  font-weight: 900; font-size: 13px; letter-spacing: 0.78px;
}
.sda-hero__cta { width: 420px; max-width: 100%; padding-top: 4px; }

/* Hero visual (59:248): layered, absolutely positioned */
.sda-viz { position: relative; flex: none; width: 540px; height: 580px; }
.sda-viz > * { position: absolute; }
.sda-viz__tablet {
  left: 0; top: 20px; width: 470px; height: 330px;
  background: var(--navy); border-radius: 26px; overflow: hidden;
  box-shadow: 0 24px 48px rgba(5, 10, 26, 0.28);
}
.sda-viz__tablet > * { position: absolute; }
.sda-viz__tablet picture { position: static; }
.sda-viz__screen {
  position: absolute; left: 12px; top: 12px; width: 446px; height: 306px;
  object-fit: cover; border-radius: 16px;
}
.sda-viz__live {
  left: 28px; top: 28px; display: flex; align-items: center; gap: 6px;
  background: #FFFFFF; border-radius: 999px; padding: 6px 10px; white-space: nowrap;
}
.sda-viz__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; }
.sda-viz__live-b { font-weight: 900; font-size: 11px; letter-spacing: 0.88px; color: var(--navy); }
.sda-viz__live-t { font-weight: 600; font-size: 11px; color: var(--slate); }
.sda-viz__people { left: 28px; top: 250px; display: flex; gap: 6px; align-items: flex-start; }
.sda-viz__tile {
  width: 52px; height: 52px; object-fit: cover;
  border: 2px solid #FFFFFF; border-radius: 10px;
}
.sda-viz__more {
  display: flex; align-items: center; justify-content: center; height: 52px;
  background: var(--blue); border: 2px solid #FFFFFF; border-radius: 10px;
  font-weight: 800; font-size: 13px; color: #FFFFFF; white-space: nowrap;
}

.sda-viz__phone {
  left: 344px; top: 178px; width: 196px; height: 392px;
  background: #0B0F1A; border-radius: 34px; overflow: hidden;
  box-shadow: 0 28px 56px rgba(5, 10, 26, 0.32);
}
.sda-viz__pscreen {
  position: absolute; left: 8px; top: 8px; width: 180px; height: 376px;
  border-radius: 27px; overflow: hidden;
}
.sda-viz__pscreen > * { position: absolute; }
.sda-viz__pscreen picture { position: static; }
.sda-viz__pimg { position: absolute; inset: 0; width: 180px; height: 376px; object-fit: cover; }
.sda-viz__pfade {
  left: 0; top: 176px; width: 180px; height: 200px;
  background: linear-gradient(to bottom, rgba(10, 15, 31, 0), rgba(10, 15, 31, 0.92));
}
.sda-viz__notch { left: 58px; top: 10px; width: 64px; height: 18px; border-radius: 9px; background: #0B0F1A; }
.sda-viz__play { left: 64px; top: 150px; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); }
.sda-viz__tri { left: 83.5px; top: 165.1px; width: 17.4434px; height: 21.8042px; max-width: none; }
.sda-viz__plabel { left: 14px; top: 286px; width: 152px; display: flex; flex-direction: column; gap: 6px; white-space: nowrap; }
.sda-viz__pk { font-weight: 700; font-size: 9px; letter-spacing: 1.08px; color: var(--light-blue); }
.sda-viz__pt { font-weight: 800; font-size: 14px; color: #FFFFFF; }
.sda-viz__bar { position: relative; display: block; width: 152px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.sda-viz__bar span { position: absolute; left: 0; top: 0; width: 64px; height: 5px; border-radius: 3px; background: #FFFFFF; }

.sda-viz__card {
  left: -24px; top: 372px; width: 294.4px; height: 220.8px;
  display: flex; flex-direction: column; gap: 8.28px;
  padding: 42.32px 12.88px 12.88px;
  background: var(--navy); border-radius: 20px; overflow: hidden;
  box-shadow: 0 22px 50px rgba(5, 10, 26, 0.3);
  --chat-av: 25.76px; --chat-fs: 12.88px; --chat-gap: 7.36px; --chat-pad: 9.2px 11.04px;
  --chat-r: 12.88px; --chat-r-sm: 3.68px; --chat-like-pad: 4.6px 9.2px;
}
.sda-viz__stars {
  left: 330px; top: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap;
  background: #FFFFFF; border-radius: 999px; padding: 6px 10px;
  box-shadow: 0 10px 24px rgba(5, 10, 26, 0.18);
}
.sda-viz__stars-s { font-weight: 900; font-size: 12px; color: var(--star); }
.sda-viz__stars-t { font-weight: 700; font-size: 11px; color: var(--navy); }
.sda-viz__label {
  left: -8px; top: 388px; padding: 5px 10px; border-radius: 999px;
  background: var(--light-blue); color: var(--navy); white-space: nowrap;
  font-weight: 900; font-size: 10px; letter-spacing: 1px;
}

/* Chat mockup (shared by hero card and community pillar) */
.sda-chat__msg { display: flex; align-items: flex-end; gap: var(--chat-gap, 8px); width: 100%; }
.sda-chat__av {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: var(--chat-av, 28px); height: var(--chat-av, 28px); border-radius: 50%;
  font-weight: 800; font-size: var(--chat-fs, 14px); white-space: nowrap;
}
.sda-chat__av--dc { background: var(--blue); color: #FFFFFF; }
.sda-chat__av--tv { background: var(--light-blue); color: var(--navy); }
.sda-chat__bub {
  flex: 1 0 0; min-width: 0;
  background: #24304D; color: #E6ECF7;
  padding: var(--chat-pad, 10px 12px);
  border-radius: var(--chat-r, 14px) var(--chat-r, 14px) var(--chat-r, 14px) var(--chat-r-sm, 4px);
  font-size: var(--chat-fs, 14px); line-height: 1.4;
}
.sda-chat__react { display: flex; justify-content: flex-end; width: 100%; }
.sda-chat__likes {
  background: var(--blue); color: #FFFFFF; border-radius: 999px;
  padding: var(--chat-like-pad, 5px 10px);
  font-weight: 700; font-size: var(--chat-fs, 14px); white-space: nowrap;
}

@media (max-width: 1199.98px) {
  .sda-hero { flex-direction: column; align-items: stretch; gap: 64px; padding: 72px var(--pad-d); }
  .sda-hero__copy { flex: none; max-width: 580px; }
  .sda-viz { align-self: center; }
}

/* ---------- Ribbon ---------- */
.sda-ribbon {
  background: var(--gold); padding: 12px 16px;
  display: flex; justify-content: center; text-align: center;
}
.sda-ribbon p { font-weight: 900; font-size: 17px; line-height: 21px; color: var(--bf-black); white-space: pre; }

/* ---------- Pillars ---------- */
.sda-pillars {
  background: #FFFFFF;
  display: flex; flex-direction: column; align-items: center; gap: 48px;
  padding: 104px var(--pad-d);
}
.sda-pillars__h { text-align: center; color: var(--navy); }
.sda-pillars__row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 352px)); gap: 24px;
  justify-content: center; width: 100%;
}
.sda-pillar {
  display: flex; flex-direction: column; gap: 18px;
  min-height: 483px; padding: 16px 16px 28px;
  background: #FFFFFF; border-radius: 22px;
  box-shadow: 0 12px 28px rgba(20, 31, 51, 0.1);
}
.sda-pillar__media { position: relative; height: 240px; flex: none; }
.sda-pillar__img { width: 100%; height: 240px; object-fit: cover; border-radius: 16px; }
.sda-pill {
  position: absolute; left: 12px; top: 12px;
  padding: 6px 11px; border-radius: 999px; white-space: nowrap;
  font-weight: 800; font-size: 11px; letter-spacing: 1.5px;
}
.sda-pill--white { background: #FFFFFF; color: var(--navy); }
.sda-pill--navy { background: var(--navy); color: #FFFFFF; }
.sda-pill--sky { background: var(--light-blue); color: var(--navy); }
.sda-pillar__chat {
  height: 240px; display: flex; flex-direction: column; gap: 9px;
  padding: 46px 14px 14px; background: var(--navy); border-radius: 16px; overflow: hidden;
}
.sda-pillar__copy { display: flex; flex-direction: column; gap: 6px; padding: 0 6px; }
.sda-pillar__t { font-weight: 900; font-size: 30px; color: var(--navy); text-wrap: wrap; }
.sda-pillar__s { font-weight: 700; font-size: 16px; color: var(--navy); }
.sda-pillar__k { font-size: 13px; color: var(--muted); }
.sda-pillar__list { display: flex; flex-direction: column; gap: 12px; padding: 0 6px; }
.sda-pillar__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 18px; color: var(--navy); }
.sda-pillar__list img { width: 18px; height: 18px; flex: none; }

/* ---------- Library ---------- */
.sda-lib {
  background: var(--navy); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 104px var(--pad-d);
}
.sda-lib__eyebrow { font-weight: 800; font-size: 14px; letter-spacing: 1.96px; color: var(--light-blue); }
.sda-lib__h { color: #FFFFFF; }
.sda-lib__p { font-size: 20px; line-height: 30px; color: #C9D1E2; max-width: 760px; }
.sda-lib__covers {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  width: 100%; max-width: 1104px;
}
.sda-cover {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  height: 210px; padding: 12px; border-radius: 16px; overflow: hidden;
}
.sda-cover__brand { font-weight: 800; font-size: 9px; letter-spacing: 1.5px; white-space: nowrap; }
.sda-cover__t { font-weight: 800; font-size: 17px; line-height: 1.15; width: 100%; }
.sda-cover__t em { font-weight: 700; font-style: italic; }
.sda-cover__k { font-weight: 700; font-size: 9px; letter-spacing: 1.5px; width: 100%; }
.sda-cover--big {
  grid-column: 1 / -1; height: 170px;
  background: linear-gradient(to bottom, #FFFFFF, #EDF3FC 55%, #C4D6F5);
  color: var(--navy);
}
.sda-cover--big .sda-cover__brand { font-size: 10px; }
.sda-cover--big .sda-cover__t { font-size: 22px; }
.sda-cover--big .sda-cover__k { font-size: 10px; color: var(--slate); }
.sda-cover--big span, .sda-cover--big em { color: var(--blue); }
.sda-cover--blue { background: var(--blue); color: #FFFFFF; }
.sda-cover--blue span, .sda-cover--blue em, .sda-cover--blue .sda-cover__k { color: var(--sky); }
.sda-cover--sky { background: var(--sky); color: var(--navy); }
.sda-cover--sky span, .sda-cover--sky em, .sda-cover--sky .sda-cover__k { color: #1F4290; }
.sda-cover--slate { background: var(--slate); color: #FFFFFF; }
.sda-cover--slate span, .sda-cover--slate em { color: #B9CCF0; }
.sda-cover--slate .sda-cover__k { color: var(--sky); }
.sda-cover--white { background: #FFFFFF; color: var(--navy); }
.sda-cover--white span, .sda-cover--white em { color: var(--blue); }
.sda-cover--white .sda-cover__k { color: var(--slate); }
.sda-cover--light { background: var(--light-blue); color: var(--navy); }
.sda-cover--light span, .sda-cover--light em { color: #FFFFFF; }
.sda-cover--dark { background: var(--deep-navy); border: 2px solid #3A5EA8; color: #FFFFFF; }
.sda-cover--dark span, .sda-cover--dark em, .sda-cover--dark .sda-cover__k { color: var(--light-blue); }
.sda-lib__foot { font-weight: 700; font-size: 17px; color: #FFFFFF; }

/* ---------- Coach ---------- */
.sda-coach {
  background: linear-gradient(to bottom, #1A2643, var(--deep-navy));
  display: flex; align-items: center; justify-content: center; gap: 64px;
  padding: 104px var(--pad-d);
}
.sda-coach__photo {
  position: relative; flex: 0 1 500px; min-width: 0; height: 600px;
  border-radius: 24px; overflow: hidden;
}
.sda-coach__photo picture { height: 100%; }
.sda-coach__img { width: 100%; height: 100%; object-fit: cover; }
.sda-coach__fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 200px;
  background: linear-gradient(to bottom, rgba(14, 21, 38, 0), var(--deep-navy));
}
.sda-coach__pill {
  position: absolute; left: 24px; top: 24px; padding: 6px 11px; border-radius: 999px;
  background: var(--light-blue); color: var(--navy);
  font-weight: 800; font-size: 11px; white-space: nowrap;
}
.sda-coach__copy {
  flex: 0 1 540px; min-width: 0;
  display: flex; flex-direction: column; gap: 20px; text-align: left;
}
.sda-coach__h { color: #FFFFFF; }
.sda-coach__hl { color: var(--light-blue); }
.sda-coach__q { font-weight: 500; font-size: 20px; line-height: 1.6; color: #E6ECF7; }
.sda-coach__name { font-weight: 700; font-style: italic; font-size: 35px; color: #FFFFFF; }
.sda-coach__cred { font-size: 15px; line-height: 1.5; color: #B4BDD0; }
.sda-coach__stats { display: flex; gap: 8px; padding-top: 6px; text-align: center; }
.sda-coach__stat {
  flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 6px; border: 1px solid #2A3756; border-radius: 14px;
}
.sda-coach__num { font-weight: 900; font-size: 20px; color: #FFFFFF; }
.sda-coach__lbl { font-size: 11px; color: #B4BDD0; }
@media (max-width: 899.98px) {
  .sda-coach { flex-direction: column; align-items: center; }
  .sda-coach__photo { flex: none; width: 100%; max-width: 500px; }
  .sda-coach__copy { flex: none; width: 100%; max-width: 540px; }
}

/* ---------- Reviews ---------- */
.sda-rev {
  background: #FFFFFF;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 104px var(--pad-d);
}
.sda-rev__h { text-align: center; color: var(--navy); }
.sda-rev__sub { font-weight: 600; font-size: 20px; line-height: 30px; color: var(--slate); text-align: center; }
.sda-rev__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 352px)); gap: 24px;
  justify-content: center; width: 100%; padding-top: 24px;
}
.sda-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px 24px; border-radius: 18px;
}
.sda-card__by { display: flex; align-items: center; gap: 12px; }
.sda-card__av { width: 48px; height: 48px; flex: none; }
.sda-card__nm { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sda-card__name { font-weight: 800; font-size: 15px; text-wrap: wrap; }
.sda-card__stars { font-weight: 700; font-size: 14px; letter-spacing: 1px; color: var(--star); white-space: nowrap; }
.sda-card__h { font-weight: 900; font-size: 19px; line-height: 24px; }
.sda-card__blk { display: flex; flex-direction: column; gap: 4px; }
.sda-card__lbl { font-weight: 800; font-size: 11px; line-height: 13px; letter-spacing: 1.5px; }
.sda-card__before { font-size: 14px; line-height: 1.5; }
.sda-card__after { font-weight: 700; font-size: 16px; line-height: 1.45; }
.sda-card__foot { font-weight: 600; font-size: 12px; line-height: 14px; }
.sda-card--dark { background: var(--navy); }
.sda-card--dark .sda-card__name, .sda-card--dark .sda-card__after { color: #FFFFFF; }
.sda-card--dark .sda-card__h, .sda-card--dark .sda-card__lbl { color: var(--light-blue); }
.sda-card--dark .sda-card__before { color: #C9D1E2; }
.sda-card--dark .sda-card__foot { color: #B4BDD0; }
.sda-card--light { background: var(--mist); }
.sda-card--light .sda-card__name, .sda-card--light .sda-card__after { color: var(--navy); }
.sda-card--light .sda-card__h, .sda-card--light .sda-card__lbl { color: var(--blue); }
.sda-card--light .sda-card__before { color: var(--slate); }
.sda-card--light .sda-card__foot { color: var(--muted); }
.sda-card--blue { background: var(--blue); }
.sda-card--blue .sda-card__name, .sda-card--blue .sda-card__after { color: #FFFFFF; }
.sda-card--blue .sda-card__h, .sda-card--blue .sda-card__foot { color: var(--sky); }
.sda-card--blue .sda-card__lbl { color: var(--light-blue); }
.sda-card--blue .sda-card__before { color: #C9D1E2; }
/* Figma row heights at design width (cards are equal height per row). */
@media (min-width: 1100px) {
  .sda-card:nth-child(-n+3) { min-height: 424px; }
  .sda-card:nth-child(n+4):nth-child(-n+6) { min-height: 356px; }
  .sda-card:nth-child(n+7):nth-child(-n+9) { min-height: 308px; }
  .sda-card:nth-child(n+10) { min-height: 356px; }
}

/* ---------- 3-column grids become 2 columns below 1100px ---------- */
@media (max-width: 1099.98px) {
  .sda-pillars__row, .sda-rev__grid { grid-template-columns: repeat(2, minmax(0, 352px)); }
  .sda-lib__covers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sda-pillar:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 352px; }
}
.sda-card__by picture, .sda-viz__people picture { flex: none; }
/* Figma wraps body copy greedily: match its line breaks. */
.sda-card p, .sda-pillar p, .sda-coach__copy p, .sda-lib__p, .sda-hero__sub { text-wrap: wrap; }