/* assets/css/sections.css
 * Section layout. Spacing values are measured off the 1920px Sketch
 * canvas (artboard "Home One"), so the desktop rendering matches the
 * source position for position.
 */

.container--wide {
  max-width: 1344px;
}

.container--clients {
  max-width: 1525px;
}

/* =====================================================================
   Header
   ===================================================================== */

/* A defined bar rather than floating type: white plate, soft shadow, and a
   stacking context above the sections so the Pages menu drops over them. */
.site-header {
  position: relative;
  z-index: 40;

  /* WAS 22px, ON TOP OF A 64px min-height — 108px of header for a 46px
     lockup. The padding predates the min-height and the two were adding up
     rather than one governing. min-height already guarantees the lockup fits,
     so this is purely air. */
  padding: 8px 0;

  /* NOT --white ANY MORE, and this is the whole reason the previous three
     attempts failed.
     A deboss is read from two cues: a shadow on the upper inside edge and a
     HIGHLIGHT on the lower one. The highlight has to be lighter than the
     surface it sits on — and nothing is lighter than #ffffff, so on a white
     header the lower cue was invisible every time and all that survived was
     whatever fill we had used.
     HOW FAR OFF WHITE MATTERS, measured rather than guessed:

       #f4f8f5 (was)   contrast against pure white  1.072
       #eaf7ef (now)                                1.102
       #d8f2e2                                      1.185

       1.00 is invisible.

     The old value gave the white lip almost nothing to be lighter THAN, which
     is why the cut read as faint. --verde-50 is a palette colour rather than
     a one-off hex, and it is the shallowest tint that lets the effect land. */
  background: var(--verde-50);
  box-shadow: 0 2px 18px rgba(5, 52, 36, 0.09);
}

/* Three tracks with equal 1fr sides, so the brand sits dead centre on the
   page regardless of how wide the nav or the actions get. space-between
   only centred it by coincidence. */
/* THE BAR IS NARROWER THAN THE PAGE.
 *
 * You left this one to me, and I think yes. --container is 1300, which is the
 * right measure for CONTENT — a paragraph, a card grid, a table. The header is
 * chrome: three small groups with a logo between them. At 1300 they get pushed
 * to the far edges and read as three separate things that happen to share a
 * strip.
 *
 * 1120 pulls them in far enough to read as one bar. It also puts the nav
 * closer to the logo than to the window edge, which is the relationship that
 * matters — the nav belongs to the brand, not to the browser.
 */
.site-header > .container {
  max-width: 1120px;
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;

  /* V 26 + gap 3 + word box 31 (17 of text, 14 of swipe below it) = 60, plus
     2 of top padding = 62. The buttons are 49. Stated rather than overrun. */
  min-height: 62px;
}

.nav {
  justify-self: start;
}

/* THE BOOKEND FLOURISHES ARE GONE.
 *
 * .nav::before and .site-header__actions::after used to put a three-tick mark
 * at each end of the row. With the lockup carrying its own marks, that made
 * three sets of ticks across one bar.
 *
 * I removed them by deleting the block they sat in — which also took .nav,
 * .nav__link and .site-header__actions with it, and that is why the nav lost
 * its Caveat face and its spacing. Those rules are restored below; only the
 * two pseudo-elements are actually gone.
 */

.site-header__actions::after {
  margin-right: 0;
  margin-left: -12px;
  transform: scaleX(-1);
}

.site-header__actions {
  justify-self: end;
}

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

/* NAV IN THE ACCENT FACE.
 *
 * Caveat already carries the brand everywhere else on the site — eyebrows,
 * the "Start here" heading, the labels on the hardware page. Putting the nav
 * in it is what ties the header to the rest, and the marker underline on the
 * current page was already here doing the same job.
 *
 * SIZED UP, NOT MATCHED. Caveat has a much smaller x-height than Be Vietnam
 * Pro, so set at the same 16px it reads about two sizes smaller and noticeably
 * thinner. 21px at weight 600 puts its x-height back level with the body face
 * — this is the size at which it stops looking like a smaller font and starts
 * looking like a different one.
 *
 * The BUTTONS stay in the body face on purpose. A nav link is a label and can
 * afford personality; "Book a demo" is the one thing on the page that has to
 * be read correctly by somebody who is skimming, and handwriting costs more
 * there than it gives. */
