/*
 * New landing page. Written alongside the live landing.css so the working site
 * keeps serving while this is half-finished; the two swap over in one commit
 * at the end.
 *
 * Everything visual comes from tokens.css. A raw hex here means the design
 * uses a value that is not a Figma variable — flag it rather than inline it.
 */

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

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

body {
  margin: 0;
  font-family: var(--wt-font-body);
  font-size: var(--wt-b2-size);
  line-height: var(--wt-b2-line);
  letter-spacing: var(--wt-b2-track);
  color: var(--wt-text);
  background: var(--wt-surface);
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

/* ── Type ───────────────────────────────────────────────── */

.h2, .h3, .h4, .h6 {
  font-family: var(--wt-font-display);
  font-weight: 400;
  margin: 0;
  text-transform: uppercase;
}

.h2 { font-size: var(--wt-h2-size); line-height: var(--wt-h2-line); letter-spacing: var(--wt-h2-track); }
.h3 { font-size: var(--wt-h3-size); line-height: var(--wt-h3-line); letter-spacing: var(--wt-h3-caps-track); }
.h4 { font-size: var(--wt-h4-size); line-height: var(--wt-h4-line); letter-spacing: var(--wt-h4-track); }
.h6 { font-size: var(--wt-h6-size); line-height: var(--wt-h6-line); letter-spacing: var(--wt-h6-track); }

/* The one heading the design sets in the body face rather than the display one. */
.h5 {
  font-family: var(--wt-font-body);
  font-size: var(--wt-h5-size);
  font-weight: var(--wt-h5-weight);
  line-height: var(--wt-h5-line);
  letter-spacing: var(--wt-h5-track);
  margin: 0;
}

.s1 { font-size: var(--wt-s1-size); line-height: var(--wt-s1-line); letter-spacing: var(--wt-s1-track); }
.b1 { font-size: var(--wt-b1-size); line-height: var(--wt-b1-line); letter-spacing: var(--wt-b1-track); }

/* ── Layout ─────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--wt-content-width);
  margin-inline: auto;
  padding-inline: 40px;
}

/* ── Header — Figma 2194:56386 ──────────────────────────────
 *
 * A 734x56 white pill centred over the hero. It is not sticky: the design
 * shows it once, at the top of the page, and the inverted corners either side
 * only read correctly against the hero photo.
 */

.site-header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 20;
}

.site-header__bar {
  position: relative;
  width: 734px;
  height: 56px;
  margin-inline: auto;
  border-radius: 0 0 24px 24px;
  background: var(--wt-surface);
}

/*
 * The three groups are placed at their own coordinates rather than spaced
 * apart by the flexbox. Chrome sets these faces one to two per cent narrower
 * than Figma does, and with justify-content that error moves the nav and the
 * button; pinned, it stays inside the glyph run where it is invisible.
 */
.site-header__brand,
.site-nav,
.site-header__cta { position: absolute; }

/* The two shapes that turn the pill's top corners inside out. */
.site-header__notch {
  position: absolute;
  top: 0;
  width: 24px;
  height: 24px;
}

.site-header__notch--left { left: -24px; }
.site-header__notch--right { right: -24px; }

.site-header__brand {
  left: 20px;
  top: 12px;
  display: flex;
  align-items: center;
  gap: 8.02px;
}

.site-header__mark { width: 37.07px; height: 32px; }

/*
 * Google's Poppins sets the wordmark 7px tighter than the one in the file,
 * one pixel per gap; the tracking gives it back so the mark and the word keep
 * the proportion the design draws.
 */
.site-header__word {
  position: relative;
  top: 1px;
  font-family: 'Poppins', var(--wt-font-body);
  font-size: 24.822px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--wt-primary);
}

.site-nav {
  left: 274.5px;
  top: 17.5px;
  display: flex;
  gap: 40px;
  font-family: 'Geist', var(--wt-font-body);
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.16px;
  color: var(--wt-gray-950);
  white-space: nowrap;
}

/* Widths from the design, so each link's left edge lands where it does there. */
.site-nav a:nth-child(1) { width: 44px; }
.site-nav a:nth-child(2) { width: 64px; }
.site-nav a:nth-child(3) { width: 30px; }

.site-header__cta {
  left: 581px;
  top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 145px;
  height: 40px;
  border-radius: 999px;
  background: var(--wt-gray-950);
  color: var(--wt-gray-100);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.14px;
  white-space: nowrap;
}

/* ── 2. Hero — Figma 2194:50673 + 2194:50678 ────────────────
 *
 * Coordinates are the design's own, measured from the top-left of the 1440
 * frame. Below 1440 the block at the end of this file returns the section to
 * ordinary flow.
 */

.hero {
  position: relative;
  height: 894px;
  overflow: hidden;
  background: var(--wt-deep);
}

/*
 * The photo is exported already cropped to the section, the way the design
 * frame clips it — placing the source bitmap and re-deriving Figma's fill
 * transform put it 56px out.
 */
