/* ═══════════════════════════════════════════════════════════════════════
   tulir.systems — shared stylesheet.

   TARGET: assets/reference_v8_latest_overlapping_composition_NOT_PIXEL_FINAL.png
   (1774 x 887). Every proportion below was MEASURED off that file rather than
   eyeballed, and the measurements are recorded inline so the next person can
   check them instead of trusting me:

     content gutter    x=77 and x=1696        -> 4.34% of 1774
     content width     1619                   -> 91.3%
     header            0..72, wash starts 73  -> 73px at that width
     hero wash ends    y=529  (laptops overrun to ~575)
     section heading   y~570
     product cards     y 626..751, x 77..882 and 891..1695  (gap 9px)
     benefit dividers  x=428, 875, 1289
     footer rule       y=826
     card fills        #eef6fe (blue)  #f0f9f5 (sage)   sampled
     page background   #fdfdfe                          sampled

   WHY THIS FILE AND NOT reference_v8_approved_composition.png: the package
   README calls this one "optional composition context ... known overlap
   imperfections, not a pixel-accurate spec", so the first build targeted the
   other reference. That was the wrong call — this is the composition Raj
   wants. The written constraints in CLAUDE_HANDOFF.md still win over this
   image wherever the two disagree, and each such case is commented where it
   occurs.

   CONTRAST. Every colour pairing that carries text is checked by
   test/contrast.mjs against WCAG AA. Change a token and run it.
   ═══════════════════════════════════════════════════════════════════════ */

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

:root{
  /* §3 style tokens. The mockup's own pixels sample slightly more saturated
     (its card link blue reads near #0034f7); the handoff's written values win. */
  --navy:#092448;
  --navy-700:#0d3160;
  --forest:#125b45;
  --ink:#354d61;
  --ink-soft:#5a7083;

  --xray-blue:#1769c2;
  --pulse-green:#0f7959;

  --white:#ffffff;
  --page:#fdfdfe;
  --pale-blue:#eef6fe;
  --pale-sage:#f0f9f5;
  --line:#e3e9f0;
  --line-soft:#edf1f6;

  --r:10px;--r-sm:8px;
  --shadow-sm:0 1px 2px rgba(9,36,72,.06);
  --shadow-md:0 8px 24px -10px rgba(9,36,72,.18);
  --shadow-lap:0 26px 46px -18px rgba(9,36,72,.42),0 6px 14px rgba(9,36,72,.10);

  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* 1619/1774 of the reference. The handoff says "1480px (or comparable)";
     this is the comparable figure that reproduces the mockup's proportions. */
  --wrap:min(89vw,1680px);
  --gutter:clamp(18px,4.34vw,78px);
  --header-h:80px;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}
body{background:var(--page);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}

.skip{position:absolute;left:-9999px}
.skip:focus{position:fixed;left:16px;top:16px;z-index:300;background:var(--navy);color:#fff;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;text-decoration:none}

a{color:var(--xray-blue);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--xray-blue);outline-offset:3px;border-radius:4px}

/* One container, used by header, hero, every section and the footer, so they
   share a single left/right alignment (§1). */
.wrap{width:var(--wrap);max-width:100%;margin:0 auto;padding:0}
.narrow{max-width:820px;margin:0 auto;padding:0 var(--gutter)}

h1,h2,h3,.serif{font-family:var(--serif)}
strong{font-weight:600;color:var(--navy)}

/* ═══ HEADER ══════════════════════════════════════════════════════════ */
.site-header{position:sticky;top:0;z-index:200;background:var(--white);border-bottom:1px solid var(--line-soft)}
.header-inner{width:var(--wrap);max-width:100%;margin:0 auto;padding:0;
  height:var(--header-h);display:flex;align-items:center;gap:clamp(14px,2vw,34px)}
.logo-link{flex-shrink:0;display:block;line-height:0}
/* Reference lockup: x 88..240, y 14..64 -> 152 x 50, ink aspect 2.10. */
.logo-link img{width:152px;height:auto}

.main-nav{display:flex;align-items:center;gap:clamp(14px,1.9vw,34px);margin:0 auto}
.main-nav>a,.menu-btn{font-family:var(--sans);font-size:16px;font-weight:500;color:var(--navy);
  background:none;border:none;cursor:pointer;text-decoration:none;padding:10px 2px;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:color .15s}
.main-nav>a:hover,.menu-btn:hover{color:var(--xray-blue)}
.menu-btn .caret{width:10px;height:6px;flex-shrink:0;transition:transform .18s}
.menu-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}

