/* ==========================================================================
   GAR design system — loaded last, so it sets the final word on shared styles.

   Palette   GAR Red #880201 · Ink #1C170F · Body #5B5443 · Field Tan #756752
             Cream #F6F2E7 · White
   Type      Figtree (uppercase headings) · Barlow Semi Condensed (everything else)
   Rules     One heading scale, one label style, two buttons (solid red on light,
             white on dark), one flat card, one red call-to-action band, two banner
             types (photo, cream text). Nothing under 14px; tap targets ≥ 44px.

   The inherited page styles (gh.css, pages.css) still use !important in places,
   so the overrides below use :root/#ghteam-page/.gar-cp prefixes plus !important
   where needed to win reliably.
   ========================================================================== */

:root {
  --red: #880201;
  --red-dark: #6b0101;
  --ink: #1c170f;
  --body: #5b5443;
  --tan: #756752;
  --cream: #f6f2e7;
  --rule: rgba(28, 23, 15, .14);
  --gh-red: var(--red);
  --gh-ink: var(--ink);
  --gh-dim: var(--body);
  --gh-tint: var(--cream);

  /* Sizes follow the root size, which scales 16px (phone) to 24px (desktop) like the
     Squarespace theme did; max() keeps a floor on small screens. */
  --fs-h1: max(32px, 2.2rem);
  --fs-h2: max(26px, 1.6rem);
  --fs-h3: max(19px, 1.05rem);
  --fs-lede: max(17px, 1.1rem);
  --fs-label: max(14px, .7rem);
  --fs-small: max(15px, .8rem);
  --fs-button: max(14px, .7rem);
  --measure: 68ch;
  --space-section: clamp(48px, 6vw, 96px);
  --card-pad: clamp(20px, 2vw, 28px);
  /* Left edge of .gh-wrap content, for full-width bands that break out of a container */
  --wrap-inline: max(6vw, calc((100vw - 1180px) / 2 + 3rem));
}

/* Full-width bands break out of narrower containers; clip instead of scrolling sideways */
body { overflow-x: clip; }

/* ---------- Headings ---------- */
:root main :is(h1, h2, h3, h4) {
  font-family: var(--f-head) !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: -.01em !important;
  line-height: 1.12 !important;
  text-wrap: balance;
}
:root main h1, :root .gar-cp h1, :root #ghteam-page h1 { font-size: var(--fs-h1) !important; color: var(--ink) !important; margin: 0 0 .45em !important; }
:root main h2, :root .gar-cp h2, :root .gar-cp .cp-band h2, :root .gar-cp .cp-green h2, :root #ghteam-page h2 {
  font-size: var(--fs-h2) !important; color: var(--tan) !important; margin: 0 0 .5em !important;
}
:root main :is(h3, h4), :root .gar-cp h3, :root .gar-cp .cp-card h3, :root #ghteam-page .ghteam-card h3 {
  font-size: var(--fs-h3) !important; color: var(--ink) !important; font-weight: 500 !important; margin: 0 0 .5em !important;
}
/* Section lead that acts as a heading on the home page */
:root body .gh-proof .gh-lead {
  font-family: var(--f-head) !important; font-weight: 400 !important; text-transform: uppercase;
  font-size: var(--fs-h2) !important; color: var(--tan) !important; line-height: 1.12; max-width: none; margin: 0 0 1.2em;
}

/* ---------- Body text ---------- */
:root main :is(p, li) { max-width: var(--measure); }
:root .gar-cp p, :root .gar-cp .cp-card p, :root .gar-cp .cp-band p, :root .gar-cp .cp-green p, :root .gar-cp .cp-scope li,
:root #ghteam-page p {
  font-family: var(--f-text) !important; font-size: 1rem !important; color: var(--body) !important; line-height: 1.6 !important;
}
:root .gar-cp .cp-lede { font-size: var(--fs-lede) !important; }
:root .gar-cp .cp-croplist { font-size: var(--fs-small) !important; color: var(--red) !important; font-weight: 600 !important; }
:root .gar-cp { font-family: var(--f-text) !important; color: var(--body) !important; padding-inline: var(--wrap-inline) !important; max-width: none !important; }
:root .svc-page { font-family: var(--f-text); }
main .std p[style*="text-align: center"], main .std p[style*="text-align:center"] { margin-inline: auto; }

