/*
Theme Name: Genius Food Purchasing — Block Editor
Theme URI: https://geniusfoodpurchasing.com
Author: Apphive Solutions
Author URI: https://geniusfoodpurchasing.com
Description: A bespoke, conversion-focused WordPress theme for Genius Food Purchasing — restaurant food-purchasing software that slashes costs. Ships fully populated: activate it and the whole site exists, including a Meta Ads landing page. Every section of every page is an editable block. Self-hosted fonts, no render-blocking third parties, SEO and schema built in.
Version: 4.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: genius-food
Tags: business, custom-menu, featured-images, full-width-template, blog, food, landing-page
*/

/* =========================================================
   Fonts — self-hosted (assets/fonts), so no request ever
   leaves the origin to paint text. Latin subset only.
   Plus Jakarta Sans & Instrument Serif are SIL OFL 1.1;
   see assets/fonts/LICENSE.txt.
   ========================================================= */
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight:300 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("assets/fonts/instrument-serif-latin.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("assets/fonts/instrument-serif-latin-italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* =========================================================
   Design tokens
   ========================================================= */
:root{
  /* brand */
  --green:#009445;
  --green-600:#068a44;
  --green-700:#0a6e39;
  --forest:#0a2a1d;
  --forest-2:#0e3826;

  /* warm editorial surfaces (not sterile white/grey) */
  --paper:#faf8f2;
  --paper-2:#f2efe4;
  --card:#ffffff;

  /* ink */
  --ink:#12211a;
  --ink-2:#404b44;
  --muted:#6f7b73;
  --line:#e7e1d3;
  --line-strong:#d8d1bf;

  /* accents */
  /* Review-star yellow. Used only by .gfp-stars — bright enough to read as a
     rating at a glance, deep enough to stay legible on the cream paper
     background rather than washing out the way a pure yellow does. */
  --gold:#f5b301;
  --green-wash:#eef6ef;

  --r:14px;
  --r-lg:22px;
  --r-btn:12px;

  --shadow-card:0 1px 1px rgba(18,33,26,.03), 0 8px 24px -14px rgba(18,33,26,.16);
  --shadow-float:0 24px 48px -20px rgba(10,42,29,.28), 0 2px 6px rgba(10,42,29,.08);

  --max:1200px;
  --gutter:26px;

  /* Plus Jakarta Sans carries the whole interface; Instrument Serif is kept
     for pull quotes and headline figures, where a display serif still earns
     its place. */
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;

  --header-h:92px;

  /* motion */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --spring:cubic-bezier(0.34,1.56,0.64,1);
}

/* =========================================================
   Base
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink-2);
  background:var(--paper);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-700);text-decoration:none;transition:color .2s var(--ease-out)}
a:hover{color:var(--green)}

h1,h2,h3,h4{
  font-family:var(--sans);
  color:var(--ink);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.028em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(2.5rem,5.2vw,4rem);font-weight:800;letter-spacing:-.04em;line-height:1.02}
h2{font-size:clamp(1.9rem,3.6vw,2.85rem);letter-spacing:-.034em}
h3{font-size:clamp(1.15rem,1.6vw,1.3rem);letter-spacing:-.018em}
p{margin:0 0 1.1rem;text-wrap:pretty}
strong{color:var(--ink);font-weight:600}
ul,ol{margin:0 0 1.1rem;padding-left:1.15rem}

::selection{background:var(--green);color:#fff}
:focus-visible{outline:2.5px solid var(--green);outline-offset:3px;border-radius:6px}

/* =========================================================
   Layout
   ========================================================= */
.gfp-container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.gfp-section{padding:104px 0}
.gfp-section--tight{padding:64px 0}
.gfp-section--paper2{background:var(--paper-2)}
.gfp-section--forest{background:var(--forest);color:#cddbd2}
.gfp-center{text-align:center}
.gfp-head{max-width:680px;margin-bottom:56px}
.gfp-head.gfp-center{margin-inline:auto}
.gfp-lead{font-size:1.15rem;line-height:1.6;color:var(--ink-2);max-width:58ch}
.gfp-center .gfp-lead{margin-inline:auto}

/* Editorial kicker — a rule plus small caps, not a generic pill */
.gfp-kicker{
  display:inline-flex;align-items:center;gap:12px;
  font-weight:700;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green-700);
  margin-bottom:22px;
}
.gfp-kicker::before{content:"";width:26px;height:1.5px;background:var(--green);display:inline-block;flex:none}
.gfp-center .gfp-kicker{justify-content:center}
.gfp-section--forest .gfp-kicker{color:#7fd6a3}
.gfp-section--forest .gfp-kicker::before{background:#7fd6a3}
.gfp-section--forest h1,.gfp-section--forest h2,.gfp-section--forest h3{color:#fff}

/* =========================================================
   Buttons
   ========================================================= */
.gfp-btn{
  --_bg:var(--green);--_fg:#fff;--_bd:var(--green);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:600;font-size:1rem;line-height:1;
  padding:15px 26px;border-radius:var(--r-btn);
  background:var(--_bg);color:var(--_fg);border:1.5px solid var(--_bd);
  cursor:pointer;text-align:center;
  transition:transform .16s var(--ease-out),background .2s var(--ease-out),color .2s var(--ease-out),border-color .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.gfp-btn svg{width:18px;height:18px;flex:none;transition:transform .22s var(--ease-out)}
.gfp-btn:active{transform:scale(.975)}
.gfp-btn--lg{padding:18px 32px;font-size:1.05rem}
.gfp-btn--primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 22px -12px rgba(0,148,69,.7)}
.gfp-btn--primary:hover{--_bg:var(--green-700);--_bd:var(--green-700);color:#fff}
.gfp-btn--primary:hover svg{transform:translateX(3px)}
.gfp-btn--ghost{--_bg:transparent;--_fg:var(--ink);--_bd:var(--line-strong)}
.gfp-btn--ghost:hover{--_bd:var(--ink);--_fg:var(--ink);color:var(--ink)}
.gfp-btn--light{--_bg:#fff;--_fg:var(--forest);--_bd:#fff}
.gfp-btn--light:hover{--_bg:var(--paper);color:var(--forest)}
.gfp-btn--onforest{--_bg:transparent;--_fg:#eaf3ec;--_bd:rgba(255,255,255,.28)}
.gfp-btn--onforest:hover{--_bg:rgba(255,255,255,.08);--_bd:rgba(255,255,255,.5);color:#fff}
.gfp-btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.gfp-center .gfp-btn-row{justify-content:center}

.gfp-arrowlink{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.92rem;color:var(--green-700)}
.gfp-arrowlink svg{width:15px;height:15px;transition:transform .22s var(--ease-out)}
.gfp-arrowlink:hover svg{transform:translateX(4px)}

/* =========================================================
   Header
   ========================================================= */
.gfp-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--paper) 84%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease-out),background .3s var(--ease-out);
}
.gfp-header.is-stuck{border-bottom-color:var(--line);background:color-mix(in srgb,var(--paper) 92%,transparent)}
/* The mobile sheet is a child of the header, so both live in the header's
   stacking context. Lifting the bar above the sheet is what keeps the logo and
   the close button visible while the menu is open. */
.gfp-header__inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--header-h);transition:height .3s var(--ease-out)}
.gfp-header.is-stuck .gfp-header__inner{height:74px}

/* Brand: the full lockup, laid out horizontally so the name reads. A nav bar
   limits height, not width, so sideways is the shape that lets the logo run
   large here — stacked, it would have to shrink until "Food Purchasing" turned
   to mush. No separate site-name text sits beside it; the name is the logo. */
.gfp-brand{display:flex;align-items:center;flex:none}
.gfp-brand img,.gfp-brand .custom-logo{
  height:66px;width:auto;max-width:none;
  transition:height .3s var(--ease-out);
}
.gfp-header.is-stuck .gfp-brand img,
.gfp-header.is-stuck .gfp-brand .custom-logo{height:54px}

.gfp-nav ul{list-style:none;display:flex;gap:2px;margin:0;padding:0}
.gfp-nav a{display:block;color:var(--ink-2);font-weight:500;font-size:.95rem;padding:9px 14px;border-radius:9px;transition:color .18s var(--ease-out),background .18s var(--ease-out)}
.gfp-nav a:hover,.gfp-nav .current-menu-item>a,.gfp-nav .current_page_item>a{color:var(--ink);background:color-mix(in srgb,var(--green-wash) 70%,transparent)}
.gfp-nav li{position:relative}
.gfp-nav .menu-item-has-children>a{display:inline-flex;align-items:center;gap:7px}
.gfp-nav .menu-item-has-children>a::after{content:"";width:7px;height:7px;margin-top:-3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.55;transition:transform .2s var(--ease-out),opacity .2s var(--ease-out)}
.gfp-nav .menu-item-has-children:hover>a::after,.gfp-nav .menu-item-has-children:focus-within>a::after,.gfp-nav .menu-item-has-children.is-open>a::after{transform:rotate(-135deg);opacity:1}
.gfp-nav .sub-menu{position:absolute;top:100%;left:0;margin-top:11px;min-width:224px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-card);padding:8px;display:flex;flex-direction:column;gap:1px;transform-origin:top left;opacity:0;visibility:hidden;pointer-events:none;transform:scale(.97) translateY(-6px);transition:opacity .18s var(--ease-out),transform .18s var(--ease-out),visibility 0s linear .18s}
/* Invisible bridge across the gap, so the cursor can travel from the trigger
   into the panel without dropping :hover. */
.gfp-nav .sub-menu::before{content:"";position:absolute;left:0;right:0;top:-13px;height:13px}
.gfp-nav .menu-item-has-children:hover>.sub-menu,.gfp-nav .menu-item-has-children:focus-within>.sub-menu,.gfp-nav .menu-item-has-children.is-open>.sub-menu{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
.gfp-nav .sub-menu a{padding:9px 12px;border-radius:9px;font-size:.92rem;white-space:nowrap}

.gfp-header__cta{display:flex;align-items:center;gap:14px}
.gfp-header__cta .gfp-btn{padding:12px 22px;font-size:.93rem;white-space:nowrap}
.gfp-header__tel{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);font-size:.95rem}
.gfp-header__tel svg{width:17px;height:17px;color:var(--green)}
.gfp-header__tel:hover{color:var(--green)}

/* ---------------------------------------------------------
   Hamburger

   Three bars at deliberately unequal widths, left aligned, so the icon reads
   as drawn rather than defaulted. Opening pulls them level, folds the outer
   two into an X and floods the button with brand green from the centre out.
   The bars carry a small stagger so the fold reads as choreography.
   48px square keeps the tap target above the 44px minimum.
   --------------------------------------------------------- */
.gfp-burger{
  display:none;position:relative;flex:0 0 48px;width:48px;height:48px;padding:0;
  border:1.5px solid var(--line-strong);border-radius:15px;background:transparent;
  cursor:pointer;color:var(--ink);overflow:hidden;-webkit-tap-highlight-color:transparent;
  transition:border-color .3s var(--ease-out),color .3s var(--ease-out),transform .2s var(--ease-out);
}
.gfp-burger:active{transform:scale(.93)}
.gfp-burger__ink{
  position:absolute;inset:-2px;border-radius:inherit;background:var(--green);
  transform:scale(.15);opacity:0;
  transition:transform .45s var(--spring),opacity .22s var(--ease-out);
}
.gfp-burger__bars{position:absolute;inset:0}
.gfp-burger__bars span{
  position:absolute;left:14px;height:2px;border-radius:2px;background:currentColor;
  transition:width .38s var(--ease-out),transform .38s var(--ease-out),opacity .18s linear;
}
.gfp-burger__bars span:nth-child(1){top:17px;width:20px}
.gfp-burger__bars span:nth-child(2){top:23px;width:13px;transition-delay:.04s}
.gfp-burger__bars span:nth-child(3){top:29px;width:17px;transition-delay:.08s}
.gfp-burger[aria-expanded="true"]{border-color:var(--green);color:#fff}
.gfp-burger[aria-expanded="true"] .gfp-burger__ink{transform:scale(1);opacity:1}
.gfp-burger[aria-expanded="true"] .gfp-burger__bars span{width:20px;transition-delay:0s}
.gfp-burger[aria-expanded="true"] .gfp-burger__bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.gfp-burger[aria-expanded="true"] .gfp-burger__bars span:nth-child(2){opacity:0;transform:scaleX(.2)}
.gfp-burger[aria-expanded="true"] .gfp-burger__bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------------------------------------------------------
   Mobile sheet — full height, staggered entrance
   --------------------------------------------------------- */
.gfp-mobile{
  position:fixed;left:0;right:0;top:0;z-index:1;
  height:100vh;height:100dvh;
  padding:calc(var(--header-h) + 8px) var(--gutter) 32px;
  background:
    radial-gradient(720px 380px at 100% 0%,var(--green-wash),transparent 60%),
    var(--paper);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .32s var(--ease-out),visibility .32s;
  /* The primary menu is printed twice on purpose — once for the bar, once for
     this sheet — so the sheet's default state has to be "not rendered", not
     merely "invisible". It was hidden with opacity alone, which meant anything
     that stopped a rule applying showed the menu twice stacked at the top of
     the page. display:none is the default here and is switched back on only
     inside the burger breakpoint below, so the failure mode now needs the
     entire stylesheet to be missing rather than one media query to be missed. */
  display:none;
}
.gfp-mobile.is-open{opacity:1;visibility:visible;pointer-events:auto}
.gfp-mobile__inner{display:flex;flex-direction:column;min-height:100%}
.gfp-mobile ul{list-style:none;margin:0;padding:0}
.gfp-mobile__inner>nav>ul>.menu-item{border-bottom:1px solid var(--line)}

/* Items rise in sequence once the sheet is open. Pure CSS — no per-item
   JavaScript, and it resets itself every time the sheet closes. */
.gfp-mobile__inner>nav>ul>.menu-item,
.gfp-mobile__cta,
.gfp-mobile__meta{
  opacity:0;transform:translateY(16px);
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);
}
.gfp-mobile.is-open .gfp-mobile__inner>nav>ul>.menu-item,
.gfp-mobile.is-open .gfp-mobile__cta,
.gfp-mobile.is-open .gfp-mobile__meta{opacity:1;transform:none}
.gfp-mobile.is-open .gfp-mobile__inner>nav>ul>.menu-item:nth-child(1){transition-delay:.05s}
.gfp-mobile.is-open .gfp-mobile__inner>nav>ul>.menu-item:nth-child(2){transition-delay:.10s}
.gfp-mobile.is-open .gfp-mobile__inner>nav>ul>.menu-item:nth-child(3){transition-delay:.15s}
.gfp-mobile.is-open .gfp-mobile__inner>nav>ul>.menu-item:nth-child(4){transition-delay:.20s}
.gfp-mobile.is-open .gfp-mobile__inner>nav>ul>.menu-item:nth-child(5){transition-delay:.25s}
.gfp-mobile.is-open .gfp-mobile__inner>nav>ul>.menu-item:nth-child(n+6){transition-delay:.30s}
.gfp-mobile.is-open .gfp-mobile__cta{transition-delay:.34s}
.gfp-mobile.is-open .gfp-mobile__meta{transition-delay:.40s}

/* Parent rows are <button>, child rows are <a>. Both have to sit on the same
   baseline and read identically, so the button gets a full reset first. */
.gfp-mobile .menu-item>a,
.gfp-mobile__toggle{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:17px 4px;font-size:1.22rem;font-weight:600;letter-spacing:-.02em;
  color:var(--ink);transition:color .15s var(--ease-out),padding-left .25s var(--ease-out);
}
.gfp-mobile__toggle{
  width:100%;background:none;border:0;border-radius:0;font-family:inherit;
  text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.gfp-mobile .menu-item>a:active,
.gfp-mobile__toggle:active{color:var(--green);padding-left:8px}
.gfp-mobile .menu-item-has-children>a::after,
.gfp-mobile__toggle::after{content:"";flex:0 0 auto;width:9px;height:9px;margin-right:6px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease-out),border-color .2s}
.gfp-mobile .menu-item-has-children.is-expanded>a::after,
.gfp-mobile .menu-item-has-children.is-expanded>.gfp-mobile__toggle::after{transform:translateY(1px) rotate(-135deg);border-color:var(--green)}
.gfp-mobile .sub-menu{overflow:hidden;max-height:0;transition:max-height .38s var(--ease-out)}
.gfp-mobile .menu-item-has-children.is-expanded>.sub-menu{max-height:640px}
.gfp-mobile .sub-menu .menu-item{border-bottom:0}
.gfp-mobile .sub-menu a{padding:12px 4px 12px 22px;font-size:1rem;font-weight:500;color:var(--ink-2)}
.gfp-mobile .sub-menu .menu-item:last-child a{padding-bottom:18px}
.gfp-mobile__cta{width:100%;margin-top:auto;justify-content:center;font-size:1.05rem;padding:17px}
.gfp-mobile__meta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.gfp-mobile__meta a{font-weight:600;color:var(--ink)}
.gfp-mobile__tel{display:inline-flex;align-items:center;gap:8px;color:var(--green)!important}
.gfp-mobile__tel svg{width:17px;height:17px}
html.gfp-nav-open,html.gfp-nav-open body{overflow:hidden}

/* =========================================================
   Hero
   ========================================================= */
.gfp-hero{position:relative;overflow:hidden;background:
  radial-gradient(900px 460px at 92% -8%, var(--green-wash), transparent 62%),
  linear-gradient(180deg,var(--paper),var(--paper))}
.gfp-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% 88px;opacity:.4;-webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,transparent);mask-image:linear-gradient(180deg,transparent,#000 40%,transparent)}
.gfp-hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center;padding-block:80px 96px}
/* Emphasis by colour, in the same weight as the headline — an italic here
   would read as a different typeface rather than as stress. */
/* One type treatment per heading, everywhere.
   <em> marks the phrase that carries the brand colour — it never changes font,
   slant or weight, so a headline always reads as one continuous piece of text.
   This used to be scoped to .gfp-hero, which left every other hero (page hero,
   onboarding, feature pages) rendering the browser's default italic. */
h1 em,h2 em,h3 em{font-style:normal;font-family:inherit;font-weight:inherit;color:var(--green)}
/* The homepage headline, set in caps at the client's request. Capitals run wider
   and sit further apart than lowercase, so the size comes down and the negative
   tracking comes off — the default -.04em on caps this large closes the letters
   into a single block. Uppercasing here rather than in the template keeps a
   sentence in the H1 that search engines and screen readers see. */
.gfp-hero h1.gfp-hero__h1--caps{text-transform:uppercase;font-size:clamp(2rem,4.2vw,3.1rem);letter-spacing:-.012em;line-height:1.06}
.gfp-hero .gfp-lead{margin-top:6px}
.gfp-hero__proof{display:flex;align-items:center;gap:14px;margin-top:28px;flex-wrap:wrap}
.gfp-stars{display:inline-flex;gap:3px;color:var(--gold);flex:none}
.gfp-stars svg{width:17px;height:17px;fill:currentColor;stroke:none}
/* :not(.gfp-stars) matters. The star row is a <span> inside this container, so
   a bare `.gfp-hero__proof span` out-specified .gfp-stars and painted the stars
   muted grey instead of yellow — on every hero proof row on the site, while the
   testimonial stars stayed yellow. Excluding them here fixes the cause rather
   than stacking another override on top. */
.gfp-hero__proof span:not(.gfp-stars){font-size:.92rem;color:var(--muted)}
.gfp-hero__proof b{color:var(--ink);font-weight:600}

.gfp-hero__stats{display:flex;gap:40px;margin-top:44px;padding-top:34px;border-top:1px solid var(--line)}
.gfp-stat__num{font-size:2.2rem;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.gfp-stat__label{font-size:.86rem;color:var(--muted);margin-top:8px;max-width:16ch}

.gfp-hero__media{position:relative}
.gfp-hero__photo{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-float);aspect-ratio:4/4.2}
.gfp-hero__photo img{width:100%;height:100%;object-fit:cover}
.gfp-hero__photo::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);pointer-events:none}
/* Interior heroes show screenshots and landscape photos at their own aspect,
   not the homepage's portrait crop. */