.nav__link {
  position: relative;
  display: inline-block;
  padding: 0;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.nav__link:hover {
  color: var(--brand);
}

/* STACKED IN THE HEADER, side by side everywhere else.
 *
 * The header lockup sits centred between the nav and the buttons, where it is
 * the only thing on its own axis — so a stack reads as a mark rather than as a
 * third row of navigation. The footer keeps the horizontal lockup: it sits at
 * the top of a column of links, and a stack there would collide with the
 * column heading below it. */

.site-header__logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

/* SMALL ON PURPOSE.
 *
 * 19px sat about as heavy as the nav links beside it, so the lockup read as a
 * fifth nav item rather than as a mark. At 14px it is clearly subordinate to
 * the mark above it — the mark is the logo, the word is the caption.
 *
 * Tracking opens as the size drops: a geometric face set small and tight
 * turns into a blob, and "verde" has two round letters in five.
 *
 * COLOUR: --forest, which is #08251a. It reads as near-black at this size and
 * that is correct — it is a very dark GREEN, not black, so it sits in the
 * palette. --brand green would compete with the mark directly above it, and
 * two greens of different saturation stacked is the thing that makes a
 * lockup look assembled rather than drawn. */
.site-header__logo .brand__word {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  /* No colour here. The cut wordmark below sets color: transparent and fills
     the glyphs with a gradient instead — a --forest here would look like the
     live value to whoever reads this next, and it has not been for a while. */
}

/* Shadow on the mark only. The wordmark is type, and a shadow behind type
   reads as a 1990s bevel rather than as depth. */
/* ============================================================
   THE LOCKUP'S OWN MARKS

   Your artwork, cut into its two pieces and placed independently.

   WHY TWO FILES AND NOT ONE BACKGROUND. As a single image the marks are
   locked to its 2.156 aspect, with the ticks at its far left and right edges.
   Sized so the swipe matched the wordmark, the art came out 62px wide and
   29px tall — too short to reach from beside the V down to under the word.
   Sized to fit the lockup instead, the ticks landed 25px tall and the swipe
   161px wide, which is what you were looking at.

   Two pieces, each sized for the thing it sits next to:

     tick    15 x 13   beside the V, mirrored on the right
     swipe   64 x 20   under the wordmark, about the width of the word

   Mirrored rather than a second file, so the pair can never drift.
   ============================================================ */

.site-header__logo {
  position: relative;
  padding: 2px 26px 0;
}

.site-header__logo .brand__mark {
  height: 26px;
}

/* Ticks beside the mark, at its height rather than the lockup's — they frame
   the V, not the whole stack. */
.site-header__logo::before,
.site-header__logo::after {
  content: "";
  position: absolute;
  top: 3px;
  width: 15px;
  height: 13px;
  background: url("../img/logo-tick.svg") no-repeat center / contain;
  pointer-events: none;
}

.site-header__logo::before { left: 2px; }

.site-header__logo::after {
  right: 2px;
  transform: scaleX(-1);
}

/* The wordmark carries the swipe as its own background, so the stroke tracks
   the word rather than the box — if the word ever changes length, the swipe
   stays under it. */
.site-header__logo .brand__word {
  position: relative;
  display: inline-block;
  /* THE SWIPE OVERLAPS THE WORD BY 3px, ON PURPOSE.
     It is anchored to the bottom of this box, so padding-bottom is what holds
     it down — less padding lifts it. The word line is 17px and the swipe is
     17px tall at the artwork's 3.19 aspect, so:

       padding 18 → 1px gap      (clear of the word, reads as detached)
       padding 14 → 3px overlap  (shipped)
       padding 12 → 5px overlap  (starts cutting the descender on the d)

     3px is the amount that reads as one gesture over the word rather than a
     rule beneath it. A real marker underline always catches the baseline.

     The stroke draws BEHIND the letters, because a background-image renders
     under its own element's text — which is the right order: ink on paper,
     then the word on top. */
  padding-bottom: 14px;
  font-size: 13px;
  line-height: 17px;
  letter-spacing: 0.08em;
  color: var(--forest);

  background: url("../img/logo-swipe.svg") no-repeat center bottom / 54px auto;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.btn--sm {
  min-height: 38px;
  padding: 9px 20px;
  font-size: var(--small);
  line-height: 18px;
}

/* Dropdown -------------------------------------------------------- */

.dropdown {
  position: relative;
}

.dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.dropdown__toggle img {
  width: 13px;
  height: 13px;
  transition: transform 0.15s ease;
}

.dropdown__toggle[aria-expanded="true"] img {
  transform: rotate(180deg);
}

.dropdown__menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -20px;
  z-index: 20;
  display: none;
  grid-template-columns: repeat(2, 158px);
  gap: 10px 30px;
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 12px 32px rgba(5, 52, 36, 0.12);
}

.dropdown__menu[data-open="true"] {
  display: grid;
}

.dropdown__menu a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Mobile nav toggle ------------------------------------------------ */

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--forest);
  border-radius: var(--radius-btn);
  background: var(--band);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  margin: 4px 0;
  background: var(--forest);
}

