/*
Theme Name: Growth Box Portal
Theme URI: https://findwhyconsulting.com/
Author: Find Why Consulting
Author URI: https://findwhyconsulting.com/
Description: Custom portal theme for Growth Box (pairs with Growth Box Core plugin). Templates consume gbx/v1 REST endpoints.
\g<1>0.9.3
License: GPLv2 or later
Text Domain: growth-box-portal
*/

:root{
  --gbx-font: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --gbx-bg-0: #060C18;
  /* Base background (locked token) */
  --gbx-bg-1: #12345A;
  --gbx-card: rgba(255,255,255,0.06);
  --gbx-text: rgba(255,255,255,0.92);
  --gbx-text-dim: rgba(255,255,255,0.70);
  /* Cyan/Magenta (from Figma) */
  --gbx-accent-a: #06D7FE;
  --gbx-accent-b: #D50AEA;
  --gbx-accent-c: #EE00FF;
  /* Radius tokens (per Figma)
     - Large/full-width panels: ~30px
     - Standard cards in a row: ~20px
  */
  --gbx-radius-xl: 30px;
  --gbx-radius-lg: 20px;
  --gbx-shadow: 0 18px 60px rgba(0,0,0,0.45);
  --gbx-max: 1120px;
  --gbx-btn-h: 48px;

  /* Plan badge gradients */
  --gbx-gold-1:#FBE899;
  --gbx-gold-2:#9D7300;
  --gbx-gold-3:#CA9400;

  --gbx-silver-1:#FFFFFF;
  --gbx-silver-2:#A8A8A8;
  --gbx-silver-3:#363636;

  --gbx-bronze-1:#FFEDCE;
  --gbx-bronze-2:#C6905B;
  --gbx-bronze-3:#87513D;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--gbx-font);
  color: var(--gbx-text);
  background: radial-gradient(1200px 800px at 15% 20%, rgba(6,215,254,0.18), transparent 60%),
              radial-gradient(900px 650px at 85% 30%, rgba(213,10,234,0.16), transparent 60%),
              radial-gradient(1200px 900px at 50% 120%, rgba(255,79,216,0.10), transparent 60%),
              linear-gradient(180deg, var(--gbx-bg-1), var(--gbx-bg-0));
  background-attachment: fixed;
}

/* Background texture at the top that fades into solid colour */
body:before{
  content:"";
  position:fixed;
  left:0; top:0; right:0;
  height:560px;
  pointer-events:none;
  z-index:-1;
  background-image:url('./assets/img/gbx-bg-texture.png');
  background-size:cover;
  background-position:center top;
  opacity:.92;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.95) 40%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.95) 40%, rgba(0,0,0,0) 100%);
}

/* Editable (Gutenberg) content containers */
.gbx-public-content,
.gbx-portal-content--editable{
  max-width: var(--gbx-max);
  margin: 0 auto;
  padding: 36px 20px 72px;
}

.gbx-plan-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:999px;
  font-weight:700;
  color:#fff;
  letter-spacing:-0.2px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.gbx-plan-badge--gold{background:linear-gradient(180deg, var(--gbx-gold-1) 0%, var(--gbx-gold-2) 48%, var(--gbx-gold-3) 87%);} 
.gbx-plan-badge--silver{background:linear-gradient(180deg, var(--gbx-silver-1) 22%, var(--gbx-silver-2) 48%, var(--gbx-silver-3) 87%);} 
.gbx-plan-badge--bronze{background:linear-gradient(180deg, var(--gbx-bronze-1) 22%, var(--gbx-bronze-2) 48%, var(--gbx-bronze-3) 87%);} 

a{ color: var(--gbx-accent-a); text-decoration:none; }
a:hover{ text-decoration:underline; }

.gbx-wrap{ max-width: var(--gbx-max); margin: 0 auto; padding: 36px 20px 72px; }

/* Page shell - keeps Gutenberg pages looking like the GBX design system */
.gbx-page-shell{
  position: relative;
  padding: 48px;
  border-radius: var(--gbx-radius-xl);
  background: rgba(0, 0, 0, 0.18);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
  /* Don't clip Gutenberg alignfull blocks (they can use negative margins)
     and don't clip focus outlines. */
  overflow: visible;
}

.gbx-page-shell::before{
  content:"";
  position:absolute;
  inset:0;
  padding:1px;
  border-radius: var(--gbx-radius-xl);
  background: linear-gradient(90deg, #06D7FE 0%, #E000FF 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:0.55;
}

/* Public homepage is typically built as full-bleed blocks */
.gbx-page-shell--front{ padding: 0; background: transparent; box-shadow:none; }
.gbx-page-shell--front::before{ display:none; }

/* Front page - give top-level sections rounded corners (per Figma)
   This keeps Gutenberg editing flexible while maintaining the visual system.
*/
body.home .gbx-page-shell--front > .wp-block-group:not(.gbx-fullbleed),
body.home .gbx-page-shell--front > .wp-block-cover:not(.gbx-fullbleed),
body.home .gbx-page-shell--front > .wp-block-media-text:not(.gbx-fullbleed){
  border-radius: var(--gbx-radius-xl);
  overflow: hidden;
}

/*
  Full-bleed helper
  Use when you need a section to break out of the page shell "hard edges".
  - Works even inside constrained containers
  - Removes the default rounded corners applied on the public home
  - Supports a gradient overlay on top of a background image

  Usage (Gutenberg):
  - Add a Group/Cover block
  - Set Alignment to Full
  - Add Additional CSS class: gbx-fullbleed
  - Optional: add gbx-fullbleed--gradient for the gradient overlay
*/
.gbx-fullbleed{
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  border-radius: 0 !important;
}

/* If a full-bleed block is nested, don't double-breakout */
.gbx-fullbleed .gbx-fullbleed{ left: auto; right:auto; width:100%; margin-left:0; margin-right:0; }

/* Ensure background images/covers behave cleanly */
.gbx-fullbleed.wp-block-cover,
.gbx-fullbleed.wp-block-group{
  overflow: hidden;
}

/* Gradient overlay on top of background image.
   Apply to a Cover or Group with a background image.
*/
.gbx-fullbleed--gradient::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(6, 215, 254, 0.55) 0%, rgba(238, 0, 255, 0.55) 100%),
    linear-gradient(180deg, rgba(6,12,24,0.55) 0%, rgba(6,12,24,0.78) 100%);
  pointer-events:none;
  z-index: 1;
}
.gbx-fullbleed--gradient > *{ position: relative; z-index: 2; }

