/* ============================================================================
   goh-pages.css - shared shell for the pages added 2026-08-27:
   benefits.html + the six benefit pages, visit.html.

   WHY THIS FILE EXISTS. Every older page carries its own inline <style> block
   and css/ is deliberately empty. Nine new pages sharing one shell would have
   meant nine copies of the same 40KB, so these pages load one small same-origin
   stylesheet instead, following the precedent already set by fonts.css. The
   older pages are untouched and keep their inline CSS.

   Page-specific rules stay in each page's own inline <style>. Only what is
   genuinely shared lives here: tokens, nav, footer, buttons, page rhythm and
   the standardised benefit cross-link block.

   CONVENTIONS THIS FILE FOLLOWS (see the homepage for the originals):
   - DESKTOP-FIRST. Base rules are the desktop rules; adaptation lives in
     max-width queries. 1101px is the frozen desktop floor, 1100px the mobile
     boundary, 1000px the burger, 900px/640px the section-buffer retunes.
   - Sections butt together with no margin. Separation is a background flip
     plus a 1px hairline.
   - Cormorant Garamond for headings and prices, Outfit for everything else.
     Italic <em> inside a heading is the house accent.
   - Every hover effect is cancelled below 1100px, and every animation has a
     prefers-reduced-motion escape.
   ========================================================================== */

:root{
  --g:#00cc00;
  --g2:#00ff00;
  --g3:#009900;
  --gm:rgba(0,204,0,0.10);
  --gb:rgba(0,204,0,0.22);
  --dark:#050905;
  --dark2:#0b140b;
  --dark3:#111d11;
  --mid:#1a2a1a;
  --light:#f2f7f2;
  --off:#f8fbf8;
  --white:#ffffff;
  --text:#0d180d;
  --muted:#4b5a4b;
  --tl:rgba(255,255,255,0.65);
  --gut:clamp(18px,3vw,38px);
  --page:2200px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:74px}
body{font-family:'Outfit',sans-serif;background:var(--white);color:var(--text);overflow-x:hidden}
img{max-width:100%}
@media(pointer:coarse){input,textarea,select{font-size:16px !important}}

.max{max-width:var(--page);margin:0 auto;width:100%}