/* ---------- Labels: one style for section labels, one for captions ---------- */
:root main :is(.gh-eyebrow, .svc-eyebrow, .svc-tag, .ci-eyebrow),
:root #ghteam-page .ghteam-eyebrow, :root #ghteam-page .ghteam-hero .ghteam-eyebrow {
  font-family: var(--f-text) !important; font-weight: 600 !important; font-size: var(--fs-label) !important;
  letter-spacing: .12em !important; text-transform: uppercase !important; line-height: 1.3 !important;
  color: var(--red) !important; position: static !important; padding: 0 !important; margin: 0 0 .9em !important;
}
:root main :is(.gh-eyebrow, .svc-eyebrow, .ci-eyebrow)::after, :root #ghteam-page .ghteam-eyebrow::after {
  content: "" !important; display: block !important; position: static !important;
  width: 32px !important; height: 3px !important; margin-top: .55em !important; background: currentColor !important; border-radius: 0 !important;
}
/* Captions: dates, stat names, taglines, contact field names — muted, no rule */
:root main :is(.report-card .gh-eyebrow, .gh-stat span, .ci-label), :root #ghteam-page .ghteam-tagline {
  font-family: var(--f-text) !important; font-weight: 600 !important; font-size: var(--fs-label) !important;
  letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--body) !important; margin: 0 0 .5em !important;
}
:root main .report-card .gh-eyebrow::after { display: none !important; }

/* ---------- Buttons ---------- */
:root main :is(.gh-btn, .svc-btn, .gar-cta-btn), :root .gar-cp .cp-btn {
  display: inline-flex !important; align-items: center; justify-content: center; min-height: 48px;
  font-family: var(--f-text) !important; font-weight: 700 !important; font-size: var(--fs-button) !important;
  letter-spacing: .08em !important; text-transform: uppercase !important; line-height: 1.2 !important;
  padding: .95em 1.6em !important; border: 2px solid !important; border-radius: 0 !important;
  text-decoration: none !important; text-align: center; transition: background-color .15s ease, color .15s ease;
}
/* Solid red: on light backgrounds */
:root main .gh-btn.dark, :root main .std:not(.has-bg) .gh-btn:not(.light):not(.on-red) {
  background: var(--red) !important; border-color: var(--red) !important; color: #fff !important;
}
:root main .gh-btn.dark:hover, :root main .std:not(.has-bg) .gh-btn:not(.light):not(.on-red):hover { background: var(--red-dark) !important; border-color: var(--red-dark) !important; }
/* White: on photos, dark and red backgrounds */
:root main :is(.gh-btn.light, .gh-btn.on-red, .svc-btn, .gar-cta-btn, .gh-cta .gh-btn), :root .gar-cp .cp-btn {
  background: #fff !important; border-color: #fff !important; color: var(--red) !important;
}
:root main :is(.gh-btn.light, .gh-btn.on-red, .svc-btn, .gar-cta-btn, .gh-cta .gh-btn):hover, :root .gar-cp .cp-btn:hover {
  background: var(--cream) !important; border-color: var(--cream) !important; color: var(--red-dark) !important;
}
/* Text links that lead somewhere: one style, comfortable to tap */
:root main .svc-link {
  font-family: var(--f-text) !important; font-weight: 700 !important; font-size: var(--fs-button) !important;
  letter-spacing: .08em; text-transform: uppercase; color: var(--red) !important;
  display: inline-flex; align-items: center; min-height: 44px; border: 0 !important; padding: 0 !important;
  text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 2px;
}
:root main .svc-link:hover { color: var(--red-dark) !important; }