.gfp-hero__photo--natural{aspect-ratio:auto;background:var(--paper-2)}
.gfp-hero__photo--natural img{height:auto}
.gfp-hero__media>img{width:100%;border-radius:var(--r-lg);box-shadow:var(--shadow-float);border:1px solid var(--line)}
.gfp-hero__tag{position:absolute;top:20px;left:20px;z-index:3;display:inline-flex;align-items:center;gap:8px;background:rgba(10,42,29,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#eafff2;font-size:.78rem;font-weight:600;letter-spacing:.02em;padding:8px 13px;border-radius:999px}
.gfp-hero__tag i{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.25);animation:gfp-pulse 2s var(--ease-in-out) infinite}
@keyframes gfp-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* The price-comparison card = real product proof, not a decorative badge */
.gfp-pricecard{
  position:absolute;left:-30px;bottom:-26px;z-index:4;width:min(310px,86%);
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-float);padding:16px 16px 14px;
}
.gfp-pricecard__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.gfp-pricecard__item{font-weight:700;color:var(--ink);font-size:.92rem}
.gfp-pricecard__item small{display:block;font-weight:500;color:var(--muted);font-size:.72rem;letter-spacing:.02em}
.gfp-pricecard__badge{font-size:.64rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green-700);background:var(--green-wash);padding:5px 9px;border-radius:999px;white-space:nowrap}
.gfp-pricelist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.gfp-pricelist li{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;border-radius:9px;font-size:.9rem}
.gfp-pricelist .v{color:var(--ink-2)}
.gfp-pricelist .p{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink-2)}
.gfp-pricelist li.is-win{background:var(--green-wash)}
.gfp-pricelist li.is-win .v{color:var(--green-700);font-weight:700;display:flex;align-items:center;gap:7px}
.gfp-pricelist li.is-win .v svg{width:15px;height:15px;color:var(--green)}
.gfp-pricelist li.is-win .p{color:var(--green-700)}
.gfp-pricecard__foot{margin-top:11px;padding-top:11px;border-top:1px dashed var(--line-strong);display:flex;justify-content:space-between;align-items:baseline;font-size:.84rem;color:var(--muted)}
.gfp-pricecard__foot b{font-family:var(--serif);font-size:1.45rem;color:var(--green);font-weight:400;font-variant-numeric:tabular-nums}