.hero__photo {
  position: absolute;
  max-width: none;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__inner { position: relative; height: 100%; }

/*
 * The headline sits on a dark sticker that follows the letterforms rather than
 * boxing them. That is a thick stroke painted outside the glyphs: a copy of
 * the line behind the real one, stroked and pushed under it. The stroke is
 * centred on the outline, so 32px leaves the 16px of dark that the design
 * shows outside each stem.
 */
.hero__title {
  position: absolute;
  left: 92px;
  top: 234px;
  margin: 0;
  z-index: 0;
  font-family: var(--wt-font-display);
  font-size: 94px;
  font-weight: 400;
  line-height: 87px;
  letter-spacing: -0.94px;
  text-transform: uppercase;
  color: var(--wt-surface);
  white-space: nowrap;
}

.hero__title-line { position: relative; display: block; }

.hero__title-line + .hero__title-line { margin-left: 16px; }

.hero__title-line::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  color: var(--wt-deep);
  -webkit-text-stroke: 32px var(--wt-deep);
  paint-order: stroke fill;
}

.hero__text,
.hero__kicker {
  position: absolute;
  left: 80px;
  width: 531px;
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--wt-gray-50);
}

.hero__text { top: 451px; }
.hero__kicker { top: 541px; font-weight: 600; }

.hero__stores {
  position: absolute;
  left: 80px;
  top: 627px;
  display: flex;
  gap: 32px;
}

.store-badge img { height: 62px; width: auto; }

/* ── 12. Questions, answered — Figma 2194:53481 ─────────── */

.faq {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 800px;
  /* The lime section above ends at 9919; this one starts at 9881. */
  margin-top: -38px;
  padding: 120px 80px;
  border-radius: 32px 32px 0 0;
  background: var(--wt-surface);
}

.faq__title {
  width: 416px;
  margin: 0;
  font-family: var(--wt-font-display);
  font-size: 68px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.68px;
  text-transform: uppercase;
  color: var(--wt-deep);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 630px;
}

.faq__item {
  padding: 24px;
  border-radius: 24px;
  background: var(--wt-faq-row);
}

.faq__q {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.48px;
  color: var(--wt-deep);
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }

/*
 * A 40x40 disc with the glyph centred in it. The two icons are not the same
 * shape — the plus is 15x15, the minus a 15x1.25 bar — so they are drawn at
 * their own size rather than stretched to a common box, which turned the
 * minus into a filled square.
 */
.faq__toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border-radius: 40px;
  background: var(--wt-accent-pink);
}

.faq__icon--closed { width: 15px; height: 15px; }
.faq__icon--open { width: 15px; height: 1.25px; }
.faq__icon--open { display: none; }

.faq__item[open] .faq__icon--closed { display: none; }
.faq__item[open] .faq__icon--open { display: block; }

.faq__a {
  margin: 12px 0 0;
  padding-right: 52px;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.18px;
  color: var(--wt-gray-600);
}

/* ── 13. Your next walk starts here — Figma 2209:57443 ─── */

.cta {
  position: relative;
  z-index: 1;
  height: 674px;
  background: #000;
}

.cta__card {
  position: absolute;
  left: 188px;
  top: 0;
  width: 1064px;
  height: 554px;
  border-radius: 32px;
  background: var(--wt-deep);
}

.cta__photo {
  position: absolute;
  left: 28px;
  top: 32px;
  width: 490px;
  height: 490px;
  border-radius: 16px;
  object-fit: cover;
}

.cta__copy { position: absolute; left: 542px; top: 110.5px; width: 494px; }

.cta__title {
  margin: 0;
  font-family: var(--wt-font-display);
  font-size: 68px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.68px;
  text-transform: uppercase;
  color: #14fe85;
}

.cta__text {
  width: 477px;
  margin: 16px 0 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.2px;
  color: var(--wt-gray-100);
}

.cta__stores { display: flex; gap: 20px; margin-top: 40px; }
.cta__stores img { height: 60px; width: auto; }

.cta__fine {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.16px;
  color: var(--wt-gray-100);
}

/* ── 14. Footer — Figma 2209:57443, lower half ─────────── */

.site-footer {
  position: relative;
  height: 556px;
  padding: 120px 80px;
  border-radius: 32px 32px 0 0;
  background: var(--wt-faq-row);
  color: var(--wt-deep);
}

.site-footer__nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 24px;
}

.site-footer__links,
.site-footer__social {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.24px;
}

/* Item positions come from the design rather than an even gap. */
.site-footer__links li:nth-child(1) { width: 135px; }
.site-footer__links li:nth-child(2) { width: 211px; }
.site-footer__links li:nth-child(3) { width: 178px; }

.site-footer__social li:nth-child(1) { width: 179px; }

.site-footer__logo {
  display: block;
  width: 1280px;
  height: 247px;
  margin-top: 104px;
}

.site-footer__legal {
  display: flex;
  gap: 40px;
  justify-content: flex-end;
  margin-top: 21px;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.16px;
}

.site-footer__legal p { margin: 0; margin-right: auto; padding-left: 725px; }

.site-footer__legal a:hover { text-decoration: underline; }

/* ── Shared section header ──────────────────────────────── */

.section-head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
  color: var(--wt-deep);
}

.section-head__text {
  margin: 16px 0 0;
  color: var(--wt-text-tertiary);
}

/* ── 3. With WalkTalk you can — Figma 2194:52802 ────────── */

/*
 * The hero photo is 894 tall but this section starts at 865 in the design and
 * paints over the last 29px of it, so it is pulled up by exactly that.
 */
.can {
  position: relative;
  z-index: 1;
  height: 999px;
  margin-top: -29px;
  background: var(--wt-surface);
}

.can__head {
  position: absolute;
  left: 414px;
  top: 120px;
  width: 612px;
  text-align: center;
}

