/* gg-brand-css (snapshot of live guidancegate.com, 1 Nov 2026) */
:root {
	--gg-colour-primary:   #022F42;
	--gg-colour-secondary: #130D32;
	--gg-colour-tertiary:  #FAF089;
	--gg-colour-heading:   #1D2939;
	--gg-colour-body:      #344054;
	--gg-colour-accent:    var(--gg-colour-secondary);
	--gg-font-heading:     'Raleway', system-ui, sans-serif;
	--gg-font-body:        'Raleway', -apple-system, BlinkMacSystemFont, sans-serif;
	/* Aliases for existing consumers expecting the older names. */
	--gg-heading-font:     var(--gg-font-heading);
	--gg-body-font:        var(--gg-font-body);

	/* Shape */
	--gg-radius-sm:        0;
	--gg-radius-md:        0;
	--gg-radius-lg:        0;
	--gg-radius-pill:      999px;
	--gg-border-width:     1px;

	/* Depth */
	--gg-shadow-sm:        0 1px 3px rgba(0,0,0,0.10);
	--gg-shadow-md:        0 4px 12px rgba(0,0,0,0.10);
	--gg-shadow-lg:        0 8px 24px rgba(0,0,0,0.25);

	/* Typography scale */
	--gg-h1-size:              2rem;
	--gg-h2-size:              1.5rem;
	--gg-h3-size:              1.25rem;
	--gg-h4-size:              1.1rem;
	--gg-body-size:            1rem;
	--gg-small-size:           0.875rem;
	--gg-line-height-heading:  1.3;
	--gg-line-height-body:     1.6;
	--gg-weight-heading:       700;
	--gg-weight-body:          400;

	/* Spacing */
	--gg-space-base:       8px;
	--gg-grid-gap:         24px;

	/* Layout (page/row width standards — backlog #11, audited 2026-07-15.
	   Structural, not brand-driven — no per-tenant override here, unlike
	   the tokens above. Real values from the masters: board body
	   .gg-rv2-body (admin-roadmap-v2.css:53), row/section column
	   .gg-rv2-section-head (admin-roadmap-v2.css:80,174), project-detail
	   .gg-bv2-main (project-detail-v2.css:386), card track --gg-rv2-col
	   (admin-roadmap-v2.css:22) — all READ-ONLY donors, never modified. */
	--gg-page-max:        1220px;
	--gg-page-max-detail: 1180px;
	--gg-col-max:         780px;
	--gg-card-track:      240px;

	/* The gutter a page always keeps between its content and the edge of the
	   screen (Sam, 16 Aug 2026: "the grid should always have padding left and
	   right, even when the page is made smaller").
	   The tokens above only hold a page in from the edge while the window is
	   wider than the max — they are a ceiling, and a ceiling does nothing once
	   the window drops below it. Measured on nine screens at 390px and 600px:
	   the board grid sat flush against both edges, the style guide 4px from
	   one and 24px from the other, My Offer 4px PAST the edge. Every one of
	   them had a horizontal padding somewhere; what they did not have was a
	   floor under it.
	   One value, so no page picks its own again, and so the floating Assistant
	   button has something to sit in rather than on. Narrower on a phone —
	   see the @media below — because 24px of a 390px screen is content a coach
	   has paid for. */
	--gg-page-gutter:     24px;

	/* Page backdrop — ONE photograph, ONE scrim, for every page in the product
	   (Sam, 2 Aug). Structural like the layout tokens above, not brand-driven.
	   Until now each page wrote its own recipe and they stopped agreeing: five
	   list pages at 0.93, the Offer Manager board at black 0.35, Outreach on a
	   different photograph altogether, and a Project page that looked like a
	   different product to the grid it was opened from.
	   The scrim is navy and PARTLY transparent so the photograph still reads
	   through ("navy in the middle, and still navy outside that, but slightly
	   transparent"); at 0.93 the picture was effectively gone. The column
	   colour is the same navy at full strength — see .gg-page-column. */
	--gg-page-bg-image:   url('https://guidancegate.com/wp-content/plugins/gg-roadmap-v2/assets/images/roadmap-bg.webp');
	--gg-page-scrim:      rgba(10, 22, 40, 0.72);
	--gg-page-column-bg:  rgb(10, 22, 40);
	/* The reading column's own inset, as tokens rather than four numbers typed
	   into .gg-page-column (2026-08-04). A part that has to run FULL WIDTH inside
	   the column — the masthead hero — cancels the inset by naming it, so the
	   bleed and the padding can never drift apart the way a hardcoded -24px
	   would the first time the column changed. */
	--gg-page-column-pad-x: 24px;
	--gg-page-column-pad-y: 34px;

	/* Motion */
	--gg-transition-speed:  150ms;
	--gg-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);

	/* Surfaces (dark platform chrome) */
	--gg-surface-card:      rgba(5, 20, 30, 0.75);
	--gg-surface-panel:     #0e1c2e;
	--gg-surface-border:    rgba(255, 255, 255, 0.10);
	--gg-on-surface:        #f4f4f4;
	--gg-on-surface-muted:  rgba(255, 255, 255, 0.65);
	--gg-scrim:             rgba(0, 0, 0, 0.6);

	/* THE OUTLINE OF AN EMPTY CONTROL (Sam, 17 Aug 2026, new token — nothing
	   existing carried it). --gg-surface-border above is rgba(255,255,255,0.10),
	   which is right for the edge of a panel: a hairline you are not meant to
	   look at. It is wrong for a control, because an unticked checkbox IS its
	   outline — there is nothing else to see — and at that value it lands
	   around 1.3:1 on a dark card and reads as absent. Sam, on the task lists:
	   "WE'VE ALSO LOST the tickboxes". They were never lost; they could not be
	   seen.

	   3:1 is the floor for the boundary of a control you have to find and hit.
	   This value clears it on all three dark surfaces (3.9:1 on a card, 3.6:1
	   on a panel) and still holds on a white page (4.8:1), so one token covers
	   the platform's dark chrome and a coach's own light screens alike.

	   Separate from --gg-surface-border on purpose: making panel hairlines this
	   strong would draw a box round everything. An empty control and a panel
	   edge are different jobs, and one token cannot do both. */
	--gg-control-border:    #64748b;

	/* What a video letterboxes against (2026-08-09, new token — nothing
	   existing carried it). Black, and deliberately NOT one of the surface
	   colours above: a 16:9 frame shows this wherever the picture's own aspect
	   ratio does not fill it, and a navy bar down the side of a video reads as
	   a broken player rather than as the platform's chrome. Every copy of the
	   video-frame recipe on the platform had independently hardcoded #000. */
	--gg-media-backing:     #000;

	/* Accents that have to READ ON DARK CHROME (Sam, 9 Aug 2026).
	   The coach's own --gg-colour-primary is frequently a deep navy, which is
	   correct on a white page and invisible on a dark one. Two screens were
	   blocked on exactly this: /pocket/ turned its active tab label to 1.26:1
	   the moment it started receiving the shared styling, and gg-connections
	   hand-typed its gold seven times because nothing shared would show up.
	   These are PLATFORM chrome, not the coach's brand — a coach picking a
	   brand colour must never be able to make the platform's own highlights
	   unreadable — so they are literal here alongside the surfaces and status
	   colours, not schema-driven.

	   Two of them, because they do two different jobs:
	     on-dark  INTERACTIVE STATE — active tab, focus ring, selection, the
	              leading edge of a spinner. Blue reads as "this one / right now".
	     gold     CALL TO ACTION on dark — connect, authorise, begin. Reads as
	              "do this", which blue on a dark panel does not.
	   The gold is the same value as --gg-status-warn's default, and they are
	   deliberately NOT aliased: one means "careful", the other means "go", and
	   collapsing them would make a coach restyling a warning silently restyle
	   every call to action. */
	--gg-accent-on-dark:  #3b82f6;
	--gg-accent-gold:     #f5d28a;

	/* Status (semantic — green/amber/red/blue, brand-independent) */
	--gg-status-ok:         #74db9a;
	--gg-status-warn:       #f5d28a;
	--gg-status-danger:     #ff8c8c;
	--gg-status-info:       #93c5fd;

	/* Chat / conversation kit (fixed dark palette — brand-independent,
	   same reasoning as .gg-edge-handle's hardcoded navy above: the chat
	   surface stays legible dark-on-navy regardless of the client's own
	   light/dark mode pick, because it mirrors the LCP's own fixed chrome,
	   never a themed page. Donor: gg-rcp's --ggb-* chat panel vars,
	   gg-chat.css:330-344, READ-ONLY — no existing gg-brand token carries
	   these values, backlog #6/#7/#8, audited 2026-07-15/16). */
	--gg-convo-bg:          #0a1020;
	--gg-convo-text:        rgba(255,255,255,0.92);
	--gg-convo-text-soft:   rgba(255,255,255,0.66);
	--gg-convo-muted:       rgba(255,255,255,0.45);
	--gg-convo-border:      rgba(255,255,255,0.10);
	--gg-convo-border-hot:  rgba(249,138,9,0.45);
	--gg-convo-accent:      #f98a09;
	--gg-convo-accent-2:    #fbc24e;
	--gg-convo-accent-soft: rgba(249,138,9,0.12);
	--gg-convo-self-bg:     rgba(249,138,9,0.78);
	--gg-convo-self-border: rgba(249,138,9,0.85);

	/* Persona / advisor grid (fixed dark glass palette — brand-independent,
	   same reasoning as --gg-convo-* above: donor gg-my-team's
	   .gg-team-card, plugins/gg-my-team/inc/page.php:337-410, READ-ONLY —
	   backlog #5, audited 2026-07-15/16, is its own visual language,
	   distinct from every other card in the system. Values that already
	   match an existing token are reused directly in the CSS below (dark
	   navy avatar backing = --gg-convo-bg, white-on-navy text =
	   --gg-convo-text/--gg-convo-text-soft/--gg-convo-muted); only the
	   translucent-and-blurred glass surface treatment gets new tokens
	   here, since nothing existing carries it. */
	--gg-persona-glass:        rgba(12,20,38,0.55);
	--gg-persona-glass-hover:  rgba(12,20,38,0.72);
	--gg-persona-border:       rgba(255,255,255,0.08);
	--gg-persona-border-hover: rgba(255,255,255,0.18);
	--gg-persona-blur:         12px;

	/* Page palette (raw fields — the walkthrough's Mode + background picks).
	   --gg-brand-mode carries the keyword so the living preview can seed. */
	--gg-brand-mode:        light;
	--gg-colour-bg-light:   #FFFFFF;
	--gg-colour-bg-dark:    #0E1C2E;
	--gg-colour-muted:      #667085;
	--gg-colour-surface:    #F5F7FA;
	--gg-colour-border:     #E4E7EC;
	--gg-colour-dark-heading: #FFFFFF;
	--gg-colour-dark-body:    #DDDFE2;
	--gg-colour-dark-muted:   #9FA4AB;

	/* Component colours + typography/layout extensions (v1.7 schema).
	   --gg-content-max-width is customer-content only — SEPARATE from the
	   structural --gg-page-max constants above. */
	--gg-colour-header-bg:       #FFFFFF;
	--gg-colour-footer-bg:       #0E1C2E;
	--gg-colour-icon:            #022F42;
	--gg-colour-line:            #E4E7EC;
	--gg-letter-spacing-heading: 0;
	--gg-letter-spacing-body:    0;
	--gg-content-max-width:      900px;
	--gg-input-height:           48px;
	--gg-form-field-radius:      0;
	--gg-form-field-spacing:     16px;

	/* Gradients (always present — flat hex when the toggle is off, a
	   linear/radial-gradient() when on; computed server-side so real
	   pages render gradients, not just the designer preview). */
	--gg-gradient-primary:  #022F42;
	--gg-gradient-bg-light: #FFFFFF;

	/* Mode-derived palette (light/dark/mixed switch — consumed by the brand
	   showcase today; platform chrome can adopt later). var() references so
	   live-preview updates to the raw tokens flow straight through. */
	--gg-mode-bg:              var(--gg-colour-bg-light);
	--gg-mode-ink-heading:     var(--gg-colour-heading);
	--gg-mode-ink-body:        var(--gg-colour-body);
	--gg-mode-ink-muted:       var(--gg-colour-muted);
	--gg-mode-card-bg:         var(--gg-colour-bg-light);
	--gg-mode-border:          var(--gg-colour-border);
	--gg-mode-alt-bg:          var(--gg-colour-surface);
	--gg-mode-alt-ink-heading: var(--gg-colour-heading);
	--gg-mode-alt-ink-body:    var(--gg-colour-body);
	--gg-mode-alt-accent-ink:  var(--gg-colour-primary);

	/* Section slot palette (v1.8) — the six background roles a customer-page
	   section can wear (Primary / Secondary / Opposite Background, Block
	   Colour, Image Overlay Dark / Light), each carrying its own auto-paired
	   ink trio so text can never land illegibly. Same brand-token language as
	   the Brand Designer. Flat roles flip with the mode; photo + block roles
	   are art direction and hold. See gg_brand_css_slot_vars(). */
	--gg-slot-primary-bg:        var(--gg-colour-bg-light);
	--gg-slot-primary-heading:   var(--gg-colour-heading);
	--gg-slot-primary-body:      var(--gg-colour-body);
	--gg-slot-primary-muted:     var(--gg-colour-muted);
	--gg-slot-primary-label:     var(--gg-colour-primary);
	--gg-slot-primary-line:      var(--gg-colour-border);
	--gg-slot-secondary-bg:      var(--gg-colour-surface);
	--gg-slot-secondary-heading: var(--gg-colour-heading);
	--gg-slot-secondary-body:    var(--gg-colour-body);
	--gg-slot-secondary-muted:   var(--gg-colour-muted);
	--gg-slot-secondary-label:   var(--gg-colour-primary);
	--gg-slot-secondary-line:    var(--gg-colour-border);
	--gg-slot-opposite-bg:       var(--gg-colour-bg-dark);
	--gg-slot-opposite-heading:  var(--gg-colour-dark-heading);
	--gg-slot-opposite-body:     var(--gg-colour-dark-body);
	--gg-slot-opposite-muted:    var(--gg-colour-dark-muted);
	--gg-slot-opposite-label:    var(--gg-colour-dark-heading);
	--gg-slot-opposite-line:     color-mix(in srgb, var(--gg-colour-dark-heading) 22%, transparent);
	/* Block Colour — solid brand-colour band. Light inks by default; a
	   luminance-aware auto-contrast guard for pale brand colours is a
	   follow-up (brand primaries are typically saturated enough). */
	--gg-slot-block-bg:            var(--gg-colour-primary);
	--gg-slot-block-heading:       var(--gg-colour-dark-heading);
	--gg-slot-block-body:          var(--gg-colour-dark-body);
	--gg-slot-block-muted:         color-mix(in srgb, var(--gg-colour-dark-heading) 72%, transparent);
	--gg-slot-block-label:         var(--gg-colour-dark-heading);
	--gg-slot-block-line:          color-mix(in srgb, var(--gg-colour-dark-heading) 30%, transparent);
	/* Image Overlay — Dark: photo under a dark scrim, light inks on top. */
	--gg-slot-image-dark-scrim:    color-mix(in srgb, var(--gg-colour-bg-dark) 82%, transparent);
	--gg-slot-image-dark-heading:  var(--gg-colour-dark-heading);
	--gg-slot-image-dark-body:     var(--gg-colour-dark-body);
	--gg-slot-image-dark-muted:    var(--gg-colour-dark-muted);
	--gg-slot-image-dark-label:    var(--gg-colour-dark-heading);
	--gg-slot-image-dark-line:     color-mix(in srgb, var(--gg-colour-dark-heading) 22%, transparent);
	/* Image Overlay — Light: photo under a light scrim, dark inks on top. */
	--gg-slot-image-light-scrim:   color-mix(in srgb, var(--gg-colour-bg-light) 78%, transparent);
	--gg-slot-image-light-heading: var(--gg-colour-heading);
	--gg-slot-image-light-body:    var(--gg-colour-body);
	--gg-slot-image-light-muted:   var(--gg-colour-muted);
	--gg-slot-image-light-label:   var(--gg-colour-primary);
	--gg-slot-image-light-line:    color-mix(in srgb, var(--gg-colour-heading) 15%, transparent);
}
/* gg-brand-customer-css (snapshot of live guidancegate.com, 1 Nov 2026) */
/* Shape — Corner Radius (radius_md) on customer cards, images and buttons. */
.cs-page .cs-btn { border-radius: var(--gg-radius-md, 0); }
.cs-page .cs-testimonial-card { border-radius: var(--gg-radius-md, 0); }
.cs-page .cs-method-panel,
.cs-page .cs-agenda-panel,
.cs-page .cs-portrait-placeholder { border-radius: var(--gg-radius-md, 0); overflow: hidden; }
.cs-page .cs-col-image img:not(.cs-circle-img) { border-radius: var(--gg-radius-md, 0); }
.cs-page .cs-final-cta-img { border-radius: var(--gg-radius-md, 0); }
.cs-page .cs-hero-video-frame,
.cs-page .cs-hero-video { border-radius: var(--gg-radius-md, 0); overflow: hidden; }
.cs-page .cs-hero-media img { border-radius: var(--gg-radius-md, 0); }