/* =========================================================
   Value strip
   ========================================================= */
.gfp-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2)}
.gfp-strip__row{display:flex;align-items:stretch;flex-wrap:wrap}
.gfp-strip__item{flex:1 1 220px;display:flex;align-items:center;gap:12px;padding:24px var(--gutter);border-right:1px solid var(--line);color:var(--ink);font-weight:600;font-size:.98rem}
.gfp-strip__item:last-child{border-right:0}
.gfp-strip__item svg{width:20px;height:20px;color:var(--green);flex:none}

/* =========================================================
   Feature grid — numbered, hairline structure
   ========================================================= */
.gfp-features{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.gfp-feature{position:relative;padding:40px 34px 44px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .25s var(--ease-out)}
.gfp-feature:hover{background:var(--card)}
.gfp-feature__idx{font-size:.82rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.gfp-feature__ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--green-wash);color:var(--green-700);margin:20px 0 22px;transition:transform .25s var(--ease-out),background .25s var(--ease-out),color .25s var(--ease-out)}
.gfp-feature:hover .gfp-feature__ic{background:var(--green);color:#fff;transform:translateY(-2px)}
.gfp-feature__ic svg{width:23px;height:23px}
.gfp-feature h3{margin-bottom:9px}
.gfp-feature h3 span{background:linear-gradient(var(--green),var(--green)) 0 100%/0 1.5px no-repeat;padding-bottom:2px;transition:background-size .3s var(--ease-out)}
.gfp-feature:hover h3 span{background-size:100% 1.5px}
.gfp-feature p{font-size:.97rem;margin-bottom:18px}

/* =========================================================
   Split rows
   ========================================================= */
.gfp-split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.gfp-split--rev .gfp-split__media{order:2}
.gfp-split__media{position:relative}
.gfp-split__media img{border-radius:var(--r-lg);width:100%;object-fit:cover;box-shadow:var(--shadow-card);border:1px solid var(--line)}
.gfp-split__media::before{content:"";position:absolute;inset:-14px -14px auto auto;width:120px;height:120px;border-top:2px solid var(--green);border-right:2px solid var(--green);border-radius:0 var(--r-lg) 0 0;opacity:.5}
.gfp-split--rev .gfp-split__media::before{inset:-14px auto auto -14px;border-right:0;border-left:2px solid var(--green);border-radius:var(--r-lg) 0 0 0}
.gfp-checklist{list-style:none;padding:0;margin:26px 0 0}
.gfp-checklist li{position:relative;padding-left:36px;margin-bottom:15px;color:var(--ink-2)}
.gfp-checklist li::before{content:"";position:absolute;left:0;top:2px;width:23px;height:23px;border-radius:7px;background:var(--green-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23009445' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat}

/* =========================================================
   Savings calculator — receipt styling
   ========================================================= */
.gfp-receipt{max-width:520px;margin-inline:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-card);overflow:hidden}
.gfp-receipt__body{padding:38px 38px 30px}
.gfp-receipt label{display:block;font-weight:600;color:var(--ink);margin-bottom:18px;font-size:.95rem}
.gfp-receipt label span{float:right;font-weight:700;font-size:1.35rem;color:var(--ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.gfp-receipt__out{display:flex;justify-content:space-between;align-items:baseline;padding:22px 0;border-bottom:1px dashed var(--line-strong)}
.gfp-receipt__out:last-of-type{border-bottom:0}
.gfp-receipt__out dt{color:var(--muted);font-size:.95rem}
.gfp-receipt__out dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);font-size:1.15rem;letter-spacing:-.02em}
.gfp-receipt__hero{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:24px 38px;background:var(--forest);color:#bfe6cd}
.gfp-receipt__hero dt{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;font-weight:600}
.gfp-receipt__hero dd{margin:0;font-family:var(--serif);font-size:2.6rem;color:#fff;font-weight:400;font-variant-numeric:tabular-nums;line-height:1}

/* Range input: the same track on every engine, with a filled portion that
   JavaScript keeps in step with the value. */
.gfp-receipt input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;cursor:pointer;
  background:linear-gradient(var(--green),var(--green)) 0/var(--gfp-range-fill,50%) 100% no-repeat,var(--line);
}
.gfp-receipt input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--green);box-shadow:0 2px 8px rgba(10,42,29,.22);cursor:grab;transition:transform .15s var(--ease-out)}
.gfp-receipt input[type=range]::-webkit-slider-thumb:active{transform:scale(1.12);cursor:grabbing}
.gfp-receipt input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--green);box-shadow:0 2px 8px rgba(10,42,29,.22);cursor:grab}
.gfp-receipt input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:transparent}

/* Booking card — the landing page's single conversion point. Everything else
   on that page exists to get someone to this button. */
.gfp-bookcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:38px 34px 30px;box-shadow:var(--shadow-card);text-align:center;
}
.gfp-bookcard__ic{
  width:56px;height:56px;margin:0 auto 20px;border-radius:16px;display:grid;place-items:center;
  background:var(--green-wash);color:var(--green-700);
}
.gfp-bookcard__ic svg{width:26px;height:26px}
.gfp-bookcard h3{font-size:1.45rem;margin-bottom:8px}
.gfp-bookcard p{margin:0 0 24px;color:var(--muted);font-size:.97rem}
.gfp-bookcard__cta{width:100%}
.gfp-bookcard__setup{
  margin:16px 0 0;padding:12px 14px;border-radius:10px;font-size:.82rem;line-height:1.5;
  background:#fdf1e7;color:#8a5a22;border:1px solid #f0d9c2;text-align:left;
}
.gfp-bookcard__setup a{color:#8a5a22;text-decoration:underline;font-weight:600}
.gfp-bookcard__alt{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  margin-top:24px;padding-top:22px;border-top:1px solid var(--line);
}
.gfp-bookcard__alt a{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.93rem;color:var(--ink)}
.gfp-bookcard__alt a:hover{color:var(--green)}
.gfp-bookcard__alt svg{width:16px;height:16px;color:var(--green)}

/* =========================================================
   Testimonial — pull quote
   ========================================================= */
.gfp-quote{max-width:880px;margin-inline:auto;text-align:center}
.gfp-quote__mark{font-family:var(--serif);font-size:5rem;line-height:.6;color:var(--green);opacity:.25;height:.5em;display:block}
.gfp-quote p{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3.4vw,2.4rem);color:var(--ink);line-height:1.24;letter-spacing:-.015em}
.gfp-quote cite{display:block;margin-top:26px;font-style:normal;font-weight:600;color:var(--ink)}
.gfp-quote cite span{display:block;color:var(--muted);font-weight:500;font-size:.9rem;margin-top:4px;letter-spacing:.01em}