/* ---------- Cards: flat, square, one border ---------- */
:root main :is(.gh-why-card, .svc-card, .report-card), :root .gar-cp :is(.cp-card, .cp-scope), :root #ghteam-page .ghteam-card {
  background: #fff !important; border: 1px solid var(--rule) !important; border-radius: 0 !important;
  box-shadow: none !important; transform: none !important;
}
:root main :is(.gh-why-card:hover, .report-card:hover) { border-color: var(--red) !important; box-shadow: none !important; transform: none !important; }
:root main .gh-why-card .gh-fcard, :root main .report-card > :not(img), :root .gar-cp .cp-card, :root #ghteam-page .ghteam-card { padding: var(--card-pad) !important; }
:root main .report-card { display: flex; flex-direction: column; padding: 0 !important; border-top: 1px solid var(--rule) !important; }
:root main .report-card > :not(img) { padding-block: 0 !important; }
:root main .report-card > span { padding-top: var(--card-pad) !important; }
:root main .report-card > p:empty { display: none; }
:root main .report-card h2 { padding-bottom: var(--card-pad) !important; margin: 0 !important; font-size: var(--fs-h3) !important; color: var(--ink) !important; }
:root main .report-card img { margin: 0 !important; }
:root main .svc-card { padding: var(--card-pad) !important; }
:root main .svc-card h2 { font-size: var(--fs-h3) !important; color: var(--ink) !important; }
:root main .svc-grid { gap: 1.25rem !important; border: 0 !important; }
:root #ghteam-page .ghteam-card { text-align: left !important; }
:root #ghteam-page .ghteam-card .ghteam-photo { border-radius: 0 !important; }
/* Tinted callout boxes on Crop Protection / Safety: square, consistent */
:root .gar-cp :is(.cp-band, .cp-green) { border-radius: 0 !important; padding: var(--card-pad) !important; }
:root .gar-cp .cp-band { background: var(--cream) !important; border: 0 !important; border-left: 4px solid var(--red) !important; }
:root .gar-cp .cp-green { background: #eef2e8 !important; border: 0 !important; border-left: 4px solid #435c3f !important; }
:root main img { border-radius: 0 !important; }

/* ---------- Section spacing ---------- */
:root main :is(.std, .gh-problem, .gh-proof, .gh-solution) { padding-block: var(--space-section) !important; }
:root #ghteam-page .ghteam-section { padding: var(--space-section) var(--wrap-inline) !important; max-width: none !important; }
:root #ghteam-page .ghteam-section--tan-inner { padding: var(--space-section) var(--wrap-inline) !important; }
:root .gar-cp section { margin-bottom: var(--space-section) !important; }
:root .gar-cp section:last-child { margin-bottom: 0 !important; }
:root .gar-cp { padding-block: var(--space-section) 0 !important; }

/* ---------- Banners: photo ---------- */
:root main :is(.gh-hero, .photo-banner), :root .gar-cp .cp-hero, :root main .page-crop-reports-banner {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(380px, 62vh, 640px) !important; overflow: hidden; color: #fff; background: var(--ink);
}
:root .gar-cp .cp-hero {
  margin: calc(-1 * var(--space-section)) calc(50% - 50vw) var(--space-section) !important;
  padding: clamp(40px, 5vw, 72px) var(--wrap-inline) !important; border-radius: 0 !important;
}
:root main .photo-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
:root main .photo-banner::before, :root .gar-cp .cp-hero::before, :root main .gh-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(10, 8, 5, .9) 0%, rgba(10, 8, 5, .6) 45%, rgba(10, 8, 5, .15) 100%) !important;
}
:root main .photo-banner > .gh-wrap { position: relative; z-index: 2; width: 100%; padding-block: clamp(40px, 5vw, 72px); }
:root main :is(.gh-hero, .photo-banner, .cp-hero) h1, :root .gar-cp .cp-hero h1, :root main .std.has-bg h1 {
  color: #fff !important; font-size: var(--fs-h1) !important; max-width: 20ch; white-space: normal !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .45); -webkit-text-stroke: 0 !important;
}
:root main :is(.gh-hero, .photo-banner) p:not(.gh-eyebrow), :root .gar-cp .cp-hero p, :root .gar-cp .cp-hero .cp-lede, :root main .std.has-bg p:not(.gh-eyebrow) {
  color: rgba(255, 255, 255, .92) !important; font-family: var(--f-text) !important; font-weight: 500 !important;
  font-size: var(--fs-lede) !important; line-height: 1.5 !important; max-width: 38em; margin: 0 0 .6em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
:root main .gh-hero .gh-hero-content { max-width: 44rem; }
:root main :is(.gh-hero, .photo-banner, .std.has-bg, .gh-cta, .svc-cta, .contact-callback) :is(.gh-eyebrow, .svc-eyebrow, .ci-eyebrow),
:root .gar-cp .cp-hero .gh-eyebrow { color: var(--cream) !important; text-shadow: none; }
/* Crop report list banner: photo banner like the others */
:root body.page-crop-reports main .sec-1 { min-height: clamp(320px, 50vh, 520px); display: flex; align-items: flex-end; padding-block: clamp(40px, 5vw, 72px) !important; }
:root body.page-crop-reports main .sec-1 .std-flow { display: flex; flex-direction: column-reverse; }

/* ---------- Banners: cream text banner ---------- */
:root main :is(.svc-hero, .contact-intro, .text-banner), :root #ghteam-page .ghteam-hero {
  background: var(--cream) !important; text-align: left !important;
  padding-block: clamp(40px, 5vw, 80px) !important;
}
:root #ghteam-page .ghteam-hero { padding-inline: var(--wrap-inline) !important; max-width: none !important; }
:root #ghteam-page .ghteam-hero p { margin-inline: 0 !important; }
:root main .text-banner h1, :root main .svc-hero h1, :root main .contact-intro h1, :root #ghteam-page .ghteam-hero h1 { margin-bottom: .35em !important; max-width: 24ch !important; }
:root main :is(.svc-hero, .contact-intro) p:not(.ci-label):not(.ci-eyebrow), :root #ghteam-page .ghteam-hero > p { font-size: var(--fs-lede) !important; }
:root #ghteam-page .ghteam-hero img { border-radius: 0 !important; height: clamp(220px, 32vw, 420px) !important; margin-top: 2rem !important; }
/* Contact intro: details in a row on wide screens, stacked on phones */
:root main .contact-intro .ci-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin: 1.5rem 0 2rem; }
:root main .contact-intro .ci-details p { font-size: var(--fs-lede) !important; }
:root main .contact-intro .ci-phone { font-size: var(--fs-h3) !important; }
:root main .contact-intro .std-map { margin: 0 !important; max-width: none; }