/* =====================================================================
   Hero
   ===================================================================== */

.hero {
  padding-top: 72px;
}

/* Wider than the standard column so the scene has room, and the pair is
   centred in the viewport rather than hugging one edge. */
.hero .container {
  max-width: var(--hero-w);
}

/* THE HOME HEADLINE IS THE LONGEST ON THE SITE, so this hero gets a different
   split from the others.
 *
 * At 1.15fr the copy column came out 560px once the band narrowed to 1300, and
 * "Run your whole club from one place" needs about 15 characters a line at
 * 58px to break well. 560 fits 13, so it went to four lines and broke at
 * "from one / place" — a line ending on a preposition, which is the one break
 * a headline must not make.
 *
 * 0.92fr puts the copy back to 629px. The artwork gives up the difference,
 * which it can afford: two figures side by side read fine smaller, and a
 * headline does not. */
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: center;
  gap: 44px;
}

.hero__copy {
  padding-top: 0;
}

.hero__title {
  /* Capped at 3px rather than the 4px the size would suggest: this is the
     one hero on --white, and the green reads heavier without the band
     under it. See tokens.css. */
  --hard-shadow-offset: 3px;
  margin-top: 9px;
}

.hero__lead {
  max-width: 591px;

  /* Was 15, which looked right under a headline carrying 22px of its own
     leading below the last baseline. Tightening the display leading took that
     cushion away, so the gap has to be stated rather than inherited. */
  margin-top: 22px;
}

.hero__cta {
  margin-top: 30px;
}

.hero__note {
  margin-top: 5px;
  font-size: var(--small);
  line-height: var(--small-lh);
}

.hero__art {
  justify-self: center;
  width: 100%;
  height: auto;
}

/* =====================================================================
   Clients band
   ===================================================================== */

.clients {
  margin-top: 181px;
  padding: 50px 0;
  background: var(--band);
}

.clients__title {
  text-align: center;
}

.clients__logos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 50px;
  margin-top: 58px;
}

/* A REAL LOGO, NOT A PLACEHOLDER PLATE. This was a grey plate with one stock
   image tiled into all six slots. Each slot now holds its own mark, and they
   have to sit on a common baseline despite differing in width and height. */
.clients__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
}

.clients__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;

  /* Six logos in six palettes turns a quiet band into a fruit salad.
     Desaturated at rest is the convention for a logo wall for exactly that
     reason — the band is about how many, not about any one of them. */
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.clients__logo img:hover {
  filter: none;
  opacity: 1;
}