.can__title {
  margin: 0;
  font-family: var(--wt-font-display);
  font-size: 68px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.68px;
  text-transform: uppercase;
  color: var(--wt-deep);
}

.can__lead {
  margin: 16px 0 0;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--wt-gray-600);
}

.can__grid {
  position: absolute;
  left: 80px;
  top: 304px;
  display: flex;
  gap: 20px;
  width: 1280px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.can__item { width: 413px; }
.can__item:nth-child(2) { width: 414px; }

.can__card {
  width: 100%;
  height: 515px;
  border-radius: 16px;
  object-fit: cover;
}

.can__text {
  margin: 16px 0 0;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.18px;
  color: var(--wt-gray-600);
}

.can__item:first-child .can__text { width: 404px; }

/* ── 4. Places come alive — Figma 2194:52912 ────────────── */

/*
 * The backdrop is 836 tall but the section occupies 780: the last 56px run
 * under the section that follows, which is opaque.
 */
.alive {
  position: relative;
  height: 780px;
}

.alive__bg {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  width: 1440px;
  height: 836px;
  border-radius: 32px 32px 0 0;
}

.alive__title {
  position: absolute;
  left: 255px;
  top: 120px;
  margin: 0;
  font-family: var(--wt-font-display);
  font-size: 68px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.68px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--wt-accent-magenta);
}

.alive__tags { margin: 0; padding: 0; list-style: none; }

/* Safari has never shipped this unprefixed; without the prefix the pill falls
 * back to flat 40% white and the label stops reading against the photograph. */
.alive__tag {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 4px 16px 4px 4px;
  border-radius: 60px;
  background: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.16px;
  white-space: nowrap;
  color: var(--wt-gray-950);
}

.alive__tag--stories { left: 275px; top: 266px; }
.alive__tag--guides { left: 999px; top: 277px; }
.alive__tag--curated { left: 188px; top: 374px; }
.alive__tag--hidden { left: 1079px; top: 385px; }

.alive__tag-icon {
  display: flex;
  padding: 8px;
  border-radius: 99px;
  background: var(--wt-surface);
}

/*
 * Two greens are in play on this page. This section uses #14fe85, which is
 * not one of the file's variables — the accent token is #0cff81.
 */
.alive__text {
  position: absolute;
  left: 81px;
  top: 596px;
  width: 249px;
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.2px;
  color: #14fe85;
}

.alive__cta {
  position: absolute;
  left: 1203px;
  top: 692px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding-inline: 24px;
  border-radius: 8px;
  background: #14fe85;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.14px;
  white-space: nowrap;
  color: var(--wt-gray-950);
}

/* ── 5. How WalkTalk works — Figma 2194:52998 ───────────── */

.steps {
  position: relative;
  height: 1816px;
  background: var(--wt-surface);
}

.steps__title {
  position: absolute;
  left: 513.5px;
  top: 120px;
  width: 413px;
  margin: 0;
  font-family: var(--wt-font-display);
  font-size: 68px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.68px;
  text-transform: uppercase;
  text-align: center;
  color: var(--wt-deep);
}

.steps__list { margin: 0; padding: 0; list-style: none; }

/* Three 400-tall bands, the card and the phone swapping sides down them. */
.steps__row {
  position: absolute;
  left: 0;
  width: 1440px;
  height: 400px;
}

.steps__row:nth-child(1) { top: 336px; }
.steps__row:nth-child(2) { top: 816px; }
.steps__row:nth-child(3) { top: 1296px; }

.steps__phone {
  position: absolute;
  top: 0;
  width: 248px;
  height: 400px;
}

.steps__row:nth-child(1) .steps__phone,
.steps__row:nth-child(3) .steps__phone { left: 877px; }
.steps__row:nth-child(2) .steps__phone { left: 315px; }

.steps__card {
  position: absolute;
  top: 113px;
  width: 413px;
  height: 174px;
  padding: 32px;
  border-radius: 24px;
  background: var(--wt-faq-row);
}

.steps__row:nth-child(1) .steps__card,
.steps__row:nth-child(3) .steps__card { left: 315px; }
.steps__row:nth-child(2) .steps__card { left: 712px; }

/* The one place the display face is set in mixed case rather than caps. */
.steps__card-title {
  margin: 0;
  font-family: var(--wt-font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.64px;
  color: var(--wt-deep);
}

.steps__card-text {
  margin: 12px 0 0;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.18px;
  color: var(--wt-gray-600);
}

/* ── 6. Sharing makes the city yours — Figma 2222:57474 + 2220:57471 ─ */

/*
 * The photograph is 941 tall while the section is 917: the last 24px run
 * under the next section, which is opaque.
 */
.share {
  position: relative;
  height: 917px;
}

.share__photo {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  width: 1440px;
  height: 941px;
  border-radius: 32px;
}

.share__copy {
  position: absolute;
  left: 80px;
  top: 120px;
  width: 413px;
}

.share__glow {
  position: absolute;
  left: -159px;
  top: 61px;
  z-index: -1;
  width: 466px;
  height: 466px;
}

.share__title {
  margin: 0;
  font-family: var(--wt-font-display);
  font-size: 68px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.68px;
  text-transform: uppercase;
  color: var(--wt-deep);
}

.share__text {
  margin: 16px 0 0;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--wt-gray-800);
}

.share__text + .share__text { margin-top: 12px; }

