/*
 * Geeky Bot shared website styles.
 * WordPress-safe foundation plus reusable inner-page components.
 * Page-specific styles must load after this file.
 */
.gb-site{
--gb-primary:#2563eb;--gb-primary-dark:#1d4ed8;--gb-secondary:#7c3aed;--gb-commerce:#16a34a;
--gb-dark:#0f172a;--gb-muted:#64748b;--gb-soft:#f8fafc;--gb-white:#fff;--gb-border:#e2e8f0;
--gb-gradient:linear-gradient(110deg,#2563eb,#7c3aed);--gb-shadow:0 16px 38px rgba(15,23,42,.10);
--gb-shadow-lg:0 30px 70px rgba(15,23,42,.17);--gb-max:1180px;
--gb5-ink:#101828;--gb5-body:#475467;--gb5-muted:#667085;--gb5-faint:#98a2b3;
--gb5-line:#e7eaf0;--gb5-line-soft:#eef1f5;--gb5-bg-soft:#fafbfd;
--gb5-blue:#2563eb;--gb5-indigo:#4338ca;--gb5-purple:#7c3aed;--gb5-green:#12805c;--gb5-green-soft:#e8f6ef;
--gb5-accent-grad:linear-gradient(105deg,#2d4fd8 0%,#6d3bdd 100%);
--gb5-ink-grad:linear-gradient(120deg,#1c2740 0%,#3730a3 55%,#6d3bdd 115%);
--gb5-serif:"Newsreader",Georgia,"Times New Roman",serif;
--gb5-radius-lg:24px;--gb5-radius-md:16px;
--gb5-shadow-sm:0 1px 2px rgba(16,24,40,.04),0 6px 20px rgba(16,24,40,.04);
--gb5-shadow-md:0 2px 4px rgba(16,24,40,.04),0 16px 40px rgba(16,24,40,.07);
--gb5-shadow-lg:0 3px 8px rgba(16,24,40,.05),0 34px 80px rgba(16,24,40,.12)
}
.gb-site,.gb-site *{box-sizing:border-box}html{scroll-behavior:smooth}.gb-site{margin:0;background:var(--gb-soft);color:var(--gb-dark);
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
.gb-site a{color:inherit;text-decoration:none}.gb-site svg{display:block;max-width:100%}.gb-site button,.gb-site input,.gb-site select,.gb-site textarea{font:inherit}.gb-site button{cursor:pointer}
.gb-container{width:min(calc(100% - 2rem),var(--gb-max));margin-inline:auto}.gb-narrow{width:min(calc(100% - 2rem),790px);margin-inline:auto}
.gb-section{padding:92px 0;position:relative}.gb-section-white{background:#fff}.gb-section-soft{background:#f8fafc}.gb-section-border{border-block:1px solid var(--gb-border)}
.gb-section-dark{background:#0f172a;color:#fff;overflow:hidden}.gb-section-dark:before,.gb-section-dark:after{content:"";position:absolute;border-radius:50%}.gb-section-dark:before{width:520px;height:520px;left:-250px;top:-280px;background:rgba(37,99,235,.16)}.gb-section-dark:after{width:520px;height:520px;right:-260px;bottom:-320px;background:rgba(124,58,237,.17)}
.gb-kicker-dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#bfdbfe}.gb-kicker-dark:before{background:#93c5fd}
.gb-cta{position:relative;z-index:1;text-align:center;max-width:760px;margin-inline:auto}.gb-cta h2{color:#fff}.gb-cta p{color:#cbd5e1;max-width:620px;margin:0 auto 1.6rem}
.gb-grid{display:grid;gap:24px}.gb-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gb-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gb-gradient-text{background:var(--gb-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.gb-site h1,.gb-site h2,.gb-site h3,.gb-site p{margin-top:0}.gb-site h1{font-size:clamp(2.5rem,5.2vw,4.9rem);line-height:1.02;letter-spacing:-.052em;margin-bottom:1.35rem}
.gb-site h2{font-size:clamp(2rem,3.5vw,3.3rem);line-height:1.08;letter-spacing:-.04em;margin-bottom:1.05rem}.gb-site h3{font-size:1.12rem;line-height:1.3;margin-bottom:.55rem}
.gb-lead{font-size:clamp(1rem,1.55vw,1.17rem);color:var(--gb-muted);max-width:700px}.gb-section-head{max-width:770px;margin:0 auto 46px;text-align:center}
.gb-section-head p{margin-inline:auto}.gb-kicker{display:inline-flex;align-items:center;gap:.5rem;padding:.38rem .72rem;border:1px solid rgba(37,99,235,.18);
border-radius:999px;background:rgba(255,255,255,.78);color:var(--gb-primary);font-size:.74rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1rem}
.gb-kicker:before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--gb-primary);box-shadow:0 0 0 4px rgba(37,99,235,.1)}
.gb-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.gb-actions-center{justify-content:center}.gb-actions-top{margin-top:2rem}
.gb-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;padding:.74rem 1.25rem;border-radius:999px;border:1px solid transparent;
font-weight:800;font-size:.88rem;transition:.2s ease}.gb-btn:hover{transform:translateY(-2px)}.gb-btn:focus-visible,.gb-faq-button:focus-visible{outline:3px solid rgba(37,99,235,.28);outline-offset:3px}
.gb-btn-primary{background:var(--gb-primary);color:#fff;box-shadow:0 10px 24px rgba(37,99,235,.24)}.gb-btn-primary:hover{background:var(--gb-primary-dark)}
.gb-btn-gradient{background:var(--gb-gradient);color:#fff;box-shadow:0 12px 28px rgba(76,65,222,.26)}.gb-btn-dark{background:#0f172a;color:#fff}
.gb-btn-white{background:#fff;border-color:var(--gb-border);color:#0f172a}.gb-btn-commerce{background:var(--gb-commerce);color:#fff}.gb-btn-sm{min-height:38px;padding:.55rem .9rem;font-size:.77rem}
.gb-icon{width:1.05rem;height:1.05rem;flex:none}.gb-card{background:#fff;border:1px solid var(--gb-border);border-radius:20px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.gb-card-pad{padding:28px}.gb-card-lift{transition:.25s ease}.gb-card-lift:hover{transform:translateY(-5px);box-shadow:var(--gb-shadow)}
.gb-site-header{position:fixed;top:0;left:0;width:100%;z-index:50;transition:.25s ease}.gb-site-header.gb-scrolled{background:rgba(255,255,255,.86);backdrop-filter:blur(18px);
border-bottom:1px solid rgba(226,232,240,.8);box-shadow:0 8px 30px rgba(15,23,42,.06)}
.gb-header-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}.gb-logo{display:inline-flex;align-items:center;gap:.6rem;font-weight:900;letter-spacing:-.02em}
.gb-logo-mark{width:35px;height:35px;border-radius:11px;background:var(--gb-gradient);color:#fff;display:grid;place-items:center;box-shadow:0 9px 22px rgba(76,65,222,.25)}
.gb-logo-mark svg{width:20px;height:20px}.gb-nav{display:flex;gap:1.5rem;align-items:center}.gb-nav a{color:#536079;font-size:.84rem;font-weight:750}
.gb-nav a:hover,.gb-nav a[aria-current=page]{color:var(--gb-primary)}.gb-header-actions{display:flex;gap:.65rem;align-items:center}
.gb-menu-button{display:none;width:42px;height:42px;border:0;background:#fff;border-radius:12px;color:#0f172a;box-shadow:0 1px 2px rgba(15,23,42,.08)}
.gb-mobile-nav{display:none}
.gb-page-hero{padding:142px 0 72px;text-align:center;position:relative;overflow:hidden;background:radial-gradient(circle at 15% 25%,rgba(37,99,235,.22),transparent 32%),radial-gradient(circle at 86% 16%,rgba(124,58,237,.2),transparent 30%),#f8fafc}
.gb-page-hero .gb-lead{margin-inline:auto}.gb-page-hero h1{font-size:clamp(2.55rem,4.7vw,4.4rem)}
.gb-tag{display:inline-flex;align-items:center;border-radius:999px;padding:.28rem .58rem;font-size:.68rem;font-weight:850;text-transform:uppercase;letter-spacing:.05em;background:#eff6ff;color:#2563eb}
.gb-tag-free{background:#ecfdf5;color:#15803d}
.gb-icon-box{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#eff6ff;color:#2563eb;margin-bottom:18px}.gb-icon-box svg{width:23px;height:23px}
.gb-feature-card{padding:27px;height:100%}.gb-feature-card p{margin-bottom:0;color:var(--gb-muted);font-size:.91rem}
.gb-check-list{display:grid;gap:.75rem;padding:0;margin:1rem 0 0;list-style:none}.gb-check-list li{display:flex;gap:.65rem;align-items:flex-start;color:#475569;font-size:.9rem}
.gb-check-list svg{width:1rem;height:1rem;color:#16a34a;margin-top:.25rem;flex:none}
.gb-chat-person{display:flex;align-items:center;gap:.7rem}.gb-bubble{max-width:87%;padding:10px 12px;border-radius:14px;font-size:.77rem;line-height:1.45}
.gb-bubble-user{margin-left:auto;background:#eef2ff;color:#24304b;border-bottom-right-radius:5px}.gb-bubble-bot{background:#f1f5f9;color:#334155;border-bottom-left-radius:5px}
.gb-split{display:grid;grid-template-columns:.93fr 1.07fr;gap:58px;align-items:center}.gb-step-number{width:42px;height:42px;border-radius:13px;background:#eff6ff;color:#2563eb;display:grid;place-items:center;font-size:.78rem;font-weight:900}
.gb-notice{border:1px solid var(--gb-border);background:#fff;border-radius:14px;padding:15px;color:#526078;font-size:.77rem}.gb-notice strong{color:#0f172a}
.gb-faq-list{display:grid;gap:12px;max-width:860px;margin-inline:auto}.gb-faq{background:#fff;border:1px solid var(--gb-border);border-radius:15px;overflow:hidden}.gb-faq-button{width:100%;border:0;background:#fff;padding:18px 20px;display:flex;justify-content:space-between;gap:16px;text-align:left;font-weight:850;color:#0f172a}
.gb-faq-button span:last-child{font-size:1.2rem;color:#2563eb;transition:.2s}.gb-faq-button[aria-expanded=true] span:last-child{transform:rotate(45deg)}.gb-faq-answer{display:none;padding:0 20px 18px;color:#64748b;font-size:.88rem}.gb-faq.gb-open .gb-faq-answer{display:block}
.gb-site-footer{background:#0c1528;color:#cbd5e1;padding:64px 0 24px;text-align:left}.gb-site-footer-main{padding-bottom:0}.gb-site-copyright{background:#0c1528;color:#cbd5e1;padding:0 0 24px;text-align:left}.gb-footer-grid{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:44px;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.1);text-align:left}
.gb-footer-brand p{max-width:360px;color:#94a3b8;font-size:.82rem;margin-top:15px}.gb-footer-title{font-size:.71rem;text-transform:uppercase;letter-spacing:.07em;color:#fff;font-weight:900;margin-bottom:14px}.gb-footer-links{display:grid;gap:8px}.gb-footer-links a{font-size:.77rem;color:#94a3b8}.gb-footer-links a:hover{color:#fff}
.gb-site .gb-site-footer .gb-logo,.gb-site .gb-site-footer .gb-logo:visited,.gb-site .gb-site-footer .gb-logo span{color:#fff}.gb-site .gb-site-footer .gb-footer-brand p{color:#94a3b8}.gb-site .gb-site-footer .gb-footer-title{color:#fff}.gb-site .gb-site-footer .gb-footer-links a,.gb-site .gb-site-footer .gb-footer-links a:visited{color:#94a3b8;text-decoration:none}.gb-site .gb-site-footer .gb-footer-links a:hover,.gb-site .gb-site-footer .gb-footer-links a:focus{color:#fff}.gb-site .gb-site-copyright .gb-footer-bottom{color:#94a3b8}
.gb-footer-bottom{padding-top:22px;display:flex;justify-content:space-between;gap:20px;color:#64748b;font-size:.69rem}.gb-blog-meta{display:flex;gap:10px;color:#64748b;font-size:.71rem;font-weight:750;margin:11px 0 16px}
.gb-legal-wrap{display:grid;grid-template-columns:240px 1fr;gap:42px;align-items:start}.gb-legal-nav{position:sticky;top:100px;background:#fff;border:1px solid var(--gb-border);border-radius:15px;padding:14px;display:grid;gap:4px}.gb-legal-nav a{padding:8px 10px;border-radius:8px;color:#64748b;font-size:.75rem;font-weight:750}.gb-legal-nav a:hover{background:#eff6ff;color:#2563eb}
.gb-legal{background:#fff;border:1px solid var(--gb-border);border-radius:22px;padding:38px}.gb-legal h2{font-size:1.5rem;margin-top:32px;scroll-margin-top:110px}.gb-legal h2:first-child{margin-top:0}.gb-legal p,.gb-legal li{color:#526078;font-size:.89rem}.gb-legal-note{padding:14px;border-radius:12px;background:#f8fafc;border:1px solid var(--gb-border);font-size:.78rem;color:#64748b;margin-top:28px}.gb-callout{padding:16px 18px;border-left:4px solid #2563eb;background:#eff6ff;border-radius:0 12px 12px 0;color:#334155;font-size:.84rem}
.gb-reveal{opacity:1;transform:none}.js .gb-reveal{opacity:1;transform:none}.js .gb-reveal.gb-visible{animation:gb-rise .55s ease both}@keyframes gb-rise{from{opacity:.72;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .gb-reveal.gb-visible{animation:none}}
@media(max-width:1020px){.gb-nav{display:none}.gb-header-actions .gb-btn-white{display:none}.gb-menu-button{display:grid;place-items:center}.gb-mobile-nav{position:fixed;top:76px;left:16px;right:16px;background:#fff;border:1px solid var(--gb-border);border-radius:16px;padding:12px;box-shadow:var(--gb-shadow);display:none}.gb-mobile-nav.gb-open{display:grid}.gb-mobile-nav a{padding:10px 12px;border-radius:9px;color:#475569;font-size:.84rem;font-weight:800}.gb-split{grid-template-columns:1fr}.gb-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.gb-footer-grid{grid-template-columns:1.5fr repeat(2,1fr)}.gb-footer-grid>div:last-child{grid-column:2/4}.gb-legal-wrap{grid-template-columns:1fr}.gb-legal-nav{position:static}}
@media(max-width:760px){.gb-section{padding:70px 0}.gb-grid-3,.gb-grid-4{grid-template-columns:1fr}.gb-footer-grid{grid-template-columns:1fr 1fr}.gb-footer-brand{grid-column:1/-1}.gb-footer-grid>div:last-child{grid-column:auto}.gb-footer-bottom{flex-direction:column}.gb-legal{padding:24px}}
@media(max-width:480px){.gb-container,.gb-narrow{width:min(calc(100% - 1.25rem),var(--gb-max))}.gb-header-inner{height:68px}.gb-mobile-nav{top:68px}.gb-header-actions .gb-btn-primary{display:none}.gb-actions{flex-direction:column;align-items:stretch}.gb-btn{width:100%}.gb-footer-grid{grid-template-columns:1fr}.gb-footer-brand{grid-column:auto}}
/* ==========================================================================
   Geeky Bot — shared inner-page components (premium language)
   Included in the common stylesheet for all website pages.
   Same system: light weights, hairlines, ink accents, serif italic em.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Centered page hero
   -------------------------------------------------------------------------- */

.gb5-page-hero {
  position: relative;
  padding: 164px 0 78px;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(ellipse 58% 46% at 82% -8%, rgba(124, 58, 237, 0.11), transparent),
    radial-gradient(ellipse 54% 42% at 14% 0%, rgba(37, 99, 235, 0.11), transparent),
    radial-gradient(ellipse 44% 34% at 52% 116%, rgba(45, 79, 216, 0.05), transparent),
    #fff;
}

.gb5-page-hero .gb5-eyebrow { margin-bottom: 1.2rem; }

.gb5-page-hero h1 {
  max-width: 860px;
  margin: 0 auto 1.4rem;
  color: var(--gb5-ink);
  font-size: clamp(2.4rem, 4.3vw, 3.7rem);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.034em;
  text-wrap: balance;
}

.gb5-page-hero h1 em {
  font-family: var(--gb5-serif);
  font-style: italic;
  font-weight: 450;
  letter-spacing: -0.01em;
  background: var(--gb5-ink-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gb5-page-lead {
  max-width: 600px;
  margin: 0 auto 2.1rem;
  color: var(--gb5-muted);
  font-size: 1.05rem;
  font-weight: 420;
  line-height: 1.75;
}

.gb5-page-hero .gb-actions { justify-content: center; }

/* Hero stat index — quiet anchors into the page */

.gb5-hero-index {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 3.4rem;
}

.gb5-hero-index a {
  display: grid;
  gap: 3px;
  min-width: 168px;
  padding: 0.4rem 2.4rem;
  border-left: 1px solid var(--gb5-line);
  text-align: center;
  transition: 0.2s ease;
}

.gb5-hero-index a:first-child { border-left: 0; }

.gb5-hero-index strong {
  color: var(--gb5-ink);
  font-size: 1.55rem;
  font-weight: 620;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: 0.2s ease;
}

.gb5-hero-index small {
  color: var(--gb5-faint);
  font-size: 0.74rem;
  font-weight: 480;
}

.gb5-hero-index a:hover strong {
  background: var(--gb5-accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   Premium tabs
   -------------------------------------------------------------------------- */

.gb5-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 30px;
}

.gb5-tab {
  border: 1px solid var(--gb5-line);
  border-radius: 999px;
  padding: 0.6rem 1.15rem;
  background: #fff;
  color: var(--gb5-muted);
  font-size: 0.82rem;
  font-weight: 520;
  transition: 0.2s ease;
}

.gb5-tab:hover { border-color: #d0d5dd; color: var(--gb5-ink); }

.gb5-tab[aria-selected="true"] {
  border-color: var(--gb5-ink);
  background: var(--gb5-ink);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Scenario stage
   -------------------------------------------------------------------------- */

.gb5-scene {
  border: 1px solid var(--gb5-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--gb5-shadow-md);
  overflow: hidden;
}

.gb5-scene-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--gb5-line-soft);
  background: var(--gb5-bg-soft);
}

.gb5-scene-bar i { width: 8px; height: 8px; border-radius: 50%; background: #e0e5ec; }
.gb5-scene-bar span { margin-left: auto; color: var(--gb5-faint); font-size: 0.7rem; font-weight: 430; }

.gb5-scene-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: center;
  padding: clamp(24px, 3.4vw, 44px);
}

.gb5-scene-copy .gb5-eyebrow { margin-bottom: 0.9rem; }

.gb5-scene-copy h3 {
  margin: 0 0 0.8rem;
  color: var(--gb5-ink);
  font-size: clamp(1.4rem, 2.1vw, 1.85rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.024em;
}

.gb5-scene-copy p { margin: 0; color: var(--gb5-muted); font-size: 0.95rem; font-weight: 420; line-height: 1.7; }

.gb5-scene .gb5-chat { box-shadow: var(--gb5-shadow-sm); }

/* --------------------------------------------------------------------------
   Feature cards
   -------------------------------------------------------------------------- */

.gb5-fgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.gb5-fcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px;
  border: 1px solid var(--gb5-line);
  border-radius: 18px;
  background: #fff;
  transition: 0.22s ease;
}

.gb5-fcard:hover { transform: translateY(-4px); border-color: #d3dae4; box-shadow: var(--gb5-shadow-md); }

.gb5-fcard-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid #dfe5f7;
  border-radius: 13px;
  background: #f4f6fe;
  color: var(--gb5-indigo);
}

.gb5-fcard-icon svg { width: 21px; height: 21px; }

.gb5-fcard-icon.gb5-fi-green { border-color: #d3ecdd; background: #f0faf4; color: var(--gb5-green); }
.gb5-fcard-icon.gb5-fi-violet { border-color: #e6dcf7; background: #f8f4fe; color: var(--gb5-purple); }
.gb5-fcard-icon.gb5-fi-amber { border-color: #f0e3c8; background: #fdf9f0; color: #b45309; }

.gb5-fcard h3 {
  margin: 10px 0 6px;
  color: var(--gb5-ink);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.016em;
}

.gb5-fcard p { margin: 0; color: var(--gb5-muted); font-size: 0.85rem; font-weight: 420; line-height: 1.65; }

.gb5-bento-tag.gb5-tag-roadmap { color: var(--gb5-faint); }

/* --------------------------------------------------------------------------
   Inline note
   -------------------------------------------------------------------------- */

.gb5-note {
  margin-top: 24px;
  padding: 16px 19px;
  border: 1px solid var(--gb5-line-soft);
  border-radius: 15px;
  background: var(--gb5-bg-soft);
  color: var(--gb5-muted);
  font-size: 0.82rem;
  font-weight: 430;
  line-height: 1.65;
}

.gb5-note b { color: var(--gb5-ink); font-weight: 560; }

/* --------------------------------------------------------------------------
   Checklists (light and dark)
   -------------------------------------------------------------------------- */

.gb5-checks { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }

.gb5-checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: var(--gb5-body);
  font-size: 0.9rem;
  font-weight: 430;
  line-height: 1.6;
}

.gb5-checks li::before {
  content: "✓";
  color: var(--gb5-green);
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 0.1rem;
}

.gb5-dark .gb5-checks li { color: #b7c2d4; }
.gb5-dark .gb5-checks li::before { color: #4ade80; }

/* --------------------------------------------------------------------------
   Dark code / answer-source panel
   -------------------------------------------------------------------------- */

.gb5-code-panel {
  display: grid;
  gap: 16px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.025);
}

.gb5-code-panel-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #6f8199;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gb5-code-lines { display: grid; gap: 10px; }

.gb5-code-lines i {
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.gb5-code-lines i:nth-child(1) { width: 76%; background: rgba(96, 165, 250, 0.32); }
.gb5-code-lines i:nth-child(2) { width: 92%; }
.gb5-code-lines i:nth-child(3) { width: 64%; background: rgba(167, 139, 250, 0.3); }
.gb5-code-lines i:nth-child(4) { width: 86%; }
.gb5-code-lines i:nth-child(5) { width: 55%; background: rgba(74, 222, 128, 0.26); }
.gb5-code-lines i:nth-child(6) { width: 79%; }

.gb5-code-note {
  padding: 15px 17px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px 15px 15px 15px;
  background: rgba(255, 255, 255, 0.05);
  color: #b7c2d4;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.6;
}

.gb5-code-note b { color: #fff; font-weight: 560; }

/* --------------------------------------------------------------------------
   Setup mockup (admin split)
   -------------------------------------------------------------------------- */

.gb5-setup-steps { display: grid; gap: 10px; }

.gb5-setup-step {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 13px;
  align-items: start;
  padding: 14px 15px;
  border: 1px solid var(--gb5-line);
  border-radius: 14px;
  background: #fff;
}

.gb5-setup-step span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--gb5-green-soft);
  color: var(--gb5-green);
  font-size: 0.74rem;
  font-weight: 600;
}

.gb5-setup-step.gb5-step-current span { background: #f4f6fe; color: var(--gb5-indigo); }

.gb5-setup-step strong { display: block; margin-bottom: 1px; color: var(--gb5-ink); font-size: 0.85rem; font-weight: 580; }
.gb5-setup-step p { margin: 0; color: var(--gb5-faint); font-size: 0.73rem; font-weight: 430; line-height: 1.5; }

/* --------------------------------------------------------------------------
   Comparison table
   -------------------------------------------------------------------------- */

.gb5-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--gb5-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--gb5-shadow-sm);
}

.gb5-table { width: 100%; border-collapse: collapse; min-width: 720px; }

.gb5-table th, .gb5-table td {
  padding: 15px 22px;
  border-bottom: 1px solid var(--gb5-line-soft);
  text-align: left;
  font-size: 0.85rem;
}

.gb5-table th {
  background: var(--gb5-bg-soft);
  color: var(--gb5-faint);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gb5-table td:first-child { color: var(--gb5-ink); font-weight: 520; }
.gb5-table td { color: var(--gb5-muted); font-weight: 430; }
.gb5-table tr:last-child td { border-bottom: 0; }

.gb5-table td .gb5-cell { display: inline-flex; align-items: center; gap: 0.5rem; }

.gb5-table .gb5-yes {
  color: var(--gb5-green);
  font-weight: 520;
}

.gb5-table .gb5-yes::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background: var(--gb5-green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312805c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.gb5-table .gb5-no {
  color: #c4cbd6;
  font-weight: 400;
}

.gb5-table .gb5-no::before {
  content: "–";
  font-weight: 500;
}

.gb5-table .gb5-soon {
  color: var(--gb5-purple);
  font-weight: 500;
}

.gb5-table .gb5-soon::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--gb5-purple);
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   Pricing — Free + Commerce Pro two-up
   -------------------------------------------------------------------------- */

.gb5-price-duo {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: 16px;
  align-items: start;
  max-width: 940px;
  margin-inline: auto;
}

.gb5-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px;
  border: 1px solid var(--gb5-line);
  border-radius: 24px;
  background: #fff;
  transition: 0.24s ease;
}

.gb5-pcard:hover { border-color: #d3dae4; box-shadow: var(--gb5-shadow-md); }

.gb5-pcard--pro {
  border-color: #cdd4f2;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.05), transparent 44%),
    #fff;
  box-shadow: 0 24px 54px rgba(45, 79, 216, 0.1);
}

.gb5-pcard--pro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gb5-accent-grad);
}

.gb5-pcard-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 0.35rem;
}

.gb5-pcard-tag span {
  color: var(--gb5-faint);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gb5-pcard--pro .gb5-pcard-tag span { color: var(--gb5-purple); }

.gb5-pop {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--gb5-ink);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 560;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.gb5-pcard h3 {
  margin: 0 0 0.3rem;
  color: var(--gb5-ink);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.022em;
}

.gb5-pcard-sub { margin: 0; color: var(--gb5-muted); font-size: 0.9rem; font-weight: 420; }

.gb5-price-amount {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 1.4rem 0 0.35rem;
}

.gb5-price-amount strong {
  color: var(--gb5-ink);
  font-size: 2.7rem;
  font-weight: 620;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.gb5-price-amount small { color: var(--gb5-faint); font-size: 0.86rem; font-weight: 450; }

.gb5-price-note { margin: 0; min-height: 1.3rem; color: var(--gb5-faint); font-size: 0.78rem; font-weight: 430; }

/* Segmented license selector */

.gb5-license-select {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 1.5rem 0 0.4rem;
  padding: 4px;
  border: 1px solid var(--gb5-line);
  border-radius: 12px;
  background: var(--gb5-bg-soft);
}

.gb5-license-select button {
  padding: 0.55rem 0.5rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--gb5-muted);
  font-size: 0.78rem;
  font-weight: 540;
  transition: 0.18s ease;
}

.gb5-license-select button:hover { color: var(--gb5-ink); }

.gb5-license-select button.gb5-active {
  background: #fff;
  color: var(--gb5-ink);
  box-shadow: var(--gb5-shadow-sm);
}

.gb5-price-features {
  display: grid;
  gap: 12px;
  flex: 1;
  margin: 1.6rem 0 1.8rem;
  padding: 1.6rem 0 0;
  border-top: 1px solid var(--gb5-line-soft);
  list-style: none;
}

.gb5-price-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: var(--gb5-body);
  font-size: 0.88rem;
  font-weight: 430;
  line-height: 1.5;
}

.gb5-price-features li::before {
  content: "✓";
  color: var(--gb5-green);
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 0.06rem;
}

.gb5-pcard--pro .gb5-price-features li::before { color: var(--gb5-purple); }

.gb5-pcard .gb-btn { width: 100%; }

/* --------------------------------------------------------------------------
   FAQ (premium override of shared .gb-faq)
   -------------------------------------------------------------------------- */

.gb5-home .gb-faq-list { display: grid; gap: 10px; max-width: 760px; margin-inline: auto; }

.gb5-home .gb-faq {
  border: 1px solid var(--gb5-line);
  border-radius: 15px;
  background: #fff;
  overflow: hidden;
  transition: 0.2s ease;
}

.gb5-home .gb-faq.gb-open { border-color: #d3dae4; box-shadow: var(--gb5-shadow-sm); }

.gb5-home .gb-faq-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border: 0;
  background: transparent;
  text-align: left;
  color: var(--gb5-ink);
  font-size: 0.95rem;
  font-weight: 540;
}

.gb5-home .gb-faq-button span:last-child {
  flex: none;
  color: var(--gb5-faint);
  font-size: 1.3rem;
  font-weight: 300;
  transition: 0.2s ease;
}

.gb5-home .gb-faq-button[aria-expanded="true"] span:last-child { transform: rotate(45deg); color: var(--gb5-ink); }

.gb5-home .gb-faq-answer { display: none; padding: 0 22px 20px; }
.gb5-home .gb-faq.gb-open .gb-faq-answer { display: block; }
.gb5-home .gb-faq-answer p { margin: 0; color: var(--gb5-muted); font-size: 0.88rem; font-weight: 420; line-height: 1.7; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .gb5-scene-grid { grid-template-columns: 1fr; gap: 32px; }
  .gb5-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .gb5-price-duo { grid-template-columns: 1fr; max-width: 480px; }
}

@media (max-width: 800px) {
  .gb5-page-hero { padding: 140px 0 64px; }
  .gb5-fgrid { grid-template-columns: 1fr; }
  .gb5-hero-index { gap: 14px 0; margin-top: 2.6rem; }
  .gb5-hero-index a { min-width: 0; flex: 1 1 40%; padding: 0.4rem 1rem; }
}

/* Global footer CTA */
.gb5-eyebrow{display:block;margin-bottom:1.1rem;color:var(--gb5-blue);font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.gb5-eyebrow-dark{color:#93aaf5}
.gb5-dark{position:relative;padding:132px 0;overflow:hidden;background:#0c0f14;color:#fff}
.gb5-dark::before,.gb5-dark::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.gb5-dark::before{width:620px;height:620px;left:-240px;top:-300px;background:rgba(37,99,235,.2)}
.gb5-dark::after{width:620px;height:620px;right:-240px;bottom:-320px;background:rgba(124,58,237,.17)}
.gb5-cta{padding:148px 0}
.gb5-cta-panel{position:relative;z-index:1;max-width:760px;margin-inline:auto;text-align:center}
.gb5-cta-panel h2{margin-bottom:1.2rem;color:#fff;font-size:clamp(1.9rem,3.2vw,2.8rem);font-weight:570;line-height:1.14;letter-spacing:-.028em;text-wrap:balance}
.gb5-cta-panel h2 em{font-family:var(--gb5-serif);font-style:italic;font-weight:450;background:linear-gradient(105deg,#a5b8ff 0%,#c9a8ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.gb5-cta-panel p{max-width:580px;margin:0 auto 2.2rem;color:#98a5ba;font-size:1rem;font-weight:400;line-height:1.75;margin-top: 25px;}
.gb5-cta .gb-btn-white{border-color:transparent}
.gb5-cta .gb-btn-gradient,.gb5-cta .gb-btn-primary{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff;box-shadow:none}
.gb5-cta-note{margin-top:1.6rem;color:#6f8199;font-size:.78rem;font-weight:420}
@media (max-width:800px){.gb5-dark{padding:96px 0}.gb5-cta{padding:108px 0}}

/* Shared modern-page rules consolidated from repeated page usage. */
.gb-site.gb5-home{background:#fff;color:var(--gb5-ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-feature-settings:"cv02","cv03","cv04","cv11";-webkit-font-smoothing:antialiased}
.gb5-home .gb-btn{border-radius:999px;font-weight:600;letter-spacing:-0.006em;transition:0.22s ease}
.gb5-home .gb-btn:hover{transform:translateY(-1px)}
.gb5-home .gb-btn-gradient{background:var(--gb5-ink);border-color:var(--gb5-ink);color:#fff;box-shadow:0 1px 2px rgba(16,24,40,0.2),0 10px 26px rgba(16,24,40,0.14)}
.gb5-home .gb-btn-primary{background:var(--gb5-ink);border-color:var(--gb5-ink);color:#fff;box-shadow:0 1px 2px rgba(16,24,40,0.2),0 10px 26px rgba(16,24,40,0.14)}
.gb5-home .gb-btn-gradient:hover{background:#1d2939}
.gb5-home .gb-btn-primary:hover{background:#1d2939}
.gb5-home .gb-btn-white{background:#fff;border-color:var(--gb5-line);color:var(--gb5-ink);box-shadow:0 1px 2px rgba(16,24,40,0.04)}
.gb5-home .gb-btn-white:hover{border-color:#d0d5dd}
.gb5-home .gb-logo-mark{box-shadow:none}
.gb5-section{position:relative;padding:128px 0}
.gb5-section-white{background:#fff}
.gb5-section-soft{background:var(--gb5-bg-soft)}
.gb5-section-border{border-block:1px solid var(--gb5-line-soft)}
.gb5-head{max-width:720px;margin:0 auto 64px;text-align:center}
.gb5-head h2{color:var(--gb5-ink);font-size:clamp(1.8rem,2.9vw,2.6rem);font-weight:600;line-height:1.14;letter-spacing:-0.028em;margin-bottom:1.1rem;text-wrap:balance}
.gb5-head h2 em{font-family:var(--gb5-serif);font-style:italic;font-weight:450;letter-spacing:-0.01em;background:var(--gb5-ink-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gb5-head p{max-width:560px;margin:0 auto;color:var(--gb5-muted);font-size:1.02rem;font-weight:420;line-height:1.75}
.gb5-hero{position:relative;padding:172px 0 104px;overflow:hidden;background:radial-gradient(ellipse 60% 46%at 80% -8%,rgba(124,58,237,0.1),transparent),radial-gradient(ellipse 56% 42%at 10% 0%,rgba(37,99,235,0.1),transparent),radial-gradient(ellipse 50% 36%at 55% 112%,rgba(45,79,216,0.06),transparent),#fff}
.gb5-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.04fr 0.96fr;gap:64px;align-items:center}
.gb5-hero-copy h1{color:var(--gb5-ink);font-size:clamp(2.5rem,4.3vw,3.85rem);font-weight:600;line-height:1.07;letter-spacing:-0.034em;margin-bottom:1.5rem;text-wrap:balance}
.gb5-hero-copy h1 em{font-family:var(--gb5-serif);font-style:italic;font-weight:450;font-size:1.03em;letter-spacing:-0.012em;background:var(--gb5-ink-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gb5-doc-layout{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:start}
.gb5-hero-lead{max-width:540px;margin-bottom:2.2rem;color:var(--gb5-muted);font-size:1.06rem;font-weight:420;line-height:1.78}
.gb5-doc-nav{position:sticky;top:100px;display:flex;flex-direction:column;gap:4px;padding:24px;border:1px solid var(--gb5-line);border-radius:16px;background:#fff;box-shadow:var(--gb5-shadow-sm)}
.gb5-hero-copy .gb-actions{margin-bottom:2rem}
.gb5-hero-proof{display:flex;flex-wrap:wrap;gap:0.6rem 1.6rem;margin-bottom:2.4rem;color:var(--gb5-muted);font-size:0.84rem;font-weight:480}
.gb5-doc-nav a{padding:8px 12px;border-radius:8px;color:var(--gb5-muted);font-size:0.8rem;font-weight:500;transition:all 0.2s ease}
.gb5-doc-nav a:hover{background:var(--gb5-bg-soft);color:var(--gb5-blue)}
.gb5-hero-proof span{display:inline-flex;align-items:center;gap:0.5rem}
.gb5-doc-content{padding:48px;border:1px solid var(--gb5-line);border-radius:24px;background:#fff;box-shadow:var(--gb5-shadow-sm)}
.gb5-hero-proof i{width:4px;height:4px;flex:none;border-radius:50%;background:#b3bcc9;font-style:normal;overflow:hidden;text-indent:-9em}
.gb5-doc-content h2{font-size:1.6rem;color:var(--gb5-ink);margin:40px 0 16px;scroll-margin-top:110px;font-weight:600;letter-spacing:-0.02em}
.gb5-doc-content h2:first-child{margin-top:0}
.gb5-doc-content li{color:var(--gb5-body);font-size:0.95rem;line-height:1.7;margin-bottom:16px;font-weight:420}
.gb5-doc-content p{color:var(--gb5-body);font-size:0.95rem;line-height:1.7;margin-bottom:16px;font-weight:420}
.gb5-doc-content ol{padding-left:24px;margin-bottom:24px}
.gb5-doc-content ul{padding-left:24px;margin-bottom:24px}
@media (max-width:800px){.gb5-doc-layout{grid-template-columns:1fr}}
@media (max-width:800px){.gb5-doc-nav{position:static;padding:16px}}
@media (max-width:800px){.gb5-doc-content{padding:24px}}
.gb5-stage{position:relative;max-width:480px;margin-left:auto}
.gb5-chat{position:relative;border:1px solid var(--gb5-line);border-radius:20px;background:#fff;box-shadow:var(--gb5-shadow-lg);overflow:hidden}
.gb5-chat-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--gb5-line-soft);background:#fff}
.gb5-chat-top .gb-chat-person{display:flex;align-items:center;gap:0.7rem}
.gb5-chat-avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff}
.gb5-chat-avatar svg{width:19px;height:19px}
.gb5-chat-name{display:block;color:var(--gb5-ink);font-size:0.85rem;font-weight:600;line-height:1.25}
.gb5-chat-sub{display:block;color:var(--gb5-faint);font-size:0.68rem;font-weight:450}
.gb5-live{display:inline-flex;align-items:center;gap:0.4rem;color:var(--gb5-green);font-size:0.66rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase}
.gb5-live i{width:6px;height:6px;border-radius:50%;background:#22c55e}
.gb5-chat-body{display:grid;gap:11px;padding:20px 18px;background:var(--gb5-bg-soft)}
.gb5-msg{max-width:88%;padding:10px 14px;border-radius:16px;font-size:0.8rem;font-weight:430;line-height:1.55}
.gb5-msg-user{margin-left:auto;border-bottom-right-radius:6px;background:var(--gb5-ink-grad);color:#f4f6f9}
.gb5-msg-bot{border-bottom-left-radius:6px;border:1px solid var(--gb5-line-soft);background:#fff;color:var(--gb5-body)}
.gb5-product{display:grid;grid-template-columns:84px 1fr;gap:14px;padding:12px;border:1px solid var(--gb5-line);border-radius:16px;background:#fff;box-shadow:var(--gb5-shadow-sm)}
.gb5-product-art{position:relative;min-height:84px;border-radius:11px;background:linear-gradient(150deg,#f0f2f6,#e2e6ec);overflow:hidden}
.gb5-product-art::before{content:"";position:absolute;left:13%;right:13%;bottom:24%;height:34%;border-radius:60% 100% 30% 30%/80% 100% 30% 30%;background:linear-gradient(115deg,#1d2939,#475467)}
.gb5-product-art::after{content:"";position:absolute;left:13%;right:13%;bottom:17%;height:8%;border-radius:999px;background:#fff}
.gb5-product-copy small{display:block;margin-bottom:3px;color:var(--gb5-green);font-size:0.6rem;font-weight:600;letter-spacing:0.09em}
.gb5-product-copy h3{margin:0 0 1px;color:var(--gb5-ink);font-size:0.92rem;font-weight:600}
.gb5-product-copy p{margin:0 0 8px;color:var(--gb5-faint);font-size:0.72rem;font-weight:430}
.gb5-product-row{display:flex;align-items:center;gap:0.65rem}
.gb5-product-row strong{color:var(--gb5-ink);font-size:0.95rem;font-weight:620}
.gb5-product-row button{border:1px solid var(--gb5-line);border-radius:999px;padding:0.3rem 0.7rem;background:#fff;color:var(--gb5-body);font-size:0.65rem;font-weight:550}
.gb5-chat-input{display:flex;align-items:center;gap:0.6rem;padding:12px 16px;border-top:1px solid var(--gb5-line-soft);background:#fff}
.gb5-chat-input span{flex:1;padding:0.62rem 1rem;border:1px solid var(--gb5-line-soft);border-radius:999px;background:var(--gb5-bg-soft);color:var(--gb5-faint);font-size:0.75rem;font-weight:430}
.gb5-chat-input i{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--gb5-accent-grad);color:#fff}
.gb5-chat-input svg{width:15px;height:15px}
@keyframes gb5-marquee{to{transform:translateX(-50%)}}
.gb5-admin-copy h2{color:var(--gb5-ink);font-size:clamp(1.75rem,2.7vw,2.4rem);font-weight:600;line-height:1.16;letter-spacing:-0.026em;margin-bottom:1.1rem;text-wrap:balance}
.gb5-admin-copy h2 em{font-family:var(--gb5-serif);font-style:italic;font-weight:450;letter-spacing:-0.008em;background:var(--gb5-ink-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gb5-dark-copy h2 em{font-family:var(--gb5-serif);font-style:italic;font-weight:450;letter-spacing:-0.008em;background:var(--gb5-ink-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gb5-dark-copy h2 em{background:linear-gradient(105deg,#a5b8ff 0%,#c9a8ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.gb5-admin-copy>p{color:var(--gb5-muted);font-size:1rem;font-weight:420;line-height:1.75}
.gb5-bento-tag{align-self:flex-start;color:var(--gb5-faint);font-size:0.62rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase}
.gb5-bento-tag.gb5-tag-pro{color:var(--gb5-purple)}
.gb5-dark-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:68px;align-items:center}
.gb5-dark-copy h2{color:#fff;font-size:clamp(1.8rem,2.8vw,2.5rem);font-weight:570;line-height:1.16;letter-spacing:-0.026em;margin-bottom:1.1rem;text-wrap:balance}
.gb5-dark-copy>p{color:#98a5ba;font-size:1rem;font-weight:400;line-height:1.75}
.gb5-plans{display:grid;grid-template-columns:1fr 56px 1fr;gap:16px;align-items:stretch}
.gb5-plan{display:flex;flex-direction:column;padding:36px;border:1px solid var(--gb5-line);border-radius:24px;background:#fff;transition:0.24s ease}
.gb5-plan:hover{border-color:#d3dae4;box-shadow:var(--gb5-shadow-md)}
.gb5-plan-pro{position:relative;border-color:#d6dcf5;background:linear-gradient(180deg,#fdfdff,#fff);overflow:hidden}
.gb5-plan-pro::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gb5-accent-grad)}
.gb5-plan-tag{color:var(--gb5-green);font-size:0.64rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase}
.gb5-plan-pro .gb5-plan-tag{color:var(--gb5-purple)}
.gb5-plan h3{margin:14px 0 5px;color:var(--gb5-ink);font-size:1.4rem;font-weight:600;letter-spacing:-0.02em}
.gb5-plan-head p{margin:0;color:var(--gb5-muted);font-size:0.9rem;font-weight:420}
.gb5-plan ul{display:grid;gap:12px;flex:1;margin:0 0 28px;padding:0;list-style:none}
.gb5-plan li{display:flex;align-items:flex-start;gap:0.7rem;color:var(--gb5-body);font-size:0.89rem;font-weight:430;line-height:1.55}
.gb5-plan li::before{content:"✓";color:var(--gb5-green);font-size:0.8rem;font-weight:600;margin-top:0.05rem}
.gb5-plan-pro li::before{color:var(--gb5-purple)}
.gb5-plan .gb-btn{align-self:flex-start}
.gb5-admin-grid{display:grid;grid-template-columns:0.92fr 1.08fr;gap:64px;align-items:center}
.gb5-dash{display:grid;grid-template-columns:168px 1fr;border:1px solid var(--gb5-line);border-radius:20px;background:#fff;box-shadow:var(--gb5-shadow-lg);overflow:hidden}
.gb5-dash-side{display:grid;gap:3px;align-content:start;padding:18px 13px;background:#0e1117;color:#98a5ba}
.gb5-dash-brand{display:flex;align-items:center;gap:9px;margin-bottom:14px;padding:4px 9px 16px;border-bottom:1px solid rgba(255,255,255,0.08);color:#fff;font-size:0.78rem;font-weight:600}
.gb5-dash-brand .gb-logo-mark{width:26px;height:26px;border-radius:8px}
.gb5-dash-brand .gb-logo-mark svg{width:14px;height:14px}
.gb5-dash-side span{padding:8px 11px;border-radius:8px;font-size:0.7rem;font-weight:450}
.gb5-dash-side .gb5-side-live{background:rgba(255,255,255,0.08);color:#fff;font-weight:520}
.gb5-dash-main{padding:22px;background:var(--gb5-bg-soft)}
.gb5-dash-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.gb5-dash-top small{display:block;color:var(--gb5-faint);font-size:0.56rem;font-weight:600;letter-spacing:0.12em}
.gb5-dash-top h3{margin:3px 0 0;color:var(--gb5-ink);font-size:0.96rem;font-weight:600}
.gb5-dash-top span{display:inline-flex;align-items:center;gap:0.4rem;color:var(--gb5-green);font-size:0.66rem;font-weight:550}
.gb5-dash-top span i{width:6px;height:6px;border-radius:50%;background:#22c55e}
.gb5-dash-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:10px}
.gb5-dash-stats article{padding:13px 14px;border:1px solid var(--gb5-line);border-radius:12px;background:#fff}
.gb5-dash-stats small{display:block;color:var(--gb5-faint);font-size:0.56rem;font-weight:600;letter-spacing:0.1em}
.gb5-dash-stats strong{display:block;margin:3px 0 1px;color:var(--gb5-ink);font-size:1.2rem;font-weight:620;font-variant-numeric:tabular-nums}
.gb5-dash-stats span{color:var(--gb5-faint);font-size:0.64rem;font-weight:430}
.gb5-dash-chart{margin-bottom:10px;padding:15px 16px 28px;border:1px solid var(--gb5-line);border-radius:12px;background:#fff}
.gb5-dash-chart-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:15px}
.gb5-dash-chart-head strong{color:var(--gb5-ink);font-size:0.8rem;font-weight:580}
.gb5-dash-chart-head small{color:var(--gb5-faint);font-size:0.64rem;font-weight:430}
.gb5-dash-bars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:end;height:82px}
.gb5-dash-bars span{position:relative;display:block;height:var(--h, 40%);border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#93c5fd,#3b82f6)}
.gb5-dash-bars span:nth-child(2){background:linear-gradient(180deg,#c4b5fd,#8b5cf6)}
.gb5-dash-bars span:nth-child(3){background:linear-gradient(180deg,#7dd3c0,#14b8a6)}
.gb5-dash-bars span:nth-child(4){background:linear-gradient(180deg,#fcd9a0,#f59e0b)}
.gb5-dash-bars span:nth-child(5){background:#dbe1ea}
.gb5-dash-bars i{position:absolute;left:50%;bottom:-19px;transform:translateX(-50%);color:var(--gb5-faint);font-size:0.58rem;font-style:normal;font-weight:480}
.gb5-dash-alert{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid #f0e3c8;border-radius:12px;background:#fdf9f0}
.gb5-dash-alert span{display:inline-flex;align-items:center;gap:0.5rem;color:#a16207;font-size:0.7rem;font-weight:550}
.gb5-dash-alert span i{width:6px;height:6px;border-radius:50%;background:#eab308}
.gb5-dash-alert p{flex:1;margin:0;color:#6b6152;font-size:0.74rem;font-weight:430}
.gb5-dash-alert button{border:0;border-radius:999px;padding:0.42rem 0.8rem;background:var(--gb5-ink);color:#fff;font-size:0.66rem;font-weight:550}
@media (max-width:1080px){.gb5-hero{padding-top:148px}}
@media (max-width:1080px){.gb5-hero-grid{grid-template-columns:1fr;gap:64px}}
@media (max-width:1080px){.gb5-stage{margin-inline:auto}}
@media (max-width:1080px){.gb5-admin-grid{grid-template-columns:1fr;gap:48px}}
@media (max-width:1080px){.gb5-dark-grid{grid-template-columns:1fr;gap:48px}}
@media (max-width:1080px){.gb5-plans{grid-template-columns:1fr}}
@media (max-width:800px){.gb5-section{padding:88px 0}}
@media (max-width:560px){.gb5-dash{grid-template-columns:1fr}}
@media (max-width:560px){.gb5-dash-side{display:flex;flex-wrap:wrap;align-items:center}}
@media (max-width:560px){.gb5-dash-brand{margin:0;padding:4px 8px;border-bottom:0}}

/* Deduplicated utilities shared by multiple WordPress page fragments. */
.gb5-form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.gb5-form-field label{font-size:.8rem;font-weight:600;color:var(--gb5-ink)}
.gb5-form-input{width:100%;padding:.8rem 1.05rem;border:1px solid var(--gb5-line);border-radius:12px;background:var(--gb5-bg-soft);color:var(--gb5-ink);font-size:.85rem;outline:none;transition:border-color .2s ease;font-family:inherit}
.gb5-form-input:focus{border-color:var(--gb5-blue);background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.06)}
.gb5-form-input[type="checkbox"]{width:auto;margin-right:8px}
textarea.gb5-form-input{min-height:120px;resize:vertical}
.gb-u-eae290ea{padding-top: 0}
.gb-u-2c3fcffa{--h:78%}
.gb-u-ee450bbd{--h:44%}
.gb-u-cbe94bf9{--h:29%}
.gb-u-79ddfd87{--h:20%}
.gb-u-e6071cdc{padding: 32px}
.gb-u-138df3b3{display: inline-block;margin-top: 8px;padding: 8px 16px}
.gb-u-1f4768d6{margin-top: 32px}
.gb-u-9ec585e1{color: var(--gb5-blue);font-weight: 500}
.gb-u-03c4bb6f{justify-content:center}
.gb-u-8a77e5a3{margin-top:8px}

/* ==========================================================================
   Premium WooCommerce skin — Cart & Checkout (scoped to .gb5-shop)
   Re-skins the WooCommerce shortcode output to the gb5 premium system:
   ink accents, hairlines, quiet shadows, ink pill buttons. No orbs/mesh.
   ========================================================================== */

.gb5-shop { position: relative; }

.gb5-shop .cart-layout-wrap,
.gb5-shop .checkout-layout-wrap { width: 100%; }

/* Cart form wrap */
.gb5-shop .kadence-woo-cart-form-wrap { display: flex; flex-direction: column; gap: 24px; align-items: stretch; width: 100%; }
@media (min-width: 1024px) {
  .gb5-shop .kadence-woo-cart-form-wrap { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .gb5-shop .woocommerce-cart-form { flex: 1.6; min-width: 0; }
  .gb5-shop .cart-collaterals { flex: 1; min-width: 360px; position: sticky; top: 24px; }
}

/* Cards */
.gb5-shop .woocommerce-cart-form,
.gb5-shop .cart_totals,
.gb5-shop .woocommerce-billing-fields,
.gb5-shop .woocommerce-additional-fields,
.gb5-shop .woocommerce-checkout-review-order {
  background: #fff;
  border: 1px solid var(--gb5-line);
  border-radius: 20px;
  padding: 32px;
  box-shadow: var(--gb5-shadow-sm);
  transition: 0.24s ease;
}
.gb5-shop .woocommerce-cart-form:hover,
.gb5-shop .cart_totals:hover,
.gb5-shop .woocommerce-billing-fields:hover,
.gb5-shop .woocommerce-additional-fields:hover,
.gb5-shop .woocommerce-checkout-review-order:hover { border-color: #d3dae4; box-shadow: var(--gb5-shadow-md); }

.gb5-shop .cart_totals,
.gb5-shop .woocommerce-checkout-review-order { position: relative; overflow: hidden; }
.gb5-shop .cart_totals::before,
.gb5-shop .woocommerce-checkout-review-order::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gb5-accent-grad);
}

/* Headings */
.gb5-shop .cart_totals h2,
.gb5-shop .cart-summary h2,
.gb5-shop .woocommerce-billing-fields h3,
.gb5-shop .woocommerce-additional-fields h3,
.gb5-shop #order_review_heading {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.2rem; font-weight: 600; color: var(--gb5-ink); letter-spacing: -0.02em; margin: 0 0 22px;
}

/* Tables */
.gb5-shop .shop_table.cart,
.gb5-shop .woocommerce-checkout-review-order-table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; }
.gb5-shop .shop_table.cart th,
.gb5-shop .woocommerce-checkout-review-order-table th {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gb5-faint);
  padding: 0 0 14px; border: none; border-bottom: 1px solid var(--gb5-line);
}
.gb5-shop .cart_item td,
.gb5-shop .woocommerce-checkout-review-order-table td {
  padding: 18px 0; vertical-align: middle; border-top: none; border-bottom: 1px solid var(--gb5-line-soft);
  font-size: 0.9rem; color: var(--gb5-ink); background: transparent;
}

/* Product name + thumbnail */
.gb5-shop .product-name a { font-size: 0.95rem; font-weight: 560; color: var(--gb5-ink); }
.gb5-shop .product-name a:hover { color: var(--gb5-indigo); }
.gb5-shop .product-thumbnail img { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; border: 1px solid var(--gb5-line); background: var(--gb5-bg-soft); }

/* Prices */
.gb5-shop .woocommerce-Price-amount { font-weight: 600; color: var(--gb5-ink); }
.gb5-shop .woocommerce-Price-currencySymbol { color: var(--gb5-ink); font-weight: 600; }

/* Remove button */
.gb5-shop .product-remove a.remove {
  font-size: 1.1rem; color: var(--gb5-faint); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--gb5-bg-soft); border: 1px solid transparent; transition: 0.2s ease;
}
.gb5-shop .product-remove a.remove:hover { color: #b42318; background: #fdeceb; border-color: #f6cfcb; }

/* Inputs */
.gb5-shop .quantity input.qty {
  width: 52px; background: var(--gb5-bg-soft); border: 1px solid var(--gb5-line); color: var(--gb5-ink);
  font-weight: 560; font-size: 0.9rem; text-align: center; padding: 0.5rem; border-radius: 10px;
}
.gb5-shop .quantity input.qty:focus,
.gb5-shop input.input-text:focus,
.gb5-shop .input-text:focus,
.gb5-shop select:focus,
.gb5-shop textarea:focus { border-color: #c6cef0; background: #fff; box-shadow: 0 0 0 4px rgba(45, 79, 216, 0.08); outline: none; }

.gb5-shop input.input-text,
.gb5-shop .input-text,
.gb5-shop select,
.gb5-shop textarea {
  background: #fff; border: 1px solid var(--gb5-line); color: var(--gb5-ink);
  padding: 0.72rem 1rem; font-size: 0.9rem; font-weight: 450; border-radius: 12px; outline: none; width: 100%;
  transition: 0.2s ease; box-sizing: border-box;
}
.gb5-shop textarea { resize: vertical; min-height: 100px; }
.gb5-shop select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2398a2b3' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.1rem center; background-size: 1rem; padding-right: 2.5rem; cursor: pointer;
}
.gb5-shop .select2-container { width: 100% !important; }
.gb5-shop .select2-container--default .select2-selection--single { background: #fff; border: 1px solid var(--gb5-line) !important; border-radius: 12px !important; height: auto !important; padding: 0.72rem 1rem !important; }
.gb5-shop .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--gb5-ink) !important; font-size: 0.9rem !important; font-weight: 450 !important; padding: 0 !important; line-height: normal !important; }
.gb5-shop .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50% !important; transform: translateY(-50%) !important; right: 1rem !important; }

/* Buttons (WooCommerce buttons may be <input> or <button>, so target .button class) */
.gb5-shop .button,
.gb5-shop button.button,
.gb5-shop .checkout-button.button {
  font-weight: 560; font-size: 0.85rem; padding: 0.7rem 1.3rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; transition: 0.2s ease; cursor: pointer;
}
.woocommerce-cart .gb5-shop table.cart .coupon .button[name="apply_coupon"],
.gb5-shop .woocommerce-form-coupon .button { background: var(--gb5-ink); color: #fff; border: 0; min-width: 130px; }
.woocommerce-cart .gb5-shop table.cart .coupon .button[name="apply_coupon"]:hover,
.gb5-shop .woocommerce-form-coupon .button:hover { background: #1d2939; transform: translateY(-1px); }
.woocommerce-cart .gb5-shop table.cart td.actions .button[name="update_cart"] { float: right; background: #fff; color: var(--gb5-muted); border: 1px solid var(--gb5-line); }
.woocommerce-cart .gb5-shop table.cart td.actions .button[name="update_cart"]:hover:not([disabled]) { color: var(--gb5-ink); border-color: #d0d5dd; }
.woocommerce-cart .gb5-shop table.cart td.actions .button[name="update_cart"]:disabled { opacity: 0.45; cursor: not-allowed; }

.gb5-shop .checkout-button.button.alt.wc-forward,
.gb5-shop .button.alt#place_order {
  display: flex; width: 100%; text-align: center; justify-content: center; align-items: center; gap: 0.5rem;
  background: var(--gb5-ink); color: #fff; border: none; padding: 0.95rem 1.5rem; font-size: 0.95rem; font-weight: 560;
  border-radius: 999px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2), 0 10px 26px rgba(16, 24, 40, 0.14);
  text-decoration: none; box-sizing: border-box; transition: 0.24s ease;
}
.gb5-shop .checkout-button.button.alt.wc-forward:hover,
.gb5-shop .button.alt#place_order:hover { background: #1d2939; transform: translateY(-1px); }

/* Coupon */
.gb5-shop .coupon { display: inline-flex; background: var(--gb5-bg-soft); padding: 0.35rem; border-radius: 12px; border: 1px dashed var(--gb5-line); gap: 0.5rem; float: left; }
.gb5-shop td.actions { padding: 18px 0 0 0 !important; background: transparent !important; border: none !important; }

/* Cart totals rows */
.gb5-shop .cart_totals table { width: 100%; border-collapse: collapse; margin-bottom: 22px; }
.gb5-shop .cart_totals tr { border-bottom: 1px solid var(--gb5-line-soft); }
.gb5-shop .cart_totals tr:last-child { border-bottom: none; }
.gb5-shop .cart_totals th { text-align: left; padding: 14px 0; font-weight: 450; color: var(--gb5-muted); font-size: 0.9rem; }
.gb5-shop .cart_totals td { text-align: right; padding: 14px 0; color: var(--gb5-ink); font-size: 0.9rem; font-weight: 560; }
.gb5-shop .order-total { border-top: 1px solid var(--gb5-line); }
.gb5-shop .order-total th { font-size: 1rem; font-weight: 600; color: var(--gb5-ink); }
.gb5-shop .order-total td strong .woocommerce-Price-amount { font-size: 1.2rem; font-weight: 620; color: var(--gb5-ink); }

/* Checkout layout */
@media (min-width: 1024px) {
  .gb5-shop form.woocommerce-checkout { display: flex; flex-direction: row; gap: 32px; align-items: flex-start; justify-content: space-between; width: 100%; }
  .gb5-shop .col2-set { flex: 1.6; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
  .gb5-shop .col-1, .gb5-shop .col-2 { width: 100%; }
  .gb5-shop #order_review { flex: 1.1; min-width: 380px; position: sticky; top: 24px; margin-top: 0 !important; }
  .gb5-shop #order_review_heading { display: none; }
}

/* Form rows */
.gb5-shop .form-row { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
.gb5-shop .form-row label { font-size: 0.82rem; font-weight: 560; color: var(--gb5-ink); }
.gb5-shop .form-row label .required { color: #b42318; margin-left: 2px; }
.gb5-shop .woocommerce-billing-fields__field-wrapper,
.gb5-shop .woocommerce-additional-fields__field-wrapper { display: flex; flex-direction: column; gap: 20px; width: 100%; }
@media (min-width: 640px) {
  .gb5-shop .woocommerce-billing-fields__field-wrapper { flex-direction: row; flex-wrap: wrap; gap: 20px; }
  .gb5-shop .woocommerce-billing-fields__field-wrapper .form-row { flex: 1 1 calc(50% - 10px); margin-bottom: 0; }
  .gb5-shop .woocommerce-billing-fields__field-wrapper .form-row-wide { flex: 1 1 100%; }
}

/* Coupon toggle / info */
.gb5-shop .woocommerce-form-coupon-toggle { margin-bottom: 22px; width: 100%; }
.gb5-shop .woocommerce-info { background: var(--gb5-bg-soft); border: 1px solid var(--gb5-line); border-left: 3px solid var(--gb5-indigo); border-radius: 12px; padding: 14px 18px; font-size: 0.88rem; color: var(--gb5-body); font-weight: 450; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.gb5-shop .woocommerce-info a.showcoupon { color: var(--gb5-indigo); font-weight: 560; }
.gb5-shop .woocommerce-form-coupon { background: #fff; border: 1px solid var(--gb5-line); border-radius: 16px; padding: 20px; margin-bottom: 28px; box-shadow: var(--gb5-shadow-sm); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.gb5-shop .woocommerce-form-coupon .form-row { margin: 0; flex: 1; min-width: 200px; }

/* Order review table */
.gb5-shop .woocommerce-checkout-review-order::after { content: "Your order"; display: block; font-family: Inter, system-ui, sans-serif; font-size: 1.2rem; font-weight: 600; color: var(--gb5-ink); letter-spacing: -0.02em; margin: 0.4rem 0 22px; order: -2; }
.gb5-shop .woocommerce-checkout-review-order-table { margin-bottom: 22px; order: -1; display: table; }
.gb5-shop .woocommerce-checkout-review-order-table .product-name { font-weight: 560; }
.gb5-shop .woocommerce-checkout-review-order-table .product-quantity { color: var(--gb5-faint); font-weight: 600; margin-left: 4px; }
.gb5-shop .woocommerce-checkout-review-order-table .product-total { text-align: right; font-weight: 600; }
.gb5-shop .woocommerce-checkout-review-order-table tfoot th { text-align: left; font-weight: 450; color: var(--gb5-muted); font-size: 0.9rem; border: none; padding: 14px 0; text-transform: none; letter-spacing: normal; }
.gb5-shop .woocommerce-checkout-review-order-table tfoot td { text-align: right; font-weight: 600; border: none; padding: 14px 0; color: var(--gb5-ink); }
.gb5-shop .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal { border-bottom: 1px solid var(--gb5-line-soft); }
.gb5-shop .woocommerce-checkout-review-order-table tfoot tr.order-total { border-top: 1px solid var(--gb5-line); }
.gb5-shop .woocommerce-checkout-review-order-table tfoot tr.order-total th { font-size: 1.05rem; font-weight: 600; color: var(--gb5-ink); }
.gb5-shop .woocommerce-checkout-review-order-table tfoot tr.order-total .woocommerce-Price-amount { font-size: 1.3rem; font-weight: 620; color: var(--gb5-ink); }

/* Payment */
.gb5-shop .woocommerce-checkout-payment { margin-top: 22px; }
.gb5-shop .woocommerce-checkout-payment ul.payment_methods { list-style: none; padding: 0; margin-bottom: 22px; display: flex; flex-direction: column; gap: 12px; }
.gb5-shop .woocommerce-checkout-payment ul.payment_methods li { border: 1px solid var(--gb5-line); background: var(--gb5-bg-soft); border-radius: 14px; padding: 16px; transition: 0.2s ease; position: relative; }
.gb5-shop .woocommerce-checkout-payment ul.payment_methods li label { display: flex; align-items: center; gap: 0.75rem; font-weight: 560; font-size: 0.9rem; color: var(--gb5-ink); cursor: pointer; }
.gb5-shop .payment_box { font-size: 0.82rem; color: var(--gb5-muted); line-height: 1.5; margin-top: 0.75rem; padding-left: 1.5rem; }
.gb5-shop .woocommerce-privacy-policy-text { font-size: 0.8rem; line-height: 1.5; color: var(--gb5-muted); margin: 22px 0; padding: 12px 16px; border-radius: 12px; background: var(--gb5-bg-soft); border: 1px solid var(--gb5-line); }
.gb5-shop .woocommerce-privacy-policy-link { color: var(--gb5-indigo); font-weight: 560; }
.gb5-shop .woocommerce-checkout-payment::after { content: "Guaranteed safe & secure checkout"; display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 560; color: var(--gb5-green); background: var(--gb5-green-soft); border: 1px solid #d3ecdd; padding: 0.7rem 1rem; border-radius: 12px; margin-top: 22px; text-align: center; }

/* Mobile */
@media (max-width: 768px) {
  .gb5-shop .woocommerce-cart-form,
  .gb5-shop .cart_totals,
  .gb5-shop .woocommerce-billing-fields,
  .gb5-shop .woocommerce-additional-fields,
  .gb5-shop .woocommerce-checkout-review-order { padding: 22px; border-radius: 16px; }
  .gb5-shop .woocommerce-billing-fields__field-wrapper .form-row { flex: 1 1 100% !important; }
  .gb5-shop .shop_table_responsive thead { display: none; }
  .gb5-shop .shop_table_responsive tr { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gb5-line); border-radius: 14px; padding: 18px; margin-bottom: 16px; position: relative; box-shadow: var(--gb5-shadow-sm); }
  .gb5-shop .shop_table_responsive td { display: flex; justify-content: space-between; align-items: center; padding: 12px 0 !important; border-bottom: 1px solid var(--gb5-line-soft) !important; text-align: right; background: transparent !important; border-left: none !important; border-right: none !important; width: 100%; box-sizing: border-box; }
  .gb5-shop .shop_table_responsive td:last-child { border-bottom: none !important; }
  .gb5-shop .shop_table_responsive td::before { content: attr(data-title); float: left; font-weight: 600; color: var(--gb5-faint); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.05em; }
  .gb5-shop .shop_table_responsive td.product-remove,
  .gb5-shop .shop_table_responsive td.product-thumbnail { justify-content: center; }
  .gb5-shop .shop_table_responsive td.product-remove::before,
  .gb5-shop .shop_table_responsive td.product-thumbnail::before { content: none; }
  .gb5-shop .shop_table_responsive td.product-remove { position: absolute; top: 0.75rem; right: 0.75rem; border: none !important; z-index: 10; padding: 0 !important; width: auto; }
  .gb5-shop .shop_table_responsive td.actions { display: block; background: transparent !important; border: none !important; padding: 0.5rem 0 0 0 !important; box-shadow: none; }
  .gb5-shop .coupon { float: none; flex-direction: column; width: 100%; background: transparent; border: none; padding: 0; }
  .gb5-shop button[name="update_cart"] { float: none; width: 100%; margin-top: 1rem; }
}

/* Shop body spacing (Cart / Checkout) */
.gb5-shop .gb5-shop-body { padding: 8px 0 96px; }
.gb5-shop .gb5-page-hero { padding-bottom: 40px; }
@media (max-width: 768px) { .gb5-shop .gb5-shop-body { padding: 0 0 64px; } }

/* ==========================================================================
   Site header / primary navigation — premium menu (Kadence builder header)
   Scoped to #main-header. Login = menu-item-147, Get Geeky Bot = menu-item-149.
   ID selectors (1,1,1) beat Kadence's class rules, so no !important needed.
   ========================================================================== */

/* Nav links — Inter, quiet muted, ink on hover/active.
   The two action items (147/149) are excluded so their pill styles win cleanly. */
#main-header .header-navigation .menu > .menu-item:not(.menu-item-147):not(.menu-item-149) > a {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--gb5-muted, #667085);
  transition: color 0.18s ease;
}
#main-header .header-navigation .menu > .menu-item:not(.menu-item-147):not(.menu-item-149) > a:hover,
#main-header .header-navigation .menu > .menu-item.current-menu-item:not(.menu-item-147):not(.menu-item-149) > a,
#main-header .header-navigation .menu > .menu-item.current-menu-ancestor:not(.menu-item-147):not(.menu-item-149) > a {
  color: var(--gb5-ink, #101828);
}

/* A touch more breathing room between the top-level links */
#main-header .header-navigation .menu > .menu-item { margin-left: 3px; margin-right: 3px; }

/* Shared pill shape for the two right-side action items */
#main-header .menu-item-147 > a,
#main-header .menu-item-149 > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.62rem 1.3rem;
  border-radius: 999px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.9rem;
  font-weight: 560;
  line-height: 1;
  letter-spacing: -0.01em;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Separate the account slot (My account / Login — only one shows at a time)
   from the nav links, and add a small gap before the primary pill. */
#main-header .menu-item-146,
#main-header .menu-item-147 { margin-left: 16px; }
#main-header .menu-item-149 { margin-left: 6px; }

/* Login — secondary white pill with hairline */
#main-header .menu-item-147 > a {
  background: #fff;
  color: var(--gb5-ink, #101828);
  border: 1px solid var(--gb5-line, #e7eaf0);
  box-shadow: var(--gb5-shadow-sm, 0 1px 2px rgba(16, 24, 40, 0.05));
}
#main-header .menu-item-147 > a:hover {
  background: var(--gb5-bg-soft, #f7f8fa);
  border-color: #d0d5dd;
  color: var(--gb5-ink, #101828);
}

/* Get Geeky Bot — primary ink pill */
#main-header .menu-item-149 > a {
  background: var(--gb5-ink, #101828);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2), 0 8px 20px rgba(16, 24, 40, 0.14);
}
#main-header .menu-item-149 > a:hover {
  background: #1d2939;
  color: #fff;
  transform: translateY(-1px);
}

/* Mobile drawer: let the pills sit inline, not stretch full-width oddly */
@media (max-width: 1024px) {
  #main-header .menu-item-146,
  #main-header .menu-item-147,
  #main-header .menu-item-149 { margin-left: 3px; }
  #main-header .menu-item-147 > a,
  #main-header .menu-item-149 > a { align-self: flex-start; }
}

/* ==========================================================================
   Transparent header over the hero — the menu reads as part of the hero
   gradient instead of a separate white bar. The header (transparent, no
   border) is lifted above the hero in the stacking order, and the first
   hero section is tucked up behind it by the header's height (80px), with
   compensating top padding so the hero content keeps its designed spacing.
   ========================================================================== */
:root { --gb-header-h: 80px; }

/* The outer <header id="masthead" class="site-header"> carries Kadence's white
   background via an inline #masthead rule (specificity 1,0,0). Match it with
   id+class (1,1,0) so the hero gradient shows through — no !important needed. */
#masthead.site-header,
#main-header.site-header-wrap { position: relative; z-index: 10; background: transparent; border-bottom: 0; box-shadow: none; }

/* Homepage hero + inner-page hero: pull up under the transparent header by the
   header's height, then add that same height back as padding so the hero's
   content keeps its original position while the gradient extends up behind
   the menu. --gb-hero-pad-top = each hero's ORIGINAL designed top padding. */
.gb5-hero,
.gb5-page-hero {
  margin-top: calc(-1 * var(--gb-header-h));
  padding-top: calc(var(--gb-header-h) + var(--gb-hero-pad-top));
  position: relative;
  z-index: 1;
}
.gb5-page-hero { --gb-hero-pad-top: 164px; }  /* inner pages: padding was 164px */
.gb5-hero      { --gb-hero-pad-top: 172px; }  /* homepage hero: padding was 172px */

@media (max-width: 768px) {
  :root { --gb-header-h: 68px; }
  .gb5-page-hero { --gb-hero-pad-top: 140px; } /* inner-page mobile padding */
}

/* ==========================================================================
   My Account (WooCommerce) — premium skin, scoped to .gb5-account.
   Wrapper also carries .gb5-shop, so inputs/buttons inherit the shop skin.
   ========================================================================== */

/* Layout: nav sidebar (left) + content (right), both cards.
   Only flex the dashboard (when the account nav exists); the logged-out
   login/register view keeps normal flow via a separate rule below. */
.gb5-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
  display: flex; flex-direction: column; gap: 24px; align-items: stretch; width: 100%;
}
@media (min-width: 900px) {
  .gb5-account .woocommerce:has(.woocommerce-MyAccount-navigation) { flex-direction: row; align-items: flex-start; }
  .gb5-account .woocommerce-MyAccount-navigation { flex: 0 0 264px; position: sticky; top: 24px; }
  .gb5-account .woocommerce-MyAccount-content { flex: 1; min-width: 0; }
}

/* Logged-out login/register view: centered card, ink pill submit */
.gb5-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) { max-width: 460px; margin: 0 auto; }
.gb5-account .woocommerce > h2 { font-family: Inter, system-ui, sans-serif; font-size: 1.35rem; font-weight: 600; color: var(--gb5-ink); letter-spacing: -0.02em; margin: 0 0 1.2rem; text-align: center; }
.gb5-account .woocommerce form.woocommerce-form-login,
.gb5-account .woocommerce form.woocommerce-form-register {
  background: #fff; border: 1px solid var(--gb5-line); border-radius: 20px;
  padding: 30px; box-shadow: var(--gb5-shadow-sm);
}
.gb5-account .woocommerce-form-login .form-row,
.gb5-account .woocommerce-form-register .form-row { margin-bottom: 1.1rem; }
.gb5-account .woocommerce-form-login__submit,
.gb5-account .woocommerce-form-register__submit,
.gb5-account .woocommerce-MyAccount-content .button,
.gb5-account .woocommerce-Button.button {
  background: var(--gb5-ink); color: #fff; border: 0; border-radius: 999px;
  padding: 0.72rem 1.5rem; font-weight: 560; font-size: 0.9rem; cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2), 0 8px 20px rgba(16, 24, 40, 0.14);
  transition: background 0.2s ease, transform 0.2s ease;
}
.gb5-account .woocommerce-form-login__submit:hover,
.gb5-account .woocommerce-form-register__submit:hover,
.gb5-account .woocommerce-MyAccount-content .button:hover,
.gb5-account .woocommerce-Button.button:hover { background: #1d2939; color: #fff; transform: translateY(-1px); }

/* Navigation card */
.gb5-account .woocommerce-MyAccount-navigation {
  background: #fff; border: 1px solid var(--gb5-line); border-radius: 20px;
  padding: 12px; box-shadow: var(--gb5-shadow-sm);
}
.gb5-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.gb5-account .woocommerce-MyAccount-navigation li { margin: 0; border: 0; }
.gb5-account .woocommerce-MyAccount-navigation li a {
  display: block; padding: 0.72rem 0.95rem; border-radius: 12px;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 0.92rem; font-weight: 500; color: var(--gb5-muted); text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.gb5-account .woocommerce-MyAccount-navigation li a:hover { background: var(--gb5-bg-soft); color: var(--gb5-ink); }
.gb5-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--gb5-ink); color: #fff; font-weight: 560; }
.gb5-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--gb5-body); }
.gb5-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: #fdeceb; color: #b42318; }

/* Content card */
.gb5-account .woocommerce-MyAccount-content {
  background: #fff; border: 1px solid var(--gb5-line); border-radius: 20px;
  padding: 32px; box-shadow: var(--gb5-shadow-sm); color: var(--gb5-body);
}
.gb5-account .woocommerce-MyAccount-content p { color: var(--gb5-body); line-height: 1.7; font-size: 0.95rem; }
.gb5-account .woocommerce-MyAccount-content > p:first-of-type { font-size: 1rem; }
.gb5-account .woocommerce-MyAccount-content a:not(.button) { color: var(--gb5-indigo); font-weight: 500; text-decoration: none; }
.gb5-account .woocommerce-MyAccount-content a:not(.button):hover { text-decoration: underline; }
.gb5-account .woocommerce-MyAccount-content h2,
.gb5-account .woocommerce-MyAccount-content h3 {
  font-family: Inter, system-ui, -apple-system, sans-serif; color: var(--gb5-ink);
  font-weight: 600; letter-spacing: -0.02em; margin: 0 0 1rem; font-size: 1.2rem;
}

/* Orders + generic account tables */
.gb5-account .woocommerce-orders-table,
.gb5-account .woocommerce-MyAccount-content .shop_table {
  width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 1.4rem;
}
.gb5-account .woocommerce-MyAccount-content .shop_table thead th {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gb5-faint); padding: 0 12px 12px 0; border: none; border-bottom: 1px solid var(--gb5-line); text-align: left;
}
.gb5-account .woocommerce-MyAccount-content .shop_table tbody td {
  padding: 16px 12px 16px 0; border: none; border-bottom: 1px solid var(--gb5-line-soft);
  font-size: 0.9rem; color: var(--gb5-ink); vertical-align: middle;
}
.gb5-account .woocommerce-orders-table__cell-order-actions { text-align: right; }

/* Address blocks (edit-address overview) */
.gb5-account .woocommerce-Addresses { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 0.5rem; }
@media (min-width: 640px) { .gb5-account .woocommerce-Addresses { grid-template-columns: 1fr 1fr; } }
.gb5-account .woocommerce-Address { border: 1px solid var(--gb5-line); border-radius: 16px; padding: 22px; }
.gb5-account .woocommerce-Address-title h3 { margin: 0 0 0.8rem; }
.gb5-account .woocommerce-Address address { font-style: normal; color: var(--gb5-body); line-height: 1.75; font-size: 0.9rem; }

/* Forms: fieldset legends + spacing (inputs/buttons come from .gb5-shop) */
.gb5-account .woocommerce-EditAccountForm fieldset,
.gb5-account form .form-row + fieldset { margin-top: 1.6rem; border: 0; border-top: 1px solid var(--gb5-line-soft); padding: 1.6rem 0 0; }
.gb5-account fieldset legend { font-weight: 600; color: var(--gb5-ink); font-size: 1rem; padding: 0; margin-bottom: 0.4rem; }
.gb5-account .woocommerce-EditAccountForm .clear { display: none; }

/* Notices */
.gb5-account .woocommerce-message,
.gb5-account .woocommerce-MyAccount-content .woocommerce-info,
.gb5-account .woocommerce-error {
  border-radius: 12px; padding: 14px 18px; font-size: 0.9rem; list-style: none;
  margin: 0 0 1.4rem; border: 1px solid var(--gb5-line); background: var(--gb5-bg-soft); color: var(--gb5-body);
}
.gb5-account .woocommerce-message { border-left: 3px solid var(--gb5-green); }
.gb5-account .woocommerce-error { border-left: 3px solid #b42318; color: #7a271a; }

/* Mobile */
@media (max-width: 768px) {
  .gb5-account .woocommerce-MyAccount-navigation,
  .gb5-account .woocommerce-MyAccount-content { padding: 20px; border-radius: 16px; }
}

/* ==========================================================================
   Brand logo in the header — icon (assets/geekybot-icon.svg) before the
   site title. Added via ::before so it works with Kadence's title-only
   branding without touching the logo-option system.
   ========================================================================== */
#masthead .site-branding .brand { display: inline-flex; align-items: center; gap: 0.65rem; }
#masthead .site-branding .brand::before {
  content: "";
  width: 54px; height: 45px; flex: none;
  background: url("assets/geekybot-icon.svg") left center / contain no-repeat;
}
#masthead .site-branding .site-title-wrap { margin: 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.04; }
#masthead .site-branding .site-title {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 700; letter-spacing: -0.022em; color: #101828; line-height: 1.04; margin: 0;
}
#masthead .site-branding .site-title .gb-bot {
  background: linear-gradient(105deg, #2f6bed, #7c3aed);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#masthead .site-branding .gb-tagline {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.005em; color: #667085; margin-top: 3px;
}
@media (max-width: 768px) {
  #masthead .site-branding .brand::before { width: 44px; height: 37px; }
  #masthead .site-branding .gb-tagline { display: none; }
}

/* ==========================================================================
   Homepage demo product images — replace the flat .gb5-bag blobs with proper
   backpack illustrations (assets/bag-*.svg). Scoped to .gb5-home so it wins
   over the page's inline styles by specificity (no !important). Applies to
   every section that uses .gb5-bag: shopping-request demo, compare, product.
   ========================================================================== */
.gb5-home .gb5-bag::before,
.gb5-home .gb5-bag::after { display: none; }
.gb5-home .gb5-bag {
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 84%;
}
.gb5-home .gb5-bag-dark  { background-color: #eef1f6; background-image: url("assets/bag-black.svg"); }
.gb5-home .gb5-bag-gray  { background-color: #eef1f6; background-image: url("assets/bag-graphite.svg"); }
.gb5-home .gb5-bag-green { background-color: #e9f5ee; background-image: url("assets/bag-green.svg"); }

/* ==========================================================================
   Homepage hover fixes — Kadence's global button:hover / a:hover styles were
   bleeding into custom components. The journey stepper tabs are <button>s, so
   Kadence painted a dark accent background on hover; CTA links picked up
   Kadence's link-hover colour/underline. Scoped to .gb5-home so specificity
   beats Kadence's element-level rules without !important.
   ========================================================================== */

/* Journey stepper: keep the light card look on hover/focus (not Kadence's dark button bg). */
.gb5-home .gb5-journey-tab:hover,
.gb5-home .gb5-journey-tab:focus,
.gb5-home .gb5-journey-tab:focus-visible {
  background: #fff;
  color: inherit;
  border-color: #d3dae4;
}
.gb5-home .gb5-journey-tab.gb5-active,
.gb5-home .gb5-journey-tab.gb5-active:hover,
.gb5-home .gb5-journey-tab.gb5-active:focus {
  background: linear-gradient(180deg, #fdfdff, #fff);
  border-color: #c6d0f0;
}

/* Pill buttons: never take Kadence's link-hover underline or accent colour. */
.gb5-home a.gb-btn:hover,
.gb5-home a.gb-btn:focus { text-decoration: none; }
.gb5-home a.gb-btn-white:hover,
.gb5-home a.gb-btn-white:focus { color: var(--gb5-ink); }
.gb5-home a.gb-btn-primary:hover,
.gb5-home a.gb-btn-gradient:hover,
.gb5-home a.gb-btn-primary:focus,
.gb5-home a.gb-btn-gradient:focus { color: #fff; }

/* ==========================================================================
   Auto page hero (geekybot_auto_page_hero) — layout for pages that get the
   branded gb5 hero automatically from their Title/Excerpt.
   ========================================================================== */
.gb5-auto-page .gb5-auto-wrap { width: min(100% - 2.5rem, 1160px); margin-inline: auto; }
.gb5-auto-page .gb5-page-hero .gb5-auto-wrap { max-width: 900px; }
.gb5-auto-page .gb5-auto-body { padding: 8px 0 96px; }
@media (max-width: 768px) { .gb5-auto-page .gb5-auto-body { padding: 0 0 64px; } }

/* ==========================================================================
   Footer brand — render the SAME logo file as the header (white variant for the
   dark footer) so it can never drift from the real mark. The CSS supplies the
   icon, overriding whatever <svg>/<img> is in the footer markup. Plus no hover
   underline on footer links/logo (Kadence's widget-area a:hover underlined them).
   ========================================================================== */
.gb-site .gb-site-footer .gb-logo-mark {
  background: url("assets/geekybot-icon-white.svg") left center / contain no-repeat;
  box-shadow: none; border-radius: 0;
  width: 42px; height: 34px; overflow: visible;
}
.gb-site .gb-site-footer .gb-logo-mark svg,
.gb-site .gb-site-footer .gb-logo-mark img { display: none; }
.gb-site .gb-site-footer .gb-logo:hover,
.gb-site .gb-site-footer .gb-logo:focus,
.gb-site .gb-site-footer .gb-footer-links a:hover,
.gb-site .gb-site-footer .gb-footer-links a:focus { text-decoration: none; }

/* ==========================================================================
   Commerce Pro page (page-id-63)
   1) Missing hero/section separator (matches Features/How-It-Works).
   2) Roadmap "verified workflow" panel — replace the skeleton bars with a
      real order-lookup mockup that shows what the section describes.
   ========================================================================== */
body.page-id-63 .gb5-hero + section { border-top: 1px solid var(--gb5-line-soft); }

.gb5-vworkflow { display: grid; gap: 13px; }
.gb5-vw-ask {
  justify-self: end; max-width: 80%;
  background: var(--gb5-accent-grad, linear-gradient(105deg, #2d4fd8, #6d3bdd)); color: #fff;
  padding: 9px 14px; border-radius: 14px 14px 4px 14px;
  font-size: 0.82rem; font-weight: 500; line-height: 1.35;
}
.gb5-vw-steps { display: grid; gap: 9px; }
.gb5-vw-step { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: #b7c2d4; font-weight: 400; }
.gb5-vw-ic { width: 18px; height: 18px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 0.66rem; line-height: 1; }
.gb5-vw-step.is-done .gb5-vw-ic { background: rgba(74, 222, 128, 0.16); color: #4ade80; }
.gb5-vw-step.is-active { color: #eaf0fb; }
.gb5-vw-step.is-active .gb5-vw-ic { border: 2px solid rgba(147, 170, 245, 0.35); border-top-color: #93aaf5; animation: gb5-vw-spin 0.8s linear infinite; }
@keyframes gb5-vw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gb5-vw-step.is-active .gb5-vw-ic { animation: none; } }
.gb5-vw-order {
  margin-top: 3px; padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; background: rgba(255, 255, 255, 0.045);
}
.gb5-vw-order-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.gb5-vw-order-id { color: #fff; font-weight: 560; font-size: 0.9rem; }
.gb5-vw-badge {
  font-size: 0.64rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: #4ade80; background: rgba(74, 222, 128, 0.14); border: 1px solid rgba(74, 222, 128, 0.3);
  padding: 3px 9px; border-radius: 999px;
}
.gb5-vw-order-meta { margin-top: 5px; color: #8fa0b8; font-size: 0.74rem; }

/* How-It-Works (page-id-135): every section carries gb5-section-border, which
   doubles the divider at each boundary (upper border-bottom + lower border-top).
   Drop the bottom border here so dividers read as single 1px lines, matching
   Features / Commerce Pro. (Hero→first-section separator = the first top border;
   the dark CTA separates itself, so no line needed above it.) */
body.page-id-135 .gb5-section.gb5-section-border { border-bottom: 0; }

/* ==========================================================================
   Auth pages (login / lost-password / registration) — premium centered card.
   Wrapper carries .gb-site so the auto-hero filter skips it (no stacked title).
   Tucked under the transparent header like the hero, with a soft ground.
   ========================================================================== */
.gb5-auth {
  position: relative; z-index: 1;
  margin-top: calc(-1 * var(--gb-header-h, 80px));
  padding: calc(var(--gb-header-h, 80px) + 60px) 20px 96px;
  display: flex; align-items: flex-start; justify-content: center;
  background:
    radial-gradient(ellipse 60% 44% at 50% 0%, rgba(124, 58, 237, 0.06), transparent),
    radial-gradient(ellipse 46% 36% at 84% 8%, rgba(37, 99, 235, 0.05), transparent),
    #f7f8fb;
}
.gb5-auth-card {
  width: 100%; max-width: 430px;
  background: #fff; border: 1px solid var(--gb5-line); border-radius: 22px;
  padding: 38px 34px; box-shadow: var(--gb5-shadow-md);
}
.gb5-auth-head { text-align: center; margin-bottom: 26px; }
.gb5-auth-head h1 {
  font-family: Inter, system-ui, sans-serif; font-size: 1.55rem; font-weight: 600;
  letter-spacing: -0.02em; color: var(--gb5-ink); margin: 0 0 8px;
}
.gb5-auth-head p { color: var(--gb5-muted); font-size: 0.9rem; line-height: 1.6; margin: 0; }

/* User Registration form fields */
.gb5-auth .user-registration-form-row { margin: 0 0 16px; display: flex; flex-direction: column; gap: 0.45rem; }
.gb5-auth .user-registration-form label { font-size: 0.82rem; font-weight: 560; color: var(--gb5-ink); }
.gb5-auth .user-registration-form label .required { color: #b42318; margin-left: 2px; }
.gb5-auth .input-wrapper, .gb5-auth .password-input-group { display: block; width: 100%; position: relative; }
.gb5-auth .user-registration-Input,
.gb5-auth .password-input-group input,
.gb5-auth .user-registration-form input[type="text"],
.gb5-auth .user-registration-form input[type="password"],
.gb5-auth .user-registration-form input[type="email"] {
  width: 100%; box-sizing: border-box; background: #fff;
  border: 1px solid var(--gb5-line); border-radius: 12px;
  padding: 0.72rem 1rem; font-size: 0.9rem; color: var(--gb5-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.gb5-auth .user-registration-Input:focus,
.gb5-auth .password-input-group input:focus,
.gb5-auth .user-registration-form input:focus {
  border-color: #c6cef0; box-shadow: 0 0 0 4px rgba(45, 79, 216, 0.08); outline: none;
}
.gb5-auth .password-input-group .password-input-btn,
.gb5-auth .password-input-group button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--gb5-faint); cursor: pointer; }

/* remember-me + lost password row */
.gb5-auth .user-registration-before-login-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 2px 0 22px; font-size: 0.82rem; color: var(--gb5-muted);
}
.gb5-auth .user-registration-before-login-btn label { font-size: 0.82rem; color: var(--gb5-muted); font-weight: 400; display: inline-flex; align-items: center; gap: 0.4rem; }
.gb5-auth .user-registration-LostPassword a { color: var(--gb5-indigo); font-weight: 500; text-decoration: none; }
.gb5-auth .user-registration-LostPassword a:hover { text-decoration: underline; }

/* submit button — ink pill, full width */
.gb5-auth .user-registration-Button,
.gb5-auth button.ur-submit-button,
.gb5-auth .user-registration-form button[type="submit"] {
  width: 100%; background: var(--gb5-ink); color: #fff; border: 0; border-radius: 999px;
  padding: 0.85rem 1.5rem; font-size: 0.95rem; font-weight: 560; cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2), 0 10px 26px rgba(16, 24, 40, 0.14);
  transition: background 0.2s ease, transform 0.2s ease;
}
.gb5-auth .user-registration-Button:hover,
.gb5-auth button.ur-submit-button:hover { background: #1d2939; transform: translateY(-1px); }

/* register link */
.gb5-auth .user-registration-register { text-align: center; margin-top: 22px; font-size: 0.85rem; color: var(--gb5-muted); }
.gb5-auth .user-registration-register a { color: var(--gb5-indigo); font-weight: 560; text-decoration: none; }
.gb5-auth .user-registration-register a:hover { text-decoration: underline; }

/* messages/notices */
.gb5-auth .user-registration-error, .gb5-auth .user-registration-message, .gb5-auth ul.woocommerce-error {
  border-radius: 12px; padding: 12px 16px; font-size: 0.85rem; margin: 0 0 18px; list-style: none;
  border: 1px solid var(--gb5-line); background: var(--gb5-bg-soft);
}

/* Override User Registration plugin's own !important / body-scoped form styles.
   Scoped to .gb5-auth (login page only). !important is required because the
   plugin ships its inputs/buttons with !important. */
.gb5-auth .user-registration-Input,
.gb5-auth .password-input-group input,
.gb5-auth .user-registration-form input[type="text"],
.gb5-auth .user-registration-form input[type="password"],
.gb5-auth .user-registration-form input[type="email"] {
  border: 1px solid var(--gb5-line) !important;
  border-radius: 12px !important;
  padding: 0.72rem 1rem !important;
  background: #fff !important;
  box-shadow: none !important;
  height: auto !important;
}
.gb5-auth .user-registration-Input:focus,
.gb5-auth .password-input-group input:focus,
.gb5-auth .user-registration-form input:focus {
  border-color: #c6cef0 !important;
  box-shadow: 0 0 0 4px rgba(45, 79, 216, 0.08) !important;
}
.gb5-auth .user-registration-Button,
.gb5-auth button.ur-submit-button {
  background: var(--gb5-ink) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  width: 100% !important;
  display: block !important;
  padding: 0.85rem 1.5rem !important;
  font-weight: 560 !important;
}
.gb5-auth .user-registration-Button:hover,
.gb5-auth button.ur-submit-button:hover { background: #1d2939 !important; }

/* User Registration form + containers were constrained to ~280px; fill the card. */
.gb5-auth .geekybot_login_form,
.gb5-auth .user-registration-form,
.gb5-auth .ur-form-row,
.gb5-auth .ur-form-grid,
.gb5-auth .user-registration-form-row,
.gb5-auth .input-wrapper { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
.gb5-auth .ur-form-grid { flex: 1 1 auto !important; }
.gb5-auth .ur-form-grid > div { width: 100%; }

/* UR wrapper padding was shrinking the form to ~280px; the card already pads. */
.gb5-auth .user-registration,
.gb5-auth .ur-frontend-form { padding: 0 !important; max-width: 100% !important; margin: 0 !important; }

/* Registration card is a touch wider (more fields). */
.gb5-auth-card.gb5-auth-card--wide { max-width: 520px; }

/* Registration form uses form.register / .ur-frontend-field / .ur-field-item /
   .ur-button-container — cover those too so it matches the login styling. */
.gb5-auth .ur-frontend-field,
.gb5-auth .ur-form-grid input[type="text"],
.gb5-auth .ur-form-grid input[type="email"],
.gb5-auth .ur-form-grid input[type="password"],
.gb5-auth .ur-field-item input.input-text {
  border: 1px solid var(--gb5-line) !important;
  border-radius: 12px !important;
  padding: 0.72rem 1rem !important;
  background: #fff !important;
  box-shadow: none !important;
  height: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.gb5-auth .ur-frontend-field:focus,
.gb5-auth .ur-field-item input:focus {
  border-color: #c6cef0 !important; box-shadow: 0 0 0 4px rgba(45, 79, 216, 0.08) !important;
}
.gb5-auth .ur-field-item { margin-bottom: 16px; }
.gb5-auth .ur-field-item > label,
.gb5-auth .ur-field-item .form-row > label {
  font-size: 0.82rem; font-weight: 560; color: var(--gb5-ink); display: block; margin-bottom: 0.4rem;
}
.gb5-auth .ur-field-item label .required { color: #b42318; margin-left: 2px; }
.gb5-auth .ur-button-container { width: 100% !important; margin: 4px 0 0; }
.gb5-auth .btn.ur-submit-button,
.gb5-auth button.ur-submit-button {
  background: var(--gb5-ink) !important; color: #fff !important; border: 0 !important;
  border-radius: 999px !important; width: 100% !important; display: block !important;
  padding: 0.85rem 1.5rem !important; font-weight: 560 !important;
}
.gb5-auth .btn.ur-submit-button:hover { background: #1d2939 !important; }
.gb5-auth .cf-turnstile { margin: 6px 0 16px; }

/* Auth forms: hide the plugin's own title/description (we provide the card head),
   so there's no duplicate heading. */
.gb5-auth .ur-lost-password-title,
.gb5-auth .ur-lost-password-message,
.gb5-auth .user-registration-login-title,
.gb5-auth .ur-login-title,
.gb5-auth .ur-registration-title { display: none !important; }

/* ==========================================================================
   Contact form ([geekybot_contact_form])
   ========================================================================== */
.gb5-contact-form { display: grid; gap: 16px; }
.gb5-contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .gb5-contact-row { grid-template-columns: 1fr; } }
.gb5-contact-form .gb5-form-field { display: flex; flex-direction: column; }
.gb5-contact-form label { font-size: 0.82rem; font-weight: 560; color: var(--gb5-ink); margin-bottom: 0.4rem; }
.gb5-contact-form .gb5-form-input,
.gb5-contact-form input:not([type="checkbox"]),
.gb5-contact-form select,
.gb5-contact-form textarea {
  width: 100%; box-sizing: border-box; background: #fff; border: 1px solid var(--gb5-line);
  border-radius: 12px; padding: 0.72rem 1rem; font-size: 0.9rem; font-weight: 450; color: var(--gb5-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.gb5-contact-form textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.gb5-contact-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2398a2b3' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem; padding-right: 2.5rem; cursor: pointer;
}
.gb5-contact-form .gb5-form-input:focus,
.gb5-contact-form input:focus,
.gb5-contact-form select:focus,
.gb5-contact-form textarea:focus {
  border-color: #c6cef0; box-shadow: 0 0 0 4px rgba(45, 79, 216, 0.08); outline: none;
}
.gb5-contact-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 0.8rem; color: var(--gb5-muted); line-height: 1.5; cursor: pointer; }
.gb5-contact-consent input { margin-top: 3px; flex: none; width: auto; }
.gb5-contact-form .cf-turnstile { margin: 2px 0; }
.gb5-contact-submit { width: 100%; }

/* visually hide the honeypot */
.gb5-contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* status messages */
.gb5-contact-note { border-radius: 12px; padding: 12px 16px; font-size: 0.88rem; margin-bottom: 16px; }
.gb5-contact-note--err { border: 1px solid #f6cfcb; border-left: 3px solid #b42318; background: #fdeceb; color: #7a271a; }
.gb5-contact-result { text-align: center; padding: 40px 26px; border: 1px solid var(--gb5-line); border-radius: 18px; background: #fff; }
.gb5-contact-result__icon { width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; background: var(--gb5-green-soft); color: var(--gb5-green); }
.gb5-contact-result h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; color: var(--gb5-ink); margin: 0 0 8px; }
.gb5-contact-result p { color: var(--gb5-muted); font-size: 0.92rem; line-height: 1.65; margin: 0 0 20px; }

/* ==========================================================================
   WooCommerce pages were full-width because `.container` had no max-width.
   Constrain the cart / checkout / my-account body + hero to a content width.
   ========================================================================== */
.gb5-shop .container,
.gb5-account .container { width: min(100% - 2.5rem, 1160px); margin-inline: auto; }

/* ==========================================================================
   Order received / thank-you page (WooCommerce) — premium styling.
   ========================================================================== */
.gb5-shop .woocommerce-order { max-width: 760px; margin: 0 auto; }
.gb5-shop .woocommerce-thankyou-order-received {
  font-family: Inter, system-ui, sans-serif; font-size: 1.5rem; font-weight: 600;
  color: var(--gb5-ink); text-align: center; letter-spacing: -0.02em; margin: 0 0 8px;
}
.gb5-shop .woocommerce-order > p.woocommerce-notice { text-align: center; color: var(--gb5-muted); }
.gb5-shop ul.woocommerce-order-overview {
  list-style: none; margin: 26px 0; padding: 22px 24px; display: flex; flex-wrap: wrap; gap: 22px;
  border: 1px solid var(--gb5-line); border-radius: 18px; background: #fff; box-shadow: var(--gb5-shadow-sm);
}
.gb5-shop ul.woocommerce-order-overview li {
  border: 0; border-right: 1px solid var(--gb5-line-soft); margin: 0; padding: 0 22px 0 0; flex: 1 1 auto;
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gb5-faint);
}
.gb5-shop ul.woocommerce-order-overview li:last-child { border-right: 0; padding-right: 0; }
.gb5-shop ul.woocommerce-order-overview li strong {
  display: block; margin-top: 6px; font-size: 0.98rem; font-weight: 620; text-transform: none;
  letter-spacing: normal; color: var(--gb5-ink);
}
.gb5-shop .woocommerce-order-details, .gb5-shop .woocommerce-customer-details { margin-top: 30px; }
.gb5-shop .woocommerce-order-details__title,
.gb5-shop .woocommerce-customer-details h2,
.gb5-shop .woocommerce-column__title {
  font-family: Inter, system-ui, sans-serif; font-size: 1.1rem; font-weight: 600; color: var(--gb5-ink);
  margin: 0 0 14px; letter-spacing: -0.02em;
}
.gb5-shop table.woocommerce-table--order-details {
  width: 100%; border-collapse: separate; border-spacing: 0; background: #fff;
  border: 1px solid var(--gb5-line); border-radius: 16px; overflow: hidden;
}
.gb5-shop .woocommerce-table--order-details th,
.gb5-shop .woocommerce-table--order-details td {
  padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--gb5-line-soft); font-size: 0.9rem; color: var(--gb5-ink);
}
.gb5-shop .woocommerce-table--order-details tfoot th { color: var(--gb5-muted); font-weight: 450; }
.gb5-shop .woocommerce-customer-details address {
  font-style: normal; border: 1px solid var(--gb5-line); border-radius: 14px; padding: 18px;
  color: var(--gb5-body); line-height: 1.75; font-size: 0.9rem;
}

/* ==========================================================================
   Order received / thank-you page — full treatment. Scoped to the WooCommerce
   order-received body class so it only affects that page (safe to be broad).
   ========================================================================== */
body.woocommerce-order-received .gb5-shop-body .container { width: min(100% - 2.5rem, 760px); }

/* success badge + heading */
body.woocommerce-order-received .gb5-shop .woocommerce-thankyou-order-received {
  font-family: Inter, system-ui, sans-serif; font-size: 1.55rem; font-weight: 600;
  color: var(--gb5-ink); text-align: center; letter-spacing: -0.02em; margin: 8px 0 26px; line-height: 1.25;
}
body.woocommerce-order-received .gb5-shop .woocommerce-thankyou-order-received::before {
  content: "\2713"; display: block; width: 56px; height: 56px; margin: 6px auto 18px;
  border-radius: 50%; background: var(--gb5-green-soft); color: var(--gb5-green);
  font-size: 1.6rem; line-height: 56px; text-align: center;
}

/* all order-area headings -> consistent section titles (fixes the huge
   "Related subscriptions" / license headings) */
body.woocommerce-order-received .gb5-shop h2,
body.woocommerce-order-received .gb5-shop .woocommerce-order-details__title,
body.woocommerce-order-received .gb5-shop .woocommerce-column__title {
  font-family: Inter, system-ui, sans-serif !important; font-size: 1.15rem !important; font-weight: 600 !important;
  letter-spacing: -0.02em !important; color: var(--gb5-ink) !important; margin: 34px 0 14px !important; line-height: 1.3 !important;
}
body.woocommerce-order-received .gb5-shop h3 {
  font-family: Inter, system-ui, sans-serif !important; font-size: 1rem !important; font-weight: 600 !important;
  color: var(--gb5-ink) !important; margin: 22px 0 10px !important; letter-spacing: -0.01em !important;
}

/* order overview strip -> even auto-fit grid (no dangling wrap) */
body.woocommerce-order-received .gb5-shop ul.woocommerce-order-overview {
  list-style: none; margin: 24px 0 10px; padding: 22px 24px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 20px 22px;
  border: 1px solid var(--gb5-line); border-radius: 18px; background: #fff; box-shadow: var(--gb5-shadow-sm);
}
body.woocommerce-order-received .gb5-shop ul.woocommerce-order-overview li {
  border: 0; padding: 0; margin: 0;
  font-size: 0.64rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gb5-faint);
}
body.woocommerce-order-received .gb5-shop ul.woocommerce-order-overview li strong {
  display: block; margin-top: 6px; font-size: 0.92rem; font-weight: 620; text-transform: none; letter-spacing: normal; color: var(--gb5-ink);
}

/* all tables in the order area -> consistent cards */
body.woocommerce-order-received .gb5-shop table {
  width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 10px;
  background: #fff; border: 1px solid var(--gb5-line); border-radius: 16px; overflow: hidden;
}
body.woocommerce-order-received .gb5-shop table th,
body.woocommerce-order-received .gb5-shop table td {
  padding: 13px 18px; text-align: left; border: 0; border-bottom: 1px solid var(--gb5-line-soft);
  font-size: 0.9rem; color: var(--gb5-ink);
}
body.woocommerce-order-received .gb5-shop table thead th {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gb5-faint); font-weight: 600;
}
body.woocommerce-order-received .gb5-shop table tr:last-child th,
body.woocommerce-order-received .gb5-shop table tr:last-child td { border-bottom: 0; }
body.woocommerce-order-received .gb5-shop table td.woocommerce-table__product-total,
body.woocommerce-order-received .gb5-shop table .amount { font-weight: 560; }

/* the "View" button (subscription) -> ink pill */
body.woocommerce-order-received .gb5-shop .button,
body.woocommerce-order-received .gb5-shop .woocommerce-button {
  background: var(--gb5-ink); color: #fff; border: 0; border-radius: 999px;
  padding: 0.5rem 1.15rem; font-size: 0.82rem; font-weight: 560; text-decoration: none;
  display: inline-flex; align-items: center; box-shadow: none;
}
body.woocommerce-order-received .gb5-shop .button:hover { background: #1d2939; }

/* license key code */
body.woocommerce-order-received .gb5-shop code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.8rem;
  background: var(--gb5-bg-soft); border: 1px solid var(--gb5-line); border-radius: 6px; padding: 2px 8px; color: var(--gb5-ink);
}

/* billing address block */
body.woocommerce-order-received .gb5-shop .woocommerce-customer-details address {
  font-style: normal; border: 1px solid var(--gb5-line); border-radius: 14px; padding: 18px;
  color: var(--gb5-body); line-height: 1.75; font-size: 0.9rem; background: #fff;
}

/* Addresses grid fix — WooCommerce's .col2-set clearfix ::before/::after become
   grid items and offset the cards (billing right / shipping left, staggered).
   Hide those pseudo-elements and neutralise the col-1/col-2 float+width so the
   two address cards sit in a clean, top-aligned 2-up grid. */
.gb5-account .woocommerce-Addresses { align-items: start; }
.gb5-account .woocommerce-Addresses::before,
.gb5-account .woocommerce-Addresses::after { content: none !important; display: none !important; }
.gb5-account .woocommerce-Address,
.gb5-account .col-1, .gb5-account .col-2,
.gb5-account .u-column1, .gb5-account .u-column2 {
  float: none !important; width: auto !important; max-width: none !important; margin: 0 !important;
}
@media (max-width: 640px) {
  .gb5-account .woocommerce-Addresses { grid-template-columns: 1fr; }
}