/* What's in it page (Paper 11). Classes prefixed sb-whats-. */
.sb-whats-hero,
.sb-whats-ratio,
.sb-whats-cards { max-width: var(--sb-max); margin-inline: auto; padding-inline: var(--sb-gutter); }

/* Hero */
.sb-whats-hero { display: flex; align-items: center; gap: 40px; padding-block: 56px 40px; }
.sb-whats-hero__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.sb-whats-hero__title {
  font: 800 96px/90px var(--sb-font-display);
  letter-spacing: -0.05em;
  color: var(--sb-cobalt);
}
.sb-whats-hero__body { width: 540px; max-width: 100%; font: 400 19px/29px var(--sb-font-text); color: var(--sb-ink); }
.sb-whats-hero__media {
  flex: 0 0 520px; height: 560px;
  border-radius: 24px; overflow: clip;
  background: var(--sb-peach);
}
.sb-whats-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Ratio bar */
.sb-whats-ratio { padding-block: 24px 40px; }
.sb-whats-ratio__bar { display: flex; height: 72px; border-radius: 14px; overflow: clip; }
.sb-whats-ratio__seg {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; padding-inline: 24px;
  font: 600 17px/22px var(--sb-font-text); color: var(--sb-cream);
}
.sb-whats-ratio__seg--ink { background: var(--sb-ink); }
.sb-whats-ratio__seg--tangerine { background: var(--sb-tangerine); }
.sb-whats-ratio__seg--cobalt { background: var(--sb-cobalt); }

/* Cards */
.sb-whats-cards { display: flex; gap: 20px; padding-block: 20px 96px; }
.sb-whats-card {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding: 32px; border-radius: 20px;
  color: var(--sb-ink);
}
.sb-whats-card--white { background: #FFFFFF; }
.sb-whats-card--cobalt { background: var(--sb-cobalt); color: var(--sb-cream); }
.sb-whats-card--sand { background: #EAE5DA; }
.sb-whats-card__eyebrow {
  font: 400 12px/16px var(--sb-font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sb-cobalt);
}
.sb-whats-card--cobalt .sb-whats-card__eyebrow { color: var(--sb-lime); }
.sb-whats-card--sand .sb-whats-card__eyebrow { color: var(--sb-tangerine); }
.sb-whats-card__title { font: 800 34px/42px var(--sb-font-display); letter-spacing: -0.035em; }
.sb-whats-card__body { font: 400 16px/25px var(--sb-font-text); }
/* Layout loads no Hanken italic face; allow a synthesized oblique for the Latin name. */
.sb-whats-card__body em { font-style: italic; font-synthesis: style; }
.sb-whats-card__list { list-style: none; padding: 0; margin: 0; font: 400 16px/27px var(--sb-font-text); }
.sb-whats-card__chips { list-style: none; padding: 6px 0 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sb-whats-card__chips li {
  padding: 5px 10px; border: 1px solid currentColor; border-radius: 999px;
  font: 400 11px/14px var(--sb-font-mono);
}

@media (max-width: 1279px) {
  .sb-whats-hero__title { font-size: 72px; line-height: 68px; }
  .sb-whats-hero__media { flex-basis: 420px; height: 460px; }
  .sb-whats-cards { flex-wrap: wrap; }
  .sb-whats-card { flex-basis: calc(50% - 10px); }
}

@media (max-width: 899px) {
  .sb-whats-hero { flex-direction: column; align-items: stretch; gap: 32px; padding-block: 40px 24px; }
  .sb-whats-hero__title { font-size: 52px; line-height: 50px; }
  .sb-whats-hero__body { width: auto; font-size: 17px; line-height: 26px; }
  .sb-whats-hero__media { flex: none; height: auto; aspect-ratio: 520 / 560; }
  .sb-whats-ratio { padding-block: 16px 24px; }
  .sb-whats-ratio__bar { flex-direction: column; height: auto; }
  .sb-whats-ratio__seg { padding: 16px 20px; font-size: 15px; line-height: 20px; }
  .sb-whats-cards { flex-direction: column; gap: 16px; padding-block: 16px 72px; }
  .sb-whats-card { flex-basis: auto; padding: 24px; }
  .sb-whats-card__title { font-size: 28px; line-height: 34px; }
}