.share__text strong { font-weight: 600; }

.share__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
  padding: 14px 24px;
  border-radius: 9px;
  background: var(--wt-accent-pink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.16px;
  color: var(--wt-deep);
}

/* ── 7. Whoever you are in the city — Figma 2194:50638 ─── */

/*
 * position and height are not decoration: the photo above overflows into this
 * section and would paint over a static one, and the height is stated so the
 * sections below keep the design's offsets whatever Chrome rounds the display
 * face's line box to.
 */
.who {
  position: relative;
  z-index: 1;
  height: 966px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 120px 80px 162px;
  border-radius: 32px 32px 0 0;
  background: var(--wt-lime);
}

.who__title {
  width: 413px;
  margin: 0;
  font-family: var(--wt-font-display);
  font-size: 68px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.68px;
  text-align: center;
  text-transform: uppercase;
  color: var(--wt-deep);
}

.who__grid {
  display: flex;
  gap: 20px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.who__card {
  position: relative;
  width: 413px;
  height: 500px;
  padding: 20px;
  border-radius: 24px;
  background: var(--wt-deep);
  overflow: hidden;
}

.who__card:nth-child(2) { width: 414px; }

/*
 * Each image is a stack: the photograph, a curve drawn over it, and on two of
 * the three a cut-out of the person laid back on top so the curve passes
 * behind them.
 */
.who__image {
  position: relative;
  height: 400px;
  border-radius: 16px;
  overflow: hidden;
}

.who__photo,
.who__cut,
.who__curve {
  position: absolute;
  max-width: none;
}

.who__photo { left: 0; width: 100%; }
.who__photo--1 { height: 123.34%; top: -3.98%; }
.who__photo--2 { height: 116.83%; top: 0.07%; }
.who__photo--3 { height: 124.33%; top: -24.36%; }

/* The curves are drawn facing the other way in the file and mirrored here. */
.who__curve { transform: scaleX(-1); }
.who__curve--1 { left: -21px; top: 188px; width: 561px; height: 215.7px; }
.who__curve--2 { left: -358px; top: 133.5px; width: 780px; height: 247.9px; }
.who__curve--3 { left: 0; top: 133.5px; width: 780px; height: 247.9px; transform: none; }

.who__cut--2 { left: 0; top: 0; width: 372.933px; height: 466px; object-fit: cover; }
.who__cut--3 { left: 0; bottom: 0; width: 373px; height: 498px; object-fit: cover; }

/* The label sits at card level, so the sticker may spill past the photo. */
.who__tag {
  position: absolute;
  top: 20px;
  font-family: var(--wt-font-display);
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -0.8px;
  text-transform: uppercase;
  white-space: nowrap;
}

.who__tag img { position: absolute; max-width: none; }

.who__tag-b {
  position: absolute;
  top: 35px;
  font-style: normal;
  z-index: 1;
}

.who__tag-b::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  color: var(--wt-deep);
  -webkit-text-stroke: 16px var(--wt-deep);
  paint-order: stroke fill;
}

.who__tag--1 { left: 247px; width: 146px; height: 82px; color: var(--wt-accent-pink); }
.who__tag--1 img { left: 13.2px; top: -8.56px; width: 136.4px; height: 51.15px; }
.who__tag--1 .who__tag-b { left: 5px; }

.who__tag--2 { left: 264px; width: 130px; height: 79px; color: #14fe85; }
.who__tag--2 img { left: 16.51px; top: -8.67px; width: 114.2px; height: 52.38px; }
.who__tag--2 .who__tag-b { left: 44px; }

.who__tag--3 { left: 264px; width: 129px; height: 83px; color: var(--wt-accent-pink); }
.who__tag--3 img { left: 2px; top: -8.69px; width: 134.1px; height: 53px; }
.who__tag--3 .who__tag-b { left: 42px; }

.who__text {
  margin: 16px 0 0;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.18px;
  color: var(--wt-gray-150);
}

.who__card:nth-child(1) .who__text { width: 315px; }
.who__card:nth-child(2) .who__text { width: 330px; }
.who__card:nth-child(3) .who__text { width: 298px; }

/* ── 8. Why people love WalkTalk — Figma 2194:52938 ────── */

/*
 * The backdrop is 879 tall against a section of 804: the last 75px run under
 * the next section.
 */
.love {
  position: relative;
  z-index: 1;
  height: 804px;
  /* The lime section above ends at 6343; this one starts at 6301 and covers
   * the last 42px of it. */
  margin-top: -42px;
  padding: 120px 80px;
  border-radius: 32px 32px 0 0;
  /* The photograph is wider than the page and the file clips it here. */
  overflow: hidden;
}

.love__photo {
  position: absolute;
  left: 50%;
  top: 0;
  /* below the dimming layer, which is generated before it in the box tree */
  z-index: -2;
  max-width: none;
  width: 1672px;
  height: 879px;
  transform: translateX(-50%);
  object-fit: cover;
}

/* The photograph is dimmed a fifth before anything is drawn on it. */
.love::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 879px;
  border-radius: 32px 32px 0 0;
  background: rgba(0, 0, 0, 0.2);
}

.love__inner { position: relative; width: 1280px; }

.love__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.love__title {
  width: 412px;
  margin: 0;
  font-family: var(--wt-font-display);
  font-size: 68px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.68px;
  text-transform: uppercase;
  color: var(--wt-surface);
}