/* The line that stops this being a lie. Until these are real customers it is
   the most important text in the band, not a footnote. */
.clients__note {
  margin-top: 10px;
  text-align: center;
  font-size: var(--small);
  line-height: var(--small-lh);
  color: var(--ink-soft);
}

/* =====================================================================
   Features
   ===================================================================== */

.features {
  padding-top: 82px;
}

.features .sec-head {
  gap: 10px;
}

/* The illustration is wider than it is tall, so it gets a wider track and
   the section gets a wider container. Widening the track alone would have
   taken the space out of the cards. */
.features .container--wide {
  max-width: 1500px;
}

.features__grid {
  display: grid;
  grid-template-columns: 600px 1fr;
  gap: 50px;
  align-items: center;
  margin-top: 70px;
}

.features__art {
  width: 100%;
  height: auto;
}

.features__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  padding: 30px;
}

/* =====================================================================
   Work steps
   ===================================================================== */

.worksteps {
  padding-top: 170px;
}

.worksteps .sec-head {
  gap: 10px;
}

.worksteps .sec-head__lead {
  max-width: 513px;
}

.worksteps__tabs {
  margin-top: 70px;
}

/* Dark stage with a light inner frame, matching the proportions of the
   original composition. Inside each frame the scene sits beside a list of
   what Verde actually does in that part of the club. */
.worksteps__stage {
  width: 1080px;
  max-width: 100%;
  margin: 40px auto 0;
  padding: 35px;
  border-radius: var(--radius);
  background: var(--forest);
}

.worksteps__frame {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 44px;
  align-items: center;
  padding: 36px 40px;
  border-radius: var(--radius);
  background: var(--paper);
}

.worksteps__frame[hidden] {
  display: none;
}

.worksteps__art {
  width: 100%;
  height: auto;
}

.spec__title {
  color: var(--ink);
}

.spec__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 22px;
}

.spec__item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  align-items: start;
}

.spec__check {
  width: 26px;
  height: auto;
}

.spec__label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--body);
  line-height: 22px;
  color: var(--ink);
}

.spec__text {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  line-height: 21px;
  color: var(--ink-soft);
}


/* =====================================================================
   Integrations
   ===================================================================== */

.integrations {
  padding-top: 159px;
}

/* Both halves stretch to the taller of the two. The source design had them
   at 438 and 451, which read as a mistake rather than a detail. */
.integrations__inner {
  display: grid;
  grid-template-columns: 650px 650px;
  align-items: stretch;
}

.integrations__copy {
  min-height: 451px;
  padding: 50px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--paper);
}

.integrations .sec-head {
  gap: 10px;
}

.integrations__title {
  max-width: 573px;
}

.integrations .sec-head__lead {
  max-width: 570px;
}

.integrations__panel {
  position: relative;
  min-height: 451px;
  overflow: hidden;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--forest);
}

/* The sketch under the argument. 2.34:1.
 *
 * I TOLD YOU THE SECTION WOULD NOT GROW. It does, and I had the sum wrong:
 * I estimated the headline at body size when it is --h2, 64px over 83.2 of
 * line-height. The copy column is already 382 of content against the panel's
 * 451 min-height, so the real gap was 69px, not 250.
 *
 * 460 wide gives 197 tall, so the section ends up about 145px taller than it
 * is now. That is the honest cost. The panel opposite stretches with it, which
 * the list wants anyway — eight items in 451px was tight.

   margin-top: auto pins it to the bottom of the copy column, so it sits level
   with the foot of the panel opposite rather than floating mid-column. */
.incl__art {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin-top: auto;
  padding-top: 30px;
}

/* The copy column has to be a column for that auto to mean anything. */
.integrations__copy {
  display: flex;
  flex-direction: column;
}

@media (max-width: 1100px) {
  .incl__art {
    max-width: 440px;
    margin-inline: auto;
  }
}