/* audience row */
.gfp-audience{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
.gfp-audience__item{padding:30px 26px;border-right:1px solid var(--line);transition:background .2s var(--ease-out)}
.gfp-audience__item:last-child{border-right:0}
.gfp-audience__item:hover{background:var(--paper-2)}
.gfp-audience__ic{color:var(--green);margin-bottom:14px}
.gfp-audience__ic svg{width:24px;height:24px}
.gfp-audience__item h3{font-size:1.1rem;margin:0}

/* =========================================================
   CTA band
   ========================================================= */
.gfp-cta{position:relative;overflow:hidden;background:var(--forest);color:#c7ddce;border-radius:var(--r-lg);padding:76px 56px;text-align:center;border:1px solid var(--forest-2)}
.gfp-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 50% -30%,rgba(0,148,69,.4),transparent 70%);pointer-events:none}
.gfp-cta>*{position:relative;z-index:1}
.gfp-cta h2{color:#fff;margin-bottom:.35em}
.gfp-cta p{color:#a7c6b3;max-width:52ch;margin-inline:auto;font-size:1.08rem}
.gfp-cta .gfp-btn-row{justify-content:center;margin-top:8px}

/* =========================================================
   Pricing
   ========================================================= */
.gfp-price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:860px;margin-inline:auto}
.gfp-price{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:38px;transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.gfp-price:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.gfp-price--featured{border-color:var(--green);position:relative;box-shadow:var(--shadow-card)}
.gfp-price__tag{position:absolute;top:-13px;right:28px;background:var(--green);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 13px;border-radius:999px}
.gfp-price h3{font-size:1.3rem}
.gfp-price__amt{font-size:2.4rem;font-weight:800;letter-spacing:-.04em;color:var(--ink);margin:12px 0}
.gfp-price__amt small{font-size:.95rem;color:var(--muted);font-weight:400;letter-spacing:0}
/* The performance plan has no price to print, so that slot carries a sentence
   instead. Display size on a sentence is a wall of text — this is the same slot
   at reading scale, still the loudest line in the card. */
.gfp-price__amt--headline{font-size:1.8rem;line-height:1.2;letter-spacing:-.03em}

/* =========================================================
   Forms
   ========================================================= */
.gfp-contact{display:grid;grid-template-columns:1fr 1fr;gap:50px}
/* A grid track refuses to shrink below its content's minimum unless told to,
   and the contact email is one unbreakable 32-character word — so without
   this the column is sized by the address and the whole page scrolls
   sideways on a phone. Pairs with the wrapping on the card text below. */
.gfp-contact>*{min-width:0}
.gfp-contact__card{display:flex;gap:16px;align-items:flex-start;padding:22px;border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px;background:var(--card);transition:border-color .2s var(--ease-out)}
.gfp-contact__card:hover{border-color:var(--line-strong)}
.gfp-contact__card .ic{flex:none;width:46px;height:46px;border-radius:12px;background:var(--green-wash);color:var(--green-700);display:grid;place-items:center}
.gfp-contact__card h3{margin:0 0 3px;font-size:1.05rem;letter-spacing:-.01em}
/* anywhere, not break-word: only `anywhere` also lowers the element's
   min-content width, which is what the flex and grid parents measure. With
   break-word the text would wrap and the layout would still overflow. */
.gfp-contact__card p{margin:0;overflow-wrap:anywhere}

.gfp-form{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:34px;box-shadow:var(--shadow-card)}
.gfp-form label{display:block;font-weight:600;color:var(--ink);margin:0 0 7px;font-size:.88rem}
.gfp-form input,.gfp-form textarea,.gfp-form select{width:100%;padding:13px 15px;border:1px solid var(--line-strong);border-radius:10px;font:inherit;color:var(--ink);margin-bottom:18px;background:var(--paper);transition:border-color .18s var(--ease-out),background .18s var(--ease-out),box-shadow .18s var(--ease-out)}
.gfp-form input:focus,.gfp-form textarea:focus,.gfp-form select:focus{outline:none;border-color:var(--green);background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 16%,transparent)}
.gfp-form textarea{min-height:130px;resize:vertical}
.gfp-form__row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.gfp-form__submit{width:100%;margin-top:6px;padding:17px}
/* Honeypot: off-screen rather than display:none, which some bots detect. */
.gfp-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.gfp-formnote{display:flex;gap:9px;align-items:flex-start;padding:13px 16px;border-radius:11px;font-size:.92rem;margin:0 0 20px;line-height:1.45}
.gfp-formnote--ok{background:var(--green-wash);color:var(--green-700);border:1px solid color-mix(in srgb,var(--green) 30%,transparent)}
.gfp-formnote--bad{background:#fdf1e7;color:#96551f;border:1px solid #f0d9c2}

/* ---------------------------------------------------------
   HubSpot embed

   Only the card around the form lives here. HubSpot builds forms made in
   their current editor inside an iframe, which no stylesheet on this page can
   reach into, so the form itself is styled by assets/hubspot-form.css —
   linked into that iframe by gfp_render_hubspot_form(). See the header of
   that file for how the two rendering modes share one set of rules.
   --------------------------------------------------------- */
.gfp-hubspot{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:34px;box-shadow:var(--shadow-card)}
.gfp-hubspot iframe{display:block;width:100%;border:0}
/* Holds the column's width before the embed has painted, so the contact page
   does not reflow around a zero-height box on a slow connection. */
.gfp-hubspot__target{min-height:420px}

/* =========================================================
   Page + article
   ========================================================= */
.gfp-page-hero{background:var(--paper-2);border-bottom:1px solid var(--line);padding:74px 0}
.gfp-content{max-width:720px;margin-inline:auto;font-size:1.06rem}
.gfp-content h2{margin-top:1.7em}
.gfp-content h3{margin-top:1.5em}
.gfp-content img{border-radius:var(--r);margin:1.6em 0;border:1px solid var(--line)}
.gfp-content blockquote{margin:1.7em 0;padding:6px 0 6px 26px;border-left:3px solid var(--green);font-family:var(--serif);font-size:1.5rem;color:var(--ink);line-height:1.32}
.gfp-content ul li,.gfp-content ol li{margin-bottom:9px}
.gfp-content a{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--green) 40%,transparent);text-underline-offset:3px}

.gfp-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.gfp-post{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .25s var(--ease-out)}
.gfp-post:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:transparent}
.gfp-post__thumb{aspect-ratio:16/10;overflow:hidden}
.gfp-post__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.gfp-post:hover .gfp-post__thumb img{transform:scale(1.04)}
.gfp-post__body{padding:24px}
.gfp-post__meta{display:flex;gap:8px;font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:12px}
/* Card title is an h2 on the archive (see index.php) and an h3 wherever a card
   grid sits under a section heading, so both carry the card's type scale
   rather than the document's. */
.gfp-post__body h2,
.gfp-post__body h3{font-size:1.2rem;margin-bottom:9px;letter-spacing:-.015em;line-height:1.3}
.gfp-post__body h2 a,
.gfp-post__body h3 a{color:var(--ink)}
.gfp-post__body h2 a:hover,
.gfp-post__body h3 a:hover{color:var(--green)}