/* A sensible inner container helper (optional). */
.gbx-fullbleed__inner{
  max-width: var(--gbx-max);
  margin: 0 auto;
  padding: 64px 20px;
}

@media (max-width: 768px){
  .gbx-fullbleed__inner{ padding: 46px 18px; }
}

/* Common “card-like” blocks inside the portal */
.gbx-wrap .wp-block-group.has-background,
.gbx-wrap .wp-block-cover{
  border-radius: var(--gbx-radius-lg);
  overflow: hidden;
}

/* Gutenberg/content alignment helpers
   Keep these conservative: negative margins + overflow clipping can cause text to look "cut off".
   If you want true full-bleed sections, use Align Full blocks on the page itself.
*/
.gbx-page-shell .alignwide,
.gbx-page-shell .wp-block-group.alignwide{ width:100%; max-width: 1100px; margin-left:auto; margin-right:auto; }

.gbx-page-shell .alignfull,
.gbx-page-shell .wp-block-group.alignfull,
.gbx-page-shell .wp-block-cover.alignfull{
  width: 100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
}

@media (max-width: 768px){
  .gbx-page-shell{ padding:24px; border-radius:22px; }
  .gbx-page-shell::before{ border-radius:22px; }
}

.gbx-topbar{
  position: sticky; top:0; z-index:20;
  backdrop-filter: blur(10px);
  /* Slight glass tint (less transparent) so nav reads cleanly on texture */
  background: rgba(6, 16, 32, 0.45);
  border-bottom: 0;
}
.gbx-topbar-inner{
  max-width: var(--gbx-max);
  margin:0 auto;
  padding: 14px 20px;
  display:flex;
  align-items:center;
  /* Keep brand left, push Catalogue + user controls to the right */
  justify-content:flex-start;
  gap: 16px;
}

/* Public header uses a spacer div to push the login CTA to the right */
.gbx-topbar-inner .gbx-spacer{
  flex: 1 1 auto;
}

/* Header CTA button (match Figma: less round + fixed height) */
.gbx-btn.gbx-btn--header{
  border-radius: 22px;
  height: 44px;
  padding: 0 30px;
  line-height: 44px;
}
.gbx-brand{ display:flex; align-items:center; gap: 10px; font-weight: 700; letter-spacing: 0.4px; }
.gbx-nav{ display:flex; align-items:center; gap: 18px; color: var(--gbx-text-dim); font-weight: 500; margin-left:auto; }
.gbx-topbar,
.gbx-topbar a{
  font-size: 16px;
  font-weight: 500;
}
.gbx-right{ display:flex; align-items:center; gap: 12px; margin-left: 12px; }

/* Prevent flex items from stretching (keeps Catalogue tight to the right controls) */
.gbx-brand, .gbx-nav, .gbx-right{ flex: 0 0 auto; }

/* Public (non-auth) homepage */
.gbx-public-home{ min-height: calc(100vh - 160px); }
.gbx-public-home-inner{ max-width: var(--gbx-max); margin:0 auto; padding: 42px 20px 24px; }
.gbx-chip{ display:inline-flex; align-items:center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); font-size: 12px; }
.gbx-avatar{ width: 34px; height:34px; border-radius: 999px; border: 2px solid rgba(41,213,255,0.55); overflow:hidden; background: rgba(255,255,255,0.10); }
.gbx-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.gbx-iconbtn{ width: 34px; height:34px; border-radius: 10px; display:grid; place-items:center; border:1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); cursor:pointer; }
.gbx-iconbtn:hover{ background: rgba(255,255,255,0.07); }

.gbx-card{ background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.05)); border-radius: var(--gbx-radius-lg); border: 1px solid rgba(255,255,255,0.08); box-shadow: var(--gbx-shadow); }
.gbx-card-inner{ padding: 22px; }

.gbx-outline{ border-radius: var(--gbx-radius-lg); border: 1px solid rgba(255,255,255,0.10); position: relative; }
.gbx-outline:before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(90deg, rgba(41,213,255,0.75), rgba(181,0,255,0.65), rgba(255,79,216,0.65));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}

.gbx-h1{ font-size: 34px; margin: 0 0 6px; font-weight: 650; }
.gbx-h2{ font-size: 22px; margin: 0 0 10px; font-weight: 650; }
.gbx-sub{ color: var(--gbx-text-dim); margin: 0; line-height: 1.45; }

.gbx-grid-2{ display:grid; grid-template-columns: 1.4fr 0.8fr; gap: 36px; }
.gbx-grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.gbx-grid-4{ display:grid; grid-template-columns: repeat(4,1fr); gap: 16px; }

@media (max-width: 980px){ .gbx-grid-2{ grid-template-columns: 1fr; } .gbx-grid-4{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .gbx-grid-3{ grid-template-columns: 1fr; } .gbx-grid-4{ grid-template-columns: 1fr; } }

.gbx-btn{
  height: var(--gbx-btn-h);
  padding: 0 18px;
  border-radius: 999px;
  /* Filled gradient + gradient outline */
  border: 2px solid transparent;
  font-family: var(--gbx-font);
  font-weight: 500;
  font-size: 16px;
  color: rgba(255,255,255,0.95);
  cursor: pointer;
  background:
    linear-gradient(90deg, var(--gbx-accent-a), var(--gbx-accent-b)) padding-box,
    linear-gradient(90deg, var(--gbx-accent-a), var(--gbx-accent-b)) border-box;
  box-shadow: 0 12px 40px rgba(181,0,255,0.20);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition: background .18s ease, box-shadow .18s ease, filter .18s ease, transform .18s ease, color .18s ease;
}
.gbx-btn:hover{
  /* Swap to outlined gradient on hover */
  background:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)) padding-box,
    linear-gradient(90deg, var(--gbx-accent-a), var(--gbx-accent-b)) border-box;
  border: 2px solid transparent;
  box-shadow: none;
  filter: none;
}
.gbx-btn:disabled{ opacity:0.45; cursor:not-allowed; filter:none; }