/* ---------- Call-to-action band: red, full width ---------- */
:root main :is(.gh-cta, .svc-cta, .gar-cta-section), :root .gar-cp .cp-cta {
  background: var(--red) !important; color: #fff; text-align: center; border-radius: 0 !important;
  padding: var(--space-section) var(--wrap-inline) !important;
}
:root main .svc-cta, :root .gar-cp .cp-cta { margin: var(--space-section) calc(50% - 50vw) 0 !important; position: static !important; width: auto !important; max-width: none !important; }
:root main :is(.gh-cta, .svc-cta, .gar-cta-section) h2, :root .gar-cp .cp-cta h2 { color: #fff !important; margin-inline: auto !important; max-width: 22ch; }
:root main :is(.gh-cta, .svc-cta, .gar-cta-section) p:not(.gh-eyebrow):not(.svc-eyebrow), :root .gar-cp .cp-cta p {
  color: rgba(255, 255, 255, .9) !important; margin-inline: auto !important; opacity: 1 !important;
}
:root main :is(.gh-cta, .svc-cta) :is(.gh-eyebrow, .svc-eyebrow)::after { margin-inline: auto !important; }
:root main :is(.gh-cta .gh-cta-row, .svc-cta) { justify-content: center; }
:root main .gh-cta .gh-tel, :root main .svc-cta .svc-tel {
  color: #fff !important; display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-small) !important;
  text-decoration: underline; text-underline-offset: .25em;
}
:root body.page-crop-reports main .sec-3 { padding: 0 !important; background: none; }
:root body.page-crop-reports main .sec-3 > .gh-wrap { max-width: none; padding: 0; }

/* ---------- Home specifics ---------- */
:root body.page-home .gh-hero h1 { white-space: normal !important; }
:root main .gh-stat b { font-family: var(--f-head) !important; color: var(--red) !important; font-size: max(32px, 2rem) !important; }
:root main .gh-testimonial blockquote, :root main .gh-testimonial p:not(.gh-eyebrow):not(.gh-flag) {
  font-family: var(--f-text) !important; font-style: italic; font-weight: 500 !important;
  font-size: var(--fs-lede) !important; line-height: 1.5 !important; color: #fff !important;
}
:root main .gh-testimonial .gh-flag {
  font-family: var(--f-text) !important; font-weight: 600; font-size: var(--fs-label) !important; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cream) !important; border: 0 !important; padding: 0 !important; background: none !important;
}
:root main .gh-why-card .gh-card-link { color: var(--ink) !important; }