.love__lead {
  width: 413px;
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--wt-gray-50);
}

.love__grid {
  display: flex;
  gap: 20px;
  margin: 64px 0 0;
  padding: 0;
  list-style: none;
}

.love__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 305px;
  height: 364px;
  padding: 20px;
  border-radius: 32px;
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

/*
 * The cream frame is drawn over the card rather than being a CSS border. In
 * Figma a stroke costs no layout, so the padding is measured from the card's
 * outer edge; a real border would push the content in by another 20 and drop
 * every label a line.
 */
.love__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 20px solid var(--wt-faq-row);
  border-radius: 32px;
  pointer-events: none;
}

.love__card--1 { padding-top: 24px; }

/*
 * One line runs through all four cards. It is the same drawing offset per
 * card, which is why the pieces meet across the gaps.
 */
/*
 * The offsets below are 19px lower and 4px further right than the file's own
 * numbers. Figma measures these from the card's stroke box and the stroke here
 * sits outside the frame, so the arithmetic lands short; these are measured
 * against the export instead.
 */
.love__curve {
  position: absolute;
  top: -77.99px;
  max-width: none;
  width: 1289px;
  height: 278.98px;
}

.love__card--1 .love__curve { left: 4px; height: 278.98px; }
.love__card--2 .love__curve { left: -320px; height: 280.85px; }
.love__card--3 .love__curve { left: -648px; height: 280.85px; }
.love__card--4 .love__curve { left: -974px; top: -77.44px; height: 280.85px; }

.love__label {
  position: relative;
  z-index: 1;
  padding: 16px 0 4px;
  border-radius: 0 32px 0 0;
  background: var(--wt-faq-row);
}

/* The shape that turns the label's top-left corner inside out. */
.love__corner {
  position: absolute;
  left: 0;
  top: -32px;
  width: 32px;
  height: 32px;
}

.love__card-title {
  margin: 0;
  font-family: var(--wt-font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.64px;
  color: var(--wt-deep);
}

.love__card-text {
  margin: 12px 0 0;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.18px;
  color: var(--wt-gray-600);
}

.love__bubble {
  position: absolute;
  width: 265px;
  height: 71px;
}

.love__bubble img {
  position: absolute;
  left: 12.376px;
  top: -0.512px;
  max-width: none;
  width: 234.13px;
  height: 72.18px;
}

/* 10px right of the file's own figure, measured against the export. */
.love__bubble-text {
  position: absolute;
  left: 39px;
  top: 13px;
  width: 206.651px;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.16px;
  color: var(--wt-gray-950);
}

.love__card--1 .love__bubble { left: 0; top: 46px; transform: rotate(-5.2deg); }
.love__card--2 .love__bubble { left: 1.46px; top: 50.69px; transform: rotate(7.36deg); }
.love__card--3 .love__bubble { left: 1.32px; top: 126.3px; transform: rotate(-2.31deg); }

/* This one's bubble box is 52 tall, not 71, so it turns about a different centre. */
.love__card--4 .love__bubble { left: 1.48px; top: 82.11px; height: 52px; transform: rotate(3.97deg); }

.love__card--2 .love__bubble-text { width: 205px; }
.love__card--3 .love__bubble-text { width: 204px; }
.love__card--4 .love__bubble-text { width: 203px; }

/* ── 9. Find a walk for any mood — Figma 2194:53087 ────── */

.mood {
  position: relative;
  z-index: 1;
  height: 992px;
  padding: 120px 0;
  border-radius: 32px 32px 0 0;
  background: var(--wt-surface);
  text-align: center;
}

.mood__title {
  margin: 0;
  font-family: var(--wt-font-display);
  font-size: 68px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.68px;
  text-transform: uppercase;
  color: var(--wt-deep);
}

/*
 * The row runs off the right edge in the design, so the viewport starts at the
 * page's 80px margin and is left open. Scrolling is the browser's; the arrows
 * only nudge it one card at a time.
 */
.mood__viewport {
  margin-top: 64px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Without this the browser snaps the first card past the page margin on load. */
  scroll-padding-left: 80px;
  scrollbar-width: none;
}

.mood__viewport::-webkit-scrollbar { display: none; }

/* The page margin lives on the track, not the scroller: a scroll container's
 * own padding-left does not move its first child to the right. */
.mood__track {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0 80px;
  list-style: none;
}

.mood__card { flex: 0 0 413px; scroll-snap-align: start; }

.mood__card img { width: 413px; height: 540px; border-radius: 24px; }

.mood__nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

.mood__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 14px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.mood__arrow--prev { background: #fdd3fb; }
.mood__arrow--next { background: var(--wt-accent-pink); }

.mood__arrow img { width: 20px; height: 20px; }

.mood__arrow:disabled { cursor: default; opacity: 0.5; }

/* ── 10. People make places interesting — Figma 2194:53186 ─ */

.creators {
  position: relative;
  z-index: 1;
  height: 978px;
  padding: 120px 80px 152px 82px;
  border-radius: 32px 32px 0 0;
  overflow: hidden;
  text-align: center;
}

.creators__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  max-width: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A pale wash over the photograph, brightest at the top. */
.creators::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 3.5%, rgba(255, 255, 255, 0.2) 99.9%);
}