/* ===== NAV =============================================================== */
nav{position:fixed;top:0;left:0;right:0;z-index:200;height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,2.5vw,32px);background:#fff;border-bottom:1px solid rgba(13,24,13,.08)}
.logo{display:flex;align-items:center;text-decoration:none;margin-left:-5px}
.logo img{height:40px;width:auto;display:block}
.nav-center{display:flex;gap:28px;list-style:none;position:absolute;left:50%;transform:translateX(-50%)}
.nav-center>li{position:relative}
.nav-center a{color:#3f4e3f;text-decoration:none;font-size:.82rem;font-weight:400;transition:color .2s}
.nav-center a:hover{color:var(--g3)}
.nav-right{display:flex;align-items:center;gap:20px}
.nav-phone{color:#008000;font-weight:600;font-size:.82rem;text-decoration:none;white-space:nowrap}
.nav-account{color:var(--g3);font-weight:500;font-size:.82rem;text-decoration:none;white-space:nowrap;transition:color .2s}
.nav-account:hover{color:var(--g)}
.nav-book{background:var(--g);color:var(--dark) !important;padding:9px 20px;border-radius:4px;font-weight:700;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;transition:all .2s;display:inline-block}
.nav-book:hover{background:var(--g2);transform:translateY(-1px)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:14px 10px;margin:-10px -6px}
.burger span{display:block;width:22px;height:2px;background:var(--g3);transition:all .3s}

/* --- Benefits dropdown (CSS only - no inline script under the strict CSP) ---
   Opens on hover and on keyboard focus anywhere inside the item, so it is
   reachable by tab as well as by pointer. The parent link still goes to
   benefits.html, so the menu is an addition rather than a gate. */
.nav-drop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);min-width:252px;background:#fff;border:1px solid rgba(13,24,13,.10);border-radius:10px;box-shadow:0 18px 44px -18px rgba(0,60,0,.28),0 2px 6px rgba(0,40,0,.05);padding:8px;list-style:none;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility .18s}
.nav-center>li:hover>.nav-drop,.nav-center>li:focus-within>.nav-drop{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
/* A hit-bridge across the 6px gap, so the pointer can travel from the nav item
   to the panel without the menu closing underneath it. */
.nav-center>li:hover>.nav-drop::before,.nav-center>li:focus-within>.nav-drop::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.nav-drop li{margin:0}
.nav-drop a{display:block;padding:9px 12px;border-radius:6px;font-size:.82rem;line-height:1.35;color:#3f4e3f;transition:background .16s ease,color .16s ease}
.nav-drop a:hover,.nav-drop a:focus-visible{background:var(--gm);color:var(--g3)}
.nav-drop .nav-drop-all{margin-top:6px;padding-top:10px;border-top:1px solid rgba(13,24,13,.08);font-weight:600;color:var(--g3)}
.nav-caret{display:inline-block;width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);margin-left:5px;vertical-align:middle;opacity:.55}

/* ===== MOBILE MENU ======================================================= */
.mob-menu{display:none}
@media(max-width:1000px){
  .nav-center,.nav-account{display:none}
  .burger{display:flex}
  .logo img{height:38px}
  /* Full-screen sheet, identical on every page (Tommy 2026-08-28: consistent throughout).
     index.html and protocols.html carry a byte-identical inline copy - update together. */
  .mob-menu{display:none;position:fixed;top:58px;left:0;right:0;bottom:0;background:#fff;z-index:199}
  .mob-menu.open{display:block;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .mob-menu ul{list-style:none;padding:10px clamp(16px,5vw,28px) 0}
  .mob-menu ul li a{display:block;padding:13px 0;font-size:.95rem;color:var(--text);text-decoration:none;border-bottom:1px solid rgba(13,24,13,.06)}
  .mob-menu ul li a:hover{color:var(--g3)}
  /* Benefits sub-menu: COLLAPSED by default behind a chevron toggle (Tommy,
     2026-08-27: "the benefits tab needs to be a drop down menu arrow > that
     opens the pages"). CSS-only checkbox pattern - same idiom as the site's
     other "... >" toggles - so it needs no JS and the menu-close-on-tap
     handlers (which watch a/button only) never swallow the toggle. */
  .mob-bsub{position:relative}
  .mob-bsub>a{padding-right:56px}
  .mob-bsub-cb{position:absolute;width:0;height:0;margin:0;opacity:0;pointer-events:none}
  .mob-bsub-tg{position:absolute;top:0;right:-8px;display:flex;align-items:center;justify-content:center;width:52px;height:47px;cursor:pointer;color:var(--g3);-webkit-tap-highlight-color:transparent}
  .mob-bsub-tg svg{width:15px;height:15px;transition:transform .25s ease}
  .mob-bsub-cb:focus-visible ~ .mob-bsub-tg{outline:2px solid var(--g3);outline-offset:-6px;border-radius:8px}
  /* open state lays the six pages out 3x2 (three rows, two columns) - Tommy 2026-08-27 */
  .mob-sub{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;padding:0 0 0 14px !important;border-left:2px solid var(--gb);margin:0 0 0 2px;max-height:0;overflow:hidden;visibility:hidden;transition:max-height .3s ease,visibility .3s,margin .3s,padding .3s}
  .mob-sub li a{padding:9px 0 !important;font-size:.85rem !important;color:var(--muted) !important;border-bottom:none !important}
  .mob-bsub-cb:checked~.mob-sub{max-height:340px;visibility:visible;padding-top:2px !important;padding-bottom:6px !important;margin-bottom:8px}
  .mob-bsub-cb:checked~.mob-bsub-tg svg{transform:rotate(90deg)}
  .mob-menu-cta{display:flex;gap:10px;padding:14px clamp(16px,5vw,28px) 20px}
  .mob-cta-btn{flex:1;text-align:center;padding:13px 10px;border-radius:4px;font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-decoration:none}
  .mob-cta-primary{background:var(--g);color:var(--dark)}
  .mob-cta-secondary{border:1px solid rgba(13,24,13,.18);color:var(--text)}
}
@media(max-width:1280px){.nav-center{gap:18px}.nav-center a{font-size:.78rem}.nav-right{gap:14px}.nav-phone,.nav-account{font-size:.78rem}.nav-book{padding:8px 16px;font-size:.74rem}}
/* Nav items since 2026-08-28 (Prices retired into Protocols & Pricing): one more squeeze before the burger at 1000px. */
@media(max-width:1150px){.nav-center{gap:13px}.nav-center a{font-size:.76rem}.nav-right{gap:11px}}
@media(max-width:1085px){.nav-center{gap:9px}.nav-center a{font-size:.72rem}.nav-right{gap:9px}.nav-phone,.nav-account{font-size:.74rem}}

/* ===== BUTTONS =========================================================== */
.btn-g{background:var(--g);color:var(--dark);padding:16px 34px;font-size:.86rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border-radius:4px;border:none;cursor:pointer;display:inline-block;transition:all .2s ease;box-shadow:0 0 0 1px rgba(0,255,0,.55),0 0 14px rgba(0,255,0,.40),0 0 28px rgba(0,255,0,.18)}
.btn-g:hover{background:var(--g2);transform:translateY(-2px);box-shadow:0 0 0 2px rgba(0,255,0,.85),0 0 22px rgba(0,255,0,.65),0 0 44px rgba(0,255,0,.32)}
.btn-g:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--white);padding:15px 30px;font-size:.86rem;font-weight:400;letter-spacing:.03em;text-decoration:none;border:1px solid rgba(255,255,255,.22);border-radius:4px;display:inline-block;transition:all .25s}
.btn-ghost:hover{border-color:var(--g);color:var(--g)}
.btn-light{background:transparent;color:var(--muted);border:1px solid rgba(13,24,13,.18);padding:15px 30px;font-size:.86rem;text-decoration:none;border-radius:4px;display:inline-block;transition:all .25s}
.btn-light:hover{color:var(--g3);border-color:var(--g3)}

/* ===== SHARED TYPE ======================================================= */
.sec-h{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;line-height:1.06;letter-spacing:-.005em}
.sec-h em{font-style:italic;color:var(--g3)}
.eyebrow{display:block;font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g3)}

/* ===== PAGE TOP =========================================================
   Every new page opens with this band. padding-top clears the fixed 58px nav;
   the older pages solved the same problem the same way. */
.ptop{background:var(--white);padding:calc(58px + clamp(30px,5vh,58px)) var(--gut) clamp(34px,5vh,58px);position:relative}
.ptop-inner{max-width:var(--page);margin:0 auto}
.ptop-crumb{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:.72rem;color:var(--muted);margin-bottom:18px}
.ptop-crumb a{color:var(--muted);text-decoration:none;transition:color .2s}
.ptop-crumb a:hover{color:var(--g3)}
.ptop-crumb span{opacity:.45}
.ptop h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:clamp(2.3rem,5.4vw,4.1rem);line-height:1.02;letter-spacing:-.012em;max-width:17ch}
.ptop h1 em{font-style:italic;color:var(--g3)}
.ptop-lead{margin-top:20px;max-width:60ch;font-size:1.06rem;line-height:1.68;color:#33422f;font-weight:300}
.ptop-lead strong{font-weight:600;color:var(--text)}

/* ===== IMAGE PLACEHOLDER ================================================
   Used where a photograph is wanted but not yet supplied. It renders as a
   quiet labelled panel rather than a broken image, so the page is shippable
   today and the slot is obvious to whoever fills it. Delete the block and drop
   in a <picture> when the file exists. */
/* 2026-09-02: photos are not in yet, so the art-direction placeholders are
   hidden rather than shipped. Delete the display:none (and the :has rules
   below) when the real images land. */
.imgslot{display:none}
.bp-open-grid:has(> .imgslot),
.bp-path-inner:has(> .imgslot),
.bp-who-grid:has(> .imgslot){grid-template-columns:1fr}
.imgslot--live{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;border:1px dashed rgba(0,153,0,.42);background:repeating-linear-gradient(135deg,rgba(0,204,0,.045) 0 12px,rgba(0,204,0,.02) 12px 24px);border-radius:14px;padding:18px 20px;min-height:210px;color:var(--muted)}
.imgslot-tag{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g3)}
.imgslot-note{font-size:.82rem;line-height:1.5;max-width:46ch}
.imgslot.on-dark{border-color:rgba(0,255,0,.3);background:repeating-linear-gradient(135deg,rgba(0,255,0,.06) 0 12px,rgba(0,255,0,.02) 12px 24px);color:rgba(255,255,255,.62)}
.imgslot.on-dark .imgslot-tag{color:var(--g)}
.imgslot.tall{min-height:340px}