/* ---------- Galleries and photo grids: two columns on phones ---------- */
:root main .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin: 0; }
:root main .photo-grid figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
:root main .photo-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) {
  :root main .gallery-grid { columns: 2 !important; column-gap: .75rem !important; }
  :root main .gallery-grid figure { margin-bottom: .75rem !important; }
  :root main .photo-grid { grid-template-columns: 1fr 1fr; gap: .75rem; }
}

/* ---------- Grower Resources ---------- */
:root main .link-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem 2.5rem; }
:root main .link-group h2 { font-size: var(--fs-h3) !important; color: var(--ink) !important; }
:root main .link-group ul { list-style: none; margin: 0; padding: 0; }
:root main .link-group li { margin: 0; }
:root main .link-group a { display: inline-flex; align-items: center; min-height: 44px; color: var(--red); font-weight: 600; text-decoration: none; }
:root main .link-group a:hover { text-decoration: underline; text-underline-offset: .2em; }
:root main .affiliate-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 2rem; align-items: end; }
:root main .affiliate-list li { text-align: center; max-width: none; font-size: var(--fs-small); color: var(--ink); }
:root main .affiliate-list img { display: block; margin: 0 auto .6rem; max-width: 150px; max-height: 64px; width: auto; height: auto; }

/* ---------- Join Our Team ---------- */
:root body.page-join-our-team .join-page { background: #fff; }
:root body.page-join-our-team .join-photo { margin-top: 0 !important; }
:root body.page-join-our-team .paycom { height: clamp(520px, 75vh, 900px); }

/* ---------- Contact form area ---------- */
:root main .contact-callback .ci-eyebrow { color: var(--cream) !important; }

/* ---------- Crop report posts ---------- */
:root main .std.post h1 { color: #fff !important; -webkit-text-stroke: 0 !important; }
:root main .std.post .gh-eyebrow, :root main .std.post .gh-eyebrow a { color: var(--cream) !important; }
:root main .post-nav a { color: var(--cream) !important; font-family: var(--f-head); font-size: var(--fs-h3) !important; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; display: inline-flex; min-height: 44px; }
:root main .post-nav a:hover { color: #fff !important; }

/* ---------- Footer: nothing under 14px ---------- */
:root .site-footer p { font-size: max(14px, .7rem) !important; }
:root .site-footer-bottom { font-size: max(14px, .58rem) !important; }
:root .site-footer-bottom a, :root .site-footer a[href^="tel"] { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Accessibility floor ---------- */
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
:root :is(.gh-hero, .photo-banner, .std.has-bg, .gh-cta, .svc-cta, .gar-cta-section, .cp-hero, .cp-cta, .contact-callback, .site-footer) :focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Card body text: one size everywhere ---------- */
:root main :is(.gh-why-card, .svc-card) p, :root .gar-cp .cp-card p, :root .gar-cp .cp-scope li, :root #ghteam-page .ghteam-card p {
  font-size: var(--fs-small) !important; line-height: 1.55 !important;
}
/* Centered labels get a centered rule */
:root main [style*="text-align:center"] > :is(.gh-eyebrow, .ghteam-eyebrow)::after,
:root main [style*="text-align: center"] > :is(.gh-eyebrow, .ghteam-eyebrow)::after,
:root #ghteam-page [style*="text-align:center"] > .ghteam-eyebrow::after { margin-inline: auto !important; }

/* ---------- Fixes from review ---------- */
/* Old decorative rule on Services card tags */
:root main .svc-tag::after { display: none !important; }
/* Headings on dark/red backgrounds are white */
:root main :is(.contact-callback, .gh-testimonial) h2 { color: #fff !important; }
/* Labels inside centered bands get a centered rule */
:root main :is(.contact-callback, .gh-cta, .svc-cta, .gar-cta-section) :is(.gh-eyebrow, .svc-eyebrow, .ci-eyebrow) { text-align: center; }
:root main :is(.contact-callback, .gh-cta, .svc-cta, .gar-cta-section) :is(.gh-eyebrow, .svc-eyebrow, .ci-eyebrow)::after { margin-inline: auto !important; }
/* Join Our Team: content lines up with the page heading */
:root body.page-join-our-team :is(.join-page, .join-positions) .std-flow { margin-inline: 0 !important; }
:root body.page-join-our-team .join-photo { max-width: 780px; margin-inline: 0 !important; }
:root body.page-join-our-team .paycom { margin-inline: 0 !important; }
/* Affiliate logos: two per row on phones */
:root main .affiliate-list { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
/* Crop Protection / Safety define their own color variables; point them at the palette */
:root .gar-cp { --ink: #1c170f; --ink2: #5b5443; --ink3: #5b5443; --red: #880201; --red-dk: #880201; --line: rgba(28, 23, 15, .14); }
:root #ghteam-page h1 { font-weight: 400 !important; letter-spacing: -.01em !important; }
:root body.page-crop-reports main .sec-1 > .gh-wrap { width: 100%; }
/* Squarespace marked some plain text as <code>; show it in the text font */
:root main code { font-family: inherit; font-size: inherit; background: none; padding: 0; }
/* Join Our Team photo: same centered wide crop as the Squarespace page (≈1.9:1, wider on phones) */
:root body.page-join-our-team .join-photo img { width: 100%; aspect-ratio: 764 / 399; object-fit: cover; object-position: 50% 50%; display: block; }
@media (max-width: 767px) { :root body.page-join-our-team .join-photo img { aspect-ratio: 343 / 144; } }
/* Home banner: button sits below the text with clear space, instead of pinned to the corner */
:root body.page-home main .gh-hero .gh-cta-row { position: static !important; margin-top: clamp(32px, 3.5vw, 56px) !important; }

/* ---------- Card layout, available on every page (was home-page only) ---------- */
:root main .gh-why-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.75rem; }
:root main .gh-why-card { position: relative; display: flex; flex-direction: column; flex: 1 1 280px; max-width: calc(33.333% - 1.167rem); overflow: hidden; }
:root main .gh-why-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
:root main .gh-why-card .gh-fcard { flex: 1; }
:root main .gh-card-link { color: inherit; text-decoration: none; }
:root main .gh-card-link::after { content: ""; position: absolute; inset: 0; }
@media (max-width: 700px) {
  :root main .gh-why-grid { display: block; }
  :root main .gh-why-card { display: block; width: 100%; max-width: 100%; margin: 0 0 1.75rem; }
  :root main .gh-why-card:last-child { margin-bottom: 0; }
}