/* ==========================================================================
   GoodForFree — Landing site design tokens (from Figma "landing Page")
   Desktop canvas 1440 · Mobile canvas 393
   ========================================================================== */
:root{
  /* Brand */
  --gf-green:        #0db583;
  --gf-green-dark:   #0a9c70;
  --gf-green-soft:   #e8f7f1;
  --gf-ink:          #111827;
  --gf-nav-link:     #4b5563;
  --gf-body:         #6f6f6f;   /* Figma variable "Body Text" */
  --gf-white:        #ffffff;
  --gf-surface:      #f2f4f5;   /* navbar / section tint */
  --gf-border:       #e5e5e5;
  --gf-dark:         #0b2d22;   /* dark CTA + footer */

  /* Type */
  --gf-font: 'Urbanist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Layout */
  --gf-maxw:    1440px;
  --gf-gutter:  140px;   /* desktop page gutter */
  --gf-content: 1160px;  /* 1440 - (140*2) */
  --gf-radius:  8px;
}

@media (max-width: 1200px){ :root{ --gf-gutter: 64px; } }
@media (max-width: 900px){  :root{ --gf-gutter: 32px; } }
@media (max-width: 600px){  :root{ --gf-gutter: 20px; } }
/* Reset + base */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  font-family:var(--gf-font);
  color:var(--gf-body);
  background:var(--gf-white);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
ul,ol{ list-style:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
h1,h2,h3,h4{ color:var(--gf-ink); font-weight:700; line-height:1.15 }

/* Page shell — centres content and applies the Figma gutter */
.gf-shell{
  width:100%;
  max-width:var(--gf-maxw);
  margin-inline:auto;
  padding-inline:var(--gf-gutter);
}

/* Shared button */
.gf-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--gf-radius);
  font-weight:600; font-size:15px; line-height:22.5px;
  padding:10.5px 24px; white-space:nowrap;
  transition:background .15s ease, opacity .15s ease;
}
.gf-btn--primary{ background:var(--gf-green); color:#fff }
.gf-btn--primary:hover{ background:var(--gf-green-dark) }
.gf-btn--ghost{ background:#fff; color:var(--gf-ink); border:1px solid var(--gf-border) }
.gf-btn__icon{ width:16px; height:16px; flex:0 0 16px }

.gf-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* ===== Navbar — Figma 664:106 (1440x64) ===================================
   bg #f2f4f5 · border-bottom #e5e5e5 · px 140 · py 9
   links: Urbanist Medium 16/24 #4b5563 · gap 31.992
   button: #0db583, radius 8, px 24 py 10.5, icon 15.991, text 15/22.5 semibold
   ========================================================================= */
.gf-nav{
  background:var(--gf-surface);
  border-bottom:1px solid var(--gf-border);
  position:sticky; top:0; z-index:100;
}
.gf-nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:9px; min-height:64px;
}
.gf-nav__logo{ display:block; width:107.52px; height:34px; flex:0 0 auto }
.gf-nav__logo img{ width:100%; height:100%; object-fit:contain }

.gf-nav__menu{ display:flex; align-items:center; gap:31.992px }
.gf-nav__link{
  font-weight:500; font-size:16px; line-height:24px;
  color:var(--gf-nav-link); white-space:nowrap;
  transition:color .15s ease;
}
.gf-nav__link:hover,
.gf-nav__link[aria-current="page"]{ color:var(--gf-green) }

/* Figma "landing Page - Mobile Version" navbar hamburger: 3 dark bars,
   24x2px, 5px gap, colour #191919, no box/border. (Previous build used a
   bordered white box / lighter bars that read as faint.) */
.gf-nav__toggle{ display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:40px; height:40px; border-radius:10px; background:transparent; border:0; cursor:pointer }
.gf-nav__toggle span{ display:block; width:24px; height:2px; background:#191919; transition:transform .2s, opacity .2s }
.gf-nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.gf-nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.gf-nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* Mobile — Figma mobile navbar 393x68 */
@media (max-width: 900px){
  .gf-nav__inner{ min-height:68px }
  .gf-nav__toggle{ display:flex }
  .gf-nav__menu{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--gf-surface);
    border-bottom:1px solid var(--gf-border);
    box-shadow:0 10px 24px rgba(0,0,0,.08);
    padding:8px 0 16px;
    display:none;
  }
  .gf-nav__menu.is-open{ display:flex }
  .gf-nav__link{ padding:12px var(--gf-gutter) }
  .gf-nav__menu .gf-btn{ margin:8px var(--gf-gutter) 0 }
}
/* ===== Hero — Figma "Frame 48" (1440 x 1076.84) =========================
   Base #f2f4f5 + decorative blurred graphic (1314x1276 @ x63/y266.5,
   10% opacity, Darken blend, layer blur) exported as hero-bg-decor.png.
   Measured rhythm from the 1440x1077 reference render:
     padding-top 100 · badge y103 (h28) · headline 3x64 from y157
     subtitle 3x27 · buttons y477 (h56) · avatars y569 (h32)
     media y648 (h329) · padding-bottom 100
   ======================================================================= */
.gf-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#f2f4f5;
}
/* exported decorative wash — blur + 10% opacity already baked in */
.gf-hero__bg{
  position:absolute;
  left:50%; top:203px;
  width:1440px; height:911px;
  margin-left:-720px;
  background:url('../img/hero-bg-decor.png') no-repeat center top;
  background-size:1440px 911px;
  mix-blend-mode:darken;
  pointer-events:none;
  z-index:0;
}