.gfp-pagination{display:flex;gap:8px;justify-content:center;margin-top:52px}
.gfp-pagination .page-numbers{display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line-strong);border-radius:10px;color:var(--ink);font-weight:600;transition:all .18s var(--ease-out)}
.gfp-pagination .page-numbers.current{background:var(--green);color:#fff;border-color:var(--green)}
.gfp-pagination a.page-numbers:hover{border-color:var(--green);color:var(--green)}

/* =========================================================
   Footer
   ========================================================= */
.gfp-footer{background:var(--forest);color:#93ab9e;padding:80px 0 34px}
.gfp-footer a{color:#bccdc3}
.gfp-footer a:hover{color:#fff}
.gfp-footer__top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:44px;padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.08)}
/* The mark is black line art; on the forest panel it has to be flipped to
   white or it disappears entirely. */
/* 60px, not the 88px the old stacked lockup used. That one was near-square, so
   height and width read the same; the horizontal lockup is 3.28:1, and at 88px
   it would run 289px wide and swamp the footer column. brightness(0) invert(1)
   flattens the artwork to a white silhouette for the forest panel. */
.gfp-footer__brand img{height:60px;width:auto;margin-bottom:20px;filter:brightness(0) invert(1)}
.gfp-footer__brand p{max-width:34ch;font-size:.95rem;line-height:1.6}
.gfp-footer h5{color:#fff;font-weight:700;font-size:1rem;letter-spacing:-.01em;margin-bottom:18px}
.gfp-footer ul{list-style:none;margin:0;padding:0}
.gfp-footer ul li{margin-bottom:11px;font-size:.95rem}
/* Same unbreakable email as the contact card, in a narrower column — it clears
   390px with nothing to spare and overflows a 320px phone without this. */
.gfp-footer__contact li{line-height:1.5;overflow-wrap:anywhere}

.gfp-social{display:flex;gap:11px;margin-top:22px}
.gfp-social a{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.07);display:grid;place-items:center;color:#fff;transition:background .2s var(--ease-out),transform .2s var(--ease-out)}
.gfp-social a:hover{background:var(--green);transform:translateY(-2px)}
.gfp-social svg{width:18px;height:18px}
.gfp-footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:30px;font-size:.87rem;color:#6f877b}
.gfp-footer__bottom a{color:#6f877b}

.gfp-footer--slim{padding:52px 0 30px}
.gfp-footer__slim{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.08)}
.gfp-footer__slim img{height:64px;width:auto;filter:brightness(0) invert(1)}
.gfp-footer__slimmeta{display:flex;align-items:center;gap:26px;flex-wrap:wrap;font-size:.93rem}

/* =========================================================
   Breadcrumb + interior hero bits
   ========================================================= */
.gfp-breadcrumb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.82rem;color:var(--muted);font-weight:500;margin-bottom:22px}
.gfp-breadcrumb a{color:var(--muted)}
.gfp-breadcrumb a:hover{color:var(--green)}
.gfp-breadcrumb span{color:var(--line-strong)}
.gfp-center .gfp-breadcrumb{justify-content:center}

.gfp-metric{
  position:absolute;left:-24px;bottom:-22px;z-index:4;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-float);padding:16px 22px;
}
.gfp-metric b{display:block;font-size:1.9rem;font-weight:800;letter-spacing:-.04em;color:var(--green);line-height:1;font-variant-numeric:tabular-nums}
.gfp-metric span{display:block;font-size:.82rem;color:var(--muted);margin-top:5px;max-width:16ch}
/* A one-word label under the number, so it can carry the weight the sentence
   labels on the other feature pages could not. Opt-in per metric ("strong" in
   content.json) rather than a change to the rule above, which would shout
   "SPENT COUNTING SHELVES" at everyone. */
.gfp-metric--strong span{text-transform:uppercase;font-weight:700;letter-spacing:.1em;color:var(--ink-2)}

/* =========================================================
   Stat band
   ========================================================= */
.gfp-statband{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
.gfp-statband--4{grid-template-columns:repeat(4,1fr)}
.gfp-statband__item{padding:38px 32px;border-right:1px solid var(--line)}
.gfp-statband__item:last-child{border-right:0}
.gfp-statband__num{font-size:clamp(1.7rem,2.6vw,2.2rem);font-weight:800;color:var(--ink);line-height:1.05;letter-spacing:-.04em}
.gfp-statband__label{color:var(--muted);font-size:.93rem;margin-top:10px}

/* =========================================================
   Comparison
   ========================================================= */
.gfp-compare{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:940px;margin-inline:auto}
.gfp-compare__col{border:1px solid var(--line);border-radius:var(--r);padding:32px;background:var(--card)}
.gfp-compare__col--win{border-color:var(--green);background:linear-gradient(var(--green-wash),var(--card));box-shadow:var(--shadow-card)}
.gfp-compare__label{font-weight:700;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.gfp-compare__col--win .gfp-compare__label{color:var(--green-700)}
.gfp-compare ul{list-style:none;margin:0;padding:0}
.gfp-compare li{position:relative;padding-left:32px;margin-bottom:15px;color:var(--ink-2);font-size:.97rem}
.gfp-compare li::before{position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700}
.gfp-compare__col--bad li::before{content:"\00d7";background:#f1e9e0;color:#b48a5a}
.gfp-compare__col--win li::before{content:"\2713";background:var(--green);color:#fff;font-size:11px}

/* =========================================================
   Steps
   ========================================================= */
.gfp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.gfp-step{position:relative;padding-top:30px;border-top:2px solid var(--line)}
.gfp-step__num{font-size:.9rem;color:var(--green-700);font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.gfp-step h3{margin:14px 0 8px}
.gfp-step p{margin:0;font-size:.97rem}
.gfp-step::before{content:"";position:absolute;top:-2px;left:0;width:44px;height:2px;background:var(--green)}

/* =========================================================
   FAQ accordion (no-JS, via <details>)
   ========================================================= */
.gfp-faq{max-width:780px;margin-inline:auto;border-top:1px solid var(--line)}
.gfp-faq details{border-bottom:1px solid var(--line)}
.gfp-faq summary{
  list-style:none;cursor:pointer;padding:24px 48px 24px 4px;position:relative;
  font-size:1.12rem;font-weight:600;color:var(--ink);letter-spacing:-.018em;
}
.gfp-faq summary::-webkit-details-marker{display:none}
.gfp-faq summary::after{
  content:"";position:absolute;right:6px;top:28px;width:14px;height:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009445' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .25s var(--ease-out);
}
.gfp-faq details[open] summary::after{transform:rotate(135deg)}
.gfp-faq__a{padding:0 48px 24px 4px;color:var(--ink-2);animation:gfp-fade .3s var(--ease-out)}
@keyframes gfp-fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* =========================================================
   Mission + founders
   ========================================================= */
.gfp-mission{max-width:900px;margin-inline:auto;text-align:center}
.gfp-mission p{font-family:var(--serif);font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.26;color:var(--ink);letter-spacing:-.015em}
.gfp-mission p em{font-style:italic;color:var(--green)}

.gfp-founders{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.gfp-founder{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.gfp-founder img{width:120px;height:120px;border-radius:14px;object-fit:cover;border:1px solid var(--line)}
.gfp-founder h3{margin:0 0 2px}
.gfp-founder__role{color:var(--green-700);font-weight:600;font-size:.87rem;margin-bottom:12px}
.gfp-founder p{margin:0;font-size:.94rem}

/* =========================================================
   Blog featured
   ========================================================= */
.gfp-featured{display:grid;grid-template-columns:1.15fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card);margin-bottom:44px}
.gfp-featured__thumb{overflow:hidden;min-height:320px}
.gfp-featured__thumb img{width:100%;height:100%;object-fit:cover}
.gfp-featured__body{padding:44px}
.gfp-featured__body h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin:14px 0 12px}
.gfp-featured__body h2 a{color:var(--ink)}
.gfp-featured__body h2 a:hover{color:var(--green)}

/* =========================================================
   Vendor logo wall

   Two rows drifting in opposite directions. Every logo has been trimmed and
   optically balanced onto one shared canvas at build time (see
   tools/normalize-vendor-logos.py), so a fixed tile is all the CSS needs —
   and no mark ends up twice the size of its neighbour.

   Logos are shown in full colour, always. Greyscale-until-hover hides the
   very thing the section exists to prove, and a touch device can never
   trigger it at all.
   ========================================================= */
.gfp-vendors-sec{overflow:hidden}
.gfp-marquee__label{
  font-weight:700;font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-700);margin:0 auto 40px;max-width:34ch;line-height:1.5;
}
.gfp-marquee{
  --gfp-mq-gap:clamp(14px,2.4vw,26px);
  display:flex;flex-direction:column;gap:var(--gfp-mq-gap);
  position:relative;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.gfp-marquee__row{width:100%;overflow:hidden}
.gfp-marquee__track{display:flex;width:max-content;gap:var(--gfp-mq-gap);animation:gfp-marquee 64s linear infinite;will-change:transform}
.gfp-marquee__row--reverse .gfp-marquee__track{animation-name:gfp-marquee-rev;animation-duration:78s}
.gfp-marquee:hover .gfp-marquee__track,
.gfp-marquee:focus-within .gfp-marquee__track{animation-play-state:paused}
.gfp-marquee__group{display:flex;align-items:center;gap:var(--gfp-mq-gap);list-style:none;margin:0;padding:0}
.gfp-logo{
  flex:0 0 auto;display:grid;place-items:center;
  width:184px;height:88px;background:var(--card);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease-out),border-color .3s var(--ease-out);
}
.gfp-logo:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.gfp-logo img{width:160px;height:64px;object-fit:contain}
@keyframes gfp-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - var(--gfp-mq-gap) / 2))}}
@keyframes gfp-marquee-rev{from{transform:translateX(calc(-50% - var(--gfp-mq-gap) / 2))}to{transform:translateX(0)}}

/* =========================================================
   Landing page (Meta Ads)
   ========================================================= */
.gfp-lp-hero .gfp-hero__grid{padding-block:64px 88px}

.gfp-trustrow{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:28px 0 0;padding:0}
.gfp-trustrow li{display:flex;align-items:center;gap:8px;font-size:.92rem;font-weight:600;color:var(--ink)}
.gfp-trustrow svg{width:16px;height:16px;color:var(--green);flex:none;stroke-width:3}

.gfp-lp-stats{background:var(--forest);color:#a7c6b3;padding:44px 0}
.gfp-lp-stats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;text-align:center}
.gfp-lp-stats__num{font-size:clamp(2rem,3.4vw,2.9rem);font-weight:800;letter-spacing:-.04em;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.gfp-lp-stats__label{margin-top:10px;font-size:.93rem}

/* auto-fit, not a fixed four columns: with three cards a hard-coded 4-up left an
   empty track on the right and the row read as misaligned. auto-fit collapses
   the unused track so the cards always fill the row evenly, whether the section
   has three, four or five of them — and it handles every breakpoint on its own. */
.gfp-lp-problems{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.gfp-lp-problem{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.gfp-lp-problem:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}
.gfp-lp-problem__ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#fdf1e7;color:#b4712a;margin-bottom:20px}
.gfp-lp-problem__ic svg{width:22px;height:22px}
.gfp-lp-problem h3{margin-bottom:8px}
.gfp-lp-problem p{margin:0;font-size:.95rem}

.gfp-lp-features{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.gfp-lp-feature{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.gfp-lp-feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.gfp-lp-feature__shot{aspect-ratio:16/11;overflow:hidden;background:var(--paper-2);border-bottom:1px solid var(--line)}
.gfp-lp-feature__shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
.gfp-lp-feature__body{padding:26px}
.gfp-lp-feature__body .gfp-feature__ic{margin:0 0 18px}
.gfp-lp-feature__body p{margin:0;font-size:.95rem}

.gfp-lp-quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;max-width:1000px;margin-inline:auto}
.gfp-lp-quote{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:34px}
.gfp-lp-quote blockquote{margin:16px 0 0;padding:0;border:0;font-family:var(--serif);font-size:1.5rem;line-height:1.34;color:var(--ink);letter-spacing:-.01em}
.gfp-lp-quote cite{display:block;margin-top:22px;font-style:normal;font-weight:600;color:var(--ink);font-size:.95rem}
.gfp-lp-quote cite span{display:block;color:var(--muted);font-weight:500;font-size:.87rem;margin-top:3px}

.gfp-lp-lead{background:var(--paper-2);border-top:1px solid var(--line)}
.gfp-lp-lead__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:start}
.gfp-lp-lead__or{margin:28px 0 0;font-size:.95rem;color:var(--muted)}
.gfp-lp-lead__or a{font-weight:700;color:var(--green-700)}
.gfp-lp-lead__note{display:flex;gap:9px;align-items:flex-start;margin:16px 0 0;font-size:.84rem;color:var(--muted);line-height:1.5}
.gfp-lp-lead__note svg{width:16px;height:16px;color:var(--green);flex:none;margin-top:2px}

/* Sticky CTA — on a phone the hero button scrolls out of reach in seconds. */
.gfp-stickycta{
  position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;gap:12px;
  padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--paper) 94%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .34s var(--ease-out);
}
.gfp-stickycta.is-shown{transform:none}
.gfp-stickycta.is-hidden{transform:translateY(110%)}
.gfp-stickycta .gfp-btn{flex:1;padding:16px}
.gfp-stickycta__tel{
  flex:none;display:grid;place-items:center;width:54px;border-radius:var(--r-btn);
  border:1.5px solid var(--line-strong);color:var(--ink);
}
.gfp-stickycta__tel svg{width:20px;height:20px}

/* =========================================================
   Utility / WP core
   ========================================================= */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip-link{position:absolute;left:-999px;top:0;background:#fff;padding:10px 16px;z-index:200;border-radius:0 0 10px 0}
.skip-link:focus{left:0}
.aligncenter{margin-inline:auto;display:block}
.alignright{float:right;margin:0 0 1em 1.5em}
.alignleft{float:left;margin:0 1.5em 1em 0}
.wp-caption-text{font-size:.85rem;color:var(--muted);text-align:center}

/* reveal-on-scroll (progressive enhancement; JS adds .is-shown) */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
[data-reveal].is-shown{opacity:1;transform:none}

/* =========================================================
   Conversion pages — contact & onboarding

   Two degrees of stripped-back chrome. On contact the menu goes and the
   booking button stays; on onboarding everything goes, including the link on
   the logo, so the only things left to click are the CTA and the form.

   Book a Meeting sits in the bar on these pages too — with no menu beside it
   there is room for it at every width, and it is the only thing on the page
   worth clicking.
   ========================================================= */
.gfp-header--bare .gfp-header__inner{justify-content:space-between}
.gfp-header--bare .gfp-header__cta--solo{gap:0}
/* Not a link on a no-exit page, so nothing about it should invite a click. */
.gfp-header--bare div.gfp-brand{cursor:default}

/* The legal-only footer: the two links an ad platform asks for, nothing more. */
.gfp-footer--legal{padding:30px 0}
.gfp-footer__legalrow{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.87rem;color:#6f877b}
.gfp-footer__legalrow a{color:#6f877b}
.gfp-footer__legalrow a:hover{color:#fff}

/* A CTA closing every section of the landing page, so a visitor converts from
   wherever they were persuaded instead of scrolling back to the hero. */
.gfp-section__cta{justify-content:center;margin-top:48px}

/* Five feature cards in a three-up grid leaves an orphaned row of two hugging
   the left edge. Laying the grid out in six columns and spanning each card
   across two gives the usual three-up; when there are exactly five cards, the
   last two span three columns each and the final row balances. The selector
   pair means "4th of 5" and "5th of 5", so a 3- or 6-card section is untouched. */
.gfp-lp-features{grid-template-columns:repeat(6,1fr)}
.gfp-lp-feature{grid-column:span 2}
.gfp-lp-feature:nth-child(4):nth-last-child(2),
.gfp-lp-feature:nth-child(5):nth-last-child(1){grid-column:span 3}

/* Three testimonials rather than two. */
.gfp-lp-quotes--3{grid-template-columns:repeat(3,1fr);max-width:none}
.gfp-lp-quotes--3 .gfp-lp-quote{padding:30px 28px}
.gfp-lp-quotes--3 .gfp-lp-quote blockquote{font-size:1.28rem}

/* Stat band with a bold headline label and a quieter qualifier under it. */
.gfp-statband__label strong{display:block;color:var(--ink);font-weight:700}
.gfp-statband__label span{display:block;margin-top:4px;font-size:.87rem}

/* Onboarding hero. One centred column and one thing to do: headline, the CTA,
   the reassurance. No form — the booking widget is the only conversion path, so
   nothing on the page competes with it. */
.gfp-ob-hero{background:var(--paper-2);border-bottom:1px solid var(--line);padding:84px 0 92px}
.gfp-ob-hero__inner{max-width:760px;margin-inline:auto}
.gfp-ob-hero h1{margin-bottom:18px}
.gfp-ob-hero__cta{margin-top:34px}
.gfp-ob-trust{justify-content:center;margin-top:28px}
.gfp-ob-hero__proof{justify-content:center;margin-top:26px}
.gfp-ob-hero__alt{margin:26px 0 0;font-size:.93rem;color:var(--muted)}
.gfp-ob-hero__alt a{display:inline-flex;align-items:center;gap:7px;margin-left:6px;font-weight:700;color:var(--green-700)}
.gfp-ob-hero__alt svg{width:15px;height:15px}

/* The close: one booking card, centred, nothing either side of it. */
.gfp-ob-close__card{max-width:520px;margin-inline:auto;text-align:center}
.gfp-ob-close__card h2{font-size:1.6rem;margin-bottom:10px}
.gfp-ob-close__card .gfp-bookcard__ic{margin-inline:auto}
.gfp-ob-close__card .gfp-bookcard__alt{justify-content:center}
.gfp-ob-close__note{display:inline-flex;gap:9px;align-items:flex-start;margin:22px auto 0;max-width:520px;font-size:.84rem;color:var(--muted);line-height:1.5;text-align:left}
.gfp-ob-close__note svg{width:16px;height:16px;color:var(--green);flex:none;margin-top:2px}

/* The GHL (LeadConnector) embed. Its own script resizes the iframe to the
   form's content, so the height here is only what shows before that runs. */
.gfp-ghl{width:100%}
.gfp-ghl iframe{display:block;width:100%;min-height:420px;background:transparent}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:1100px){
  /* .gfp-lp-problems is auto-fit now and reflows on its own — no override needed. */
}
@media(max-width:1000px){
  .gfp-hero__grid{grid-template-columns:1fr;gap:56px;padding-block:70px 90px}
  .gfp-hero__media{max-width:500px;margin-inline:auto;width:100%}
  .gfp-split{grid-template-columns:1fr;gap:38px}
  .gfp-split--rev .gfp-split__media{order:0}
  .gfp-features{grid-template-columns:repeat(2,1fr)}
  .gfp-audience{grid-template-columns:repeat(2,1fr)}
  .gfp-audience__item:nth-child(2){border-right:0}
  .gfp-contact{grid-template-columns:1fr}
  .gfp-posts{grid-template-columns:repeat(2,1fr)}
  .gfp-footer__top{grid-template-columns:1fr 1fr;gap:34px}
  .gfp-price-grid{grid-template-columns:1fr;max-width:460px}
  .gfp-compare{grid-template-columns:1fr;max-width:520px}
  .gfp-steps{grid-template-columns:1fr}
  .gfp-founders{grid-template-columns:1fr}
  .gfp-featured{grid-template-columns:1fr}
  .gfp-featured__thumb{min-height:240px}
  .gfp-statband{grid-template-columns:repeat(3,1fr)}
  .gfp-statband--4{grid-template-columns:repeat(2,1fr)}
  .gfp-lp-features{grid-template-columns:1fr}
  /* Back to one card per row, so the six-column span trick above has to be
     unwound or every card would claim an implicit second column. */
  .gfp-lp-feature,
  .gfp-lp-feature:nth-child(4):nth-last-child(2),
  .gfp-lp-feature:nth-child(5):nth-last-child(1){grid-column:auto}
  .gfp-lp-feature{flex-direction:row;align-items:stretch}
  .gfp-lp-feature__shot{flex:0 0 40%;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line)}
  .gfp-lp-quotes{grid-template-columns:1fr;max-width:640px}
  .gfp-lp-quotes--3{grid-template-columns:1fr;max-width:640px}
  .gfp-lp-lead__grid{grid-template-columns:1fr;gap:40px}
}

/* Nav collapses at 960px, not 720px. With the Features dropdown plus five more
   top-level items, the logo, the full menu and the CTA measure 938px together —
   so anything narrower than ~940 pushes the header into a horizontal scroll.
   960 leaves headroom for a longer menu label or a different font stack.
   Below it the bar carries the logo and the hamburger and nothing else: the
   booking button moves inside the sheet. Three items competing for a
   phone-width bar is what squeezed the burger to nothing. */
@media(max-width:960px){
  :root{--header-h:76px}
  .gfp-nav,.gfp-header__tel span{display:none}
  .gfp-burger{display:block}
  /* The one width band where the sheet exists: the bar's menu is gone and the
     burger that opens this is showing, so the menu is still on the page once. */
  .gfp-mobile{display:block}
  .gfp-header.is-stuck .gfp-header__inner{height:var(--header-h)}
  .gfp-brand img,.gfp-brand .custom-logo,
  .gfp-header.is-stuck .gfp-brand img,
  .gfp-header.is-stuck .gfp-brand .custom-logo{height:52px}
  /* Book a Meeting stays in the bar at every width — it is the one action the
     whole site is pointing at, and on a phone it is the control most likely to
     be wanted and least likely to be found behind a hamburger. The logo and the
     button give up width in step so the burger keeps its 48px tap target. */
  .gfp-header__inner{gap:12px}
  .gfp-header__cta{gap:10px;flex:none}
  .gfp-header__cta>.gfp-btn{padding:11px 16px;font-size:.88rem}
  /* The button and the burger are fixed-size; the lockup is the one element
     that can give. Letting it shrink instead of holding its width is what
     guarantees the bar never overflows, down to a 320px viewport. */
  .gfp-brand{flex:0 1 auto;min-width:0}
  .gfp-brand img,.gfp-brand .custom-logo{max-width:100%;object-fit:contain}
  .gfp-stickycta{display:flex}
}

@media(max-width:720px){
  /* Solid header, no backdrop-filter — a per-frame blur repaint is the most
     expensive thing on the page while scrolling a phone. */
  .gfp-header{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}
  .gfp-header.is-stuck{background:var(--paper)}
  .gfp-section{padding:64px 0}
  .gfp-section--tight{padding:46px 0}
  .gfp-head{margin-bottom:36px}
  .gfp-cta{padding:44px 24px}
  .gfp-hero__grid{padding-block:34px 58px;gap:38px}
  .gfp-hero h1{font-size:clamp(2.15rem,7.4vw,2.8rem);letter-spacing:-.032em}
  .gfp-hero .gfp-lead{font-size:1.06rem}
  .gfp-hero__proof{margin-top:24px}
  .gfp-features,.gfp-audience{grid-template-columns:1fr}
  .gfp-feature{border-right:0}
  .gfp-audience__item{border-right:0;border-bottom:1px solid var(--line)}
  .gfp-audience__item:last-child{border-bottom:0}
  .gfp-posts{grid-template-columns:1fr}
  .gfp-footer__top{grid-template-columns:1fr;gap:30px}
  .gfp-footer__brand img{height:52px}
  .gfp-hero__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 12px;margin-top:28px;padding-top:24px}
  .gfp-hero__stats .gfp-stat__num{font-size:1.45rem}
  .gfp-hero__stats .gfp-stat__label{font-size:.74rem;margin-top:5px;max-width:none}
  .gfp-strip__item{flex-basis:100%;border-right:0;border-bottom:1px solid var(--line)}
  .gfp-strip__item:last-child{border-bottom:0}
  .gfp-pricecard{left:0;right:0;margin-inline:auto;position:relative;bottom:auto;width:100%;margin-top:16px}
  .gfp-hero__media{max-width:440px}
  .gfp-metric{left:0;position:relative;bottom:auto;margin-top:16px;display:inline-block}
  .gfp-statband,.gfp-statband--4{grid-template-columns:1fr}
  .gfp-statband__item{border-right:0;border-bottom:1px solid var(--line)}
  .gfp-statband__item:last-child{border-bottom:0}
  .gfp-founder{grid-template-columns:1fr;text-align:left}
  .gfp-founder img{width:96px;height:96px}
  .gfp-lp-stats__grid{grid-template-columns:1fr;gap:22px}
  /* auto-fit already drops .gfp-lp-problems to a single column at this width. */
  .gfp-lp-feature{flex-direction:column}
  .gfp-lp-feature__shot{flex:none;aspect-ratio:16/11;border-right:0;border-bottom:1px solid var(--line)}
  .gfp-form__row{grid-template-columns:1fr;gap:0}
  .gfp-footer__slim{gap:22px}
  .gfp-logo{width:150px;height:76px}
  .gfp-logo img{width:130px;height:54px}
  /* The sticky bar sits over the end of the page; give the footer clearance. */
  body:has(.gfp-stickycta) .gfp-footer{padding-bottom:100px}
}

@media(max-width:560px){
  /* Three things in the bar now — lockup, CTA, burger. The lockup gives up the
     height because it is the only one of the three that stays legible smaller. */
  .gfp-brand img,.gfp-brand .custom-logo,
  .gfp-header.is-stuck .gfp-brand img,
  .gfp-header.is-stuck .gfp-brand .custom-logo{height:44px}
  .gfp-header__inner{gap:10px}
  .gfp-header__cta>.gfp-btn{padding:10px 13px;font-size:.83rem;border-radius:12px}
  .gfp-burger{flex-basis:44px;width:44px;height:44px;border-radius:13px}
  .gfp-bookcard{padding:30px 22px 24px}
}

@media(max-width:380px){
  /* Smallest phones still in circulation. Everything holds; nothing wraps. */
  .gfp-brand img,.gfp-brand .custom-logo,
  .gfp-header.is-stuck .gfp-brand img,
  .gfp-header.is-stuck .gfp-brand .custom-logo{height:38px}
  .gfp-header__cta>.gfp-btn{padding:9px 11px;font-size:.78rem}
}
@media(max-width:520px){
  :root{--gutter:20px}
  .gfp-section{padding:54px 0}
  .gfp-ob-hero{padding:52px 0 60px}
  /* .gfp-btn-row goes full-width and stacks at this size; the header button is
     not in a row and must stay inline next to the logo. */
  .gfp-header__cta>.gfp-btn{width:auto}
  .gfp-head{margin-bottom:30px}
  /* Full-width stacked CTAs — bigger targets, tidier column */
  .gfp-btn-row{flex-direction:column;align-items:stretch;gap:12px;width:100%}
  .gfp-btn-row>.gfp-btn{width:100%}
  .gfp-stickycta .gfp-btn-row,.gfp-stickycta>.gfp-btn{width:auto}
  .gfp-hero__stats{gap:14px 10px}
  .gfp-hero__stats .gfp-stat__num{font-size:1.35rem}
  .gfp-feature{padding:32px 22px 34px}
  .gfp-audience__item{padding:24px 22px}
  .gfp-quote__mark{font-size:4rem}
  .gfp-form,.gfp-hubspot{padding:26px 22px}
  .gfp-receipt__body{padding:28px 24px 22px}
  .gfp-receipt__hero{padding:20px 24px}
  .gfp-receipt__hero dd{font-size:2.1rem}
  .gfp-lp-quote{padding:26px 22px}
  .gfp-trustrow{gap:8px 16px}
  .gfp-trustrow li{font-size:.86rem}
  .gfp-footer__slimmeta{gap:6px 18px;font-size:.88rem}
}

/* motion off */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
  .gfp-marquee__track{animation:none!important;transform:none!important}
  .gfp-mobile__inner>nav>ul>.menu-item,.gfp-mobile__cta,.gfp-mobile__meta{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* =========================================================
   EDITORIAL CONTENT — what the SEO team adds to a page
   =========================================================
   Every designed section is full-bleed and brings its own container. Anything
   else on the page is copy somebody added in the editor: a paragraph, an H2, a
   list, a table, an internal link. Left alone that content would run the full
   width of a 1440px screen with no gutter, touch the edges on a phone, and sit
   flush against the section above it.

   So "not full width" is read as "editorial", and gets the treatment the old
   .gfp-content wrapper used to give it — a 720px measure, a gutter, and room to
   breathe — wherever on the page it was dropped rather than only at the bottom.
   The result is that adding content improves the page instead of denting it.

   The same rules are applied inside the editor (.is-root-container) so what the
   client sees while typing is what publishes.
   ========================================================= */

.wp-block-post-content > *:not(.alignfull):not(.alignwide):not(.gfp-section):not(.gfp-page-hero):not(.gfp-hero):not(.gfp-ob-hero):not(.gfp-strip),
.editor-styles-wrapper .is-root-container > *:not(.alignfull):not(.alignwide):not(.gfp-section):not(.gfp-page-hero):not(.gfp-hero):not(.gfp-ob-hero):not(.gfp-strip){
  max-width:720px;
  margin-inline:auto;
  padding-inline:var(--gutter);
  font-size:1.06rem;
}

/* "Wide width" has to actually be wider than the default, or it is a control in
   the sidebar that does nothing when you use it. Wide fills the design's
   container; full still goes edge to edge. */
.wp-block-post-content > .alignwide,
.editor-styles-wrapper .is-root-container > .alignwide{
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* Room between editorial copy and the designed sections around it. */
.wp-block-post-content > .alignfull + *:not(.alignfull),
.editor-styles-wrapper .is-root-container > .alignfull + *:not(.alignfull){margin-top:64px}

/* Long unbroken strings — a URL, a code sample — must wrap rather than push the
   page sideways. */
.wp-block-post-content > .wp-block-code,
.wp-block-post-content > .wp-block-preformatted{
  overflow-x:auto;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:16px 18px;
  font-size:.92rem;
}
.wp-block-post-content > p{overflow-wrap:anywhere}

/* A table with more columns than the column is wide scrolls inside itself
   instead of widening the page. */
.wp-block-post-content > .wp-block-table{overflow-x:auto}

.wp-block-post-content > *:not(.alignfull):has(+ .alignfull),
.editor-styles-wrapper .is-root-container > *:not(.alignfull):has(+ .alignfull){margin-bottom:64px}

/* A page that is nothing but editorial copy still needs top and bottom space. */
.wp-block-post-content > *:not(.alignfull):first-child,
.editor-styles-wrapper .is-root-container > *:not(.alignfull):first-child{margin-top:64px}
.wp-block-post-content > *:not(.alignfull):last-child,
.editor-styles-wrapper .is-root-container > *:not(.alignfull):last-child{margin-bottom:64px}

/* Typography for added copy — the same treatment .gfp-content gives it. */
.wp-block-post-content > h2:not(.alignfull),
.editor-styles-wrapper .is-root-container > h2:not(.alignfull){margin-top:1.7em}
.wp-block-post-content > h3:not(.alignfull),
.editor-styles-wrapper .is-root-container > h3:not(.alignfull){margin-top:1.5em}

.wp-block-post-content > p:not(.alignfull) a,
.wp-block-post-content > ul:not(.alignfull) a,
.wp-block-post-content > ol:not(.alignfull) a{
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--green) 40%,transparent);
  text-underline-offset:3px;
}

.wp-block-post-content > ul:not(.alignfull) li,
.wp-block-post-content > ol:not(.alignfull) li{margin-bottom:9px}

.wp-block-post-content > figure.wp-block-image:not(.alignfull) img{
  border-radius:var(--r);
  border:1px solid var(--line);
}

.wp-block-post-content > .wp-block-quote:not(.alignfull){
  padding:6px 0 6px 26px;
  border-left:3px solid var(--green);
  font-family:var(--serif);
  font-size:1.5rem;
  color:var(--ink);
  line-height:1.32;
}

/* Tables — an SEO team will add comparison tables, and an unstyled one is a
   wall of unaligned text. */
.wp-block-post-content > .wp-block-table:not(.alignfull) table{
  border-collapse:collapse;
  width:100%;
  font-size:.97rem;
}
.wp-block-post-content > .wp-block-table:not(.alignfull) th,
.wp-block-post-content > .wp-block-table:not(.alignfull) td{
  border:1px solid var(--line);
  padding:11px 14px;
  text-align:left;
}
.wp-block-post-content > .wp-block-table:not(.alignfull) th{
  background:var(--paper-2);
  font-weight:700;
}

/* Core details/accordion, which is what an FAQ added in the editor will be. */
.wp-block-post-content > .wp-block-details:not(.alignfull){
  border-bottom:1px solid var(--line);
  padding:16px 0;
}
.wp-block-post-content > .wp-block-details:not(.alignfull) summary{
  cursor:pointer;
  font-weight:600;
  color:var(--ink);
}

/* =========================================================
   CORE-BLOCK EQUIVALENTS
   =========================================================
   The designed sections are built from core blocks now, and a few pieces of the
   original markup have no core equivalent. Rather than invent a block for each,
   the same picture is produced from what core does emit.
   ========================================================= */

/* Feature card numbering.
   Was a hand-typed <span class="gfp-feature__idx">01</span>, which meant
   deleting the third card left 01, 02, 04. A counter cannot go out of step, so
   the client can add, remove and reorder cards freely. */
.gfp-features--counted{counter-reset:gfp-feature}
.gfp-features--counted .gfp-feature::before{
  counter-increment:gfp-feature;
  content:counter(gfp-feature,decimal-leading-zero);
  display:block;
  font-size:.82rem;
  font-weight:700;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  letter-spacing:.06em;
}

/* Quote attribution.
   Was <figcaption><cite>Name<span>Role</span></cite></figcaption>. Core has no
   cite block, so it is a paragraph: <strong>Name</strong><br>Role. */
.gfp-quote__cite{
  display:block;
  margin-top:26px;
  font-style:normal;
  font-weight:500;
  color:var(--muted);
  font-size:.9rem;
  letter-spacing:.01em;
}
.gfp-quote__cite strong{
  display:block;
  font-weight:600;
  color:var(--ink);
  font-size:1rem;
  margin-bottom:4px;
}

/* The opening quotation mark, previously its own <span>. */
.wp-block-group.gfp-quote::before{
  content:"\201C";
  font-family:var(--serif);
  font-size:5rem;
  line-height:.6;
  color:var(--green);
  opacity:.25;
  height:.5em;
  display:block;
}

/* "Explore" links sit in a paragraph, because core has no bare-link block. */
.gfp-arrowlink-wrap{margin:0}
.gfp-arrowlink-wrap .gfp-arrowlink::after{
  content:"";
  width:15px;height:15px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Core's list block keeps its own class alongside ours. */
.wp-block-list.gfp-checklist{list-style:none;padding:0}

/* Core wraps every group in .wp-block-group, which carries no styling of its
   own. Block gap is disabled in theme.json (see the note there), so core emits
   no margin rules of its own and the design's spacing applies as written — but
   belt and braces for the grid rows, where a stray margin on the second child
   is a visible misalignment rather than just extra space. */
.gfp-hero__stats > *,
.gfp-strip__row > *,
.gfp-statband > *,
.gfp-price-grid > *,
.gfp-steps > *,
.gfp-features > *,
.gfp-audience > *,
.gfp-founders > *,
.gfp-compare > *,
.gfp-lp-problems > *,
.gfp-lp-features > *,
.gfp-lp-quotes > *,
.gfp-contact > *,
.gfp-footer__top > *,
.gfp-hero__grid > *,
.gfp-split > *{margin-block-start:0}

/* Site Logo and Navigation, so the core blocks wear the theme's header. */
.gfp-header .wp-block-site-logo img{display:block;height:auto}
.gfp-header .wp-block-navigation{font-weight:500}

/* Step numbering, same reasoning as the feature cards: a counter cannot fall
   out of step with the list when somebody reorders it. */
.gfp-steps--counted{counter-reset:gfp-step}
.gfp-steps--counted .gfp-step::before{
  counter-increment:gfp-step;
  content:counter(gfp-step);
  display:block;
  margin-bottom:10px;
  font-size:.9rem;
  color:var(--green-700);
  font-weight:700;
  letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}

/* --- Pieces that changed shape in the core-block rebuild ------------------
   Each of these was a hand-written <span> or inline SVG that core has no
   equivalent for. Rather than invent a block per decoration, the same picture
   is drawn from CSS on the element core does emit. */

/* Value-strip ticks — were an inline check SVG per item. */
p.gfp-strip__item::before{
  content:"";
  flex:none;
  width:20px;height:20px;
  background:var(--green);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* The five review stars, previously a .gfp-stars span holding five SVGs. */
p.gfp-hero__proof::before{
  content:"";
  flex:none;
  width:97px;height:17px;
  background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='97' height='17' viewBox='0 0 97 17'%3E%3Cg fill='black'%3E%3Cpolygon points='8.5,1 10.6,6.2 16,6.5 11.8,10 13,15.6 8.5,12.7 4,15.6 5.2,10 1,6.5 6.4,6.2'/%3E%3Cpolygon points='28.5,1 30.6,6.2 36,6.5 31.8,10 33,15.6 28.5,12.7 24,15.6 25.2,10 21,6.5 26.4,6.2'/%3E%3Cpolygon points='48.5,1 50.6,6.2 56,6.5 51.8,10 53,15.6 48.5,12.7 44,15.6 45.2,10 41,6.5 46.4,6.2'/%3E%3Cpolygon points='68.5,1 70.6,6.2 76,6.5 71.8,10 73,15.6 68.5,12.7 64,15.6 65.2,10 61,6.5 66.4,6.2'/%3E%3Cpolygon points='88.5,1 90.6,6.2 96,6.5 91.8,10 93,15.6 88.5,12.7 84,15.6 85.2,10 81,6.5 86.4,6.2'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='97' height='17' viewBox='0 0 97 17'%3E%3Cg fill='black'%3E%3Cpolygon points='8.5,1 10.6,6.2 16,6.5 11.8,10 13,15.6 8.5,12.7 4,15.6 5.2,10 1,6.5 6.4,6.2'/%3E%3Cpolygon points='28.5,1 30.6,6.2 36,6.5 31.8,10 33,15.6 28.5,12.7 24,15.6 25.2,10 21,6.5 26.4,6.2'/%3E%3Cpolygon points='48.5,1 50.6,6.2 56,6.5 51.8,10 53,15.6 48.5,12.7 44,15.6 45.2,10 41,6.5 46.4,6.2'/%3E%3Cpolygon points='68.5,1 70.6,6.2 76,6.5 71.8,10 73,15.6 68.5,12.7 64,15.6 65.2,10 61,6.5 66.4,6.2'/%3E%3Cpolygon points='88.5,1 90.6,6.2 96,6.5 91.8,10 93,15.6 88.5,12.7 84,15.6 85.2,10 81,6.5 86.4,6.2'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
p.gfp-hero__proof{font-size:.92rem;color:var(--muted)}

/* The live-pricing tag is a paragraph now; the pulsing dot was its <i>. */
.gfp-hero__photo{position:relative}
.gfp-hero__photo .wp-block-image{height:100%;margin:0}
p.gfp-hero__tag::before{
  content:"";
  width:7px;height:7px;
  border-radius:50%;
  background:#4ade80;
  box-shadow:0 0 0 4px rgba(74,222,128,.25);
  animation:gfp-pulse 2s var(--ease-in-out) infinite;
  flex:none;
}

/* =========================================================
   CORE NAVIGATION — the mobile overlay
   =========================================================
   The bespoke hamburger sheet is gone; this is core's Navigation overlay, which
   is what makes the menu editable without a developer. Unstyled it opens as a
   white sheet with the links jammed against the right edge and clipped, so it
   needs the theme's surface, spacing and type putting back on it.
   ========================================================= */

.wp-block-navigation__responsive-container.is-menu-open{
  background:var(--paper);
  padding:calc(var(--gutter) + 8px);
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content{
  padding-top:56px;
  align-items:flex-start;
}

/* Left-aligned, full width, generous tap targets — a menu is a list to scan,
   not a column of right-ragged text. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{
  align-items:flex-start;
  gap:0;
  width:100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
  width:100%;
  border-bottom:1px solid var(--line);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  display:block;
  width:100%;
  padding:16px 2px;
  font-size:1.06rem;
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
}

/* Children of "Features" read as a nested list rather than more top-level items. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  padding-left:18px;
  font-size:.98rem;
  font-weight:500;
  color:var(--ink-2);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{
  border:0;
  background:transparent;
}

.wp-block-navigation__responsive-container-close{
  top:22px;
  right:calc(var(--gutter) + 8px);
  color:var(--ink);
}
.wp-block-navigation__responsive-container-close svg{width:26px;height:26px}

/* The open button sits next to a green CTA, so it needs to read as a control
   rather than a stray glyph — but only where it belongs. Core hides it above
   600px for an overlayMenu of "mobile"; setting display:flex unconditionally
   put a hamburger next to the desktop menu. */
@media (max-width:599px){
  .gfp-header .wp-block-navigation__responsive-container-open{
    width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;
    color:var(--ink);
  }
}

/* Core sets the overlay's padding and the submenu's alignment with selectors
   that out-specify a plain class, so these have to be stated more forcefully.
   Without them the links sit hard against the left edge and the Features
   children float off to the right, away from the parent they belong to. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open{
  padding:24px var(--gutter) 40px;
  background:var(--paper);
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content{
  width:100%;
  padding-top:44px;
}

/* Submenus: in the overlay they are a nested list under their parent, not the
   floating dropdown they are on desktop. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container{
  position:static !important;
  width:100% !important;
  min-width:0 !important;
  left:auto !important;
  right:auto !important;
  align-items:flex-start !important;
  padding-left:0;
  box-shadow:none;
  opacity:1 !important;
  visibility:visible !important;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container .wp-block-navigation-item{
  border-bottom:0;
}

/* The parent of a submenu keeps its own rule above the children. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
.has-child > .wp-block-navigation-item__content{border-bottom:1px solid var(--line)}

/* Footer column headings.
   They are h2 rather than h5 so the document does not jump three heading levels
   on every page of the site — a real crawl and screen-reader problem, and
   invisible in the design because the size is set here instead. */
.gfp-footer h2.gfp-footer__col{
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  margin:0 0 16px;
  line-height:1.3;
}

/* =========================================================
   BLOG CARDS — core Query Loop markup
   =========================================================
   The card styling below used to target article.gfp-post, the classic
   listing's markup. Core's Query Loop renders <li class="wp-block-post">
   instead, so the blog landed as bare text on the page — no card, no border,
   no hover. Same look, correct selectors.
   ========================================================= */
ul.gfp-posts{list-style:none;padding:0;margin:0}
.gfp-posts > .wp-block-post{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .25s var(--ease-out);
}
.gfp-posts > .wp-block-post:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:transparent}
.gfp-posts .wp-block-post-featured-image{margin:0}
.gfp-posts .wp-block-post-featured-image img{width:100%;height:200px;object-fit:cover;display:block}
.gfp-posts .wp-block-post-date,
.gfp-posts .wp-block-post-title,
.gfp-posts .wp-block-post-excerpt{padding-inline:22px}
.gfp-posts .wp-block-post-date{margin:18px 0 0;font-size:.82rem;color:var(--muted)}
.gfp-posts .wp-block-post-title{margin:8px 0 0;font-size:1.15rem;line-height:1.3}
.gfp-posts .wp-block-post-title a{color:var(--ink)}
.gfp-posts .wp-block-post-title a:hover{color:var(--green-700)}
.gfp-posts .wp-block-post-excerpt{margin:10px 0 22px;font-size:.95rem;color:var(--ink-2)}
.gfp-posts .wp-block-post-excerpt__more-text{margin-top:8px}
.gfp-posts .wp-block-post-excerpt__more-link{font-weight:600;color:var(--green-700)}

/* Narrower screens: the three-up grid steps down rather than crushing. */
@media(max-width:960px){ul.gfp-posts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){ul.gfp-posts{grid-template-columns:1fr}}

/* Query pagination: previous/next match the numbered boxes. */
.gfp-pagination{flex-wrap:wrap;align-items:center}
.gfp-pagination .wp-block-query-pagination-previous,
.gfp-pagination .wp-block-query-pagination-next{
  display:grid;place-items:center;height:42px;padding:0 14px;
  border:1px solid var(--line-strong);border-radius:10px;
  color:var(--ink);font-weight:600;
}
.gfp-pagination .wp-block-query-pagination-previous:hover,
.gfp-pagination .wp-block-query-pagination-next:hover{border-color:var(--green);color:var(--green)}

/* =========================================================
   EDITOR-ONLY FIXES for the block canvas
   ========================================================= */

/* The full-bleed dynamic blocks. Their front-end output carries alignfull on
   the section, but in the editor the block wrapper is what the reading-column
   rule sees — and it has no alignfull class, so the calculator and the logo
   wall previewed squeezed into 720px. */
.editor-styles-wrapper .is-root-container > .wp-block[class*="wp-block-gfp-calculator"],
.editor-styles-wrapper .is-root-container > .wp-block[class*="wp-block-gfp-vendor-marquee"],
.editor-styles-wrapper .is-root-container > .wp-block[class*="wp-block-gfp-posts-page-content"],
.editor-styles-wrapper .is-root-container > .wp-block[class*="wp-block-gfp-sticky-cta"]{
  max-width:none !important;
  padding-inline:0 !important;
}

/* The editor previews an inherited query with the "no results" branch rendered
   alongside the posts it found — core quirk, front end is correct. Showing
   "Nothing published yet" next to a list of posts reads as a broken site to
   the person editing it, so hide the branch whenever posts are present. */
.editor-styles-wrapper .wp-block-query:has(.wp-block-post) > .wp-block-query-no-results{display:none}

/* Core wraps the page numbers in their own div; the number links are
   display:grid, which is block-level, so inside that wrapper they stacked
   vertically. The wrapper becomes a flex row to match the outer nav. */
.gfp-pagination .wp-block-query-pagination-numbers{display:flex;gap:8px;align-items:center}

/* The Features dropdown — core's submenu panel, wearing the theme.
   Unstyled it is a square white box with hairline edges; this gives it the
   card treatment every other floating surface on the site has. */
.gfp-header .wp-block-navigation__submenu-container{
  min-width:230px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow-float);
  padding:8px;
  margin-top:10px;
}
.gfp-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  display:block;
  padding:10px 14px;
  border-radius:9px;
  font-size:.95rem;
  font-weight:500;
  color:var(--ink-2);
}
.gfp-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{
  background:var(--green-wash);
  color:var(--ink);
}

/* Sticky, restored for the block theme.
   .gfp-header carries position:sticky, but the template part wraps it in a div
   exactly as tall as the header — and sticky only sticks within its parent, so
   the range was zero and the bar scrolled away with the page. The wrapper is
   what has the whole page as its parent, so the wrapper is what sticks. */
.wp-block-template-part:has(> .gfp-header),
.wp-block-template-part:has(> div > .gfp-header){
  position:sticky;
  top:0;
  z-index:100;
}

/* Clear the admin bar, but only where it is actually fixed. Below 783px
   WordPress switches it to position:absolute and it scrolls away with the
   page — offsetting for it there just leaves a gap above the header. */
@media screen and (min-width:783px){
  .admin-bar .wp-block-template-part:has(> .gfp-header),
  .admin-bar .wp-block-template-part:has(> div > .gfp-header){
    top:var(--wp-admin--admin-bar--height, 32px);
  }
}

/* Trust row ticks. The classic markup carried an inline check SVG per item;
   core's list block cannot, so the mark is drawn on the marker instead. */
.gfp-trustrow{list-style:none}
.gfp-trustrow li::before{
  content:"";
  flex:none;
  width:16px;height:16px;
  background:var(--green);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}