/* Layout — Container Width (content_max_width; default matches the 900px
   section literal, so nothing shifts until a coach moves the dial). */
.cs-page .cs-container { max-width: var(--gg-content-max-width, 900px); }

/* Buttons & Forms — the offer-page booking form is the one concrete
   consumer of form_field_radius / form_field_spacing / input_height. */
.cs-page input[type="text"],
.cs-page input[type="email"],
.cs-page input[type="tel"],
.cs-page input[type="number"],
.cs-page select {
	border-radius: var(--gg-form-field-radius, 0);
	min-height: var(--gg-input-height, 48px);
}
.cs-page textarea { border-radius: var(--gg-form-field-radius, 0); }
.cs-page .cs-calendar-embed input,
.cs-page .cs-calendar-embed select,
.cs-page .cs-calendar-embed textarea { margin-bottom: var(--gg-form-field-spacing, 16px); }

/* ── Colour — full palette → offer-page surfaces (palette fix, 2026-07-22).
   Each brand token drives ONLY its intended surface; the mode (light/dark/
   mixed) palette drives the alternating + image-overlay bands. Specificity:
   section CSS lives inline in the BODY (after this head block), so every
   override here carries one MORE class than the section rule it beats. */

/* Primary Background (colour_bg_light) — page base + main/white sections,
   via the mode palette: light/mixed -> mode-bg = colour_bg_light, dark ->
   mode-bg = colour_bg_dark, so Dark mode darkens the whole page. */