.gf-hero__inner{
  position:relative; z-index:1;
  width:100%;
  max-width:calc(504px + 936px);
  margin-inline:auto;
  padding:100px 468px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.gf-hero__inner > *{ width:100%; max-width:504px }

/* Badge — pill, h28 */
.gf-hero__badge{
  display:inline-flex; align-items:center; gap:6px;
  align-self:center; width:auto !important;
  height:28px; padding:0 14px; border-radius:999px;
  background:rgba(13,181,131,.10);
  color:var(--gf-green);
  font-size:14px; font-weight:600; line-height:19.5px;
  white-space:nowrap;
}

/* Title — Urbanist ExtraBold 48/64 */
.gf-hero__title{
  margin:13px 0 0;
  font-size:48px; line-height:64px; font-weight:800;
  letter-spacing:0; color:#191919;
}
.gf-hero__title span{ color:var(--gf-green) }

/* Subtitle — Urbanist Regular 18/27 */
.gf-hero__sub{
  margin:0; font-size:18px; line-height:27px; font-weight:400;
  color:var(--gf-body);
}

/* Buttons — row, h56 */
.gf-hero__actions{
  display:flex; align-items:center; justify-content:center; gap:16px;
  flex-wrap:wrap; margin-top:45px;
}
.gf-hero__cta{
  height:56px; padding:0 24px;
  font-size:16px; line-height:24px; border-radius:8px;
}

/* Members row — 5 x 32px avatars, -12px overlap */
.gf-hero__members{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:36px; width:auto !important;
}
.gf-hero__avatars{ width:112px; height:32px; flex:0 0 auto; object-fit:contain }
.gf-hero__members-text{ text-align:left; line-height:1.3 }
.gf-hero__members-text strong{ display:block; font-size:14px; font-weight:700; color:#191919 }
.gf-hero__members-text span{ display:block; font-size:13px; color:var(--gf-body) }

/* Media collage — 504 x 328.84 (export bakes rounding + shadow) */
.gf-hero__media{
  position:relative; margin:47px 0 0;
  aspect-ratio:1008 / 688;
}
.gf-hero__media img{ width:100%; height:100%; object-fit:contain }
/* carousel dots live inside the exported collage */
.gf-hero__dots{ display:none }

/* ---------- Responsive ---------- */
@media (max-width:1200px){
  .gf-hero__inner{ padding:80px var(--gf-gutter) }
}
@media (max-width:900px){
  .gf-hero__inner{ padding:64px var(--gf-gutter) }
  .gf-hero__title{ font-size:36px; line-height:48px }
  .gf-hero__actions{ margin-top:32px }
  .gf-hero__members{ margin-top:28px }
  .gf-hero__media{ margin-top:36px }
  .gf-hero__bg{ top:120px }
}
@media (max-width:600px){
  .gf-hero__inner{ padding:48px var(--gf-gutter) }
  .gf-hero__title{ font-size:30px; line-height:40px }
  .gf-hero__sub{ font-size:16px; line-height:25px }
  .gf-hero__actions{ flex-direction:column; align-items:stretch; gap:12px }
  .gf-hero__actions .gf-btn{ width:100% }
}
/* ===== IMPACT — "Together, we're making a difference" ======================
   All values sampled from assets/ref/sec-03-impact.png (1440 x 846, bg #fff).

   Sampled colours
     eyebrow pill bg  #ecf9f5  (= rgba(13,181,131,.08) on white)
     eyebrow ink      #0db583
     heading ink      #191919
     lede / step ink  #6f6f6f
     arrow stroke     #0db583   (2.5px, round caps)
     icon 1 & 4 bg    #e2f6f0  (= rgba(13,181,131,.12))   glyph #0db583
     icon 2 bg        #e7f0fe  (= rgba(59,130,246,.12))   glyph #3b82f6
     icon 3 bg        #fef5d9  (= rgba(245,184,0,.15))    glyph #f5b800

   Measured rhythm (page y)
     pad-top 80 · pill 79..111 (h33, w186) · h2 cap 140..162 (32px, cap 23)
     lede baselines 24 apart from y191 · stage 286..766 · pad-bottom 80
   Measured stage 719x480 (page x361..1080, y286..766)
     photo   339x300 @ (192,90)   r16  shadow 0 8px 40px rgba(0,0,0,.12)
     cards   184 wide, h≈141      r16  shadow 0 8px 15px rgba(0,0,0,.10)
       1 (31,20)  2 (525,50)  3 (494,299)  4 (19,269)
     card 3 paints OVER the photo; cards 1, 2 and 4 sit UNDER it.
   ========================================================================= */
.gf-impact{
  --gf-impact-heading:#191919;
  --gf-impact-blue:#3b82f6;
  --gf-impact-amber:#f5b800;
  background:#fff;
  padding-block:80px;
}

.gf-impact__inner{
  display:flex; flex-direction:column; align-items:center; gap:54px;
}

/* ---------- Header ---------------------------------------------------- */
.gf-impact__head{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  width:100%;
}

/* pill 186 x 33 — 14/21 + 6/16 padding */
.gf-impact__eyebrow{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 16px; border-radius:999px;
  background:rgba(13,181,131,.08);
  color:var(--gf-green);
  font-weight:600; font-size:14px; line-height:21px;
  white-space:nowrap;
}

.gf-impact__headings{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width:100%; text-align:center;
}
.gf-impact__title{
  font-weight:800; font-size:32px; line-height:48px; letter-spacing:0;
  color:var(--gf-impact-heading);
  max-width:100%;
}
.gf-impact__lede{
  font-weight:400; font-size:16px; line-height:24px;
  color:var(--gf-body);
  width:498px; max-width:100%;
}

/* ---------- Circular flow diagram (desktop stage 719 x 480) ----------- */
.gf-impact__visual{
  position:relative;
  width:719px; max-width:100%; height:480px;
  margin-inline:auto;
}

/* Curved connectors — inline SVG in stage coordinates */
.gf-impact__arrows{
  position:absolute; left:0; top:0;
  width:719px; height:480px;
  color:var(--gf-green);
  overflow:visible; pointer-events:none;
  z-index:0;
}

.gf-impact__media{
  position:absolute; left:192px; top:90px;
  width:339px; height:300px;
  border-radius:16px; overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,.12);
  z-index:2;
}
.gf-impact__media img{
  display:block; width:100%; height:100%; object-fit:cover;
}

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

.gf-impact__step{ position:absolute; width:184px; z-index:1 }
.gf-impact__step--1{ left:31px;  top:20px }
.gf-impact__step--2{ left:525px; top:50px }
.gf-impact__step--3{ left:494px; top:299px; z-index:3 }  /* sits over the photo */
.gf-impact__step--4{ left:19px;  top:269px }

.gf-impact__card{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  background:#fff;
  border-radius:16px;
  padding:24px;
  box-shadow:0 8px 15px rgba(0,0,0,.1);
}

.gf-impact__meta{
  display:flex; align-items:center; gap:10px;
  height:32px;
}
.gf-impact__icon{
  flex:0 0 28px; width:28px; height:28px; margin-left:1px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
}
.gf-impact__icon svg{ display:block; width:14px; height:14px }
.gf-impact__icon--green{ background:rgba(13,181,131,.12); color:var(--gf-green) }
.gf-impact__icon--blue { background:rgba(59,130,246,.12); color:var(--gf-impact-blue) }
.gf-impact__icon--amber{ background:rgba(245,184,0,.15);  color:var(--gf-impact-amber) }

.gf-impact__num{
  font-weight:500; font-size:14px; line-height:21px;
  color:var(--gf-body); white-space:nowrap;
}
.gf-impact__step-title{
  font-weight:800; font-size:22px; line-height:26.4px;
  color:var(--gf-impact-heading);
  width:136px;                       /* forces the two-line wrap of the ref */
}

/* Vertical connector used only in the stacked mobile layout */
.gf-impact__flow{ display:none; color:var(--gf-green) }

/* ==========================================================================
   Responsive — the ring collapses to a single vertical stack
   ========================================================================== */
@media (max-width: 900px){
  .gf-impact{ padding-block:64px }
  .gf-impact__inner{ gap:40px }
  .gf-impact__title{ font-size:30px; line-height:40px }

  .gf-impact__visual{
    display:flex; flex-direction:column; align-items:stretch;
    width:100%; max-width:480px; height:auto; gap:28px;
  }

  .gf-impact__arrows{ display:none }          /* curves make no sense stacked */

  .gf-impact__media{
    position:static; order:-1;
    width:100%; height:260px;
  }

  .gf-impact__steps{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    width:100%;
  }
  .gf-impact__step,
  .gf-impact__step--1,
  .gf-impact__step--2,
  .gf-impact__step--3,
  .gf-impact__step--4{
    position:static; left:auto; top:auto; width:100%; z-index:auto;
  }

  .gf-impact__card{ width:100%; padding:20px 24px }
  .gf-impact__step-title{ width:auto }

  .gf-impact__flow{
    display:flex; align-items:center; justify-content:center;
    width:100%; height:36px;
  }
  .gf-impact__flow svg{ display:block; width:20px; height:32px }
}

@media (max-width: 600px){
  .gf-impact{ padding-block:56px }
  .gf-impact__inner{ gap:32px }
  .gf-impact__head{ gap:14px }
  .gf-impact__title{ font-size:26px; line-height:34px }
  .gf-impact__lede{ font-size:15px; line-height:23px }

  .gf-impact__visual{ gap:24px; max-width:100% }
  .gf-impact__media{ height:220px }
  .gf-impact__card{ padding:18px 20px }
  .gf-impact__meta{ height:28px; gap:8px }
  .gf-impact__step-title{ font-size:20px; line-height:24px }
  .gf-impact__flow{ height:30px }
  .gf-impact__flow svg{ height:28px }
}
/* ==========================================================================
   HOW TO INSTALL — desktop 1440x1584
   Every value below was sampled/measured from the full-res Figma renders
   assets/ref/sec-04-install-a.png (1440x793) + sec-04-install-b.png (1440x791).

   Sampled colours
     section bg      #f7f9f8
     eyebrow pill    rgba(13,181,131,.08)  (renders #e5f3ef on the section bg)
     eyebrow text    #0db583  (--gf-green)
     headings        #191919
     body copy       #6f6f6f  (--gf-body)
     step numerals   #e1f3ed
     centre rule     #aee4d3   4px wide x 1164px tall
     CTA fill        #0db583 / label #ffffff

   Measured desktop geometry (y = distance from section top)
     padding-block 80 - content column 984 wide, centred (x 228 -> 1211)
     eyebrow pill  y 80..111   (14/19.5, 6px 15px pad)
     h2            y 128..175  (32/48 ExtraBold, baseline 163)
     steps wrapper y 220..1384 (padding-block 43, rule spans full height)
       step 1 media 460x275 @ y263, copy starts y287
       step 2 media 460x294 @ y655, copy starts y708
       step 3 media 460x294 @ y1047, copy starts y1118
     CTA           y 1447..1503 (220x57, radius 8)
   ========================================================================== */

.gf-install{
  --gf-install-bg:#f7f9f8;
  --gf-install-heading:#191919;
  --gf-install-numeral:#e1f3ed;
  --gf-install-rule:#aee4d3;
  --gf-install-col:460px;   /* text column and media column are both 460 */
  --gf-install-colgap:64px; /* 460 + 64 + 460 = 984 */

  background:var(--gf-install-bg);
  padding-block:80px;
}

.gf-install__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width:984px;
  margin-inline:auto;
}