/* Centred on 50% + 142.46 and then pulled up by half its own height. */
.creators__line {
  position: absolute;
  left: -102px;
  top: 474.75px;
  z-index: -1;
  max-width: none;
  width: 1744px;
  height: 313.4px;
}

.creators__head {
  width: 940px;
  margin-inline: auto;
}

.creators__title {
  margin: 0;
  font-family: var(--wt-font-display);
  font-size: 68px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.68px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--wt-deep);
}

.creators__text {
  margin: 16px 0 0;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--wt-gray-800);
}

.creators__text + .creators__text { margin-top: 12px; }

.creators__row {
  position: relative;
  width: 1278px;
  height: 490px;
  margin: 16px auto 0;
}

/* Each card is placed by its own tilted bounding box, then turned. */
.creators__card {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.creators__card img { max-width: none; border-radius: 16px; }

.creators__card--maya  { left: 0;     top: 41px;    width: 309.89px;  height: 365.857px; }
.creators__card--tom   { left: 325px; top: 100px;   width: 304.814px; height: 361.961px; }
.creators__card--priya { left: 661px; top: 36px;    width: 289.212px; height: 349.775px; }
.creators__card--you   { left: 978px; top: 105.6px; width: 284.956px; height: 385.264px; }

.creators__card--maya img  { transform: rotate(-6.8deg); }
.creators__card--tom img   { transform: rotate(5.85deg); }
.creators__card--priya img { transform: rotate(-3deg); }
.creators__card--you img   { transform: rotate(2deg); border-radius: 16px 16px 0 0; }

.creators__tags { margin: 0; padding: 0; list-style: none; }

.creators__tag {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 4px 16px 4px 4px;
  border-radius: 60px;
  background: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.16px;
  white-space: nowrap;
  color: var(--wt-gray-950);
}

.creators__tag--londoners { right: 0; top: 0; }
.creators__tag--stories { right: 781px; top: 33px; }
.creators__tag--earn { right: 972px; top: 446px; }

/*
 * The invitation in the last card is part of the exported picture, so the
 * link is laid over where it sits, tilted with it.
 */
.creators__cta {
  position: absolute;
  left: 71px;
  top: 262px;
  width: 143px;
  height: 40px;
  transform: rotate(2deg);
  text-indent: -9999px;
  overflow: hidden;
}

/* ── 11. People who fell for their own city again — 2194:53408 ─ */

.reviews {
  position: relative;
  z-index: 1;
  height: 876px;
  /* The section above ends at 9075; this one starts at 9043. */
  margin-top: -32px;
  padding: 120px 80px 162px;
  border-radius: 32px 32px 0 0;
  background: var(--wt-lime);
  text-align: center;
}

.reviews__title {
  width: 580px;
  margin: 0 auto;
  font-family: var(--wt-font-display);
  font-size: 68px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.68px;
  text-transform: uppercase;
  color: var(--wt-deep);
}

.reviews__deck {
  position: relative;
  height: 398px;
  margin-top: 64px;
  text-align: left;
}

/* The two decorative cards, each turned four degrees about its own centre. */
.reviews__ghost {
  position: absolute;
  top: 2.58px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 577.513px;
  height: 381.106px;
}

.reviews__ghost--right { left: 475px; }
.reviews__ghost--left { left: 227.88px; }

/*
 * A ghost is the same card at 0.881 — the ratio the file uses between the two
 * widths, and near enough the ratio of every size inside them — so it carries
 * the same content rather than being an empty rectangle where it shows.
 */
.reviews__ghost .reviews__card {
  position: static;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(0, 67, 73, 0.1), 0 37px 22px rgba(3, 99, 70, 0.03),
    0 16px 16px rgba(3, 99, 70, 0.04), 0 4px 9px rgba(3, 99, 70, 0.05);
}

.reviews__ghost--right .reviews__card { transform: rotate(4deg) scale(0.881); }
.reviews__ghost--left .reviews__card { transform: rotate(-4deg) scale(0.881); }

.reviews__card {
  position: absolute;
  left: 325.9px;
  top: -0.08px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 630px;
  padding: 40px;
  border-radius: 16px;
  background: var(--wt-surface);
  /* The outline is a shadow, not a border: a Figma stroke costs no layout, and
   * a real border would take 2px off the line length inside. */
  box-shadow: 0 0 0 1px rgba(0, 67, 73, 0.2), 0 37px 22px rgba(3, 99, 70, 0.03),
    0 16px 16px rgba(3, 99, 70, 0.04), 0 4px 9px rgba(3, 99, 70, 0.05);
}

.reviews__meta { display: flex; flex-direction: column; gap: 8px; }

.reviews__stars { display: flex; gap: 4px; }
.reviews__stars img { width: 20px; height: 20px; }

.reviews__route {
  margin: 0;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: -0.16px;
  color: var(--wt-gray-600);
}

.reviews__body { display: flex; gap: 8px; align-items: flex-start; }

.reviews__quote { width: 40px; height: 40px; flex: none; }

.reviews__text {
  flex: 1;
  margin: 0;
  padding-top: 12px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.28px;
  color: var(--wt-deep);
}

.reviews__foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.reviews__author { display: flex; align-items: center; gap: 8px; }

/* The file crops the portrait from the top of the frame, not its middle. */
.reviews__avatar {
  width: 56px;
  height: 56px;
  border-radius: 40px;
  object-fit: cover;
  object-position: center top;
}

.reviews__name,
.reviews__city {
  display: block;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: -0.16px;
}

.reviews__name { font-weight: 500; color: var(--wt-gray-950); }
.reviews__city { margin-top: 4px; color: var(--wt-gray-450); }

.reviews__nav { display: flex; align-items: center; gap: 12px; }

.reviews__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 14px;
  border: 0;
  border-radius: 999px;
  background: var(--wt-accent-pink);
  cursor: pointer;
}