.gbx-btn-outline,
/* Back-compat alias used in header templates */
.gbx-btn--outline{
  height: var(--gbx-btn-h);
  padding: 0 18px;
  border-radius: 999px;
  /* Gradient outline (no fill) */
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)) padding-box,
    linear-gradient(90deg, var(--gbx-accent-a), var(--gbx-accent-b)) border-box;
  color: rgba(255,255,255,0.88);
  cursor:pointer;
  font-weight:500;
  font-size:16px;
  transition: background .18s ease, box-shadow .18s ease, filter .18s ease, transform .18s ease, color .18s ease;
}
.gbx-btn-outline:hover,
.gbx-btn--outline:hover{
  /* Swap to filled gradient on hover */
  border: 0;
  background: linear-gradient(90deg, var(--gbx-accent-a), var(--gbx-accent-b));
  color: rgba(255,255,255,0.95);
  box-shadow: 0 12px 40px rgba(181,0,255,0.20);
}

/* Gutenberg button blocks - automatically adopt GBX button styling */
.wp-block-button .wp-block-button__link,
.wp-element-button,
button.wp-element-button,
input[type="submit"],
input[type="button"],
input[type="reset"],
button:not(.gbx-icon-btn):not(.gbx-btn):not(.gbx-btn-outline){
  height: var(--gbx-btn-h);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 0 18px;
  border-radius: 999px;
  border: 0;
  color: #fff;
  font-weight: 600;
  text-decoration:none;
  background: linear-gradient(90deg, #06D7FE 0%, #E000FF 100%);
  box-shadow: 0 10px 22px rgba(0,0,0,0.30);
  transition: background .18s ease, box-shadow .18s ease, filter .18s ease, transform .18s ease, color .18s ease;
}

.wp-block-button .wp-block-button__link:hover,
.wp-element-button:hover,
button.wp-element-button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
button:not(.gbx-icon-btn):not(.gbx-btn):not(.gbx-btn-outline):hover{
  /* Swap to outlined gradient on hover */
  background:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)) padding-box,
    linear-gradient(90deg, var(--gbx-accent-a), var(--gbx-accent-b)) border-box;
  border: 2px solid transparent;
  box-shadow: none;
  filter:none;
}

/* Outline style for Gutenberg buttons */
.wp-block-button.is-style-outline .wp-block-button__link{
  /* Gradient outline (no fill) */
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)) padding-box,
    linear-gradient(90deg, var(--gbx-accent-a), var(--gbx-accent-b)) border-box;
  box-shadow: none;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover{
  /* Swap to filled gradient on hover */
  border: 0;
  background: linear-gradient(90deg, var(--gbx-accent-a), var(--gbx-accent-b));
  box-shadow: 0 10px 22px rgba(0,0,0,0.30);
}

/* GBX button styles (explicit options in the editor Styles panel) */
.wp-block-button.is-style-gbx-outline .wp-block-button__link{
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)) padding-box,
    linear-gradient(90deg, var(--gbx-accent-a), var(--gbx-accent-b)) border-box;
  color: rgba(255,255,255,0.90);
  box-shadow: none;
}

.wp-block-button.is-style-gbx-solid-outline .wp-block-button__link{
  border: 2px solid transparent;
  background:
    linear-gradient(90deg, var(--gbx-accent-a), var(--gbx-accent-b)) padding-box,
    linear-gradient(90deg, var(--gbx-accent-a), var(--gbx-accent-b)) border-box;
  color: rgba(255,255,255,0.95);
  box-shadow: 0 10px 22px rgba(0,0,0,0.30);
}

/* Hover swap behaviour */
.wp-block-button.is-style-gbx-outline .wp-block-button__link:hover,
.wp-block-button.is-style-gbx-outline .wp-block-button__link:focus-visible{
  border: 2px solid transparent;
  background:
    linear-gradient(90deg, var(--gbx-accent-a), var(--gbx-accent-b)) padding-box,
    linear-gradient(90deg, var(--gbx-accent-a), var(--gbx-accent-b)) border-box;
  box-shadow: 0 10px 22px rgba(0,0,0,0.30);
}

.wp-block-button.is-style-gbx-solid-outline .wp-block-button__link:hover,
.wp-block-button.is-style-gbx-solid-outline .wp-block-button__link:focus-visible{
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)) padding-box,
    linear-gradient(90deg, var(--gbx-accent-a), var(--gbx-accent-b)) border-box;
  box-shadow: none;
}

.gbx-row{ display:flex; align-items:center; justify-content:space-between; gap: 16px; }
.gbx-row .gbx-left{ display:flex; align-items:center; gap: 14px; min-width: 0; }
.gbx-kicker{ font-size: 12px; color: var(--gbx-text-dim); letter-spacing: 0.4px; text-transform: uppercase; }
.gbx-pill{ display:inline-flex; align-items:center; justify-content:center; padding: 6px 12px; border-radius: 999px; font-size: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); color: rgba(255,255,255,0.85); }

/* Non-clickable tags (catalogue intent cards) */
.gbx-tag{ display:inline-flex; align-items:center; justify-content:center; padding: 6px 12px; border-radius: 999px; font-size: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.10); color: rgba(255,255,255,0.80); cursor: default; pointer-events: none; user-select: none; }

.gbx-input, .gbx-select, .gbx-textarea{ width: 100%; color: var(--gbx-text); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; padding: 12px 12px; font-family: var(--gbx-font); outline:none; }
.gbx-input:focus, .gbx-select:focus, .gbx-textarea:focus{ border-color: rgba(41,213,255,0.65); box-shadow: 0 0 0 3px rgba(41,213,255,0.12); }
.gbx-field{ margin-bottom: 14px; }
.gbx-label{ display:block; font-size: 12px; color: var(--gbx-text-dim); margin: 0 0 7px; }
.gbx-help{ font-size: 12px; color: rgba(41,213,255,0.85); margin-top: 6px; }