/* ---------- Header ------------------------------------------------------ */
.gf-install__head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  text-align:center;
}

.gf-install__eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(13,181,131,.08);
  color:var(--gf-green);
  font-weight:600;
  font-size:14px;
  line-height:19.5px;
  padding:6px 15px;
  border-radius:999px;
  white-space:nowrap;
}

.gf-install__title{
  font-weight:800;
  font-size:32px;
  line-height:48px;
  color:var(--gf-install-heading);
}

/* ---------- Steps ------------------------------------------------------- */
.gf-install__steps{
  position:relative;
  width:100%;
  margin-top:44px;
  padding-block:43px;
}

/* vertical rule running the full height of the steps block */
.gf-install__steps::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:4px;
  background:var(--gf-install-rule);
}

.gf-install__step{
  display:grid;
  grid-template-columns:var(--gf-install-col) var(--gf-install-col);
  column-gap:var(--gf-install-colgap);
  align-items:start;
}

/* zig-zag: 01 + 03 copy left / media right, 02 media left / copy right */
.gf-install__step--2 .gf-install__copy{ grid-column:2; grid-row:1 }
.gf-install__step--2 .gf-install__media{ grid-column:1; grid-row:1 }

/* measured row rhythm */
.gf-install__step--2{ margin-top:117px }
.gf-install__step--3{ margin-top:98px }