.reviews__arrow img { width: 20px; height: 20px; }
.reviews__arrow:disabled { cursor: default; opacity: 0.5; }

.reviews__counter {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.16px;
  color: var(--wt-gray-600);
}

/* ── Wider than the design ──────────────────────────────────
 *
 * The design is a 1440 canvas and everything on these sections is placed by
 * its own coordinates, so on a wider screen the page would sit against the
 * left edge with the slack piled up on the right. The backdrops keep filling
 * the window — they are photographs and colour, and stretching them is what
 * they are for — while everything placed by hand moves right by half the
 * slack, which puts the canvas back in the middle.
 */

@media (min-width: 1441px) {
  /* The two backdrops still pinned to 1440 stretch with the window. */
  .alive__bg,
  .share__photo {
    width: 100%;
    object-fit: cover;
  }

  /* Wrappers that would otherwise be as wide as the window and hang off it. */
  .hero__inner,
  .steps__list,
  .alive__tags { width: 1440px; }

  .hero__inner,
  .can__head,
  .can__grid,
  .alive__title,
  .alive__tags,
  .alive__text,
  .alive__cta,
  .steps__title,
  .steps__list,
  .share__copy,
  .cta__card {
    transform: translateX(calc((100vw - 1440px) / 2));
  }

  /* Centred blocks inside sections that are laid out in flow. */
  .love__inner,
  .creators__row { margin-inline: auto; }

  .love__head,
  .love__grid { justify-content: center; }
}

/* ── Keyboard and motion ────────────────────────────────── */

/*
 * Nothing on this page shows a focus ring of its own: the links are bare and
 * the buttons carry their colour as a background. This gives every one of them
 * a visible ring for anyone moving through the page by keyboard, without
 * putting an outline on the mouse users the design was drawn for.
 */
:where(a, button, summary, details):focus-visible {
  outline: 3px solid var(--wt-accent-magenta);
  outline-offset: 3px;
  border-radius: 4px;
}

.faq__q:focus-visible { outline-offset: 6px; }

/* The carousels animate their scroll; honour a request for less of that. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Adaptive baseline ──────────────────────────────────────
 *
 * The design is a single 1440px desktop frame and has no mobile counterpart,
 * so everything above is the design at its own size. This block is not an
 * implementation of a mobile design — it is the minimum that keeps a narrow
 * screen from cutting the page in half. Replace it once the mobile frames
 * exist.
 */

.h2 { font-size: clamp(40px, 7vw, var(--wt-h2-size)); }
.h3 { font-size: clamp(28px, 4vw, var(--wt-h3-size)); }
.h4 { font-size: clamp(24px, 3vw, var(--wt-h4-size)); }

@media (max-width: 1024px) {
  .container { padding-inline: 24px; }
}