/* ===== STANDARDISED BENEFIT CROSS-LINK BLOCK ============================
   Tommy, 2026-08-27: every benefit page closes with the other five categories,
   The Taster, The Established Reset and a button through to all protocols.
   That is what turns six leaf pages into a loop rather than six dead ends.
   Prefix: bnav- */
.bnav{background:var(--off);border-top:1px solid rgba(13,24,13,.08);padding:clamp(40px,6vh,72px) var(--gut)}
.bnav-inner{max-width:var(--page);margin:0 auto}
.bnav-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.bnav-head h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.1}
.bnav-head h2 em{font-style:italic;color:var(--g3)}
.bnav-head p{font-size:.9rem;color:var(--muted);max-width:44ch}
.bnav-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.bnav-card{display:flex;flex-direction:column;gap:7px;background:#fff;border:1px solid rgba(13,24,13,.09);border-radius:14px;padding:17px 18px 19px;text-decoration:none;color:var(--text);transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease}
.bnav-card:hover{border-color:var(--g);box-shadow:0 14px 32px -18px rgba(0,80,0,.34);transform:translateY(-2px)}
.bnav-card-k{font-size:.58rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--g3)}
.bnav-card-n{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.24rem;font-weight:600;line-height:1.12}
.bnav-card-d{font-size:.81rem;line-height:1.5;color:var(--muted);flex:1}
.bnav-card-go{font-size:.75rem;font-weight:600;color:var(--g3)}