/* measured copy offsets inside each row */
.gf-install__step--1 .gf-install__copy{ padding-top:24px }
.gf-install__step--2 .gf-install__copy{ padding-top:53px }
.gf-install__step--3 .gf-install__copy{ padding-top:71px }

/* ---------- Step copy --------------------------------------------------- */
.gf-install__copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}

.gf-install__num{
  font-weight:800;
  font-size:56px;
  line-height:1;
  color:var(--gf-install-numeral);
}

.gf-install__step-title{
  font-weight:800;
  font-size:24px;
  line-height:1.4;
  color:var(--gf-install-heading);
}

.gf-install__step-text{
  font-weight:400;
  font-size:16px;
  line-height:28px;
  color:var(--gf-body);
  max-width:370px;   /* reproduces the Figma line breaks */
}

/* ---------- Step media -------------------------------------------------- */
.gf-install__media{
  width:var(--gf-install-col);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 30px rgba(0,0,0,.10);
}
.gf-install__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.gf-install__media--1{ height:275px }
.gf-install__media--2{ height:294px }
.gf-install__media--3{ height:294px }

/* ---------- CTA --------------------------------------------------------- */
.gf-install__actions{
  display:flex;
  justify-content:center;
  width:100%;
  margin-top:63px;
}

.gf-install__cta{
  gap:10px;
  font-size:16px;
  line-height:23px;
  padding:17px 33px;   /* -> 220 x 57 */
  border-radius:var(--gf-radius);
}

/* ==========================================================================
   Responsive — the zig-zag collapses to one stacked column
   ========================================================================== */
@media (max-width: 900px){
  .gf-install{ padding-block:64px }

  .gf-install__inner{ max-width:560px }

  .gf-install__title{ font-size:30px; line-height:40px }

  .gf-install__steps{
    margin-top:36px;
    padding-block:0;
  }
  .gf-install__steps::before{ display:none }

  .gf-install__step{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:24px;
  }

  /* reset every desktop-only offset */
  .gf-install__step--2{ margin-top:56px }
  .gf-install__step--3{ margin-top:56px }

  .gf-install__step--1 .gf-install__copy{ padding-top:0 }
  .gf-install__step--2 .gf-install__copy{ padding-top:0 }
  .gf-install__step--3 .gf-install__copy{ padding-top:0 }

  .gf-install__num{ font-size:44px }
  .gf-install__step-title{ font-size:22px }
  .gf-install__step-text{ max-width:none }

  .gf-install__media{ width:100%; height:auto }
  .gf-install__media--1{ height:auto }
  .gf-install__media--2{ height:auto }
  .gf-install__media--3{ height:auto }
  .gf-install__media img{ height:auto }

  .gf-install__actions{ margin-top:48px }
}

@media (max-width: 600px){
  .gf-install{ padding-block:56px }

  .gf-install__title{ font-size:26px; line-height:34px }
  .gf-install__eyebrow{ font-size:13px; line-height:18px }

  .gf-install__steps{ margin-top:28px }
  .gf-install__step{ gap:20px }
  .gf-install__step--2{ margin-top:44px }
  .gf-install__step--3{ margin-top:44px }

  .gf-install__num{ font-size:38px }
  .gf-install__step-title{ font-size:20px; line-height:1.3 }
  .gf-install__step-text{ font-size:15px; line-height:26px }

  .gf-install__media{ border-radius:10px }

  .gf-install__actions{ margin-top:40px }
  .gf-install__cta{
    width:100%;
    max-width:320px;
    padding:15px 24px;
  }
}
/* ===== VIDEO — Figma "Frame 70" (desktop 1440x706) ========================
   Every value below was sampled/measured off assets/ref/sec-05-video.png
   (1:1 export, 1440 wide):

     section bg           #ffffff            padding-block 80
     h2                   Urbanist ExtraBold 32/48  #191919, centred
                          (ink rows y90-115, cap height 23px, stems 4.4px)
     gap heading→poster   48
     poster               800 x 450 (16:9), x320-1119 / y176-625,
                          corner radius 12, no border, no shadow
     play control         80 x 80 circle #0db583, centred on the poster
                          (x680-759 / y361-440), no shadow / ring
     play triangle        solid #ffffff, ink 21 x 26, sharp corners,
                          centroid sitting on the circle centre
   Vertical budget: 80 + 48(line box) + 48 + 450 + 80 = 706 ✓
   ========================================================================= */
.gf-video{
  --gf-video-ink:#191919;          /* measured heading ink */
  background:var(--gf-white);
  padding-block:80px;
}