/* WHAT IS INCLUDED.
 *
 * Replaces the fifteen .disc circles that filled this panel — all of them the
 * same integration-logo.png, which read as a wall of partners the product
 * does not have and does not want.
 *
 * The panel keeps its shape and its fill; what sits in it is now a list of
 * the things a club would otherwise buy from five companies. */
.incl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  height: 100%;
  padding: 48px 56px;
}

/* THE PANEL IS --forest. I wrote this list in --ink on a dark panel and did
   not check, so it rendered black on black. Everything below is the light
   side of the palette for that reason. */
.incl__item {
  position: relative;
  padding: 13px 0 13px 34px;
  font-size: var(--lead);
  line-height: 28px;
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.incl__item:last-child { border-bottom: 0; }

/* The site's own check, but bullet-check.png is dark ink (mean #49706 1) and
   disappears on forest. Masking it rather than drawing it means the shape is
   still the brand's tick and the colour is ours to set — the same technique
   the header lockup uses. */
.incl__item::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 0;
  width: 20px;
  height: 20px;
  background: var(--verde-300);
  -webkit-mask: url("../img/bullet-check.png") center / contain no-repeat;
  mask: url("../img/bullet-check.png") center / contain no-repeat;
}

@media (max-width: 1100px) {
  .incl {
    padding: 36px 32px;
  }

  .incl__item {
    font-size: var(--body);
    line-height: 24px;
    padding: 10px 0 10px 30px;
  }

  .incl__item::before {
    top: 13px;
    width: 18px;
    height: 18px;
  }
}

/* =====================================================================
   Testimonial band
   ===================================================================== */

/* Full-strength brand band with hand-drawn ornaments pinned to the edges.
   Everything decorative is aria-hidden and sits behind the content, which
   is lifted with z-index. Swap the background to var(--band-soft) for the
   quieter near-white treatment; the ornaments are toned for --band. */
/* Any full-bleed band that carries the hand-drawn ornaments. The .orn
   rules below are written against this, so a new band only needs the
   class and the eight images. */
.band-orn {
  position: relative;
  overflow: hidden;
}

.testimonial {
  margin-top: 100px;
  padding: 100px 0 131px;
  background: var(--band);
}

.testimonial > .container {
  position: relative;
  z-index: 1;
}

.orn {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.orn--grass-tl {
  top: 2.8%;
  left: 0;
  width: 161px;
}

.orn--flag-bl {
  bottom: 43px;
  left: 0;
  width: 318px;
}

.orn--sweep-l {
  bottom: 54px;
  left: 12.8%;
  width: 276px;
}

.orn--sweep-c {
  bottom: 73px;
  right: 36.3%;
  width: 251px;
}

.orn--flick-br {
  bottom: 33px;
  right: 17.1%;
  width: 101px;
}

.orn--sun-tr {
  top: 5.3%;
  right: 1.6%;
  width: 216px;
}

.orn--line-r {
  top: 37.6%;
  right: 0;
  width: 179px;
}

.orn--bush-br {
  bottom: 32px;
  right: 0;
  width: 299px;
}

.testimonial__inner {
  display: grid;
  grid-template-columns: 509px 1fr;
  gap: 50px;
  align-items: start;
}

.testimonial .sec-head {
  gap: 10px;
}

/* The stroke is --accent, which sits almost on top of --band. On this one
   heading it is filtered to white, which is the only thing with enough
   contrast against the band without going dark and heavy. */
.testimonial .marker {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.testimonial__stats {
  display: flex;
  gap: 53px;
  margin-top: 84px;
}

.testimonial__stat dt {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 34px;
  line-height: 42px;
}

.testimonial__stat dd {
  margin: 0;
}

.testimonial__quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 44px 48px 36px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 20px 46px rgba(5, 52, 36, 0.10);
  text-align: center;
}

.testimonial__avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  background: var(--verde-100);
}

.testimonial__quote figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.testimonial__name {
  margin-top: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--h6);
  line-height: var(--h6-lh);
}

.testimonial__role {
  margin-top: 10px;
}

