/*
 * Homepage "expert" section — Figma "Website" file, node 4267:1206
 * (desktop 1440x660) and 4302:2359 (mobile 393x930). Sits between
 * "how it works" and the FAQs.
 *
 * Two halves on a mono/50 (#f9f9f9) ground. Left: an eyebrow pill, the
 * "Built on evidence" headline and three check-marked points,
 * starting at the page column's left edge. Right: Dr. Lang's quote on a paper
 * texture (the Figma raw JPEG at 30% opacity) that runs to the viewport edge.
 * Mobile stacks the two, the quote block becoming a full-width band.
 *
 * Geometry. Desktop: the quote column is 674 wide at 1440 (766 → 1440) with
 * the quote box inset 80 on both sides = 514 wide, i.e. centred; keeping it
 * centred with a 514 cap is what lets the column grow at ≥1920. The column's
 * 182/190 top/bottom padding makes it 660 tall; the copy centres against it.
 * 992–1439 (the 912 column, viewport = 1040rem): the copy narrows to 440 and
 * the quote drops to the mobile type size so both halves fit. 768–991: no
 * Figma frame — the mobile stack with the copy in the 672 column and desktop
 * type sizes. < 768: the Figma mobile frame.
 *
 * Vertical rhythm. No top padding — how-it-works carries the 108/72 gap. The
 * gap to the next section (116 desktop, 72 mobile in the Figma frames) is a
 * bottom MARGIN, not padding, because this section's ground is grey and the
 * gap is white.
 *
 * Units: rem, like the rest of the site (1rem = 1px at the design widths, see
 * the <style> block in index.html). The left edge is the .container gutter,
 * computed from layout.css --container-max.
 *
 * Fonts: heading Aeonik Medium (--font-display), quote PP Pangaia Medium;
 * the eyebrow, the three points and the attribution are Inter, as in Figma.
 * Colours are the Figma literals, as in the other new sections.
 *
 * Loaded after how-it-works.css.
 */

.expert {
  --expert-bg: #f9f9f9;
  --expert-text: #000;
  --expert-title: #222;
  --expert-subtle: #666;
  --expert-label: #444;
  --expert-pill-bg: #fff;
  --expert-pill-border: #ebebeb;
  --expert-dot: #ff5900;
  /* The .container's left gutter (layout.css owns --container-max) */
  --expert-gutter: calc((100% - var(--container-max)) / 2);

  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60rem;
  margin: 0 0 116rem;
  padding: 0 0 0 var(--expert-gutter);
  background-color: var(--expert-bg);
  color: var(--expert-subtle);
  /* Inter (Figma Typography/font/Primary). The token override, not just
     font-family, is what redirects the Webflow `a` / `h1` element rules. */
  --_colors---family-paragraph: var(--font-ui);
  font-family: var(--font-ui);
}

/* Left: copy ------------------------------------------------------------- */

.expert-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  gap: 40rem;
  width: 626rem;
}

.expert-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16rem;
  width: 100%;
}

/* Figma "Label": white fill, #ebebeb hairline, 6px 16px 6px 12px, a 6px
   brand dot, 14/20 medium #444. The hairline is inside the 32px box in Figma
   and outside in CSS, so the vertical padding gives up 1px each side. */
.expert-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8rem;
  margin: 0;
  padding: 5rem 16rem 5rem 12rem;
  border: 1px solid var(--expert-pill-border);
  border-radius: 999px;
  background-color: var(--expert-pill-bg);
  font-size: 14rem;
  line-height: 20rem;
  font-weight: 500;
  color: var(--expert-label);
  white-space: nowrap;
}

.expert-eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-color: var(--expert-dot);
}

/* Figma "Heading/Regular/XL": Aeonik Medium 48/48, -1.6px, black */
.expert-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: 48rem;
  line-height: 48rem;
  font-weight: 500;
  letter-spacing: -1.6rem;
  color: var(--expert-text);
}

.expert-points {
  display: flex;
  flex-direction: column;
  gap: 24rem;
  width: 516rem;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.expert-point {
  display: flex;
  align-items: flex-start;
  gap: 12rem;
}

/* The Figma check glyph (node 4267:1216), 24px box */
.expert-check {
  display: block;
  flex-shrink: 0;
  width: 24rem;
  height: 24rem;
}

.expert-point-copy {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4rem;
  min-width: 0;
}

/* Figma "Label/L": 16/24 medium, -0.16px, mono/800 */
.expert-point-title {
  margin: 0;
  font-family: inherit;
  font-size: 16rem;
  line-height: 24rem;
  font-weight: 500;
  letter-spacing: -0.16rem;
  color: var(--expert-title);
}

/* Figma "Body/M": 16/24, -0.32px, #666 */
.expert-point-text {
  margin: 0;
  font-size: 16rem;
  line-height: 24rem;
  font-weight: 400;
  letter-spacing: -0.32rem;
  color: var(--expert-subtle);
}

/* Right: quote ----------------------------------------------------------- */

.expert-quote {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  min-width: 0;
  margin: 0;
  /* Figma: quote box top 182 in a 660 column; 190 remain below its 288. The
     column is as tall as this padding unless the copy is taller (992–1439),
     in which case the quote centres in the extra height. */
  padding: 182rem 80rem 190rem;
  overflow: hidden;
}

/* Paper texture, Figma raw image at 30%, covering the column */
.expert-texture,
.expert-texture img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.expert-texture img {
  object-fit: cover;
  object-position: center;
  opacity: 0.3;
  pointer-events: none;
}

.expert-quote-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32rem;
  width: 100%;
  max-width: 514rem;
  margin: 0 auto;
}