.gf-video__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* ---- Heading --------------------------------------------------------- */
.gf-video__title{
  max-width:100%;
  font-weight:800;
  font-size:32px;
  line-height:48px;
  letter-spacing:0;
  color:var(--gf-video-ink);
}

/* ---- Player ---------------------------------------------------------- */
.gf-video__player{
  position:relative;
  width:100%;
  max-width:800px;
  margin-top:48px;
  border-radius:12px;
  overflow:hidden;
}
.gf-video__poster{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
}

/* ---- Play control (real <button>) ------------------------------------ */
.gf-video__play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:80px;
  height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--gf-green);
  color:var(--gf-white);
  transition:background .18s ease, transform .18s ease;
}
.gf-video__play:hover{
  background:var(--gf-green-dark);
  transform:translate(-50%,-50%) scale(1.05);
}
.gf-video__play:focus-visible{
  outline:3px solid var(--gf-white);
  outline-offset:3px;
}
/* 35% of the control = 28px wide at 80px; the height follows the 28x26
   viewBox, and the path is drawn so the triangle centroid — not its
   bounding box — lands on the circle centre, exactly as in the render. */
.gf-video__play-icon{
  display:block;
  width:35%;
  height:auto;
}

/* ---- Tablet ---------------------------------------------------------- */
@media (max-width:900px){
  .gf-video{ padding-block:56px }
  .gf-video__title{ font-size:26px; line-height:36px }
  .gf-video__player{ margin-top:32px; border-radius:10px }
  .gf-video__play{ width:64px; height:64px }
}

/* ---- Mobile ---------------------------------------------------------- */
@media (max-width:600px){
  .gf-video{ padding-block:44px }
  .gf-video__title{ font-size:22px; line-height:30px }
  .gf-video__player{ margin-top:24px; border-radius:8px }
  .gf-video__play{ width:56px; height:56px }
}

@media (prefers-reduced-motion:reduce){
  .gf-video__play{ transition:none }
  .gf-video__play:hover{ transform:translate(-50%,-50%) }
}
/* ===== TRANSPARENCY — Figma "Frame 77" (desktop 1440x634) =================
   Every value below was sampled/measured off
   assets/ref/sec-06-transparency.png (1:1 export, 1440 wide):

     section bg      #f7f9f8            padding-block 80
     content track   1216 wide (cards x112-1327) → 112 gutter at 1440
     h2              Urbanist ExtraBold 32/48 #191919 (ink y90-122, cap 23)
     lede            Regular 16/24 #6f6f6f, 2 lines, +16 under the h2
     grid            3 x 384, gap 32, +44 under the lede  (cards y236-460)
     card            bg #f1f4f3 · 1px #e5e7eb · radius 12 · padding 32 · 225 tall
       tile          56 x 56 · radius 12 · bg #dfefea
       icon          28px, 24-viewBox stroke-width 2 (2.33px on screen) #0db583
       title         Bold 18/26 #191919, +19 under the tile
       body          Regular 15/26 #6f6f6f, +8 under the title
     button          252 x 49 · 1.75px #0db583 · radius 8 · transparent fill
                     label SemiBold 15/22.5 #0db583 · +44 under the grid

   Vertical budget: 80 + 48 + 16 + 48 + 44 + 225 + 44 + 49 + 80 = 634 ✓
   ========================================================================= */
.gf-tcards{
  --gf-tcards-ink:#191919;         /* measured heading / card-title ink */
  --gf-tcards-bg:#f7f9f8;          /* measured section wash            */
  --gf-tcards-card:#f1f4f3;        /* measured card fill               */
  --gf-tcards-line:#e5e7eb;        /* measured card stroke             */
  --gf-tcards-tile:#dfefea;        /* measured icon tile               */
  background:var(--gf-tcards-bg);
  padding-block:80px;
}

/* 1440 − 1216 track = 112 gutter; wider than the 140 page gutter, so the
   shell padding is overridden for this section only. */
.gf-tcards__inner{
  padding-inline:112px;
  text-align:center;
}

/* ---- Header ---------------------------------------------------------- */
.gf-tcards__title{
  font-weight:800;
  font-size:32px;
  line-height:48px;
  letter-spacing:0;
  color:var(--gf-tcards-ink);
}
.gf-tcards__lede{
  margin:16px auto 0;
  max-width:540px;                 /* holds the Figma break after "makes a" */
  font-weight:400;
  font-size:16px;
  line-height:24px;
  color:var(--gf-body);
}

/* ---- Card grid ------------------------------------------------------- */
.gf-tcards__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px;
  margin-top:44px;
}

.gf-tcards__card{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:31px 32px;               /* Figma 32 padding − the 1px inset stroke */
  background:var(--gf-tcards-card);
  border:1px solid var(--gf-tcards-line);
  border-radius:12px;
  text-align:center;
}

.gf-tcards__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:56px;
  height:56px;
  border-radius:12px;
  background:var(--gf-tcards-tile);
  color:var(--gf-green);
}
.gf-tcards__icon svg{ display:block; width:28px; height:28px }

.gf-tcards__card-title{
  margin-top:19px;
  font-weight:700;
  font-size:18px;
  line-height:26px;
  color:var(--gf-tcards-ink);
}
.gf-tcards__card-text{
  margin-top:8px;
  max-width:315px;                 /* holds the Figma line breaks in all 3 cards */
  font-weight:400;
  font-size:15px;
  line-height:26px;
  color:var(--gf-body);
}