@media (max-width: 1439px) {
  /* The pill cannot keep its fixed width once the viewport is narrower. */
  .site-header__bar {
    width: min(734px, calc(100% - 48px));
  }

  .site-header__brand,
  .site-nav,
  .site-header__cta { position: static; }

  .site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px 8px 20px;
  }

  .site-nav a { width: auto; }

  /* Back to flow: the hero grows with its own content instead of a fixed 894. */
  .hero { height: auto; padding: 120px 24px 80px; }

  .hero__title,
  .hero__text,
  .hero__kicker,
  .hero__stores { position: static; }

  .hero__title { font-size: clamp(48px, 9vw, 94px); line-height: 0.95; }
  .hero__title-line + .hero__title-line { margin-left: 0; }
  .hero__title-line::before { -webkit-text-stroke-width: 18px; }

  .hero__text { margin-top: 40px; max-width: 531px; width: auto; }
  .hero__kicker { margin-top: 12px; width: auto; }
  .hero__stores { margin-top: 40px; flex-wrap: wrap; }

  .can { height: auto; padding: 80px 24px; }

  .can__head,
  .can__grid { position: static; width: auto; }

  .can__head { margin-inline: auto; max-width: 612px; }
  .can__title { font-size: clamp(36px, 6vw, 68px); }

  .can__grid { flex-wrap: wrap; justify-content: center; margin-top: 56px; }
  .can__item,
  .can__item:nth-child(2) { width: min(413px, 100%); }
  .can__item:first-child .can__text { width: auto; }

  .alive { height: auto; padding: 64px 24px; border-radius: 32px 32px 0 0; overflow: hidden; }

  .alive__bg { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

  .alive__title,
  .alive__tags,
  .alive__tag,
  .alive__text,
  .alive__cta { position: static; }

  .alive__title {
    font-size: clamp(32px, 5.5vw, 68px);
    white-space: normal;
  }

  .alive__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 40px;
  }

  .alive__text { width: auto; max-width: 420px; margin-top: 200px; }
  .alive__cta { display: inline-flex; margin-top: 24px; }

  .steps { height: auto; padding: 80px 24px; }

  .steps__title,
  .steps__row,
  .steps__phone,
  .steps__card { position: static; }

  .steps__title { width: auto; font-size: clamp(36px, 6vw, 68px); }

  .steps__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 32px;
    width: auto;
    height: auto;
    margin-top: 56px;
  }

  .steps__row:nth-child(2) { flex-direction: row-reverse; }

  .steps__card { width: min(413px, 100%); height: auto; }

  .share { height: auto; }

  .share__photo {
    position: relative;
    width: 100%;
    height: clamp(320px, 50vw, 941px);
    object-fit: cover;
  }

  /* Off the photo and onto the page, since there is no sky to sit on. */
  .share__copy {
    position: static;
    width: auto;
    max-width: 560px;
    padding: 40px 24px 0;
  }

  .share__glow { display: none; }
  .share__title { font-size: clamp(36px, 6vw, 68px); }

  .who { height: auto; padding: 80px 24px; }
  .who__title { width: auto; font-size: clamp(36px, 6vw, 68px); }
  .who__grid { flex-wrap: wrap; justify-content: center; }
  .who__card,
  .who__card:nth-child(2) { width: min(413px, 100%); height: auto; }
  /* Outranks the per-card widths above, which are set by :nth-child. */
  .who__card:nth-child(1) .who__text,
  .who__card:nth-child(2) .who__text,
  .who__card:nth-child(3) .who__text { width: auto; }

  /* The label is placed 247px from the left in the design, which is off the
   * edge of a card this narrow; anchor it to the right instead. */
  .who__tag { left: auto; right: 20px; }

  .love { height: auto; margin-top: 0; padding: 80px 24px; }
  .love__inner { width: auto; }
  .love__head { flex-wrap: wrap; gap: 24px; }
  .love__title { width: auto; font-size: clamp(36px, 6vw, 68px); }
  .love__lead { width: auto; max-width: 413px; }
  .love__grid { flex-wrap: wrap; justify-content: center; }

  .mood { height: auto; padding: 80px 0; }
  .mood__title { font-size: clamp(32px, 5.5vw, 68px); padding-inline: 24px; }
  .mood__viewport { scroll-padding-left: 24px; }
  .mood__track { padding-inline: 24px; }
  .mood__card { flex-basis: min(413px, 82vw); }
  .mood__card img { width: 100%; height: auto; }

  .creators { height: auto; padding: 80px 24px; }
  .creators__head { width: auto; }
  .creators__title { font-size: clamp(28px, 5vw, 68px); white-space: normal; }
  .creators__line { display: none; }

  .creators__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    width: auto;
    height: auto;
    margin-top: 40px;
  }

  .creators__card,
  .creators__tag { position: static; }
  .creators__card { width: auto; height: auto; }
  .creators__card img { transform: none; max-width: 100%; height: auto; }
  .creators__cta { position: absolute; }

  .creators__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; }

  .reviews { height: auto; margin-top: 0; padding: 80px 24px; }
  .reviews__title { width: auto; font-size: clamp(32px, 5.5vw, 68px); }
  .reviews__deck { height: auto; margin-top: 40px; }
  .reviews__ghost { display: none; }
  .reviews__card { position: static; width: auto; max-width: 630px; margin-inline: auto; padding: 24px; }
  .reviews__text { font-size: clamp(18px, 3.5vw, 28px); }
  .reviews__foot { flex-wrap: wrap; gap: 20px; }

  .faq {
    flex-direction: column;
    height: auto;
    margin-top: 0;
    padding: 80px 24px;
  }

  .faq__title { width: auto; font-size: clamp(32px, 5.5vw, 68px); }
  .faq__list { width: 100%; margin-top: 40px; }
  .faq__q { font-size: clamp(18px, 3.5vw, 24px); }
  .faq__a { padding-right: 0; }

  .cta { height: auto; padding: 40px 24px 64px; }
  .cta__card { position: static; width: auto; height: auto; padding: 24px; }
  .cta__photo { position: static; width: 100%; height: auto; aspect-ratio: 1; }
  .cta__copy { position: static; width: auto; margin-top: 32px; }
  .cta__title { font-size: clamp(32px, 5.5vw, 68px); }
  .cta__text { width: auto; }
  .cta__stores { flex-wrap: wrap; }

  .site-footer { height: auto; padding: 64px 24px; }
  .site-footer__nav { flex-wrap: wrap; gap: 24px; height: auto; }
  .site-footer__links { flex-wrap: wrap; gap: 24px; font-size: 18px; }
  .site-footer__social { gap: 24px; font-size: 18px; }
  .site-footer__links li,
  .site-footer__social li { width: auto; }
  .site-footer__logo { width: 100%; height: auto; margin-top: 48px; }
  .site-footer__legal { flex-wrap: wrap; gap: 16px 24px; justify-content: flex-start; }
  .site-footer__legal p { padding-left: 0; width: 100%; }
}

@media (max-width: 560px) {
  /*
   * The pill has just three pixels to spare at this width, so the wordmark
   * ends up touching the button. Everything in it comes down a step.
   */
  .site-header__mark { width: 30px; height: 26px; }
  .site-header__word { font-size: 20px; letter-spacing: 0.5px; }

  .site-header__cta {
    width: auto;
    height: 36px;
    padding-inline: 14px;
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  /*
   * The pill has room for the wordmark and one button and no more. The design
   * has no burger to move the links into, so they step aside until it does —
   * the same three links are in the footer.
   */
  .site-nav { display: none; }
}