/* ---------- Onboarding wizard ---------- */
.gbx-onboarding{ max-width: 860px; margin: 0 auto; }
.gbx-onboarding__header{ margin-bottom: 18px; }
.gbx-onboarding__stepper{ display:flex; align-items:center; justify-content:center; gap: 18px; margin: 18px 0 22px; }
/*
  NOTE: `.gbx-step` is used by the marketing pattern “Steps (1-5)” as a layout container.
  The compact onboarding progress dots previously used `.gbx-step` too, which caused
  collisions and broke the marketing layout (text wrapping vertically).

  The onboarding dots are now `.gbx-step-dot`.
*/
.gbx-step-dot{ width: 34px; height: 34px; border-radius: 999px; display:flex; align-items:center; justify-content:center; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); position: relative; }
.gbx-step-dot::after{ content:""; position:absolute; left: 100%; top: 50%; width: 18px; height: 1px; background: rgba(255,255,255,0.14); transform: translateY(-50%); }
.gbx-step-dot:last-child::after{ display:none; }
.gbx-step-dot.is-active{ background: linear-gradient(90deg, rgba(6,215,254,0.75) 0%, rgba(213,10,234,0.75) 50%, rgba(238,0,255,0.75) 100%); border-color: rgba(255,255,255,0.20); }
.gbx-step-dot.is-done{ background: rgba(6,215,254,0.20); border-color: rgba(6,215,254,0.35); }

.gbx-onboarding__card{ margin-top: 0; }
.gbx-onboarding__actions{ display:flex; align-items:center; justify-content:space-between; gap: 16px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); }
.gbx-onboarding__actions-right{ display:flex; align-items:center; gap: 14px; }
.gbx-onboarding__status{ font-size: 12px; color: rgba(255,255,255,0.70); min-width: 80px; text-align:right; }

.gbx-choice-list{ display:flex; flex-direction:column; gap: 10px; }
.gbx-choice{ display:flex; align-items:center; gap: 10px; padding: 12px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); cursor: pointer; user-select:none; }
.gbx-choice:hover{ border-color: rgba(41,213,255,0.35); background: rgba(255,255,255,0.05); }
.gbx-choice input{ accent-color: var(--gbx-accent-a); }
.gbx-choice span{ color: rgba(255,255,255,0.88); }

.gbx-notice{ border-radius: 14px; padding: 12px 14px; background: rgba(6,215,254,0.08); border: 1px solid rgba(6,215,254,0.22); color: rgba(255,255,255,0.88); font-size: 13px; }
.gbx-notice--muted{ background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); color: rgba(255,255,255,0.78); }

.gbx-review{ display:flex; flex-direction:column; gap: 10px; }
.gbx-review__row{ display:grid; grid-template-columns: 180px 1fr; gap: 14px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
.gbx-review__k{ font-size: 12px; color: rgba(255,255,255,0.65); text-transform: uppercase; letter-spacing: 0.35px; }
.gbx-review__v{ font-size: 14px; color: rgba(255,255,255,0.90); }

@media (max-width: 720px){
  .gbx-review__row{ grid-template-columns: 1fr; }
  .gbx-onboarding__actions{ flex-direction: column; align-items: stretch; }
  .gbx-onboarding__actions-right{ width: 100%; justify-content: space-between; }
  .gbx-onboarding__status{ text-align:left; }
}

.gbx-footer{ border-top: 1px solid rgba(255,255,255,0.06); background: rgba(6,12,24,0.65); backdrop-filter: blur(10px); }
.gbx-footer-inner{ max-width: var(--gbx-max); margin:0 auto; padding: 22px 20px; display:flex; align-items:center; justify-content:space-between; gap: 18px; color: var(--gbx-text-dim); font-size: 12px; }

/* -----------------------------
   Growth Box custom cursor (Option B)
   - Shows a small Growth Box icon that follows the pointer on desktop.
   - Falls back to normal cursor on form fields / editable areas.
-------------------------------- */
@media (hover: hover) and (pointer: fine) {
  body.gbx-cursor-active {
    cursor: none;
  }

  /* Let inputs keep standard behaviours; we hide the custom cursor instead */
  body.gbx-cursor-paused {
    cursor: auto;
  }

  #gbx-cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
    transform: translate(-9999px, -9999px);
    transition: opacity 120ms ease;
    background: transparent url('assets/img/gbx-cursor.png') no-repeat center / 24px 24px;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,0.35));
  }

  body.gbx-cursor-active #gbx-cursor {
    opacity: 1;
  }

  body.gbx-cursor-paused #gbx-cursor {
    opacity: 0;
  }

  /* If the user prefers reduced motion, don’t animate movement */
  @media (prefers-reduced-motion: reduce) {
    #gbx-cursor {
      transition: opacity 0ms;
    }
  }
}

/* ---------- Menus ---------- */
.gbx-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px;
  align-items: center;
}
.gbx-menu li { margin: 0; padding: 0; }
.gbx-menu a {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  font-weight: 500;
}
.gbx-menu a:hover { opacity: 0.9; }

.gbx-footer-links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.gbx-footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px;
}
.gbx-footer-menu li { margin: 0; }
.gbx-footer-menu a { color: rgba(255,255,255,0.75); text-decoration: none; }
.gbx-footer-menu a:hover { color: rgba(255,255,255,0.95); }

/* ---------- Pattern helpers (rounded by default) ---------- */
.gbx-panel {
  border-radius: 30px;
  overflow: hidden;
}
.gbx-card,
.gbx-icon-card {
  border-radius: 20px;
  overflow: hidden;
}
.gbx-section { margin: 48px 0; }

.gbx-cta {
  border-radius: 30px;
  overflow: hidden;
}

.gbx-icon-card {
  padding: 18px;
  text-align: center;
  border: 1px solid rgba(6, 215, 254, 0.45);
  background: rgba(9, 26, 45, 0.45);
}
.gbx-icon { font-size: 28px; margin: 0 0 8px; }