/* ---- Outline CTA ----------------------------------------------------- */
.gf-tcards__btn{
  /* block-level flex so the 44px gap is exact — an inline-flex button would
     pick up the line-box strut of the centred container. */
  display:flex;
  width:max-content;
  max-width:100%;
  margin:44px auto 0;
  padding-block:11.5px;            /* 22.5 line + 23 padding + 3.5 stroke = 49 */
  gap:6px;
  background:transparent;
  border:1.75px solid var(--gf-green);
  color:var(--gf-green);
  transition:background .15s ease, color .15s ease;
}
.gf-tcards__btn:hover{ background:rgba(13,181,131,.08) }
.gf-tcards__btn:focus-visible{ outline:2px solid var(--gf-green); outline-offset:2px }

/* ---- Below the 1216 track the page gutter takes over ------------------ */
@media (max-width:1200px){
  .gf-tcards__inner{ padding-inline:var(--gf-gutter) }
}

/* ---- Tablet / mobile — single column ---------------------------------- */
@media (max-width:900px){
  .gf-tcards{ padding-block:56px }
  .gf-tcards__title{ font-size:26px; line-height:36px }
  .gf-tcards__lede{ margin-top:12px }
  .gf-tcards__grid{
    grid-template-columns:1fr;
    gap:20px;
    margin:36px auto 0;
    max-width:480px;
  }
  .gf-tcards__btn{ margin-top:36px }
}

@media (max-width:600px){
  .gf-tcards{ padding-block:44px }
  .gf-tcards__title{ font-size:22px; line-height:30px }
  .gf-tcards__lede{ font-size:15px; line-height:23px }
  .gf-tcards__grid{ gap:16px; margin-top:28px }
  .gf-tcards__card{ padding:23px 20px }
  .gf-tcards__icon{ width:48px; height:48px; border-radius:10px }
  .gf-tcards__icon svg{ width:24px; height:24px }
  .gf-tcards__card-title{ margin-top:16px; font-size:17px; line-height:24px }
  .gf-tcards__card-text{ margin-top:8px; max-width:none; font-size:15px; line-height:24px }
  .gf-tcards__btn{ margin-top:28px; width:100% }
}
/* ===== FAQ accordion — measured from assets/ref/sec-07-faq.png (1440x630) =====
   Vertical budget @1440 (px positions read off the render):
     0            section top (white)
     92 .. 115    title cap-box            → 32px/700, line-height 1.15
     175 .. 549   five items (66px each, 12px gaps)
     629          section bottom
   Item track measured x360..x1079 → 720px wide, centred on the 1440 canvas.
   Sampled colours: card #f7f9f8 · border #eceef0 · title #191919
                    question #111827 · chevron #4b5563
   ============================================================================ */
.gf-faq{
  background:#fff;
  padding-block:88px 80px;
}

/* ---- Section title ---- */
.gf-faq__title{
  margin:0 0 48px;
  text-align:center;
  font-size:32px;
  line-height:1.15;
  font-weight:700;
  color:#191919;
}

/* ---- Item track ---- */
.gf-faq__list{
  max-width:720px;      /* measured x360..x1079 */
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.gf-faq__item{
  background:#f7f9f8;
  border:1px solid #eceef0;
  border-radius:16px;
  overflow:hidden;
}

.gf-faq__row{
  margin:0;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
  color:inherit;
}

/* ---- Question row: 20px padding + 24px line box + 1px borders = 66px ---- */
.gf-faq__q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  padding:20px;
  text-align:left;
  font-size:16px;
  line-height:24px;
  font-weight:500;
  color:var(--gf-ink);
  transition:color .15s ease;
}
.gf-faq__q:hover{ color:var(--gf-green) }
.gf-faq__q:focus-visible{
  outline:2px solid var(--gf-green);
  outline-offset:-3px;
  border-radius:15px;
}

.gf-faq__q-text{ display:block }

.gf-faq__chev{
  flex:0 0 20px;
  width:20px;
  height:20px;
  color:#4b5563;
  transition:transform .28s ease, color .15s ease;
}
.gf-faq__item.is-open .gf-faq__chev{
  transform:rotate(180deg);
  color:var(--gf-green);
}

/* ---- Answer panel (collapsed in the reference render) ---- */
.gf-faq__panel{
  display:grid;
  grid-template-rows:0fr;
  visibility:hidden;
  transition:grid-template-rows .28s ease, visibility 0s linear .28s;
}
.gf-faq__item.is-open .gf-faq__panel{
  grid-template-rows:1fr;
  visibility:visible;
  transition:grid-template-rows .28s ease, visibility 0s;
}
.gf-faq__panel-inner{ overflow:hidden }
.gf-faq__panel-inner p{
  margin:0;
  padding:0 20px 20px;
  font-size:16px;
  line-height:26px;
  font-weight:400;
  color:var(--gf-body);
}

/* ---- Tablet ---- */
@media (max-width:900px){
  .gf-faq{ padding-block:64px 56px }
  .gf-faq__title{ margin-bottom:32px; font-size:28px }
  .gf-faq__q{ padding:18px 20px; font-size:15px; line-height:23px }
  .gf-faq__panel-inner p{ padding:0 20px 18px; font-size:15px; line-height:25px }
}

/* ---- Mobile (Figma mobile canvas 393) ---- */
@media (max-width:600px){
  .gf-faq{ padding-block:44px 40px }
  .gf-faq__title{ margin-bottom:24px; font-size:24px }
  .gf-faq__list{ gap:10px }
  .gf-faq__item{ border-radius:12px }
  .gf-faq__q{ gap:12px; padding:16px; font-size:15px }
  .gf-faq__chev{ flex-basis:18px; width:18px; height:18px }
  .gf-faq__panel-inner p{ padding:0 16px 16px; font-size:14px; line-height:23px }
}