.testimonial__text {
  max-width: 542px;
  margin-top: 15px;
  font-family: var(--font-accent);
  font-size: 20px;
  line-height: 26px;
}

.testimonial__dots {
  margin-top: 25px;
}

/* =====================================================================
   Pricing
   ===================================================================== */

.pricing {
  padding-top: 100px;
}

.pricing .sec-head {
  gap: 10px;
}

.pricing .sec-head__lead {
  max-width: 665px;
}

.pricing__plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 50px;
}

/* =====================================================================
   Footer
   ===================================================================== */

/* The top margin gives breathing room on pages that end on white. Pages
   whose last section is a coloured band set .page--flush on <body> so the
   band runs straight into the footer instead of leaving a white stripe. */
.page--flush .footer {
  margin-top: 0;
}

.footer {
  position: relative;
  margin-top: 101px;
  padding: 100px 0 30px;
  background: var(--forest);
  color: var(--white);
}

.footer__emblem {
  display: block;
  width: 100%;
  max-width: 700px;
  height: auto;
  margin: 60px auto 0;
  opacity: 0.9;
}

/* Columns sized to their content and the whole group centred, rather than
   three fixed 366px tracks. The fixed version added up to 1298 inside a
   1252 content box, so the grid overflowed 46px to the right and the block
   sat off-centre even though its container was centred. */
.footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: 90px;
}

.footer__brand {
  display: inline-flex;
}

.footer__contact {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}

.footer__socials {
  margin-top: 30px;
}

.footer__title {
  color: var(--white);
}

.footer__lists {
  display: grid;
  grid-template-columns: repeat(2, 158px);
  gap: 50px;
  margin-top: 39px;
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__list--legal {
  margin-top: 39px;
}

.footer__list a {
  color: var(--band);
}

.footer__list a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin-top: 34px;
  font-size: var(--lead);
  line-height: 21px;
  text-align: center;
}

.footer__bottom a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 1340px) {
  .hero__inner {
    grid-template-columns: 1fr 1fr;
  }

  .hero__art {
    width: 100%;
  }

  .features__art {
    width: 100%;
  }

  .integrations__inner {
    grid-template-columns: 1fr 1fr;
  }

  .footer__inner {
    gap: 56px;
  }
}

/* The ornaments live in the gutter beside the 1300px content column. As the
   viewport narrows that gutter closes, so they shrink first, then the ones on
   the copy side step out before they can collide with it. */
@media (max-width: 1700px) {
  .orn--grass-tl {
    width: 120px;
  }

  .orn--flag-bl {
    bottom: 20px;
    width: 235px;
  }

  .orn--sweep-l {
    width: 210px;
  }

  .orn--sweep-c {
    width: 195px;
  }

  .orn--flick-br {
    width: 80px;
  }

  .orn--sun-tr {
    width: 165px;
  }

  .orn--line-r {
    width: 135px;
  }

  .orn--bush-br {
    width: 225px;
  }
}

@media (max-width: 1500px) {
  .orn--grass-tl,
  .orn--flag-bl,
  .orn--sweep-l {
    display: none;
  }
}

/* Below this the illustration track and a two-up card grid stop fitting
   side by side; the cards get squeezed long before the art does. */
@media (max-width: 1400px) {
  .features__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 40px;
  }

  .features__art {
    max-width: 600px;
    margin-inline: auto;
  }

  .features__cards {
    padding: 0;
  }
}