.gbx-steps .gbx-step {
  text-align: center;
  padding: 14px 10px;
}

/*
  IMPORTANT:
  `.gbx-step` is also used elsewhere in the app shell as a compact step indicator.
  The marketing pattern “Steps (1-5)” uses `.gbx-steps .gbx-step` as a container.
  If the global `.gbx-step` rules apply here, the container collapses to a 34x34px
  circle and the copy wraps vertically (one character per line).

  These scoped overrides reset the container styling and draw the dotted arrows
  between the step number circles.
*/
.gbx-steps .gbx-step{
  width: auto;
  height: auto;
  border-radius: 0;
  display: block;
  align-items: initial;
  justify-content: initial;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  position: static;
}
.gbx-steps .gbx-step::after{ display:none; }

/* Ensure no inherited vertical writing-mode can affect this pattern */
.gbx-steps-flow,
.gbx-steps-flow *{
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

.gbx-step__num {
  width: 76px;
  height: 76px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  border: 2px solid rgba(213, 10, 234, 0.6);
  background: rgba(9, 26, 45, 0.45);
  position: relative;
  font-size: 28px;
  line-height: 1;
  font-weight: 600;
}

.gbx-step__heading{
  margin: 0 0 10px;
  font-weight: 600;
}

.gbx-step__subline{
  margin: 0;
  opacity: 0.85;
}

/* Dotted arrow connectors (desktop/tablet) */
.gbx-steps .wp-block-column:not(:last-child) .gbx-step__num::after{
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 18px);
  width: 80px;
  border-top: 1px dashed rgba(255,255,255,0.35);
  transform: translateY(-50%);
}
.gbx-steps .wp-block-column:not(:last-child) .gbx-step__num::before{
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 18px + 80px - 6px);
  width: 0;
  height: 0;
  border-left: 6px solid rgba(255,255,255,0.35);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: translateY(-50%);
}

/* On narrow screens, stack steps and remove connectors */
@media (max-width: 900px){
  .gbx-steps .gbx-step__num::after,
  .gbx-steps .gbx-step__num::before{ display:none; }
}

/*
  Steps (1-5) layout hardening
  ----------------------------
  In WordPress, the Columns block can end up storing inline flex-basis widths
  if someone drags column handles in the editor. If those widths are very small,
  the step copy wraps one character per line ("vertical" text effect).

  These rules force equal-width columns for this specific pattern.
*/
.wp-block-columns.gbx-steps{
  flex-wrap: nowrap;
  gap: clamp(12px, 2vw, 28px);
}
.wp-block-columns.gbx-steps > .wp-block-column{
  flex: 1 1 0 !important;
  min-width: 0;
}

@media (max-width: 900px){
  /* Stack vertically on mobile - matches the reference behaviour */
  .wp-block-columns.gbx-steps{
    flex-wrap: nowrap;
    flex-direction: column;
    gap: 22px;
  }
  .wp-block-columns.gbx-steps > .wp-block-column{
    flex: 1 1 auto !important;
    width: 100% !important;
  }
  .gbx-steps .gbx-step{ text-align: left; }
  .gbx-step__num{ margin: 0 0 10px; }
}


/* === Growth Box: header refinements (v0.7) === */

/* Public header should sit on top of textured background */
.gbx-topbar--public{
  background: rgba(6, 16, 32, 0.45) !important;
  box-shadow: none;
}

/* Header should be fully transparent (sit directly on textured background) */
.gbx-topbar{
  /* Match main header tint (less transparent) */
  background: rgba(6, 16, 32, 0.45) !important;
  backdrop-filter: blur(10px);
  box-shadow: none;
  border-bottom: 0;
}

/* Public menu links - behave like GBX buttons
   Default: filled gradient + gradient outline
   Hover: swap to outline-only */
.gbx-menu--public a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 18px;
  border-radius:999px;
  border:2px solid transparent;
  color: rgba(255,255,255,0.95);
  text-decoration:none;
  font-family: var(--gbx-font, 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif);
  font-weight:500;
  font-size:16px;
  line-height:1;
  background:
    linear-gradient(90deg, var(--gbx-accent-a), var(--gbx-accent-b)) padding-box,
    linear-gradient(90deg, var(--gbx-accent-a), var(--gbx-accent-b)) border-box;
  box-shadow: 0 12px 40px rgba(181,0,255,0.20);
  transition: background .18s ease, box-shadow .18s ease, filter .18s ease, transform .18s ease, color .18s ease;
}
.gbx-menu--public a:hover{
  background:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)) padding-box,
    linear-gradient(90deg, var(--gbx-accent-a), var(--gbx-accent-b)) border-box;
  box-shadow:none;
}

/* Guarantee outline buttons are truly unfilled (override any generic button rules) */
.gbx-btn-outline,
.gbx-btn--outline,
.wp-block-button.is-style-outline .wp-block-button__link{
  background-color: transparent !important;
}

/* Buttons - medium weight and 16px */
.gbx-btn,
.wp-block-button__link,
button,
input[type="submit"],
input[type="button"]{
  font-family: var(--gbx-font, 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif);
  font-weight:500;
  font-size:16px;
}



/* === v0.7.8 FIX: TRUE gradient-outline buttons (transparent interior) ===
   Previous approach used a transparent padding-box layer which still showed the border-box gradient through.
   This uses a masked pseudo-element so the gradient only appears on the border, while the interior stays transparent.
*/
.gbx-btn-outline,
.gbx-btn--outline,
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-gbx-outline .wp-block-button__link{
  position: relative;
  background: transparent !important;
  background-image: none !important;
  border: 2px solid transparent !important;
  box-shadow: none;
  color: rgba(255,255,255,0.92);
}

/* gradient border via mask */
.gbx-btn-outline::before,
.gbx-btn--outline::before,
.wp-block-button.is-style-outline .wp-block-button__link::before,
.wp-block-button.is-style-gbx-outline .wp-block-button__link::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(90deg, var(--gbx-accent-a), var(--gbx-accent-b));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* keep the existing swap behaviour */
.gbx-btn-outline:hover,
.gbx-btn--outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-gbx-outline .wp-block-button__link:hover{
  background: linear-gradient(90deg, var(--gbx-accent-a), var(--gbx-accent-b)) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.30);
}