.bnav-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.bnav-p{position:relative;display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid rgba(13,24,13,.09);border-radius:18px;padding:22px 24px 24px;text-decoration:none;color:var(--text);transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease}
.bnav-p:hover{border-color:var(--g);box-shadow:0 18px 40px -20px rgba(0,80,0,.32);transform:translateY(-2px)}
.bnav-p-rec{border-color:rgba(0,204,0,.42);box-shadow:0 0 0 1px rgba(0,204,0,.10)}
.bnav-p-k{font-size:.6rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--g3)}
.bnav-p-n{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.62rem;font-weight:600;line-height:1.1}
.bnav-p-d{font-size:.87rem;line-height:1.55;color:var(--muted);flex:1}
.bnav-p-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-top:4px}
.bnav-p-price{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.35rem;font-weight:600;line-height:1;display:flex;align-items:baseline;gap:8px}
.bnav-p-price small{font-family:'Outfit',sans-serif;font-size:.72rem;font-weight:400;color:var(--muted)}
.bnav-p-cta{font-size:.76rem;font-weight:600;color:var(--g3)}
.bnav-valid{margin-top:14px;text-align:center;font-size:.76rem;color:var(--muted);font-weight:300}
.bnav-all{margin-top:16px;display:flex;justify-content:center}

/* ===== BENEFIT PAGE SKELETON ============================================
   Shared by the six hbot-for-*.html pages only. The bones live here so six
   pages do not carry six copies; each page keeps its one unique accent band
   in its own inline <style>. Prefix: bp- */
.bp-open{background:var(--off);border-top:1px solid rgba(13,24,13,.08);padding:clamp(44px,7vh,80px) var(--gut)}
.bp-open-grid{max-width:var(--page);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);gap:clamp(30px,4.5vw,72px);align-items:start}
.bp-open .sec-h{font-size:clamp(1.7rem,3.2vw,2.6rem);margin-bottom:18px;max-width:26ch}
.bp-prose p{font-size:.98rem;line-height:1.78;color:#33422f;margin-bottom:16px;max-width:64ch}
.bp-prose p strong{color:var(--text);font-weight:600}
.bp-prose p:last-child{margin-bottom:0}
.bp-prose a{color:var(--g3);text-decoration:none;border-bottom:1px solid var(--gb);transition:border-color .2s}
.bp-prose a:hover{border-color:var(--g3)}
.bp-side{display:flex;flex-direction:column;gap:18px}
.bp-who{background:#fff;border:1px solid rgba(13,24,13,.09);border-radius:14px;padding:20px 22px}
.bp-who h3{font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--g3);margin-bottom:10px}
.bp-who ul{list-style:none}
.bp-who li{position:relative;padding:8px 0 8px 24px;font-size:.88rem;line-height:1.5;color:var(--text);border-bottom:1px solid rgba(13,24,13,.06)}
.bp-who li:last-child{border-bottom:none;padding-bottom:2px}
.bp-who li::before{content:"";position:absolute;left:2px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--gm);border:2px solid var(--g3)}