.menu{position:relative}
.menu-list{position:absolute;top:calc(100% + 10px);left:0;min-width:256px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-md);padding:8px;
  list-style:none;margin:0;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s}
.menu-list.right{left:auto;right:0}
.menu[data-open="true"] .menu-list{opacity:1;visibility:visible;transform:translateY(0)}
.menu-list a{display:block;padding:10px 12px;border-radius:var(--r-sm);font-size:14.5px;
  font-weight:500;color:var(--navy);text-decoration:none}
.menu-list a:hover{background:var(--pale-blue);color:var(--xray-blue)}
.menu-list a .mi{display:block;font-size:12.5px;font-weight:400;color:var(--ink-soft);margin-top:2px}

.header-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}
.header-divider{width:1px;height:30px;background:var(--line);flex-shrink:0}
/* Reference: outlined button x 1356..1545 (189 x 42), solid x 1553..1697. */
.btn-outline,.btn-solid{display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);font-size:15.5px;font-weight:600;padding:11px 22px;
  text-decoration:none;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.btn-outline{background:var(--white);color:var(--navy);border:1.5px solid var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-solid{background:var(--forest);color:#fff;border:1.5px solid var(--forest)}
.btn-solid:hover{background:#0e4a38;border-color:#0e4a38}
.btn-solid:focus-visible{outline-color:var(--forest)}

.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:9px 11px;cursor:pointer;color:var(--navy);margin-left:auto}

/* ═══ HERO ════════════════════════════════════════════════════════════
   The wash ends at y=529 while the laptops run to ~575, so the machines
   deliberately break out of the band and sit on the white below it. That
   overhang is the signature of this composition; it is reproduced with a
   negative margin on the stage rather than by faking a taller band. */
.hero{position:relative;background:
    linear-gradient(104deg,
      #f7faf9 0%, #f3f8f5 18%, #edf5ef 40%, #e4f0e4 60%, #dcecd8 78%, #d4e8cf 100%)}

/* The approved production foliage asset is NOT in the package (§8 item 5).
   This is the only unoccluded foliage in the mockup, lifted at native size so
   it is never upscaled at or below a 1774px viewport, and feathered on its
   left and bottom edges so it dissolves into the wash instead of ending on a
   seam. Replace the url() with the real art when it arrives — nothing else
   needs to change. */
/* Sized by WIDTH, not height: the previous rule scaled the band to 46% of the
   hero's height, which blew a 654x172 crop up to ~1281px wide and dragged its
   lower-left corner — which contained PulseAlert's nav bar, baked in from the
   mockup — across the headline. The asset is now cut from a region with no
   product chrome in it at all, and is never drawn above ~1.25x native. */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url("assets/hero-foliage.png") no-repeat right top;
  background-size:46% auto;opacity:.95}
/* Two layers in ONE rule. Adding a second `.hero::after` block would have
   silently replaced this one and taken the white-left fade with it — a
   duplicate pseudo-element does not merge, the later declaration just wins.
   Layer 1 fades the wash out at the bottom, which is §2's "soft transition to
   the next white section" in place of the hard border that made the hero feel
   chopped off. Layer 2 is the original left-side fade that keeps the headline
   on readable white. */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,0) 64%,#ffffff 97%),
    linear-gradient(100deg,rgba(255,255,255,.58) 0%,rgba(255,255,255,.34) 28%,rgba(255,255,255,0) 54%)}
.hero-inner{position:relative;z-index:2;width:var(--wrap);max-width:100%;margin:0 auto;
  padding:clamp(16px,1.5vw,28px) 0 clamp(16px,1.7vw,32px);
  display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  gap:clamp(18px,2vw,34px);align-items:center}

.hero h1{font-size:clamp(34px,3.72vw,66px);font-weight:700;line-height:1.04;
  letter-spacing:-.015em;color:var(--navy)}
.hero h1 .nline{display:block}
.hero h1 .gline{display:block;color:var(--forest)}
.hero-sub{font-size:clamp(16px,1.2vw,22px);line-height:1.38;color:var(--ink);
  margin:18px 0 14px;max-width:25em}
.hero-diff{font-size:clamp(16px,1.18vw,21px);font-weight:700;color:var(--navy);
  line-height:1.35;margin-bottom:22px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:16px}
.cta{display:inline-flex;align-items:center;gap:10px;border-radius:var(--r);
  font-size:clamp(15px,1vw,18px);font-weight:600;padding:15px 26px;text-decoration:none;
  transition:background .15s,color .15s,border-color .15s}
.cta-primary{background:var(--navy);color:#fff;border:1.5px solid var(--navy)}
.cta-primary:hover{background:var(--navy-700);border-color:var(--navy-700)}
.cta-primary:focus-visible{outline-color:var(--forest)}
.cta-secondary{background:rgba(255,255,255,.72);color:var(--navy);border:1.5px solid #c3cdd8}
.cta-secondary:hover{border-color:var(--navy);background:#fff}
.cta .arw{transition:transform .15s}
.cta:hover .arw{transform:translateX(4px)}

/* ── Laptops ──────────────────────────────────────────────────────────
   Measured down a column through the mockup's left machine (x=900), below the
   screen content:

     y 494..511   ~18px  dark chin   (21,28,33 -> 57,56,59)
     y 512..523   ~12px  silver base (220,222,225 -> 204,206,210)
     y 523..530   ~7px   contact shadow, fading to white by 536

   About 42px of chrome under a ~500px-wide screen. The previous build had 5px
   of bezel and a 9px bar — a third of that — which is why the machines read as
   dark rectangles rather than objects. Everything below is proportional (em of
   the frame width) so it holds at every size.

   This is CSS, not a photograph. It gets the structure right — chin, base lip,
   thumb notch, contact shadow, screen glass — but the mockup's machines are
   rendered art and a gradient will not fully match them. See README.md. */
.stage{position:relative;min-width:0;margin-bottom:-3%}
.laptop{position:absolute}
.laptop-screen{position:relative;
  background:linear-gradient(180deg,#2b3542 0%,#1d2631 62%,#161d26 100%);
  border-radius:1.9% 1.9% .6% .6%/2.4% 2.4% .8% .8%;
  padding:1.3% 1.3% 3.6%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11),
             inset 0 1px 0 rgba(255,255,255,.16),
             0 16px 26px -14px rgba(9,36,72,.42)}
/* The brand strip on the chin — the detail that reads "laptop" more than any
   other single cue. */
.laptop-screen::after{content:"";position:absolute;left:50%;bottom:1.15%;
  transform:translateX(-50%);width:13%;height:2px;border-radius:2px;
  background:rgba(255,255,255,.22)}
.laptop-screen img{width:100%;height:100%;object-fit:cover;object-position:top left;
  border-radius:2px;background:#0b1220;display:block}

/* Mockup: ~12px of base under a ~500px screen -> base width 113% of the frame,
   so the ratio is 565/12 = 47. */
.laptop-base{position:relative;aspect-ratio:47 / 1;width:113%;margin-left:-6.5%;
  background:linear-gradient(180deg,#f4f6f8 0%,#e2e6eb 26%,#c6ccd4 68%,#9ba3ae 100%);
  border-radius:0 0 8px 8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),
             0 3px 5px rgba(9,36,72,.18),
             0 16px 26px -10px rgba(9,36,72,.40)}
/* The dark seam where the lid meets the body. */
.laptop-base::before{content:"";position:absolute;left:5.5%;right:5.5%;top:0;height:2px;
  background:linear-gradient(180deg,rgba(9,20,34,.38),rgba(9,20,34,0))}
/* The thumb notch cut into the front lip. */
.laptop-base::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:11%;height:42%;background:#b4bbc4;border-radius:0 0 6px 6px}

/* Reference overlap: XRay spans x 680..1180 and PulseAlert 1105..1710, so the
   front machine covers ~15% of the back one. Both are larger relative to the
   column than the previous build, which is the other half of why the mockup
   reads as a product shot and ours did not. */
.laptop--xray{left:0;top:0;width:62%;z-index:1}
.laptop--xray .laptop-screen{aspect-ratio:964 / 785}
.laptop--pulse{right:0;top:19%;width:43%;z-index:2}
.laptop--pulse .laptop-screen{aspect-ratio:520 / 470}
.stage-spacer{display:block;width:100%;padding-top:52%}

/* ═══ PRODUCTS ════════════════════════════════════════════════════════ */
.section{position:relative;z-index:3;padding:clamp(20px,2.7vw,50px) 0 clamp(18px,1.7vw,30px)}
.section-head{text-align:center;margin:0 auto clamp(18px,1.7vw,30px)}
.section-head h2{font-size:clamp(26px,2.05vw,38px);font-weight:700;letter-spacing:-.012em;
  line-height:1.16;color:var(--navy)}
.section-head p{font-size:clamp(15px,1vw,17.5px);color:var(--ink);margin:9px auto 0;max-width:72ch}

/* Reference: cards 805 wide in a 1619 content box, 9px apart. */
/* Reference: cards 672 wide in a 1362 content box with a 14px gap. */
.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:stretch}
.pcard{border-radius:var(--r);padding:clamp(14px,1.05vw,20px) clamp(18px,1.4vw,26px);
  display:flex;align-items:flex-start;gap:clamp(16px,1.5vw,28px)}
.pcard-xray{background:var(--pale-blue)}
.pcard-pulse{background:var(--pale-sage)}
.pcard-icon{width:clamp(44px,3.1vw,56px);aspect-ratio:1;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center}
.pcard-xray .pcard-icon{background:#dceaf8}
.pcard-pulse .pcard-icon{background:var(--pulse-green)}
.pcard-body{min-width:0}
.pcard h3{font-size:clamp(19px,1.35vw,25px);font-weight:700;line-height:1.2;margin-bottom:5px}
.pcard-xray h3{color:var(--navy)}
.pcard-pulse h3{color:var(--forest)}
.pcard-intro{font-size:clamp(15px,1.02vw,18px);font-weight:700;color:var(--navy);margin-bottom:5px}
.pcard-pulse .pcard-intro{color:var(--forest)}
.pcard-text{font-size:clamp(14px,.92vw,16px);color:var(--ink);margin-bottom:5px;line-height:1.45}
.pcard-link{display:inline-flex;align-items:center;gap:8px;font-size:clamp(14px,.92vw,16px);
  font-weight:600;text-decoration:none}
.pcard-xray .pcard-link{color:var(--xray-blue)}
.pcard-pulse .pcard-link{color:var(--pulse-green)}
.pcard-link:hover{text-decoration:underline}
.pcard-link .arw{transition:transform .15s}
.pcard-link:hover .arw{transform:translateX(4px)}

/* ═══ BENEFITS ════════════════════════════════════════════════════════
   Reference dividers at x=428, 875, 1289 across a 77..1696 content box: four
   columns, icon to the LEFT of the text rather than above it. */
.benefits{position:relative;z-index:3;padding:clamp(20px,2vw,34px) 0 clamp(20px,2vw,36px)}
.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.benefit{display:flex;align-items:flex-start;gap:clamp(12px,1.1vw,20px);
  padding:0 clamp(14px,1.5vw,28px);border-left:1px solid var(--line)}
.benefit:first-child{border-left:0;padding-left:0}
.benefit-icon{width:clamp(28px,2.1vw,38px);flex-shrink:0;color:var(--navy);margin-top:1px}
.benefit h3{font-size:clamp(15px,1.07vw,19px);font-weight:700;line-height:1.2;
  color:var(--navy);margin-bottom:5px}
.benefit p{font-size:clamp(13px,.88vw,15.5px);color:var(--ink);line-height:1.45}

/* ═══ LEGAL / PROSE PAGES ═════════════════════════════════════════════ */
.doc{padding:clamp(40px,4vw,64px) 0 clamp(50px,5.5vw,84px)}
.doc .eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:14px}
.doc h1{font-family:var(--serif);font-size:clamp(32px,3.4vw,46px);font-weight:700;
  color:var(--navy);line-height:1.1;margin-bottom:10px}
.doc .updated{font-size:13.5px;color:var(--ink-soft);margin-bottom:32px}
.doc h2{font-family:var(--serif);font-size:23px;font-weight:700;color:var(--navy);
  margin:36px 0 12px;scroll-margin-top:100px}
.doc h3{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--navy);margin:26px 0 8px}
.doc p,.doc li{font-size:16px;color:var(--ink);line-height:1.65}
.doc p{margin-bottom:16px}
.doc ul,.doc ol{margin:0 0 16px 0;padding-left:22px}
.doc li{margin-bottom:9px}
.doc a{text-decoration:underline}
.divider{height:1px;background:var(--line-soft);margin:42px 0}
.callout{background:var(--pale-blue);border:1px solid #d7e6f6;border-radius:var(--r);
  padding:20px 24px;margin:26px 0}
.callout .ct{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--xray-blue);margin-bottom:9px}
.callout p{margin-bottom:0;font-size:15.5px}
.callout.warn{background:#fdf4f1;border-color:#f0cfc4}
.callout.warn .ct{color:#a6401f}
.callout.green{background:var(--pale-sage);border-color:#cfe6da}
.callout.green .ct{color:var(--forest)}

/* ═══ FOOTER ══════════════════════════════════════════════════════════
   Reference: a single hairline at y=826 and a compact 61px band under it. */
.site-footer{border-top:1px solid var(--line);padding:clamp(20px,2vw,34px) 0 clamp(18px,1.8vw,30px)}
.footer-grid{display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,.86fr) minmax(0,.78fr) minmax(0,.86fr) minmax(0,1.5fr);
  gap:clamp(16px,2vw,40px);align-items:start}
.footer-brand{display:flex;align-items:flex-start;gap:clamp(12px,1.2vw,22px)}
.footer-brand img{width:clamp(92px,7vw,118px);height:auto;flex-shrink:0}
.footer-diff{font-size:clamp(12px,.82vw,14px);color:var(--ink);line-height:1.45;max-width:22ch}
.footer-col h4{font-family:var(--sans);font-size:clamp(12px,.82vw,14px);font-weight:700;
  color:var(--navy);margin-bottom:7px}
.footer-col a{display:block;font-size:clamp(12px,.82vw,14px);color:var(--ink);
  text-decoration:none;margin-bottom:5px}
.footer-col a:hover{color:var(--xray-blue);text-decoration:underline}
.footer-entity h4{font-family:var(--sans);font-size:clamp(12px,.82vw,14px);font-weight:700;
  color:var(--navy);margin-bottom:7px}
.footer-entity p{font-size:clamp(11.5px,.78vw,13px);color:var(--ink-soft);line-height:1.5;margin-bottom:5px}
.footer-entity p:last-child{margin-bottom:0}

/* ═══ RESPONSIVE ══════════════════════════════════════════════════════ */
@media (max-width:1199px){
  :root{--header-h:74px}
  .logo-link img{width:140px}
  .main-nav>a,.menu-btn{font-size:14.5px}
  .hero-inner{grid-template-columns:minmax(0,1fr);gap:28px;padding-bottom:0}
  .hero-sub,.hero-diff{max-width:56ch}
  .stage{margin-bottom:-4%}
  .benefit-grid{grid-template-columns:repeat(2,1fr);gap:26px 0}
  .benefit:nth-child(3){border-left:0;padding-left:0}
  .footer-grid{grid-template-columns:repeat(3,1fr);gap:26px}
  .footer-brand{grid-column:1/-1}
  .footer-entity{grid-column:1/-1}
}
@media (max-width:959px){
  .header-actions .btn-outline,.header-actions .btn-solid,.header-divider{display:none}
  .product-grid{grid-template-columns:1fr;gap:12px}
}
@media (max-width:767px){
  .main-nav{display:none;margin:0}
  .main-nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:var(--header-h);left:0;right:0;background:var(--white);
    border-bottom:1px solid var(--line);padding:10px var(--gutter) 18px;box-shadow:var(--shadow-md)}
  .main-nav.open>a,.main-nav.open .menu-btn{padding:13px 0;width:100%;
    justify-content:space-between;min-height:44px}
  .main-nav.open .menu{width:100%}
  .main-nav.open .menu-list{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-left:2px solid var(--line);border-radius:0;
    padding:0 0 0 12px;margin:0 0 8px;display:none}
  .main-nav.open .menu[data-open="true"] .menu-list{display:block}
  .main-nav.open .menu-list a{min-height:44px;display:flex;flex-direction:column;justify-content:center}
  .nav-toggle{display:block;min-height:44px;min-width:44px}
  /* §2 asks for foliage "focused on the far right, fading toward the readable
     white left half". A single-column phone has no left half, so the art ends
     up directly behind the headline. It is pulled back to a top-corner accent
     and the white veil strengthened, which keeps the navy/forest headline on
     near-white rather than on leaves. */
  .hero::before{background-size:auto 26%;opacity:.5}
  .hero::after{background:
    linear-gradient(180deg,rgba(255,255,255,0) 72%,#ffffff 97%),
    linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.72) 38%,rgba(255,255,255,0) 72%)}

  /* §5: stacked on a phone, never overlaid, never clipped. The machines stop
     being a composition and become two plain blocks. */
  .stage{margin-bottom:0}
  .stage-spacer{display:none}
  .laptop{position:static;width:100%!important;margin-bottom:22px}
  /* The base is 116% wide with a negative margin so it reads as a laptop foot
     wider than the lid. That overhang lives inside the stage on desktop, but
     once the machine is full-width it breaks the viewport: measured 404px of
     content against a 375px screen. Flush at this size. */
  .laptop-base{width:100%;margin-left:0}
  .laptop--pulse .laptop-screen{aspect-ratio:1863 / 1150}
  .benefit-grid{grid-template-columns:1fr;gap:22px}
  .benefit{border-left:0;padding:0}
  .footer-grid{grid-template-columns:1fr 1fr}
  .cta{width:100%;justify-content:center}
}