@media (prefers-reduced-motion:reduce){
  .gf-faq__panel,
  .gf-faq__item.is-open .gf-faq__panel,
  .gf-faq__chev{ transition:none }
}
/* ===== Closing CTA + footer — measured from ref/sec-08-cta-footer.png ========
   Canvas 1440x869.  CTA = y0..515, footer = y516..869.

   SAMPLED BACKGROUND COLOURS
     footer  : flat  #00140e                       (the dark green base)
     CTA     : diagonal sheen over the same base —
               corner (0,0) #00140e · ridge #012016 · corner (1440,515) #00150f
               ridge runs down-left, gradient axis ≈ 160deg, peak at ~49%
   SAMPLED FOREGROUND COLOURS
     heading / column headings  #ffffff
     CTA sub      #bfc7c5  = rgba(255,255,255,.75) over the CTA base
     CTA note     #60716c  = rgba(255,255,255,.38)
     links + tagline #99a19f = rgba(255,255,255,.60) over #00140e
     copyright    #596662  = rgba(255,255,255,.35)
     button fill  #0db583 (--gf-green), radius 8px, box 256x61
     hairline     ~4.7% white → rgba(255,255,255,.05)

   VERTICAL POSITIONS READ OFF THE RENDER
     CTA    80 mark(56) · 40 · title(40/1.15) · 16 · sub(2x28) · 44 · btn(61)
            · 18 · note(13/19.5) · 80
     FOOTER 80 · grid(157) · 47 · hairline · 24 · copy(19.5) · 24   = 353
   HORIZONTAL: footer content x120..x1319 → 1200px inside 120px gutters.
     Column starts x120 / x426 / x741 / x1057 → 253px brand + 3x263px, gap 53px.
   ============================================================================ */

/* ==========================================================================
   1. CTA
   ========================================================================== */