.bp-cards{background:var(--white);padding:clamp(44px,7vh,80px) var(--gut)}
.bp-cards-inner{max-width:var(--page);margin:0 auto}
.bp-cards-head{margin-bottom:28px}
.bp-cards-head .sec-h{font-size:clamp(1.7rem,3.2vw,2.6rem);margin-bottom:12px;max-width:26ch}
.bp-cards-head p{font-size:.95rem;line-height:1.7;color:var(--muted);max-width:62ch}
.bp-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bp-card{background:var(--off);border:1px solid rgba(13,24,13,.08);border-radius:14px;padding:20px 22px 22px}
.bp-card h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.3rem;font-weight:600;line-height:1.15;margin-bottom:9px}
.bp-card p{font-size:.87rem;line-height:1.64;color:#3c4b3c}
.bp-card p strong{color:var(--text);font-weight:600}

.bp-how{background:var(--off);border-top:1px solid rgba(13,24,13,.08);padding:clamp(44px,7vh,80px) var(--gut)}
.bp-how-inner{max-width:var(--page);margin:0 auto}
.bp-how .sec-h{font-size:clamp(1.7rem,3.2vw,2.6rem);margin-bottom:10px;max-width:26ch}
.bp-how-sub{font-size:.95rem;line-height:1.7;color:var(--muted);max-width:62ch;margin-bottom:28px}
.bp-steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(13,24,13,.12)}
.bp-step{padding:24px 28px 8px 0;border-right:1px solid rgba(13,24,13,.10)}
.bp-step+.bp-step{padding-left:28px}
.bp-step:last-child{border-right:none;padding-right:0}
.bp-step-n{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.9rem;font-weight:600;color:var(--g3);line-height:1;margin-bottom:10px}
.bp-step h3{font-size:1rem;font-weight:600;margin-bottom:8px}
.bp-step p{font-size:.88rem;line-height:1.66;color:#3c4b3c}

.bp-research{background:var(--dark);color:#fff;padding:clamp(44px,7vh,80px) var(--gut)}
.bp-research-inner{max-width:var(--page);margin:0 auto}
.bp-research .eyebrow{color:var(--g);margin-bottom:10px}
.bp-research .sec-h{color:#fff;font-size:clamp(1.7rem,3.2vw,2.6rem);margin-bottom:10px;max-width:28ch}
.bp-research-note{font-size:.9rem;color:rgba(255,255,255,.66);max-width:64ch;line-height:1.66;margin-bottom:26px}
.bp-research ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bp-research li{background:rgba(255,255,255,.045);border:1px solid rgba(0,204,0,.16);border-radius:12px;padding:18px 20px;font-size:.88rem;line-height:1.68;color:rgba(255,255,255,.82)}
.bp-research li em{color:#fff;font-style:italic}
.bp-research li strong{color:var(--g);font-weight:600}
.bp-research-dis{margin-top:20px;font-size:.78rem;color:rgba(255,255,255,.6);font-style:italic;max-width:74ch}

.bp-path{background:var(--white);padding:clamp(44px,7vh,80px) var(--gut)}
.bp-path-inner{max-width:var(--page);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,440px);gap:clamp(30px,4.5vw,72px);align-items:start}
.bp-path-text .sec-h{font-size:clamp(1.7rem,3.2vw,2.6rem);margin-bottom:16px;max-width:24ch}
.bp-path-text p{font-size:.95rem;line-height:1.72;color:#33422f;margin-bottom:14px;max-width:58ch}
.bp-path-text p strong{color:var(--text);font-weight:600}
.bp-path-call{display:inline-block;margin-top:6px;font-size:.9rem;font-weight:600;color:var(--g3);text-decoration:none;border-bottom:1px solid var(--gb);transition:border-color .2s}
.bp-path-call:hover{border-color:var(--g3)}
.bp-suit{margin-top:16px;font-size:.78rem;line-height:1.6;color:var(--muted);max-width:52ch}
.bp-feat{display:flex;flex-direction:column;gap:9px;background:var(--off);border:1px solid rgba(0,204,0,.38);border-radius:18px;padding:26px 28px 28px;text-decoration:none;color:var(--text);box-shadow:0 0 0 1px rgba(0,204,0,.08),0 22px 48px -26px rgba(0,80,0,.35);transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease}
.bp-feat:hover{border-color:var(--g);transform:translateY(-2px);box-shadow:0 0 0 1px rgba(0,204,0,.16),0 28px 56px -26px rgba(0,80,0,.42)}
.bp-feat-k{font-size:.6rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--g3)}
.bp-feat-n{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.9rem;font-weight:600;line-height:1.08}
.bp-feat-m{font-size:.78rem;font-weight:600;color:var(--muted);letter-spacing:.02em}
.bp-feat-d{font-size:.89rem;line-height:1.6;color:#3c4b3c}
.bp-feat-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-top:8px;padding-top:14px;border-top:1px solid rgba(13,24,13,.09)}
.bp-feat-price{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.35rem;font-weight:600;line-height:1;display:flex;align-items:baseline;gap:8px}
.bp-feat-price small{font-family:'Outfit',sans-serif;font-size:.72rem;font-weight:400;color:var(--muted)}
.bp-feat-cta{font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--dark);background:var(--g);padding:10px 18px;border-radius:4px}

@media(max-width:1100px){
  .bp-card-grid{grid-template-columns:1fr 1fr}
  .bp-research ul{grid-template-columns:1fr}
  .bp-feat:hover{transform:none;border-color:rgba(0,204,0,.38);box-shadow:0 0 0 1px rgba(0,204,0,.08),0 22px 48px -26px rgba(0,80,0,.35)}
}
@media(max-width:900px){
  .bp-open,.bp-cards,.bp-how,.bp-research,.bp-path{padding-top:38px;padding-bottom:38px}
  .bp-open-grid,.bp-path-inner{grid-template-columns:1fr;gap:24px}
  .bp-steps{grid-template-columns:1fr;border-top:none}
  .bp-step{border-right:none;border-top:1px solid rgba(13,24,13,.12);padding:18px 0 6px}
  .bp-step+.bp-step{padding-left:0}
}
@media(max-width:640px){
  .bp-open,.bp-cards,.bp-how,.bp-research,.bp-path{padding-top:28px;padding-bottom:28px}
  .bp-card-grid{grid-template-columns:1fr;gap:10px}
  .bp-feat{padding:20px 20px 22px}
  .bp-feat-n{font-size:1.6rem}
}

/* ===== FOOTER ============================================================ */
footer{background:#000;border-top:1px solid rgba(0,204,0,.12);padding:64px var(--gut) 40px;position:relative;overflow:hidden;isolation:isolate}
footer::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:min(1020px,76%);aspect-ratio:300/163;background:url(logo.png) left center/contain no-repeat;opacity:.22;z-index:0;pointer-events:none}
footer>.max{position:relative;z-index:1}
.foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:44px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.05);margin-bottom:32px;align-items:flex-start}
.foot-brand{max-width:300px}
.foot-tagline{font-size:.83rem;color:rgba(255,255,255,.45);line-height:1.7;font-weight:300;margin-top:14px}
.foot-col h4{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.55);margin-bottom:16px}
.foot-toggle{display:block;width:100%;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;padding:0;text-align:left;cursor:default}
.foot-caret{display:none}
.foot-col ul{list-style:none}
.foot-col ul li{margin-bottom:9px}
.foot-col ul li a{font-size:.83rem;color:rgba(255,255,255,.62);text-decoration:none;transition:color .2s}
.foot-col ul li a:hover{color:var(--g)}
.foot-bottom{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px}
.foot-copy{font-size:.72rem;color:rgba(255,255,255,.5)}
.foot-dis{font-size:.68rem;color:rgba(255,255,255,.55);max-width:460px;line-height:1.55;text-align:right}
@media(max-width:700px){
  .foot-top{gap:0}
  .foot-brand{display:none}
  .foot-col:not(.foot-brand){width:100%;border-bottom:1px solid rgba(255,255,255,.10)}
  .foot-col h4{margin-bottom:0}
  .foot-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;padding:15px 0;min-height:44px}
  .foot-caret{display:block;position:relative;width:11px;height:11px;flex:none}
  .foot-caret::before,.foot-caret::after{content:"";position:absolute;background:rgba(255,255,255,.7);border-radius:2px}
  .foot-caret::before{top:4.75px;left:0;width:11px;height:1.5px}
  .foot-caret::after{left:4.75px;top:0;width:1.5px;height:11px;transition:opacity .25s ease}
  .foot-col:not(.foot-brand) ul{overflow:hidden;max-height:0;visibility:hidden;transition:visibility .3s,max-height .3s ease}
  .foot-col.is-open ul{max-height:460px;visibility:visible;padding-bottom:14px}
  .foot-col.is-open .foot-caret::after{opacity:0}
  .foot-bottom{flex-direction:column}
  .foot-dis{text-align:left;max-width:none}
}