body .cs-page { color: var(--gg-mode-ink-body); }
.cs-page .cs-section,
.cs-page .cs-section--white { background: var(--gg-mode-bg); }

/* Header (colour_header_bg) — the hero is now a split image band: a
   background photo (set inline by the section) sits under a left-weighted
   dark scrim, with the copy left and the coach portrait (round) right. The
   header colour is the fallback behind the photo. background-color (not the
   shorthand) so it never wipes the inline background-image. */
.cs-page .cs-hero {
	background-color: var(--gg-colour-header-bg);
	background-size: cover;
	background-position: center;
	border-bottom: none;
}
/* Dependable dark scrim over the photo, weighted to the copy side, so the
   left-aligned text stays legible over any image in any theme mode. Wins
   over the sections' single-class .cs-section--dark::before. */
.cs-page .cs-hero.cs-section--dark::before {
	background: linear-gradient(90deg,
		rgba(12,16,26,0.82) 0%, rgba(12,16,26,0.60) 46%, rgba(12,16,26,0.32) 100%);
}
.cs-page .cs-hero.cs-section--dark::after { background: none; }
/* On-dark copy — always light over the scrim (overrides the mode-ink rule
   below, which assumes a light hero). */
.cs-page .cs-hero.cs-section--dark h1,
.cs-page .cs-hero .cs-hero-promise { color: #ffffff; }
.cs-page .cs-hero .cs-hero-without { color: rgba(255,255,255,0.72); }
.cs-page .cs-hero .cs-niche-callout { color: color-mix(in srgb, var(--gg-colour-primary) 22%, #ffffff); }
/* Coach portrait stays round — overrides the sharp-corners image rule that
   squares every other .cs-page image. */
.cs-page .cs-hero-media img,
.cs-page .cs-circle-img { border-radius: 50%; }

/* Secondary Background (colour_surface) — the alternating "off" bands, via
   the mode palette: light mode -> alt-bg = surface; mixed/dark -> alt-bg is
   the dark background, with the matching opposite inks. */
.cs-page .cs-section--off { background: var(--gg-mode-alt-bg); }
.cs-page .cs-section--off .cs-heading,
.cs-page .cs-section--off .cs-agenda-item strong { color: var(--gg-mode-alt-ink-heading); }
.cs-page .cs-section--off .cs-text,
.cs-page .cs-section--off .cs-list li { color: var(--gg-mode-alt-ink-body); }
.cs-page .cs-section--off .cs-agenda-item p { color: color-mix(in srgb, var(--gg-mode-alt-ink-body) 75%, transparent); }
.cs-page .cs-section--off .cs-label { color: var(--gg-mode-alt-accent-ink); }

/* Heading Text (colour_heading — mode-ink-heading resolves to it in
   light/mixed, to the opposite heading ink in dark). */
.cs-page .cs-heading { color: var(--gg-mode-ink-heading); }
.cs-page .cs-section h1, .cs-page .cs-section h2, .cs-page .cs-section h3,
.cs-page .cs-section h4, .cs-page .cs-section h5, .cs-page .cs-section h6 { color: var(--gg-mode-ink-heading); }

/* Body Text (colour_body) + Muted (colour_muted) — same mode indirection. */
.cs-page .cs-text,
.cs-page .cs-list li { color: var(--gg-mode-ink-body); }
.cs-page .cs-without-line { color: var(--gg-mode-ink-muted); }
.cs-page .cs-agenda-item strong { color: var(--gg-mode-ink-heading); }
.cs-page .cs-agenda-item p { color: var(--gg-mode-ink-muted); }

/* Button (colour_primary) — buttons and accent flourishes ONLY; no section
   background derives from the accent any more. */
#csProgress, .cs-page .cs-progress,
.cs-page .cs-rule { background: var(--gg-colour-primary); }
.cs-page .cs-btn { background: var(--gg-colour-primary); color: #fff; }
.cs-page .cs-btn:hover { background: color-mix(in srgb, var(--gg-colour-primary) 82%, #000); }
.cs-page .cs-label,
.cs-page .cs-niche-callout,
.cs-page .cs-video-bar,
.cs-page .cs-hero-video-cap,
.cs-page .cs-attribution,
.cs-page .cs-list li::before,
.cs-page .cs-faq-item summary::after { color: var(--gg-colour-primary); }
.cs-page .cs-circle-img { border-color: var(--gg-colour-primary); }

/* Icon (colour_icon) — safe scope only: inline SVGs inherit via
   currentColor; image content is never recoloured. */
.cs-page .cs-icon, .cs-page svg { color: var(--gg-colour-icon); }
.cs-page .cs-icon svg { fill: currentColor; }

/* Line (colour_line) — genuine separators (accent underline bars stay
   primary above). */
.cs-page .cs-agenda-item { border-bottom-color: var(--gg-colour-line); }
.cs-page hr { border-color: var(--gg-colour-line); }

/* Dark / image-overlay bands — mode-aware scrim. Mixed/dark: dark scrim
   (alt-bg = colour_bg_dark) with light inks; light mode: light scrim with
   the brand's own dark inks, so Light truly reads light. */
.cs-page .cs-section--dark { color: var(--gg-mode-alt-ink-body); }
.cs-page .cs-section--dark::before { background: color-mix(in srgb, var(--gg-mode-alt-bg) 88%, transparent); }
.cs-page .cs-section--dark::after { background: radial-gradient(ellipse at center, transparent 55%, color-mix(in srgb, var(--gg-mode-alt-bg) 35%, transparent) 100%); }
.cs-page .cs-section--dark .cs-heading,
.cs-page .cs-section--dark h1, .cs-page .cs-section--dark h2,
.cs-page .cs-section--dark h3, .cs-page .cs-section--dark h4,
.cs-page .cs-section--dark .cs-faq-item summary { color: var(--gg-mode-alt-ink-heading); }
.cs-page .cs-section--dark .cs-text,
.cs-page .cs-section--dark .cs-list li,
.cs-page .cs-section--dark .cs-quote { color: var(--gg-mode-alt-ink-body); }
.cs-page .cs-section--dark .cs-faq-answer p { color: color-mix(in srgb, var(--gg-mode-alt-ink-body) 80%, transparent); }
.cs-page .cs-section--dark .cs-label { color: var(--gg-mode-alt-accent-ink); }
.cs-page .cs-section--dark .cs-testimonial-card {
	background: color-mix(in srgb, currentColor 7%, transparent);
	border-color: color-mix(in srgb, currentColor 15%, transparent);
}
.cs-page .cs-section--dark .cs-btn--light {
	color: var(--gg-mode-alt-ink-heading);
	border-color: color-mix(in srgb, currentColor 50%, transparent);
}
.cs-page .cs-section--dark .cs-faq-item { border-bottom-color: color-mix(in srgb, currentColor 25%, transparent); }

/* Footer (colour_footer_bg) — the page's LAST band (the template ships no
   separate footer element; the closing dark FAQ band is the footer). Solid
   footer colour, opposite-band inks (footer default is dark). */
.cs-page:last-of-type .cs-section--dark::before { background: var(--gg-colour-footer-bg); }
.cs-page:last-of-type .cs-section--dark::after { background: none; }
.cs-page:last-of-type .cs-section--dark,
.cs-page:last-of-type .cs-section--dark .cs-text,
.cs-page:last-of-type .cs-section--dark .cs-faq-answer p { color: var(--gg-colour-dark-body); }
.cs-page:last-of-type .cs-section--dark .cs-heading,
.cs-page:last-of-type .cs-section--dark .cs-faq-item summary { color: var(--gg-colour-dark-heading); }
.cs-page:last-of-type .cs-section--dark .cs-label { color: var(--gg-colour-dark-heading); }

/* ═══════════════════════════════════════════════════════════════════════
   SLOT SYSTEM (v1.8) — the six background ROLES a section declares.

   A section carries exactly one .cs-slot--* class and never picks a raw
   colour. Each role sets six local custom properties (--gg-cs-bg / -h / -b /
   -m / -l / -ln); one shared reader below paints the surface and every ink
   from them, so text is auto-paired to its surface and dark-on-dark can't
   happen. The role → colour resolution (and the light/dark/mixed flip of the
   flat roles) lives in gg_brand_css_slot_vars(). Two-class selectors so this
   outranks each section's own single-class inline <style>.
   ═══════════════════════════════════════════════════════════════════════ */

/* — Role setters: map each role to its slot tokens — */
.cs-page .cs-slot--primary {
	--gg-cs-bg: var(--gg-slot-primary-bg);   --gg-cs-h: var(--gg-slot-primary-heading);
	--gg-cs-b:  var(--gg-slot-primary-body);  --gg-cs-m: var(--gg-slot-primary-muted);
	--gg-cs-l:  var(--gg-slot-primary-label); --gg-cs-ln: var(--gg-slot-primary-line);
}
.cs-page .cs-slot--secondary {
	--gg-cs-bg: var(--gg-slot-secondary-bg);   --gg-cs-h: var(--gg-slot-secondary-heading);
	--gg-cs-b:  var(--gg-slot-secondary-body);  --gg-cs-m: var(--gg-slot-secondary-muted);
	--gg-cs-l:  var(--gg-slot-secondary-label); --gg-cs-ln: var(--gg-slot-secondary-line);
}
.cs-page .cs-slot--opposite {
	--gg-cs-bg: var(--gg-slot-opposite-bg);   --gg-cs-h: var(--gg-slot-opposite-heading);
	--gg-cs-b:  var(--gg-slot-opposite-body);  --gg-cs-m: var(--gg-slot-opposite-muted);
	--gg-cs-l:  var(--gg-slot-opposite-label); --gg-cs-ln: var(--gg-slot-opposite-line);
}
.cs-page .cs-slot--block {
	--gg-cs-bg: var(--gg-slot-block-bg);   --gg-cs-h: var(--gg-slot-block-heading);
	--gg-cs-b:  var(--gg-slot-block-body);  --gg-cs-m: var(--gg-slot-block-muted);
	--gg-cs-l:  var(--gg-slot-block-label); --gg-cs-ln: var(--gg-slot-block-line);
}
.cs-page .cs-slot--image-dark {
	--gg-cs-h: var(--gg-slot-image-dark-heading); --gg-cs-b: var(--gg-slot-image-dark-body);
	--gg-cs-m: var(--gg-slot-image-dark-muted);   --gg-cs-l: var(--gg-slot-image-dark-label);
	--gg-cs-ln: var(--gg-slot-image-dark-line);
}
.cs-page .cs-slot--image-light {
	--gg-cs-h: var(--gg-slot-image-light-heading); --gg-cs-b: var(--gg-slot-image-light-body);
	--gg-cs-m: var(--gg-slot-image-light-muted);   --gg-cs-l: var(--gg-slot-image-light-label);
	--gg-cs-ln: var(--gg-slot-image-light-line);
}

/* — Flat surfaces paint from --gg-cs-bg — */
.cs-page .cs-slot--primary,
.cs-page .cs-slot--secondary,
.cs-page .cs-slot--opposite,
.cs-page .cs-slot--block { background: var(--gg-cs-bg); }

/* — Photo surfaces: image (set inline by the section) + scrim + lifted body — */
.cs-page .cs-slot--image-dark,
.cs-page .cs-slot--image-light {
	position: relative; background-size: cover; background-position: center;
}
.cs-page .cs-slot--image-dark::before,
.cs-page .cs-slot--image-light::before {
	content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.cs-page .cs-slot--image-dark::before  { background: var(--gg-slot-image-dark-scrim); }
.cs-page .cs-slot--image-light::before { background: var(--gg-slot-image-light-scrim); }
.cs-page .cs-slot--image-dark  > *,
.cs-page .cs-slot--image-light > * { position: relative; z-index: 2; }

/* — Shared ink reader: every role paints its text from the same six props — */
.cs-page :is(.cs-slot--primary,.cs-slot--secondary,.cs-slot--opposite,.cs-slot--block,.cs-slot--image-dark,.cs-slot--image-light) :is(.cs-heading,h1,h2,h3,h4,h5,h6),
.cs-page :is(.cs-slot--primary,.cs-slot--secondary,.cs-slot--opposite,.cs-slot--block,.cs-slot--image-dark,.cs-slot--image-light) .cs-agenda-item strong,
.cs-page :is(.cs-slot--primary,.cs-slot--secondary,.cs-slot--opposite,.cs-slot--block,.cs-slot--image-dark,.cs-slot--image-light) .cs-faq-item summary { color: var(--gg-cs-h); }

.cs-page :is(.cs-slot--primary,.cs-slot--secondary,.cs-slot--opposite,.cs-slot--block,.cs-slot--image-dark,.cs-slot--image-light) .cs-text,
.cs-page :is(.cs-slot--primary,.cs-slot--secondary,.cs-slot--opposite,.cs-slot--block,.cs-slot--image-dark,.cs-slot--image-light) .cs-list li,
.cs-page :is(.cs-slot--primary,.cs-slot--secondary,.cs-slot--opposite,.cs-slot--block,.cs-slot--image-dark,.cs-slot--image-light) .cs-quote { color: var(--gg-cs-b); }

.cs-page :is(.cs-slot--primary,.cs-slot--secondary,.cs-slot--opposite,.cs-slot--block,.cs-slot--image-dark,.cs-slot--image-light) .cs-without-line,
.cs-page :is(.cs-slot--primary,.cs-slot--secondary,.cs-slot--opposite,.cs-slot--block,.cs-slot--image-dark,.cs-slot--image-light) .cs-agenda-item p,
.cs-page :is(.cs-slot--primary,.cs-slot--secondary,.cs-slot--opposite,.cs-slot--block,.cs-slot--image-dark,.cs-slot--image-light) .cs-faq-answer p { color: var(--gg-cs-m); }

.cs-page :is(.cs-slot--primary,.cs-slot--secondary,.cs-slot--opposite,.cs-slot--block,.cs-slot--image-dark,.cs-slot--image-light) .cs-label { color: var(--gg-cs-l); }

.cs-page :is(.cs-slot--primary,.cs-slot--secondary,.cs-slot--opposite,.cs-slot--block,.cs-slot--image-dark,.cs-slot--image-light) .cs-agenda-item,
.cs-page :is(.cs-slot--primary,.cs-slot--secondary,.cs-slot--opposite,.cs-slot--block,.cs-slot--image-dark,.cs-slot--image-light) .cs-faq-item,
.cs-page :is(.cs-slot--primary,.cs-slot--secondary,.cs-slot--opposite,.cs-slot--block,.cs-slot--image-dark,.cs-slot--image-light) hr { border-color: var(--gg-cs-ln); border-bottom-color: var(--gg-cs-ln); }

/* — Testimonial cards + ghost buttons on dark-ink roles (opposite / block /
     image-dark) tint from currentColor so they read on any surface — */
.cs-page :is(.cs-slot--opposite,.cs-slot--block,.cs-slot--image-dark) .cs-testimonial-card {
	background: color-mix(in srgb, currentColor 7%, transparent);
	border-color: color-mix(in srgb, currentColor 15%, transparent);
}
.cs-page :is(.cs-slot--opposite,.cs-slot--block,.cs-slot--image-dark) .cs-btn--light {
	color: var(--gg-cs-h); border-color: color-mix(in srgb, currentColor 50%, transparent);
}

/* — Bespoke HERO, folded into the slot vocabulary. A hero declaring Image
     Overlay Dark gets the left-weighted scrim (keeps left copy legible over
     any photo) instead of the flat centre scrim; the round portrait holds.
     .cs-section--dark kept as a back-compat alias for pre-slot heroes. — */
.cs-page .cs-hero.cs-slot--image-dark::before,
.cs-page .cs-hero.cs-section--dark::before {
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--gg-colour-bg-dark) 88%, transparent) 0%,
		color-mix(in srgb, var(--gg-colour-bg-dark) 64%, transparent) 46%,
		color-mix(in srgb, var(--gg-colour-bg-dark) 34%, transparent) 100%);
}
.cs-page .cs-hero.cs-slot--image-dark::after { background: none; }

/* — Brand-colour flourishes stay constant across every role (buttons, accent
     rules, list markers, portrait ring). The accent is buttons + flourishes
     only; it never becomes a whole band except via the explicit Block role. */
.cs-page :is(.cs-slot--primary,.cs-slot--secondary,.cs-slot--opposite,.cs-slot--block,.cs-slot--image-dark,.cs-slot--image-light) .cs-list li::before,
.cs-page :is(.cs-slot--primary,.cs-slot--secondary,.cs-slot--opposite,.cs-slot--block,.cs-slot--image-dark,.cs-slot--image-light) .cs-faq-item summary::after,
.cs-page :is(.cs-slot--primary,.cs-slot--secondary,.cs-slot--opposite,.cs-slot--block,.cs-slot--image-dark,.cs-slot--image-light) .cs-rule { color: var(--gg-colour-primary); }
.cs-page :is(.cs-slot--primary,.cs-slot--secondary,.cs-slot--opposite,.cs-slot--block,.cs-slot--image-dark,.cs-slot--image-light) .cs-rule { background: var(--gg-colour-primary); }
/* On dark-ink roles the brand primary can vanish (e.g. a navy brand on a dark
   band); lift the accent rule toward white so the little divider always shows. */
.cs-page :is(.cs-slot--opposite,.cs-slot--block,.cs-slot--image-dark) .cs-rule { background: color-mix(in srgb, var(--gg-colour-primary) 50%, #ffffff); }

/* ── Bespoke-template element aliases. Long-form templates (free-guide's
   .fg-*) carry their own element vocabulary; map it onto the slot inks so a
   re-based section inherits correct text colour without renaming every node.
   Purely additive — these classes only exist on those templates. ── */
.cs-page :is(.cs-slot--primary,.cs-slot--secondary,.cs-slot--opposite,.cs-slot--block,.cs-slot--image-dark,.cs-slot--image-light) :is(.fg-heading,.fg-pull-quote,.fg-shift-to) { color: var(--gg-cs-h); }
.cs-page :is(.cs-slot--primary,.cs-slot--secondary,.cs-slot--opposite,.cs-slot--block,.cs-slot--image-dark,.cs-slot--image-light) :is(.fg-body,.fg-cover-sub,.fg-tp-content,.fg-shift-from) { color: var(--gg-cs-b); }
.cs-page :is(.cs-slot--primary,.cs-slot--secondary,.cs-slot--opposite,.cs-slot--block,.cs-slot--image-dark,.cs-slot--image-light) :is(.fg-label,.fg-tp-num,.fg-shift-arrow) { color: var(--gg-cs-l); }
/* gg-brand-tpl-bridge (snapshot of live guidancegate.com, 1 Nov 2026) */
:root{
	--gg-tpl-accent: var(--gg-colour-primary);
	--gg-tpl-accent-deep: color-mix(in srgb, var(--gg-colour-primary) 82%, #000);
	--gg-tpl-cream: var(--gg-colour-dark-body);
	--gg-tpl-paper: var(--gg-colour-bg-light);
	--gg-tpl-paper-warm: var(--gg-colour-bg-light);
	--gg-tpl-line: var(--gg-colour-line);
	--gg-tpl-line-2: color-mix(in srgb, var(--gg-colour-line) 85%, var(--gg-colour-body));
	--gg-tpl-ink: var(--gg-colour-heading);
	--gg-tpl-ink-2: color-mix(in srgb, var(--gg-colour-heading) 91%, #fff);
	--gg-tpl-ink-3: var(--gg-colour-body);
	--gg-tpl-paper-cool: var(--gg-colour-surface);
	--gg-tpl-grey: color-mix(in srgb, var(--gg-colour-muted) 25%, #fff);
	--gg-tpl-grey-2: color-mix(in srgb, var(--gg-colour-muted) 40%, #fff);
	--gg-tpl-font-heading: var(--gg-font-heading);
	--gg-tpl-font-body: var(--gg-font-body);
}
/* gg-page-chrome-css (snapshot of live guidancegate.com, 1 Nov 2026) */

/* ── Page title weight ──
 * Sam wants every GG-styled page title at medium (500), not bold.
 * One block targets every plugin's H1/title class.
 *
 * NOTE: the canonical page title is now `.gg-page-title` from
 * gg-brand-css.php (42px / 500 / centred via .gg-page-header). The classes
 * below are LEGACY patterns still awaiting migration — when you touch one
 * of those pages, swap its title to .gg-page-title and remove it here.
 * Already migrated: .gg-mb-page-title (My Business), the Daily Tasks title.
 */
.gg-page-title,
.gg-rv2-page-title,
.gg-rv2-detail-title,
.gg-rv2-modules-title,
.gg-rv2-section-title,
.gg-cs-title,
.brf-doc h1,
.gd-doc h1,
.skl-doc h1,
.bld-doc h1,
.gg-skills-title,
.gg-skill-page-title {
	font-weight: 500 !important;
}

/* ── View toggle (grid/list etc.) wrapper ──
 * Centres any view toggle horizontally and sits it directly under the
 * page title. Plugins drop their toggle inside `<div class="gg-page-view-toggle">`
 * and inherit the layout for free.
 */
.gg-page-view-toggle {
	display: flex !important;
	justify-content: center !important;
	width: 100% !important;
	margin: 0 auto 1.4em !important;
}
.gg-page-view-toggle > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	align-self: auto !important;
}