.gf-cta{
  background-color:#00140e;
  background-image:linear-gradient(160deg,#00140e 0%,#012016 49%,#00150f 100%);
  padding-block:80px;
  color:#fff;
}
.gf-cta__inner{ text-align:center }

.gf-cta__mark{
  display:block;
  width:auto;
  height:56px;          /* measured y82..137, x692..751 */
  margin:0 auto 40px;
}

.gf-cta__title{
  margin:0;
  font-size:40px;       /* ascender stem measured 30.0px */
  line-height:1.15;
  font-weight:700;
  color:#fff;
}

.gf-cta__sub{
  max-width:640px;      /* line 1 wraps at 599px → container 600..660 */
  margin:16px auto 0;
  font-size:16px;
  line-height:28px;     /* measured baseline pitch */
  font-weight:400;
  color:rgba(255,255,255,.75);
}

/* Button box measured 256x61 → 18.5px block padding on a 24px line box. */
.gf-cta__btn{
  display:flex;              /* block-level flex: no inline line-box leading */
  width:max-content;
  margin:44px auto 0;
  gap:10px;
  padding:18.5px 40px;
  font-size:16px;
  line-height:24px;
  font-weight:700;
  border-radius:var(--gf-radius);
}
.gf-cta__btn-icon{
  flex:0 0 20px;
  width:20px;
  height:20px;
}

.gf-cta__note{
  margin:18px 0 0;
  font-size:13px;
  line-height:19.5px;
  font-weight:400;
  color:rgba(255,255,255,.38);
}

/* ==========================================================================
   2. FOOTER
   ========================================================================== */
.gf-footer{
  background:#00140e;
  color:rgba(255,255,255,.6);
  padding-block:80px 0;
}

/* Reference gutters are 120px (content 1200px), narrower than the shared
   .gf-shell gutter — scoped to this element only, no global override. */
.gf-footer__inner{ padding-inline:120px }

.gf-footer__grid{
  display:grid;
  grid-template-columns:minmax(200px,253px) repeat(3,1fr);
  column-gap:53px;
  row-gap:48px;
  align-items:start;
}

/* ---- Brand column ---- */
.gf-footer__logo{
  display:block;
  width:auto;
  height:34px;          /* mark renders 97x30 inside its transparent padding */
}
.gf-footer__tagline{
  margin:16px 0 0;
  max-width:253px;      /* the render wraps after "…meals for" at exactly 253px */
  font-size:14px;
  line-height:24px;
  font-weight:400;
  color:rgba(255,255,255,.6);
}

/* ---- Link columns ---- */
.gf-footer__heading{
  margin:0 0 18px;
  font-size:14px;
  line-height:16.8px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#fff;
}

.gf-footer__links{
  display:flex;
  flex-direction:column;
  gap:12px;             /* 21px line box + 12px gap = 33px measured pitch */
}
.gf-footer__links a{
  display:inline-block;
  font-size:14px;
  line-height:21px;
  font-weight:400;
  color:rgba(255,255,255,.6);
  transition:color .15s ease;
}
.gf-footer__links a:hover,
.gf-footer__links a:focus-visible{ color:#fff }

/* ---- Bottom bar ---- */
.gf-footer__bottom{
  margin-top:47px;
  padding-block:24px;
  border-top:1px solid rgba(255,255,255,.05);
  text-align:center;
}
.gf-footer__copy{
  margin:0;
  font-size:13px;
  line-height:19.5px;
  font-weight:400;
  color:rgba(255,255,255,.35);
}

/* ==========================================================================
   3. Responsive
   ========================================================================== */
@media (max-width:900px){
  .gf-cta{ padding-block:64px }
  .gf-cta__mark{ height:48px; margin-bottom:32px }
  .gf-cta__title{ font-size:32px }
  .gf-cta__sub{ margin-top:14px; font-size:15px; line-height:26px; max-width:520px }
  .gf-cta__btn{ margin-top:36px; padding:16px 32px; font-size:15px }
  .gf-cta__note{ margin-top:16px }

  .gf-footer{ padding-top:64px }
  .gf-footer__inner{ padding-inline:var(--gf-gutter) }
  .gf-footer__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:32px;
    row-gap:40px;
  }
  .gf-footer__brand{ grid-column:1 / -1 }
  .gf-footer__tagline{ max-width:420px }
  .gf-footer__bottom{ margin-top:40px }
}

@media (max-width:600px){
  .gf-cta{ padding-block:48px }
  .gf-cta__mark{ height:44px; margin-bottom:24px }
  .gf-cta__title{ font-size:26px }
  .gf-cta__sub{ font-size:15px; line-height:25px }
  .gf-cta__btn{ margin-top:28px; width:100%; padding:15px 24px }
  .gf-cta__note{ font-size:12px }

  .gf-footer{ padding-top:48px }
  .gf-footer__grid{
    grid-template-columns:minmax(0,1fr);   /* columns stack on mobile */
    row-gap:32px;
  }
  .gf-footer__brand{ grid-column:auto }
  .gf-footer__logo{ height:30px }
  .gf-footer__tagline{ max-width:none; font-size:14px; line-height:23px }
  .gf-footer__heading{ margin-bottom:14px }
  .gf-footer__links{ gap:10px }
  .gf-footer__bottom{ margin-top:32px; padding-block:20px }
  .gf-footer__copy{ font-size:12px; line-height:19px }
}

@media (prefers-reduced-motion:reduce){
  .gf-footer__links a{ transition:none }
}
/* ============================================================
   Post-build corrections measured directly in Figma / the 2x render.
   Kept in a separate file so the per-section files stay untouched.
   ============================================================ */

/* Video poster: Figma container radius is 16 (not 12). The exported poster
   already contains the green play control exactly as designed, so the
   <button> becomes a transparent hit area layered over it. */
.gf-video__player,
.gf-video__poster { border-radius: 16px; }
.gf-video__play {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  width: 96px; height: 96px;
  border-radius: 999px;
  cursor: pointer;
}
.gf-video__play-icon { display: none; }
.gf-video__play:focus-visible { outline: 3px solid var(--gf-green); outline-offset: 6px; }
.gf-video__player:hover .gf-video__play { transform: translate(-50%,-50%) scale(1.06); }
.gf-video__play { transition: transform .18s ease; }

/* ============================================================
   Mobile parity with Figma "Mobile Version" frame (canvas 393)
   The Impact 4-step circular flow is a desktop-only section in
   the Figma mobile design (hero flows straight into How to
   Install), so it is omitted below the desktop breakpoint.
   ============================================================ */
@media (max-width: 900px){
  .gf-impact{ display:none !important; }
}

/* ============================================================
   Transparency Reports page — Figma "TRANSPARENCY REPORTS"
   Navbar + footer shared with the landing page.
   ============================================================ */
.gf-nav__link.is-active{ color:var(--gf-green); font-weight:600; }

.gf-tr{ background:var(--gf-white); min-height:60vh; }

/* Hero — Figma "hero": padding 64/60, gap 26 */
.gf-tr__hero{ padding-block:64px 60px; }
.gf-tr__badge{
  display:inline-flex; align-items:center;
  background:var(--gf-green); color:#fff;
  font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size:12px; font-weight:500; letter-spacing:.05em; text-transform:uppercase;
  padding:9px 14px; border-radius:7px;
}
.gf-tr__title{
  margin-top:26px; max-width:780px;
  font-size:64px; line-height:64px; font-weight:900; letter-spacing:-.025em;
  color:var(--gf-ink);
}
.gf-tr__lede{
  margin-top:26px; max-width:620px;
  font-size:18px; line-height:28px; font-weight:400; color:var(--gf-body);
}

/* Report list — content: padding-top 44, row gap 32, row padding 30/0, gap 36 */
.gf-tr__list{ list-style:none; margin:44px 0 84px; padding:0; border-top:1px solid var(--gf-border); }
.gf-tr__row{
  display:grid; grid-template-columns:212px 1fr auto;
  align-items:center; gap:36px;
  padding:30px 0; border-bottom:1px solid var(--gf-border);
}
.gf-tr__date{ font-size:16px; letter-spacing:.01em; text-transform:uppercase; color:var(--gf-body); }
.gf-tr__doc-title{ font-size:18px; font-weight:600; letter-spacing:-.005em; color:var(--gf-ink); }
.gf-tr__meta{ margin-top:8px; display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--gf-body); }
.gf-tr__file{ color:var(--gf-body); flex:none }
.gf-tr__dot{ color:#c9ccd1 }
.gf-tr__actions{ display:inline-flex; align-items:center; gap:12px; }
.gf-tr__view{
  display:inline-flex; align-items:center; gap:8px;
  height:46px; padding:0 18px 0 20px;
  background:var(--gf-green); color:#fff;
  font-family:'Inter', var(--gf-font); font-size:14px; font-weight:600;
  border-radius:9999px; text-decoration:none; transition:background .15s;
}
.gf-tr__view:hover{ background:var(--gf-green-dark); }
.gf-tr__download{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--gf-border); color:var(--gf-nav-link);
  text-decoration:none; transition:border-color .15s, color .15s;
}
.gf-tr__download:hover{ border-color:var(--gf-green); color:var(--gf-green); }

@media (max-width: 700px){
  .gf-tr__hero{ padding-block:48px 32px; }
  .gf-tr__title{ font-size:36px; line-height:1.05; }
  .gf-tr__lede{ font-size:16px; line-height:1.55; }
  .gf-tr__list{ margin-top:32px; }
  .gf-tr__row{
    grid-template-columns:1fr auto;
    grid-template-areas:"date date" "doc actions";
    gap:10px 16px; align-items:start; padding:22px 0;
  }
  .gf-tr__date{ grid-area:date; }
  .gf-tr__doc{ grid-area:doc; }
  .gf-tr__actions{ grid-area:actions; align-self:center; }
}