/* when filled, we still want the outline visible */
.gbx-btn-outline:hover::before,
.gbx-btn--outline:hover::before,
.wp-block-button.is-style-outline .wp-block-button__link:hover::before,
.wp-block-button.is-style-gbx-outline .wp-block-button__link:hover::before{
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}



/* Filled+outline button uses the same masked gradient border so hover -> true outline works */
.gbx-btn,
.wp-block-button.is-style-gbx-solid-outline .wp-block-button__link{
  position: relative;
  border: 2px solid transparent !important;
}
.gbx-btn::before,
.wp-block-button.is-style-gbx-solid-outline .wp-block-button__link::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding:2px;
  background: linear-gradient(90deg, var(--gbx-accent-a), var(--gbx-accent-b));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}
.gbx-btn:hover,
.wp-block-button.is-style-gbx-solid-outline .wp-block-button__link:hover{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none;
}

/* === v0.7.9: CTA pair helper (Homepage banner) ===
   Add class 'gbx-cta-pair' to the *Buttons* block (the container that holds 2 buttons).
   This forces Button 1 = Solid+Outline, Button 2 = True Outline, without needing to pick styles.
*/
.wp-block-buttons.gbx-cta-pair .wp-block-button:first-child .wp-block-button__link{
  position: relative;
  /* filled + outline */
  background: linear-gradient(90deg, var(--gbx-accent-a), var(--gbx-accent-b)) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.30);
}
.wp-block-buttons.gbx-cta-pair .wp-block-button:first-child .wp-block-button__link::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding:2px;
  background: linear-gradient(90deg, var(--gbx-accent-a), var(--gbx-accent-b));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}

.wp-block-buttons.gbx-cta-pair .wp-block-button:nth-child(2) .wp-block-button__link{
  position: relative;
  /* true outline */
  background: transparent !important;
  background-image: none !important;
  border: 2px solid transparent !important;
  box-shadow: none;
}
.wp-block-buttons.gbx-cta-pair .wp-block-button:nth-child(2) .wp-block-button__link::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(90deg, var(--gbx-accent-a), var(--gbx-accent-b));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Swap on hover */
.wp-block-buttons.gbx-cta-pair .wp-block-button:first-child .wp-block-button__link:hover,
.wp-block-buttons.gbx-cta-pair .wp-block-button:first-child .wp-block-button__link:focus-visible{
  /* becomes outline */
  background: transparent !important;
  background-image: none !important;
  box-shadow: none;
}

.wp-block-buttons.gbx-cta-pair .wp-block-button:nth-child(2) .wp-block-button__link:hover,
.wp-block-buttons.gbx-cta-pair .wp-block-button:nth-child(2) .wp-block-button__link:focus-visible{
  /* becomes filled */
  background: linear-gradient(90deg, var(--gbx-accent-a), var(--gbx-accent-b)) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.30);
}

/* =========================================
   GBX Glass Cards with Animated Border
   Source: Growth_Box_Glass_Card_Pattern_v0.8.1
========================================= */

.gbx-stage-section {
  padding: 80px 0;
}

.gbx-stage-cards {
  gap: 24px;
  align-items: stretch;
}

.gbx-stage-cards > .wp-block-column {
  /* Ensure equal-height cards and consistent spacing */
  display: flex;
}

.gbx-glass-card {
  position: relative;
  padding: 40px;
  border-radius: 24px;
  width: 100%;
  height: 100%;
  /* Glassy gradient fill (matches GBX accent spectrum) */
  background:
    linear-gradient(135deg, rgba(2,218,255,0.16), rgba(122,92,255,0.12), rgba(238,0,255,0.10)),
    rgba(10,18,35,0.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}

/* Animated gradient border */
.gbx-glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(
      90deg,
      #02DAFF,
      #7a5cff,
      #EE00FF,
      #02DAFF
  );
  background-size: 300% 300%;
  animation: gbxBorderShift 8s ease infinite;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
}

@keyframes gbxBorderShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gbx-glass-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 42px rgba(0,0,0,0.35);
}

/* Image styling */
.gbx-card-media {
  margin-bottom: 18px;
}

.gbx-card-media img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
}

/* =========================================================
   Mobile hardening (site-wide)
   Goal: prevent horizontal scroll + ensure Gutenberg blocks
   (Columns, Media & Text, Cover, large headings) behave well.
   ========================================================= */

/* Prevent 100vw / negative-margin sections from causing horizontal scroll */
html, body{ overflow-x: hidden; }

img, video, iframe{ max-width:100%; height:auto; }

/* Better wrapping for long headings/words */
h1,h2,h3,h4,h5,h6,p,li{ overflow-wrap:anywhere; }

@media (max-width: 768px){
  /* Global typography scale-down */
  .gbx-h1{ font-size: 28px; }
  .gbx-h2{ font-size: 20px; }

  /* Tighten overall page padding */
  .gbx-wrap,
  .gbx-public-content,
  .gbx-portal-content--editable{
    padding: 28px 16px 56px;
  }

  /* Topbar: allow wrapping and reduce clutter */
  .gbx-topbar-inner{ padding: 12px 14px; gap: 10px; }
  .gbx-right{ gap: 8px; }
  .gbx-chip{ display:none; }
  .gbx-iconbtn{ width: 32px; height: 32px; border-radius: 10px; }

  /* Buttons: more comfortable on mobile */
  .gbx-btn,
  .gbx-btn-outline,
  .gbx-btn--outline,
  .wp-block-button .wp-block-button__link,
  .wp-element-button{
    height: 46px;
    font-size: 15px;
  }

  /* Gutenberg Columns: always wrap on mobile */
  .wp-block-columns{
    flex-wrap: wrap !important;
    gap: 18px;
  }
  .wp-block-columns > .wp-block-column{
    flex-basis: 100% !important;
    width: 100% !important;
  }

  /* Media & Text: stack nicely */
  .wp-block-media-text{
    grid-template-columns: 1fr !important;
  }
  .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media{
    order: -1;
  }
  .wp-block-media-text__content{ padding: 18px 0 !important; }

  /* Cover blocks: avoid overly tall sections */
  .wp-block-cover{ min-height: auto !important; }
}