@media (max-width: 1100px) {
  .hero__title {
    --hard-shadow-offset: 3px;
  }

  .site-header__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .nav__link {
    font-size: 21px;
  }

  .site-header__logo {
    order: 1;

    /* Side by side on mobile. The bar is already a cramped flex row with a
       toggle in it, and 21px of extra height there buys nothing. */
    flex-direction: row;
    gap: 9px;
  }

  .site-header__logo .brand__mark {
    height: 30px;
  }

  /* The marks come off on mobile. The bar is already a cramped flex row with
     a toggle in it, and the lockup goes side-by-side there — the artwork is
     drawn for a stacked V-over-word and does not fit a horizontal one. */
  .site-header__logo { padding: 0; }

  .site-header__logo::before,
  .site-header__logo::after { display: none; }

  .site-header__logo .brand__word {
    padding-bottom: 0;
    background: none;
  }

  .site-header__logo .brand__word {
    font-size: 16px;
    letter-spacing: 0.04em;
  }

  .nav-toggle {
    display: block;
    order: 2;
  }

  .nav,
  .site-header__actions {
    display: none;
  }

  .site-header__inner[data-open="true"] .nav,
  .site-header__inner[data-open="true"] .site-header__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
  }

  .site-header__inner[data-open="true"] .nav {
    order: 3;
    padding-top: 24px;
  }

  .site-header__inner[data-open="true"] .site-header__actions {
    order: 4;
    padding-bottom: 8px;
  }

  .dropdown {
    width: 100%;
  }

  .dropdown__menu {
    position: static;
    left: auto;
    border: 0;
    padding: 10px 0 0;
  }

  /* The marker strokes are drawn for the 64-76px desktop headings; at
     the reduced mobile sizes they no longer line up with the words, so
     they step out rather than sit crooked. */
  .marked > .marker {
    display: none;
  }

  .hero {
    padding-top: 30px;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero__copy {
    padding-top: 0;
  }

  .clients {
    margin-top: 90px;
  }

  .clients__logos {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }

  .features {
    padding-top: 60px;
  }

  .features__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 40px;
  }

  .features__art {
    max-width: 600px;
    margin-inline: auto;
  }

  .features__cards {
    padding: 0;
  }

  .worksteps,
  .integrations,
  .pricing {
    padding-top: 90px;
  }

  .worksteps__tabs {
    margin-top: 40px;
  }

  .worksteps__stage {
    padding: 16px;
  }

  .worksteps__frame {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 24px;
  }

  .worksteps__art {
    max-width: 420px;
    margin-inline: auto;
  }

  .footer__emblem {
    margin-top: 40px;
  }

  .integrations__inner {
    grid-template-columns: 1fr;
  }

  .integrations__copy {
    min-height: 0;
    border-radius: var(--radius) var(--radius) 0 0;
  }

  .integrations__panel {
    min-height: 340px;
    border-radius: 0 0 var(--radius) var(--radius);
  }

  .testimonial {
    margin-top: 90px;
    padding: 70px 0;
  }

  /* The ornaments are placed against a wide band; below this width they
     start crowding the copy, so they step out. */
  .orn {
    display: none;
  }

  .testimonial__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .testimonial__stats {
    margin-top: 40px;
  }

  .testimonial__quote {
    padding: 32px 24px 28px;
  }

  .footer {
    margin-top: 90px;
    padding-top: 70px;
  }

  .footer__inner {
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    gap: 44px;
  }
}

@media (max-width: 860px) {
  .features__cards,
  .pricing__plans {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 640px) {
  .hero__title {
    --hard-shadow-offset: 2px;
  }

  .clients__logos {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonial__stats {
    flex-wrap: wrap;
    gap: 30px;
  }

  .footer__inner {
    grid-template-columns: 1fr;
    justify-content: stretch;
    gap: 40px;
  }

  .footer__lists {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

}

/* Sport chips sit under the hero note, naming what Verde covers. */
.hero__chips {
  margin-top: 24px;
}

@media (max-width: 640px) {
  .hero__chips {
    margin-top: 20px;
  }
}

/* The link that shows when the plan fetch fails or returns nothing. It is the
   whole content of the band in that case, so it is centred and sized like a
   sentence rather than tucked in a corner. */
.pricing__plans-fallback {
  grid-column: 1 / -1;
  text-align: center;
  font-size: var(--lead);
  line-height: 29px;
}

.pricing__plans-fallback a {
  color: var(--forest);
  text-decoration: underline;
  text-underline-offset: 4px;
}