.expert-quote-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8rem;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

/* The Figma quote glyph (node 4267:1237), 40px box */
.expert-quote-mark {
  display: block;
  width: 40rem;
  height: 40rem;
}

/* Figma "Heading/Accent/XL": PP Pangaia Medium 40/48, -0.64px, black */
.expert-quote-text {
  margin: 0;
  font-family: "PP Pangaia", var(--font-display);
  font-size: 40rem;
  line-height: 48rem;
  font-weight: 500;
  letter-spacing: -0.64rem;
  color: var(--expert-text);
}

.expert-author {
  display: flex;
  align-items: center;
  gap: 16rem;
  margin: 0;
  text-align: left;
}

/* Avatar: the Figma ellipse (node 4267:1296) exported at 4x, 64px on desktop */
.expert-avatar,
.expert-avatar img {
  display: block;
  flex-shrink: 0;
  width: 64rem;
  height: 64rem;
}

.expert-avatar img {
  border-radius: 50%;
  object-fit: cover;
}

.expert-author-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  min-width: 0;
}

/* Figma "Label/L": 16/20 medium, -0.16px, black */
.expert-author-name {
  margin: 0;
  font-size: 16rem;
  line-height: 20rem;
  font-weight: 500;
  letter-spacing: -0.16rem;
  color: var(--expert-text);
}

/* Figma "Body/M": 16/24, -0.32px, #666 */
.expert-author-org {
  margin: 0;
  font-size: 16rem;
  line-height: 24rem;
  font-weight: 400;
  letter-spacing: -0.32rem;
  color: var(--expert-subtle);
}

/* ------------------------------------------------------------------ */
/* 992–1439: the 912 column (viewport = 1040rem) — narrower copy, the   */
/* quote at the mobile type size so the two halves still fit           */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 1439px) {
  .expert {
    gap: 48rem;
  }

  /* The copy is taller than the quote here, so it sets the height; the 80
     keeps the same air above and below as the quote column has. */
  .expert-copy {
    width: 440rem;
    padding: 80rem 0;
  }

  .expert-points {
    width: 100%;
  }

  .expert-quote {
    padding: 140rem 48rem 148rem;
  }

  .expert-quote-mark {
    width: 32rem;
    height: 32rem;
  }

  /* Figma "Heading/Accent/L": 32/38, -0.64px */
  .expert-quote-text {
    font-size: 32rem;
    line-height: 38rem;
  }
}

/* ------------------------------------------------------------------ */
/* < 992: stacked (no Figma tablet frame; the mobile stack with the     */
/* copy in the 672 column and desktop type sizes)                       */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 991px) {
  .expert {
    flex-direction: column;
    align-items: stretch;
    gap: 48rem;
    padding: 64rem 0 0;
  }

  .expert-copy {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0;
  }

  .expert-points {
    width: 516rem;
  }

  .expert-quote {
    flex: none;
    align-self: auto;
    padding: 48rem var(--expert-gutter) 64rem;
  }

  .expert-quote-inner {
    max-width: none;
  }

  .expert-quote-mark {
    width: 40rem;
    height: 40rem;
  }

  .expert-quote-text {
    font-size: 40rem;
    line-height: 48rem;
  }
}

/* ------------------------------------------------------------------ */
/* Mobile (< 768, Figma 393): own 24 gutter, smaller type               */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 767px) {
  .expert {
    gap: 48rem;
    margin-bottom: 72rem;
    padding: 48rem 0 0;
  }

  .expert-copy {
    max-width: none;
    gap: 24rem;
    padding: 0 24rem;
  }

  .expert-headline {
    gap: 12rem;
  }

  /* Figma "Label/S": 12/16 medium, -0.12px, 6px 14px 6px 10px (28px tall) */
  .expert-eyebrow {
    padding: 5rem 14rem 5rem 10rem;
    font-size: 12rem;
    line-height: 16rem;
    letter-spacing: -0.12rem;
  }

  /* Figma "Heading/Regular/L": 32/38, no tracking */
  .expert-heading {
    font-size: 32rem;
    line-height: 38rem;
    letter-spacing: 0;
  }

  .expert-points {
    gap: 20rem;
    width: 100%;
  }

  .expert-point {
    gap: 8rem;
  }

  /* Figma mobile draws the glyph at 16.67px inside the 24 box */
  .expert-check {
    width: 20rem;
    height: 20rem;
    margin: 2rem;
  }

  .expert-quote {
    padding: 48rem 24rem 64rem;
  }

  .expert-quote-mark {
    width: 32rem;
    height: 32rem;
  }

  /* Figma "Heading/Accent/L": 32/38, -0.64px */
  .expert-quote-text {
    font-size: 32rem;
    line-height: 38rem;
  }

  .expert-avatar,
  .expert-avatar img {
    width: 56rem;
    height: 56rem;
  }
}