/* ===== RESPONSIVE ======================================================== */
@media(max-width:1100px){
  .bnav-grid{grid-template-columns:repeat(3,1fr)}
  /* Touch devices keep hover states stuck on after a tap. Cancel them. */
  .bnav-card:hover,.bnav-p:hover{transform:none;box-shadow:none;border-color:rgba(13,24,13,.09)}
  .bnav-p-rec:hover{border-color:rgba(0,204,0,.42)}
}
@media(max-width:900px){
  .ptop{padding-top:calc(58px + 32px);padding-bottom:32px}
  .bnav{padding-top:36px;padding-bottom:38px}
  footer{padding-top:40px;padding-bottom:30px}
  .bnav-split{grid-template-columns:1fr}
}
@media(max-width:640px){
  .ptop{padding-top:calc(58px + 22px);padding-bottom:22px}
  .ptop-lead{font-size:1rem}
  .bnav{padding-top:24px;padding-bottom:26px}
  .bnav-grid{grid-template-columns:repeat(2,1fr);gap:9px}
  .bnav-card{padding:14px 15px 16px;border-radius:12px}
  .bnav-card-n{font-size:1.1rem}
  footer{padding-top:22px;padding-bottom:24px}
}
@media(max-width:420px){
  .bnav-grid{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bnav-card,.bnav-p,.nav-drop,.nav-book,.btn-g,.bp-feat,.mob-bsub-tg svg,.mob-sub{transition:none}
  .bnav-card:hover,.bnav-p:hover,.nav-book:hover,.btn-g:hover,.bp-feat:hover{transform:none}
}

/* Benefit-page footer menu: the six home-page image cards, current page in green (Tommy, 6 Sep 2026) */
.bn-menu{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bn-menu-card{position:relative;display:block;height:clamp(170px,15vw,230px);border-radius:14px;overflow:hidden;background:var(--dark);text-decoration:none;color:#fff;transition:transform .3s ease,box-shadow .3s ease}
.bn-menu-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bn-menu-card::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.42) 58%,rgba(0,0,0,.88) 100%);z-index:1;pointer-events:none}
.bn-menu-card:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(0,80,0,.18)}
.bn-menu-card:focus-visible{outline:3px solid var(--g);outline-offset:3px}
.bn-menu-in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:18px 20px}
.bn-menu-h{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(1.3rem,1.8vw,1.75rem);font-weight:600;line-height:1.06;text-shadow:0 2px 12px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.7)}
.bn-menu-h em{color:var(--g);font-style:italic}
.bn-menu-here{align-self:flex-start;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dark);background:var(--g);padding:4px 9px;border-radius:999px}
.bn-menu-card.is-here{box-shadow:0 0 0 3px var(--g),0 18px 42px rgba(0,80,0,.18)}
.bn-menu-card.is-here::after{content:'';position:absolute;inset:0;background:rgba(0,204,0,.14);z-index:1;pointer-events:none}
@media(max-width:900px){.bn-menu{grid-template-columns:repeat(2,1fr);gap:12px}.bn-menu-card{height:auto;aspect-ratio:4/3}}
@media(max-width:480px){.bn-menu-card{aspect-ratio:3/2}.bn-menu-in{padding:12px 14px}}