@media (max-width: 420px){
  /* Extra small phones */
  .gbx-h1{ font-size: 26px; }
  .gbx-page-shell{ padding: 20px; border-radius: 20px; }
  .gbx-page-shell::before{ border-radius: 20px; }
}


/* =========================================
   v0.9.0 MOBILE SYSTEM IMPROVEMENTS
   ========================================= */

/* 1. Global writing-mode safeguard */
.gbx-section * {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

/* 2. Fluid typography system */
h1 { font-size: clamp(32px, 5vw, 56px); }
h2 { font-size: clamp(26px, 4vw, 42px); }
p  { font-size: clamp(16px, 2.5vw, 18px); }

/* 3. Container system */
.gbx-container {
  width: min(1100px, 100%);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* 4. Built-in mobile swipe utility */
@media (max-width: 768px) {

  .gbx-swipe-mobile {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory;
    padding-left: 20px !important;
    padding-right: 20px !important;
    touch-action: pan-x;
  }

  .gbx-swipe-mobile > * {
    flex: 0 0 85% !important;
    max-width: 85% !important;
    scroll-snap-align: start;
  }

  .gbx-swipe-mobile::-webkit-scrollbar {
    display: none;
  }

  .gbx-swipe-mobile {
    scrollbar-width: none;
  }

  /* Hide utility for mobile */
  .gbx-hide-mobile {
    display: none !important;
  }

}

/* =========================================
   v0.9.1 MOBILE POLISH PASS (Direction B)
   Mobile-first sizing, punchy hierarchy, calmer measure
   ========================================= */

/* Spacing tokens */
:root{
  --gbx-space-xs: 10px;
  --gbx-space-sm: 16px;
  --gbx-space-md: 24px;
  --gbx-space-lg: 36px;
  --gbx-space-xl: 56px;

  --gbx-radius-mobile: 22px;
  --gbx-radius-desktop: 28px;
}

/* Content measure helper (optional wrapper class) */
.gbx-content,
.gbx-measure{
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile-first typography (base) */
h1{
  font-size: 30px;
  line-height: 1.14;
  letter-spacing: -0.02em;
}
h2{
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: -0.015em;
}
h3{
  font-size: 20px;
  line-height: 1.22;
}
p, li{
  font-size: 16px;
  line-height: 1.55;
}

/* Tablet */
@media (min-width: 768px){
  h1{ font-size: 42px; line-height: 1.12; }
  h2{ font-size: 32px; }
  h3{ font-size: 22px; }
  p, li{ font-size: 17px; line-height: 1.6; }

  .gbx-content,
  .gbx-measure{ max-width: 52ch; }
}

/* Desktop */
@media (min-width: 1100px){
  h1{ font-size: 56px; }
  h2{ font-size: 42px; }
  p, li{ font-size: 18px; }

  .gbx-content,
  .gbx-measure{ max-width: 62ch; }
}

/* Container defaults (avoid desktop assumptions hurting mobile) */
.gbx-container{
  padding-left: var(--gbx-space-md);
  padding-right: var(--gbx-space-md);
}
@media (max-width: 480px){
  .gbx-container{
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Mobile section spacing */
@media (max-width: 768px){
  .wp-block-group{
    padding-top: var(--gbx-space-lg);
    padding-bottom: var(--gbx-space-lg);
  }
}

/* Glass card tuning - punchy but not oversized on mobile */
@media (max-width: 768px){
  .gbx-card,
  .wp-block-group.is-style-glass-card{
    width: 100%;
    max-width: 100%;
    padding: 24px 20px;
    border-radius: var(--gbx-radius-mobile);
  }

  /* Keep headings punchy inside cards */
  .gbx-card h2, .gbx-card h3,
  .wp-block-group.is-style-glass-card h2,
  .wp-block-group.is-style-glass-card h3{
    max-width: 16ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* Improve mobile reading measure for paragraphs and headings inside common sections */
  .wp-block-group p,
  .wp-block-group .wp-block-heading{
    max-width: 40ch;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Header and hero spacing - reduce giant desktop feel on mobile */
@media (max-width: 768px){
  .site-header,
  header.wp-block-template-part{
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .site-header img,
  header.wp-block-template-part img{
    max-height: 34px;
    height: auto;
    width: auto;
  }

  .gbx-hero,
  .gbx-hero-section,
  .wp-block-cover.is-style-hero{
    padding-top: var(--gbx-space-lg);
    padding-bottom: var(--gbx-space-lg);
  }
}

/* Reduce accidental overflow and clipping on mobile */
@media (max-width: 768px){
  .wp-site-blocks,
  .wp-block-group,
  .wp-block-cover{
    overflow-x: hidden;
  }
}

/* =========================================
   v0.9.2 FUN LAYER: Custom cursor + Hero tokens
   ========================================= */

/* --- Custom cursor: use Growth Box SVG --- */
@media (hover: hover) and (pointer: fine) {
  #gbx-cursor {
    width: 34px;
    height: 34px;
    background: transparent url('https://growthbox.findwhyconsulting.com/wp-content/uploads/2026/02/Growth-Box-Icon-2-copy-2.svg') no-repeat center / 28px 28px;
    filter: drop-shadow(0 2px 12px rgba(0,0,0,0.35));
  }

  /* Fun states driven by JS */
  body.gbx-cursor-hover #gbx-cursor {
    filter: drop-shadow(0 2px 16px rgba(0,0,0,0.45));
  }
}

/* --- GBX Hero Tokens Layer --- */
.gbx-hero {
  position: relative;
  overflow: hidden;
}

.gbx-hero__tokens {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.gbx-hero__content {
  position: relative;
  z-index: 2;
}

/* Cube placement */
.gbx-hero__cube {
  position: absolute;
  right: clamp(16px, 5vw, 56px);
  top: clamp(24px, 6vw, 80px);
  width: clamp(72px, 9vw, 120px);
  height: auto;
  pointer-events: none;
  user-select: none;
  opacity: 0.95;
  animation: gbxCubeFloat 6.5s ease-in-out infinite;
}

@keyframes gbxCubeFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -6px, 0); }
}

/* Token base style */
.gbx-token {
  position: absolute;
  width: var(--s, 10px);
  height: var(--s, 10px);
  border-radius: 3px;
  opacity: 0;
  will-change: transform, opacity;
  border: 1px solid rgba(0, 221, 255, 0.55);
  background: rgba(255, 43, 214, 0.10);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gbx-hero__tokens { display: none; }
  .gbx-hero__cube { animation: none; }
}

/* =========================================
   v0.9.3 DASHBOARD TEMPLATE PATTERNS
   Intent cards + how-it-works + popular starting points
   ========================================= */

.gbx-intent-grid { gap: 22px; }
.gbx-intent-card { padding: 22px 22px 18px; }
.gbx-intent-head { display:flex; align-items:center; gap: 12px; margin-bottom: 10px; }
.gbx-intent-title { margin: 0; font-size: 18px; line-height: 1.2; }
.gbx-intent-sub { margin-top: 0; margin-bottom: 14px; color: rgba(255,255,255,0.82); font-size: 14px; }

.gbx-intent-icon{
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(0,221,255,0.90), rgba(255,43,214,0.85));
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  position: relative;
  flex: 0 0 34px;
}
.gbx-intent-icon::after{
  content:"";
  position:absolute; inset: 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.25);
  opacity: 0.6;
}
.gbx-intent-icon--alt{ background: linear-gradient(135deg, rgba(0,221,255,0.75), rgba(255,43,214,0.95)); }
.gbx-intent-icon--chart{ background: linear-gradient(135deg, rgba(0,221,255,0.65), rgba(169, 93, 255, 0.95)); }
.gbx-intent-icon--web{ background: linear-gradient(135deg, rgba(0,221,255,0.85), rgba(255,43,214,0.75)); }

.gbx-intent-tags { display:flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.gbx-intent-tags .gbx-tag{ pointer-events:none; }

/* Wide button helper */
.gbx-btn--wide a,
.gbx-btn.gbx-btn--wide a,
.wp-block-button.gbx-btn--wide a{
  display:flex; align-items:center; justify-content:center;
  min-width: 220px;
}

/* How it works */
.gbx-how-grid{ gap: 30px; align-items: start; }
.gbx-steps-mini{ list-style:none; margin: 18px 0 0; padding: 0; display:flex; flex-direction: column; gap: 20px; }
.gbx-steps-mini li{ display:flex; gap: 14px; align-items: center; }
.gbx-steps-mini__num{
  width: 28px; height: 28px; border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(255, 43, 214, 0.55);
  color: rgba(255,255,255,0.95);
  background: rgba(255,255,255,0.03);
  box-shadow: 0 0 0 3px rgba(255,43,214,0.10);
  font-weight: 700; font-size: 12px;
}
.gbx-steps-mini__text{ color: rgba(255,255,255,0.86); font-size: 14px; }

/* Execution levels card */
.gbx-exec-levels{ padding: 22px; border: 1px solid rgba(255,43,214,0.45); }
.gbx-exec-levels__list{ list-style:none; margin: 18px 0 12px; padding:0; display:flex; flex-direction: column; gap: 10px; }
.gbx-exec-levels__list li{
  display:flex; align-items:center; justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  color: rgba(255,255,255,0.88);
  font-size: 13px;
}
.gbx-dot{ width: 8px; height: 8px; border-radius: 999px; background: rgba(41,213,255,0.85); box-shadow: 0 0 0 3px rgba(41,213,255,0.12); }
.gbx-exec-levels__note{ margin: 8px 0 0; color: rgba(255,255,255,0.72); font-size: 12px; text-align:center; }

/* Popular */
.gbx-popular-grid{ gap: 18px; margin-top: 18px; }
.gbx-popular-card{ padding: 14px 16px; }
.gbx-popular-title{ font-weight: 700; font-size: 13px; color: rgba(255,255,255,0.92); margin-bottom: 8px; }
.gbx-popular-meta{ display:flex; align-items:center; justify-content: space-between; gap: 10px; }
.gbx-pts{ font-size: 12px; color: rgba(41,213,255,0.9); }

.gbx-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(255,255,255,0.95);
  background: rgba(255,43,214,0.20);
  border: 1px solid rgba(255,43,214,0.45);
}
.gbx-pill--pink{ background: rgba(255,43,214,0.22); border-color: rgba(255,43,214,0.55); }
.gbx-pill--purple{ background: rgba(169,93,255,0.20); border-color: rgba(169,93,255,0.50); }

.gbx-popular-cta{ margin-top: 18px; }

/* Responsive */
@media (max-width: 900px){
  .gbx-intent-grid{ flex-direction: column; }
  .gbx-how-grid{ flex-direction: column; }
}


/* --- Softer cyan-magenta gradient cards (overlay) --- */
.gbx-icon-card.has-cyan-magenta-gradient-background{
  position: relative;
  overflow: hidden;
  /* Override WP preset gradient (too bright) with a softer, semi-transparent version */
  background-image: none !important;
  background-color: rgba(18, 52, 90, 0.72) !important; /* #12345A tint */
  background: linear-gradient(
      135deg,
      rgba(0, 221, 255, 0.28),
      rgba(255, 43, 214, 0.28)
    ),
    rgba(18, 52, 90, 0.72) !important;
}
.gbx-icon-card.has-cyan-magenta-gradient-background::before{ display:none; }
.gbx-icon-card.has-cyan-magenta-gradient-background > *{
  position: relative;
  z-index: 1;
}

/* --- Header: right-align Catalogue with other controls --- */
.gbx-right .gbx-header__catalogue{
  margin-right: 4px;
  white-space: nowrap;
}