:root {
  --cb-theme-primary: #b2292e;
  --cb-theme-primary-hover: #9f2227;
  --cb-theme-primary-contrast: #ffffff;
  --cb-theme-secondary: #1d2a38;
  --cb-theme-secondary-hover: #162331;
  --cb-theme-secondary-contrast: #ffffff;
  --cb-theme-accent: #c89323;
  --cb-theme-success: #4f8a3f;
  --cb-theme-warning: #b56a16;
  --cb-theme-link: var(--cb-theme-primary);
  --cb-beer-pale: #f6c257;
  --cb-beer-gold: #dba03f;
  --cb-beer-amber: #d17b2a;
  --cb-beer-copper: #a24a19;
  --cb-beer-stout: #5b2f1b;
  --cb-hop: #b2c84f;
  --cb-page-bg: #ffffff;
  --cb-surface: #ffffff;
  --cb-surface-soft: #fafcff;
  --cb-surface-highlight: #fbf6e8;
  --cb-surface-warm: #fbf8ef;
  --cb-surface-subtle: #f1f4f8;
  --cb-text: #22313f;
  --cb-text-heading: #1d2a38;
  --cb-text-muted: #5f7083;
  --cb-text-soft: #718191;
  --cb-text-strong: #1f3143;
  --cb-border-soft: #e1e7ef;
  --cb-border-input: #cdd7e3;
  --cb-border-warm: #e2d7bd;
  --cb-border-strong: #ddc98d;
  --cb-surface-cool: #f6f8fb;
  --cb-border-cool: #e3e8f0;
  --cb-shell-hairline: #e6d7ac;
  --cb-shell-top-rule: var(--cb-theme-primary);
  --cb-shell-shadow: 0 2px 6px rgba(19, 34, 50, 0.04);
  --cb-public-logo-max: 72px;
  --cb-public-logo-max-mobile: 96px;
  --cb-shadow-card: 0 14px 28px rgba(19, 34, 50, 0.06);
  --cb-shadow-raised: 0 14px 30px rgba(18, 33, 51, 0.08);
  --cb-focus-ring: 0 0 0 3px rgba(200, 147, 35, 0.13);
  --cb-radius-sm: 12px;
  --cb-radius-md: 14px;
  --cb-radius-lg: 18px;
  --cb-radius-xl: 24px;
  --cb-space-2xs: 6px;
  --cb-space-xs: 10px;
  --cb-space-sm: 14px;
  --cb-space-md: 18px;
  --cb-space-lg: 24px;
  --cb-space-xl: 30px;
  --cb-space-2xl: 40px;
  --cb-space-3xl: 50px;
  --cb-font-sans: "Open Sans", Arial, sans-serif;
  --cb-font-serif: "Merriweather", Georgia, serif;
}

html,
body {
  background-color: var(--cb-page-bg);
}

body {
  color: var(--cb-text);
}

/* ── Focus ring reset ─────────────────────────────────────────────────────
   Strip the browser's blue outline on mouse clicks.
   :focus-visible keeps the ring for keyboard users (accessibility preserved).
   ──────────────────────────────────────────────────────────────────────── */
*:focus {
  outline: none;
}

*:focus-visible {
  outline: none;
  box-shadow: var(--cb-focus-ring);
}

a:focus,
button:focus,
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.dropdown-toggle:focus,
.dropdown-menu > li > a:focus,
.nav > li > a:focus,
.navbar-toggle:focus {
  outline: none;
  box-shadow: none;
}

.cb-page-shell {
  padding-bottom: var(--cb-space-3xl);
}

.cb-section {
  margin-bottom: var(--cb-space-xl);
}

.cb-section-alt {
  background: linear-gradient(180deg, var(--cb-surface) 0%, var(--cb-surface-subtle) 100%);
}

.cb-kicker {
  color: var(--cb-theme-accent);
  display: inline-block;
  font-family: var(--cb-font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: var(--cb-space-xs);
  text-transform: uppercase;
}

.cb-section-header {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cb-space-md);
  justify-content: space-between;
  margin-bottom: var(--cb-space-lg);
}

.cb-section-copy {
  flex: 1 1 420px;
}

.cb-section-header .cb-subtle {
  max-width: 760px;
}

.cb-section-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cb-display-title,
.cb-section-title {
  color: var(--cb-text-heading);
  font-family: var(--cb-font-serif);
  font-weight: 700;
  margin: 0 0 var(--cb-space-xs);
}

.cb-display-title {
  font-size: 42px;
  line-height: 1.12;
}

.cb-section-title {
  font-size: 30px;
  line-height: 1.2;
}

.cb-lead {
  color: var(--cb-text-muted);
  font-size: 21px;
  line-height: 1.55;
  margin: 0 0 var(--cb-space-xs);
}

.cb-subtle {
  color: var(--cb-text-muted);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.cb-card,
.cb-panel {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border-soft);
  border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow-card);
  margin-bottom: var(--cb-space-lg);
  padding: var(--cb-space-lg);
}

.cb-card-soft {
  background: linear-gradient(180deg, var(--cb-surface) 0%, var(--cb-surface-subtle) 100%);
  border-color: var(--cb-border-soft);
}

.cb-card-highlight {
  background: linear-gradient(180deg, #fffefb 0%, var(--cb-surface-highlight) 100%);
  border-color: var(--cb-border-strong);
}

.cb-hero {
  background: linear-gradient(135deg, #fffef9 0%, var(--cb-surface-warm) 100%);
  border: 1px solid var(--cb-border-warm);
  border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow-raised);
  display: flex;
  flex-wrap: wrap;
  gap: var(--cb-space-lg);
  justify-content: space-between;
  margin-bottom: var(--cb-space-lg);
  padding: 28px 30px;
}

.cb-hero-compact {
  padding: 22px 24px;
}

.cb-hero-copy {
  flex: 1 1 620px;
}

.cb-hero-note {
  align-self: flex-start;
  background: rgba(255, 255, 252, 0.96);
  border: 1px solid var(--cb-border-warm);
  border-radius: var(--cb-radius-md);
  color: var(--cb-text-muted);
  flex: 0 0 330px;
  line-height: 1.65;
  padding: var(--cb-space-md) 20px;
}

.cb-form-field {
  margin-bottom: var(--cb-space-md);
}

.cb-form-field label {
  color: #314658;
  display: block;
  font-family: var(--cb-font-sans);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: var(--cb-space-2xs);
}

.cb-form-control,
.cb-form-field .form-control {
  border: 1px solid var(--cb-border-input);
  border-radius: var(--cb-radius-sm);
  box-shadow: none;
  color: var(--cb-text);
  font-size: 16px;
  height: 48px;
  max-width: 100%;
  padding: 10px 14px;
}

textarea.cb-form-control,
.cb-form-field textarea.form-control {
  height: auto;
  min-height: 140px;
  resize: vertical;
}

.cb-form-control:focus,
.cb-form-field .form-control:focus {
  border-color: var(--cb-theme-accent);
  box-shadow: var(--cb-focus-ring);
}

.cb-form-help {
  color: var(--cb-text-soft);
  font-size: 13px;
  line-height: 1.5;
  margin-top: var(--cb-space-2xs);
}

.cb-actions,
.cb-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--cb-space-md);
}

.cb-actions .btn,
.cb-button-row .btn,
.btn.cb-btn-primary,
.btn.cb-btn-secondary {
  border-radius: var(--cb-radius-sm);
  font-family: var(--cb-font-sans);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 18px;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.cb-actions .btn,
.cb-button-row .btn,
.btn.cb-btn-primary {
  background-color: var(--cb-theme-primary);
  background-image: linear-gradient(180deg, #c93d43 0%, #a82429 100%);
  border: 1px solid #9e1f24;
  box-shadow: 0 2px 6px rgba(178, 41, 46, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--cb-theme-primary-contrast);
}

.cb-actions .btn:hover,
.cb-actions .btn:focus,
.cb-button-row .btn:hover,
.cb-button-row .btn:focus,
.btn.cb-btn-primary:hover,
.btn.cb-btn-primary:focus {
  background-color: var(--cb-theme-primary-hover);
  background-image: linear-gradient(180deg, #b83237 0%, #8c1d22 100%);
  border-color: #7c1a1e;
  box-shadow: 0 4px 12px rgba(178, 41, 46, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  color: var(--cb-theme-primary-contrast);
}

.btn.cb-btn-secondary {
  background: var(--cb-theme-secondary);
  border: 1px solid var(--cb-theme-secondary);
  color: var(--cb-theme-secondary-contrast);
}

.btn.cb-btn-secondary:hover,
.btn.cb-btn-secondary:focus {
  background: #162331;
  border-color: #162331;
  color: var(--cb-theme-secondary-contrast);
}

/* Outline variant — red border + text, transparent fill */
.btn.cb-btn-outline {
  background: transparent;
  border: 2px solid var(--cb-theme-primary);
  border-radius: var(--cb-radius-sm);
  box-shadow: none;
  color: var(--cb-theme-primary);
  font-family: var(--cb-font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  padding: 10px 22px;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.btn.cb-btn-outline:hover,
.btn.cb-btn-outline:focus {
  background: var(--cb-theme-primary);
  border-color: var(--cb-theme-primary);
  box-shadow: 0 2px 6px rgba(178, 41, 46, 0.22);
  color: var(--cb-theme-primary-contrast);
}

/* Ghost variant — text-only link styled button */
.btn.cb-btn-ghost {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--cb-theme-primary);
  font-family: var(--cb-font-sans);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.18s ease;
}

.btn.cb-btn-ghost:hover,
.btn.cb-btn-ghost:focus {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--cb-theme-primary-hover);
}

.cb-note {
  color: var(--cb-text-soft);
  font-size: 14px;
  line-height: 1.5;
}

.cb-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cb-link-list li + li {
  margin-top: 10px;
}

.cb-link-list a {
  color: var(--cb-theme-primary);
  text-decoration: none;
}

.cb-link-list a:hover,
.cb-link-list a:focus {
  color: var(--cb-theme-primary-hover);
  text-decoration: none;
}

.cb-tool-grid {
  display: grid;
  gap: var(--cb-space-lg);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.cb-tool-tile {
  align-items: center;
  background: linear-gradient(170deg, #ffffff 0%, #fdefd8 100%);
  border: 1px solid var(--cb-border-soft);
  border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow-card);
  color: var(--cb-text-heading);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 250px;
  padding: 28px 24px 24px;
  position: relative;
  text-align: center;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.cb-tool-tile:hover,
.cb-tool-tile:focus {
  border-color: var(--cb-border-cool);
  box-shadow: 0 20px 34px rgba(19, 34, 50, 0.12);
  color: var(--cb-text-heading);
  text-decoration: none;
  transform: translateY(-2px);
}

.cb-tool-illustration {
  align-items: center;
  background: linear-gradient(180deg, var(--cb-surface-cool) 0%, var(--cb-surface-subtle) 100%);
  border: 1px solid var(--cb-border-soft);
  border-radius: 28px;
  display: flex;
  height: 132px;
  justify-content: center;
  margin-bottom: var(--cb-space-md);
  overflow: hidden;
  padding: 14px;
  width: 132px;
}

.cb-tool-illustration img {
  height: auto;
  max-height: 100%;
  max-width: 100%;
}

.cb-tool-title {
  color: var(--cb-text-heading);
  font-family: var(--cb-font-sans);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 var(--cb-space-xs);
}

.cb-tool-caption {
  color: var(--cb-text-muted);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

.cb-recipe-grid {
  display: grid;
  gap: var(--cb-space-lg);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.cb-recipe-card {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border-soft);
  border-radius: 28px;
  box-shadow: var(--cb-shadow-card);
  color: var(--cb-text-heading);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  padding: 22px;
  position: relative;
  text-align: center;
}

.cb-recipe-card:hover,
.cb-recipe-card:focus-within {
  box-shadow: 0 20px 34px rgba(19, 34, 50, 0.12);
  transform: translateY(-1px);
}

.cb-recipe-orb {
  align-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto var(--cb-space-md);
  max-width: 210px;
  min-height: 210px;
  padding: 24px;
  position: relative;
  width: 100%;
}

.cb-recipe-orb::after {
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  content: "";
  inset: 16px;
  position: absolute;
}

.cb-recipe-orb--pale {
  background: radial-gradient(circle at 30% 25%, #f8d67d 0%, var(--cb-beer-pale) 48%, var(--cb-beer-gold) 100%);
}

.cb-recipe-orb--amber {
  background: radial-gradient(circle at 30% 25%, #ebae63 0%, var(--cb-beer-amber) 52%, var(--cb-beer-copper) 100%);
}

.cb-recipe-orb--dark {
  background: radial-gradient(circle at 30% 25%, #8a4a20 0%, #733714 40%, var(--cb-beer-stout) 100%);
}

.cb-recipe-icon {
  align-items: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: inline-flex;
  height: 58px;
  justify-content: center;
  margin-bottom: 14px;
  position: relative;
  width: 58px;
  z-index: 1;
}

.cb-recipe-icon img {
  filter: brightness(0) invert(1);
  max-height: 26px;
}

.cb-recipe-title {
  color: inherit;
  font-family: var(--cb-font-sans);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 10px;
  position: relative;
  z-index: 1;
}

.cb-recipe-meta,
.cb-recipe-stat {
  color: inherit;
  margin: 0;
  opacity: 0.96;
  position: relative;
  z-index: 1;
}

.cb-recipe-meta {
  font-size: 15px;
  line-height: 1.35;
}

.cb-recipe-stat {
  font-size: 16px;
  font-weight: 700;
  margin-top: 8px;
}

.cb-data-shell {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border-soft);
  border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow-card);
  overflow: hidden;
}

.cb-data-shell-header {
  align-items: center;
  background: linear-gradient(135deg, var(--cb-theme-secondary) 0%, #2a3a49 100%);
  color: var(--cb-theme-secondary-contrast);
  display: flex;
  justify-content: space-between;
  padding: 16px 20px;
}

.cb-data-shell-title {
  color: inherit;
  font-family: var(--cb-font-sans);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.cb-data-shell-body {
  padding: 20px;
}

.cb-table-wrap {
  overflow-x: auto;
}

.cb-table {
  margin-bottom: 0;
  width: 100%;
}

.cb-table thead th {
  background: #34424f;
  border-bottom: none;
  color: #ffffff;
  font-family: var(--cb-font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 14px 16px;
  text-transform: uppercase;
}

.cb-table tbody td,
.cb-table tbody th {
  border-top: 1px solid #edf1f5;
  color: var(--cb-text);
  padding: 14px 16px;
  vertical-align: middle;
}

.cb-table tbody tr:nth-child(even) {
  background-color: #fafbfd;
}

.cb-stat-panel {
  background: linear-gradient(180deg, var(--cb-surface) 0%, var(--cb-surface-subtle) 100%);
  border: 1px solid var(--cb-border-soft);
  border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow-card);
  overflow: hidden;
}

.cb-stat-panel-header {
  align-items: center;
  background: linear-gradient(135deg, var(--cb-theme-primary) 0%, #c2472f 100%);
  color: var(--cb-theme-primary-contrast);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 16px 18px;
}

.cb-stat-panel-header h3 {
  color: inherit;
  font-family: var(--cb-font-sans);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.cb-stat-panel-body {
  padding: 20px 18px 22px;
}

.cb-stat-list {
  display: grid;
  gap: 12px 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cb-stat-item {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cb-stat-label {
  color: var(--cb-theme-primary);
  font-weight: 700;
}

.cb-stat-value {
  color: var(--cb-text);
}

.cb-public-header-shell {
  max-width: 1680px;
  padding-left: 18px;
  padding-right: 18px;
  position: relative;
  z-index: 20;
}

.cb-public-header-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.cb-public-brand-column,
.cb-public-nav-column {
  margin-bottom: 0;
}

.cb-mobile-nav-close {
  display: none;
}

.cb-public-brand-card,
.cb-public-nav-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
}

.cb-public-brand-card {
  align-items: center;
  display: flex;
  gap: 16px;
  padding: 0;
  text-align: left;
}

.cb-public-brand-link {
  display: inline-flex;
  flex-shrink: 0;
}

.cb-public-brand-logo {
  max-height: var(--cb-public-logo-max);
  width: auto;
}

.cb-public-brand-tagline {
  min-width: 0;
}


.cb-public-header-title {
  color: var(--cb-text-heading);
  font-family: var(--cb-font-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.22;
  margin-bottom: 0;
}

.cb-public-header-subtitle {
  display: none;
}

.cb-public-nav-card {
  display: flex;
  justify-content: flex-end;
  padding: 0;
}

.cb-public-navbar {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
  min-height: 0;
  width: 100%;
}

.cb-public-navbar .navbar-collapse {
  border-top: 0;
  box-shadow: none;
  padding: 0;
}

.cb-public-navbar .navbar-nav {
  align-items: center;
  background: transparent;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  width: 100%;
}

.cb-public-navbar .navbar-nav > li {
  float: none;
}

.cb-public-navbar .navbar-nav > li > a,
.cb-public-navbar .navbar-nav > li > a:focus {
  background: transparent;
  border-radius: 0;
  color: var(--cb-text-heading);
  font-family: var(--cb-font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 2px;
  padding: 10px 14px;
  transition: color 0.18s ease;
  border-bottom: none;
}

.cb-public-navbar .navbar-nav > li:last-child > a {
  margin-right: 0;
}

.cb-public-navbar .navbar-nav > li > a:hover,
.cb-public-navbar .navbar-nav > li > a:focus,
.cb-public-navbar .navbar-nav > .open > a,
.cb-public-navbar .navbar-nav > .open > a:hover,
.cb-public-navbar .navbar-nav > .open > a:focus,
.cb-public-navbar .navbar-nav > .active > a,
.cb-public-navbar .navbar-nav > .active > a:hover,
.cb-public-navbar .navbar-nav > .active > a:focus {
  background-color: transparent;
  border-bottom: none;
  color: var(--cb-theme-primary);
}

.cb-public-navbar .navbar-nav > .cb-public-nav-members > a,
.cb-public-navbar .navbar-nav > .cb-public-nav-members > a:focus {
  margin-left: 6px;
}

.cb-public-navbar .navbar-nav > .cb-public-nav-cta {
  margin-left: 6px;
}

.cb-public-navbar .dropdown-menu {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border-cool);
  border-radius: var(--cb-radius-sm);
  box-shadow: var(--cb-shadow-card);
  margin-top: 6px;
  padding: 6px 0;
}

.cb-public-navbar .dropdown-menu > li > a {
  color: var(--cb-text-heading);
  font-family: var(--cb-font-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 18px;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.cb-public-navbar .dropdown-menu > li > a:hover,
.cb-public-navbar .dropdown-menu > li > a:focus,
.cb-public-navbar .dropdown-menu > li > a.active,
.cb-public-navbar .dropdown-menu > li.active > a {
  background-color: var(--cb-surface-cool);
  color: var(--cb-theme-primary);
}

.cb-public-footer-shell {
  padding-top: 6px;
}

.cb-public-footer-grid {
  align-items: flex-start;
}

.cb-public-footer-brand-col {
  padding-right: 24px;
}

.cb-public-footer-brand {
  max-width: 220px;
}

.cb-public-footer-logo {
  margin-bottom: 12px;
  max-width: 72px;
}

.cb-public-footer-brand .cb-kicker {
  display: block;
  margin-bottom: 6px;
}

.cb-public-footer-links-row {
  display: flex;
  flex-wrap: wrap;
}

.cb-public-footer-section {
  margin-bottom: 28px;
}

.cb-public-footer-section h3 {
  color: var(--cb-text-heading);
  font-family: var(--cb-font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.cb-public-footer-section .greyLine {
  margin-bottom: 14px;
}

.cb-public-footer-subsection {
  margin-top: 28px;
  padding-top: 6px;
}

.cb-public-footer-section > .cb-public-footer-subsection:first-child {
  margin-top: 0;
  padding-top: 0;
}

.cb-public-footer-links a {
  color: var(--cb-theme-primary);
  font-size: 15px;
  line-height: 1.45;
}

.cb-public-footer-links a:hover,
.cb-public-footer-links a:focus {
  color: var(--cb-theme-primary-hover);
}

.cb-public-copyright-shell {
  font-size: 15px;
  padding-bottom: 4px;
  padding-top: 4px;
}

/* ── Browse Recipes Page ────────────────────────────────────────────────── */

.cb-browse-hero {
  background: linear-gradient(180deg, var(--cb-surface-highlight) 0%, var(--cb-surface) 100%);
  border-bottom: 1px solid var(--cb-border-warm);
  padding: 36px 0 28px;
  text-align: center;
}

.cb-browse-hero-title {
  color: var(--cb-theme-primary);
  font-family: var(--cb-font-serif);
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 8px;
}

.cb-browse-hero-sub {
  color: var(--cb-text-muted);
  font-size: 16px;
  margin: 0;
}

/* ── Ingredient Catalog Pages ───────────────────────────────────────────── */

.cb-ingredient-page,
.cb-ingredient-detail-page {
  background: linear-gradient(180deg, #ffffff 0%, #faf8f1 100%);
}

.cb-ingredient-toolbar {
  align-items: center;
  background: var(--cb-surface);
  border: 1px solid var(--cb-border-warm);
  border-radius: 8px;
  box-shadow: var(--cb-shadow-card);
  display: flex;
  justify-content: space-between;
  margin: 26px 0 22px;
  padding: 18px 20px;
}

.cb-ingredient-toolbar p {
  color: var(--cb-text-muted);
  margin: 4px 0 0;
}

.cb-ingredient-count {
  color: var(--cb-theme-primary);
  display: block;
  font-family: var(--cb-font-serif);
  font-size: 22px;
  font-weight: 700;
}

.cb-ingredient-list {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border-cool);
  border-radius: 8px;
  box-shadow: var(--cb-shadow-card);
  overflow: hidden;
}

.cb-ingredient-list-head,
.cb-ingredient-row {
  align-items: center;
  display: grid;
  gap: 16px;
}

.cb-hop-grid {
  grid-template-columns: minmax(150px, 1fr) 140px minmax(280px, 2fr);
}

.cb-yeast-grid {
  grid-template-columns: minmax(220px, 1.5fr) 150px 120px minmax(260px, 2fr);
}

.cb-ingredient-list-head {
  background: var(--cb-theme-secondary);
  color: var(--cb-theme-secondary-contrast);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 13px 18px;
  text-transform: uppercase;
}

.cb-ingredient-row {
  border-top: 1px solid var(--cb-border-cool);
  color: var(--cb-text);
  padding: 15px 18px;
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.cb-ingredient-row:nth-child(odd) {
  background: var(--cb-surface-soft);
}

.cb-ingredient-row:hover,
.cb-ingredient-row:focus {
  background: var(--cb-surface-highlight);
  color: var(--cb-theme-primary);
  text-decoration: none;
  transform: translateX(3px);
}

.cb-ingredient-row strong {
  color: var(--cb-theme-primary);
  display: block;
  font-size: 16px;
}

.cb-ingredient-row:hover strong,
.cb-ingredient-row:focus strong {
  color: var(--cb-theme-primary-hover);
}

.cb-ingredient-mobile-note {
  color: var(--cb-text-muted);
  font-size: 13px;
  margin-top: 4px;
}

.cb-ingredient-detail-hero {
  padding-bottom: 34px;
  padding-top: 34px;
}

.cb-hop-hero {
  background:
    linear-gradient(135deg, rgba(178, 200, 79, 0.18), rgba(251, 246, 232, 0.95) 46%, #ffffff 100%);
}

.cb-yeast-hero {
  background:
    linear-gradient(135deg, rgba(200, 147, 35, 0.18), rgba(251, 246, 232, 0.95) 46%, #ffffff 100%);
}

.cb-ingredient-eyebrow {
  color: var(--cb-theme-accent);
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.cb-ingredient-detail-grid {
  display: grid;
  gap: 26px;
  grid-template-columns: minmax(0, 1fr) 360px;
  margin-top: 26px;
}

.cb-ingredient-main-card,
.cb-ingredient-side-card {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border-cool);
  border-radius: 8px;
  box-shadow: var(--cb-shadow-card);
  padding: 24px;
}

.cb-ingredient-main-card h2,
.cb-ingredient-side-card h2,
.cb-related-ingredients h2 {
  color: var(--cb-text-heading);
  font-family: var(--cb-font-serif);
  font-size: 24px;
  margin: 0 0 14px;
}

.cb-ingredient-main-card p,
.cb-ingredient-side-card p {
  color: var(--cb-text);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}

.cb-ingredient-intro {
  border-bottom: 1px solid var(--cb-border-cool);
  margin-bottom: 22px !important;
  padding-bottom: 18px;
}

.cb-ingredient-section {
  margin-top: 24px;
}

.cb-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cb-ingredient-chip {
  background: var(--cb-surface-highlight);
  border: 1px solid var(--cb-border-warm);
  border-radius: 999px;
  color: var(--cb-text-strong);
  display: inline-flex;
  font-size: 15px;
  font-weight: 700;
  padding: 8px 12px;
}

.cb-ingredient-stat-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

.cb-yeast-stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 24px;
}

.cb-ingredient-stat {
  background: var(--cb-surface-soft);
  border: 1px solid var(--cb-border-cool);
  border-radius: 8px;
  padding: 14px;
}

.cb-ingredient-stat span {
  color: var(--cb-text-muted);
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.cb-ingredient-stat strong {
  color: var(--cb-text-heading);
  display: block;
  font-size: 18px;
  line-height: 1.3;
}

.cb-style-list {
  display: grid;
  gap: 9px;
}

.cb-style-row {
  align-items: center;
  background: var(--cb-surface-soft);
  border: 1px solid var(--cb-border-cool);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 11px 12px;
}

.cb-style-row span {
  color: var(--cb-text);
  font-weight: 700;
}

.cb-style-row strong {
  color: var(--cb-theme-primary);
}

.cb-related-ingredients {
  margin-top: 34px;
}

.cb-ingredient-faq-card {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border-cool);
  border-radius: 8px;
  box-shadow: var(--cb-shadow-card);
  margin-top: 26px;
  padding: 24px;
}

.cb-ingredient-faq-card h2,
.cb-ingredient-tool-links h2 {
  color: var(--cb-text-heading);
  font-family: var(--cb-font-serif);
  font-size: 24px;
  margin: 0 0 14px;
}

.cb-ingredient-faq-item {
  border-top: 1px solid var(--cb-border-cool);
  padding: 14px 0 0;
}

.cb-ingredient-faq-item + .cb-ingredient-faq-item {
  margin-top: 14px;
}

.cb-ingredient-faq-item h3 {
  color: var(--cb-text-heading);
  font-family: var(--cb-font-sans);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
}

.cb-ingredient-faq-item p {
  color: var(--cb-text);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}

.cb-ingredient-tool-links {
  margin-top: 28px;
}

.cb-related-ingredients a {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border-cool);
  border-radius: 999px;
  color: var(--cb-theme-primary);
  display: inline-block;
  font-weight: 700;
  margin: 0 8px 10px 0;
  padding: 8px 12px;
}

.cb-related-ingredients a:hover,
.cb-related-ingredients a:focus,
.cb-ingredient-back-link a:hover,
.cb-ingredient-back-link a:focus {
  background: var(--cb-surface-highlight);
  color: var(--cb-theme-primary-hover);
  text-decoration: none;
}

.cb-ingredient-back-link {
  margin-top: 24px;
}

.cb-ingredient-back-link a {
  color: var(--cb-theme-primary);
  font-weight: 800;
}

@media (max-width: 991px) {
  .cb-ingredient-detail-grid {
    grid-template-columns: 1fr;
  }

  .cb-yeast-grid {
    grid-template-columns: minmax(0, 1fr) 120px 96px;
  }
}

@media (max-width: 767px) {
  .cb-ingredient-toolbar {
    align-items: flex-start;
    border-radius: 8px;
    padding: 16px;
  }

  .cb-hop-grid,
  .cb-yeast-grid {
    grid-template-columns: minmax(0, 1fr) 96px;
  }

  .cb-yeast-grid {
    grid-template-columns: minmax(0, 1fr) 86px 76px;
  }

  .cb-ingredient-list-head {
    font-size: 12px;
    padding: 12px;
  }

  .cb-ingredient-row {
    gap: 10px;
    padding: 14px 12px;
  }

  .cb-ingredient-row strong {
    font-size: 15px;
  }

  .cb-ingredient-main-card,
  .cb-ingredient-side-card {
    padding: 18px;
  }

  .cb-yeast-stat-grid {
    grid-template-columns: 1fr;
  }
}

/* Filter bar */
.cb-browse-filter-bar {
  align-items: center;
  background: var(--cb-surface);
  border-bottom: 1px solid var(--cb-border-cool);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 16px 24px;
}

.cb-browse-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 10px;
  border: 1px solid var(--cb-border-cool) !important;
  border-radius: var(--cb-radius-sm) !important;
  color: var(--cb-text-body) !important;
  font-size: 13px !important;
  height: 36px !important;
  padding: 0 32px 0 12px !important;
  width: auto !important;
  min-width: 130px;
}

.cb-browse-select:focus {
  border-color: var(--cb-border-warm) !important;
  outline: none;
  box-shadow: var(--cb-focus-ring);
}

.cb-browse-count {
  color: var(--cb-text-muted);
  font-size: 13px;
  margin-left: 8px;
  white-space: nowrap;
}

/* Pagination */
.cb-browse-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 32px 0 48px;
}

.cb-page-btn {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border-cool);
  border-radius: var(--cb-radius-sm);
  color: var(--cb-text-body);
  font-size: 14px;
  min-width: 40px;
  padding: 6px 12px;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.cb-page-btn:hover {
  background: var(--cb-surface-cool);
  border-color: var(--cb-border-warm);
  color: var(--cb-theme-primary);
  text-decoration: none;
}

.cb-page-btn-active {
  background: var(--cb-theme-primary);
  border-color: var(--cb-theme-primary);
  color: #ffffff;
  font-weight: 600;
}

.cb-page-btn-active:hover {
  background: var(--cb-theme-primary-hover);
  border-color: var(--cb-theme-primary-hover);
  color: #ffffff;
}

@media (max-width: 991px) {
  .cb-display-title {
    font-size: 36px;
  }

  .cb-lead {
    font-size: 19px;
  }

  .cb-hero-note {
    flex-basis: 100%;
  }

  .cb-tool-grid,
  .cb-recipe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cb-stat-list {
    grid-template-columns: 1fr;
  }

  .cb-public-brand-card,
  .cb-public-nav-card {
    min-height: 0;
  }

  .cb-public-header-row {
    align-items: center;
  }

  /* Hide tagline and logo between 768–991px — nav gets full width */
  .cb-public-brand-tagline,
  .cb-public-brand-logo {
    display: none;
  }

  .cb-public-brand-card {
    align-items: center;
    flex-direction: row;
    gap: 0;
    justify-content: flex-start;
    padding-bottom: 0;
    text-align: left;
  }

  .cb-public-nav-card {
    justify-content: flex-start;
  }

  .cb-public-navbar .navbar-nav {
    justify-content: flex-start;
  }

  .cb-public-navbar .navbar-nav > li > a,
  .cb-public-navbar .navbar-nav > li > a:focus {
    padding: 8px 12px;
  }

  .cb-public-header-title {
    font-size: 16px;
  }

  .cb-public-header-subtitle {
    font-size: 12px;
  }
}

@media (max-width: 767px) {
  .cb-hero,
  .cb-card,
  .cb-panel {
    border-radius: 16px;
    padding: 20px;
  }

  .cb-display-title {
    font-size: 32px;
  }

  .cb-lead {
    font-size: 18px;
  }

  .cb-actions,
  .cb-button-row {
    flex-direction: column;
  }

  .cb-actions .btn,
  .cb-button-row .btn,
  .btn.cb-btn-primary,
  .btn.cb-btn-secondary {
    width: 100%;
  }

  .cb-section-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .cb-tool-grid,
  .cb-recipe-grid {
    grid-template-columns: 1fr;
  }

  .cb-tool-title {
    font-size: 22px;
  }

  .cb-recipe-orb {
    max-width: 240px;
    min-height: 240px;
  }

  /* ── Mobile header: logo left, burger right ──────────────────────────── */
  .cb-public-header-row {
    align-items: center;
  }

  .cb-public-brand-column {
    flex: 1 1 auto;
    max-width: none;
    width: auto;
  }

  .cb-public-nav-column {
    flex: 0 0 auto;
    width: auto;
  }

  .cb-public-brand-card {
    align-items: center;
    flex-direction: row;
    gap: 0;
    justify-content: flex-start;
    padding-right: 0;
    text-align: left;
  }

  .cb-public-brand-tagline {
    display: none;
  }

  /* Compact logo on mobile — restore after being hidden at 768–991px */
  .cb-public-brand-logo {
    display: block;
    max-height: 52px;
  }

  .cb-public-nav-card {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    padding: 0;
  }

  .cb-public-navbar .navbar-header {
    float: none;
    margin: 0;
  }

  /* Compact burger button */
  .cb-public-navbar .navbar-toggle {
    background: var(--cb-theme-primary);
    border-radius: 10px !important;
    display: block;
    float: none;
    margin: 0;
    padding: 10px 14px !important;
  }

  .cb-public-navbar .navbar-toggle .icon-bar {
    background: #ffffff !important;
    height: 2px;
    width: 20px;
  }

  /* ── Full-screen mobile overlay ─────────────────────────────────────── */

  /* Kill Bootstrap's height transition — no flash, instant full-screen */
  .cb-public-navbar .navbar-collapse {
    transition: none !important;
  }

  .cb-public-navbar .navbar-collapse.in,
  .cb-public-navbar .navbar-collapse.collapsing {
    background: var(--cb-theme-primary);
    bottom: 0;
    display: flex !important;
    flex-direction: column;
    height: 100dvh !important;
    left: 0;
    max-height: none !important;
    overflow-y: auto;
    padding: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 9999;
  }

  /* Close button — top-right of overlay */
  .cb-mobile-nav-close {
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 36px;
    font-weight: 300;
    line-height: 1;
    min-height: 64px;
    padding: 12px 20px;
    width: 100%;
  }

  .cb-public-navbar .navbar-nav {
    display: block;
    flex: 1;
    margin: 0;
    overflow-y: auto;
    padding: 0 0 32px;
  }

  .cb-public-navbar .navbar-nav > li > a,
  .cb-public-navbar .navbar-nav > li > a:focus {
    background-color: transparent;
    border-bottom: 0;
    border-radius: 0;
    color: #ffffff !important;
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    padding: 14px 24px;
  }

  .cb-public-navbar .navbar-nav > li > a:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #ffffff !important;
  }

  .cb-public-navbar .navbar-nav > .cb-public-nav-members > a,
  .cb-public-navbar .navbar-nav > .cb-public-nav-members > a:focus,
  .cb-public-navbar .navbar-nav > .cb-public-nav-cta {
    margin-left: 0;
  }

  .cb-public-navbar .dropdown-menu {
    background: rgba(0, 0, 0, 0.18);
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin-top: 0;
    padding: 0;
    position: static;
    width: 100%;
  }

  .cb-public-navbar .dropdown-menu > li > a {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 15px;
    font-weight: 400;
    padding: 11px 24px 11px 44px;
  }

  .cb-public-navbar .dropdown-menu > li > a:hover,
  .cb-public-navbar .dropdown-menu > li > a:focus {
    background: rgba(0, 0, 0, 0.15);
    color: #ffffff !important;
  }

  .cb-public-footer-links a {
    font-size: 13px;
  }

  .cb-public-copyright-shell {
    font-size: 14px;
  }
}

/* ── Embeddable Calculators page ──────────────────────────────────────────── */
.cb-embed-features {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 40px 0 8px;
}

.cb-embed-feature {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border-cool);
  border-top: 4px solid var(--cb-theme-accent);
  border-radius: var(--cb-radius-md);
  box-shadow: var(--cb-shadow-card);
  padding: 24px 32px;
  text-align: center;
  flex: 1 1 140px;
  max-width: 200px;
}

.cb-embed-feature-num {
  color: var(--cb-theme-primary);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  font-family: var(--cb-font-sans);
}

.cb-embed-feature-label {
  color: var(--cb-text-muted);
  font-size: 13px;
  margin-top: 6px;
}

.cb-embed-intro {
  background: var(--cb-surface);
  border: 1px solid var(--cb-shell-hairline);
  border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow-card);
  max-width: 880px;
  margin: 32px auto;
  padding: 30px;
  text-align: center;
  color: var(--cb-text-muted);
  font-size: 15px;
  line-height: 1.7;
}

.cb-embed-intro h2 {
  color: var(--cb-text-heading);
  font-family: var(--cb-font-serif);
  font-size: 30px;
  line-height: 1.2;
  margin: 0 0 14px;
}

.cb-embed-intro p {
  margin: 0 auto;
  max-width: 760px;
}

.cb-embed-intro-kicker {
  color: var(--cb-theme-primary) !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 8px !important;
  text-transform: uppercase;
}

.cb-embed-commerce-points {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 24px;
  text-align: left;
}

.cb-embed-commerce-points div {
  background: var(--cb-surface-cool);
  border: 1px solid var(--cb-border-cool);
  border-radius: var(--cb-radius-md);
  padding: 18px;
}

.cb-embed-commerce-points strong {
  color: var(--cb-theme-primary);
  display: block;
  font-size: 15px;
  margin-bottom: 6px;
}

.cb-embed-commerce-points span {
  color: var(--cb-text-muted);
  display: block;
  font-size: 14px;
  line-height: 1.6;
}

.cb-embed-clients {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 40px;
  padding: 20px;
  background: var(--cb-surface-cool);
  border-radius: var(--cb-radius-md);
  border: 1px solid var(--cb-border-cool);
}

.cb-embed-clients-label {
  color: var(--cb-text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 4px;
}

.cb-client-badge {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border-cool);
  border-radius: 20px;
  color: var(--cb-text-heading) !important;
  font-size: 13px;
  font-weight: 500;
  padding: 5px 14px;
  text-decoration: none !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.cb-client-badge:hover {
  border-color: var(--cb-theme-primary);
  box-shadow: 0 2px 8px rgba(19, 34, 50, 0.08);
  color: var(--cb-theme-primary) !important;
}

.cb-embed-section-head {
  border-bottom: 2px solid var(--cb-surface-highlight);
  margin: 48px 0 20px;
  padding-bottom: 12px;
}

.cb-embed-section-head h2 {
  color: var(--cb-text-heading);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
}

.cb-embed-section-head p {
  color: var(--cb-text-muted);
  font-size: 14px;
  margin: 0;
}

/* Pricing grid */
.cb-pricing-grid {
  display: flex;
  justify-content: center;
  margin: 32px 0 48px;
}

.cb-pricing-card {
  background: var(--cb-surface);
  border: 2px solid var(--cb-shell-hairline);
  border-radius: var(--cb-radius-md);
  box-shadow: var(--cb-shadow-card);
  max-width: 420px;
  padding: 36px 40px 32px;
  position: relative;
  width: 100%;
}

.cb-pricing-badge {
  background: var(--cb-theme-primary);
  border-radius: 20px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  left: 50%;
  letter-spacing: 0.05em;
  padding: 4px 16px;
  position: absolute;
  text-transform: uppercase;
  top: -14px;
  transform: translateX(-50%);
}

.cb-pricing-name {
  color: var(--cb-text-heading);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
  text-align: center;
}

.cb-pricing-amount {
  color: var(--cb-text-heading);
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 28px;
  text-align: center;
}

.cb-pricing-currency {
  font-size: 28px;
  vertical-align: super;
}

.cb-pricing-period {
  color: var(--cb-text-muted);
  font-size: 16px;
  font-weight: 400;
}

.cb-pricing-features {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  border-top: 1px solid var(--cb-border-cool);
  padding-top: 20px;
}

.cb-pricing-features li {
  align-items: flex-start;
  color: var(--cb-text-heading);
  display: flex;
  font-size: 14px;
  gap: 10px;
  margin-bottom: 10px;
}

.cb-pricing-check {
  color: var(--cb-theme-primary);
  font-weight: 700;
  flex-shrink: 0;
}

.cb-pricing-note {
  color: var(--cb-text-muted);
  font-size: 12px;
  margin-top: 12px;
  text-align: center;
}

/* CTA band */
.cb-embed-cta-band {
  align-items: center;
  background: linear-gradient(135deg, var(--cb-surface-highlight) 0%, var(--cb-surface-warm) 100%);
  border: 1px solid var(--cb-shell-hairline);
  border-radius: var(--cb-radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  margin: 0 0 48px;
  padding: 28px 36px;
}

.cb-embed-cta-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cb-embed-cta-text strong {
  color: var(--cb-text-heading);
  font-size: 17px;
}

.cb-embed-cta-text span {
  color: var(--cb-text-muted);
  font-size: 14px;
}

.cb-seo-hub-hero {
  background: linear-gradient(135deg, rgba(178, 41, 46, 0.11), rgba(251, 246, 232, 0.92) 45%, #ffffff 100%);
}

.cb-seo-hub-eyebrow {
  color: var(--cb-theme-accent);
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.cb-seo-hub-page {
  background: linear-gradient(180deg, #ffffff 0%, #faf8f1 100%);
  padding-top: 34px;
}

.cb-seo-hub-intro,
.cb-seo-hub-faq,
.cb-seo-hub-cta {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border-soft);
  border-radius: 8px;
  box-shadow: var(--cb-shadow-card);
  margin-bottom: 24px;
  padding: 26px;
}

.cb-seo-hub-intro h2,
.cb-seo-hub-faq h2,
.cb-seo-hub-cta h2 {
  color: var(--cb-text-heading);
  font-family: var(--cb-font-serif);
  font-size: 26px;
  margin: 0 0 10px;
}

.cb-seo-hub-intro p,
.cb-seo-hub-faq p,
.cb-seo-hub-cta p {
  color: var(--cb-text);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}

.cb-seo-guide-body {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 24px;
}

.cb-seo-guide-step,
.cb-seo-guide-example {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border-soft);
  border-radius: 8px;
  box-shadow: var(--cb-shadow-card);
  padding: 24px;
}

.cb-seo-guide-step h2,
.cb-seo-guide-example h3 {
  color: var(--cb-text-heading);
  font-family: var(--cb-font-serif);
  font-size: 24px;
  margin: 0 0 10px;
}

.cb-seo-guide-step p,
.cb-seo-guide-example p {
  color: var(--cb-text);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}

.cb-seo-guide-step ul {
  border-top: 1px solid var(--cb-border-soft);
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
}

.cb-seo-guide-step li {
  color: var(--cb-text-muted);
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 8px;
  padding-left: 18px;
  position: relative;
}

.cb-seo-guide-step li:before {
  background: var(--cb-theme-accent);
  border-radius: 50%;
  content: "";
  height: 6px;
  left: 0;
  position: absolute;
  top: 8px;
  width: 6px;
}

.cb-seo-guide-example {
  background: linear-gradient(135deg, rgba(196, 144, 55, 0.13), #ffffff 62%);
  border-color: rgba(196, 144, 55, 0.34);
  margin-bottom: 24px;
}

.cb-seo-guide-example span {
  color: var(--cb-theme-accent);
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.cb-seo-hub-tools {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 24px;
}

.cb-seo-hub-related-guides h2 {
  color: var(--cb-text-heading);
  font-family: var(--cb-font-serif);
  font-size: 26px;
  margin: 0 0 16px;
}

.cb-seo-hub-tool {
  background: linear-gradient(180deg, var(--cb-surface) 0%, var(--cb-surface-subtle) 100%);
  border: 1px solid var(--cb-border-soft);
  border-radius: 8px;
  box-shadow: var(--cb-shadow-card);
  color: var(--cb-text);
  display: block;
  min-height: 190px;
  padding: 20px;
  text-decoration: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.cb-seo-hub-tool:hover,
.cb-seo-hub-tool:focus {
  border-color: var(--cb-border-strong);
  box-shadow: 0 20px 34px rgba(19, 34, 50, 0.12);
  color: var(--cb-text);
  text-decoration: none;
  transform: translateY(-2px);
}

.cb-seo-hub-tool span {
  color: var(--cb-theme-accent);
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.cb-seo-hub-tool strong {
  color: var(--cb-text-heading);
  display: block;
  font-family: var(--cb-font-sans);
  font-size: 20px;
  line-height: 1.25;
  margin-bottom: 10px;
}

.cb-seo-hub-tool em {
  color: var(--cb-text-soft);
  display: block;
  font-size: 14px;
  font-style: normal;
  line-height: 1.55;
}

.cb-seo-hub-faq {
  display: grid;
  gap: 14px;
}

.cb-seo-hub-faq h2 {
  margin-bottom: 2px;
}

.cb-seo-hub-faq-item {
  border-top: 1px solid var(--cb-border-soft);
  padding-top: 14px;
}

.cb-seo-hub-faq-item h3 {
  color: var(--cb-text-heading);
  font-family: var(--cb-font-sans);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
}

.cb-seo-hub-cta {
  align-items: center;
  background: linear-gradient(135deg, var(--cb-theme-secondary) 0%, #2d3c48 100%);
  color: var(--cb-theme-secondary-contrast);
  display: flex;
  gap: 24px;
  justify-content: space-between;
}

.cb-seo-hub-cta h2,
.cb-seo-hub-cta p {
  color: inherit;
}

.cb-seo-hub-cta p {
  opacity: 0.9;
}

@media (max-width: 991px) {
  .cb-seo-guide-body {
    grid-template-columns: 1fr;
  }

  .cb-seo-hub-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cb-calculator-promo {
  margin: 28px 0 0;
}

.cb-calculator-promo-card,
.cb-calculator-promo-card:visited {
  align-items: center;
  background: var(--cb-surface);
  border: 3px solid var(--cb-theme-primary);
  border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow-raised);
  color: var(--cb-text);
  display: grid;
  gap: 28px;
  grid-template-columns: 150px minmax(0, 1fr);
  overflow: hidden;
  padding: 30px 34px;
  position: relative;
  text-decoration: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.cb-calculator-promo-card::before {
  background: var(--cb-theme-primary);
  content: "";
  height: 7px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cb-calculator-promo-card:hover,
.cb-calculator-promo-card:focus {
  border-color: var(--cb-theme-secondary);
  box-shadow: 0 18px 36px rgba(19, 34, 50, 0.12);
  color: var(--cb-text);
  text-decoration: none;
  transform: translateY(-2px);
}

.cb-calculator-promo-media {
  align-items: center;
  background: var(--cb-surface-cool);
  border: 1px solid var(--cb-border-cool);
  border-radius: var(--cb-radius-md);
  display: flex;
  height: 132px;
  justify-content: center;
  padding: 18px;
}

.cb-calculator-promo-media img {
  display: block;
  height: auto;
  max-height: 100px;
  max-width: 100%;
}

.cb-calculator-promo-content {
  display: grid;
  gap: 10px;
}

.cb-calculator-promo-kicker {
  color: var(--cb-theme-primary);
  font-family: var(--cb-font-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cb-calculator-promo-title {
  color: var(--cb-theme-secondary);
  font-family: var(--cb-font-serif);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
}

.cb-calculator-promo-copy {
  color: var(--cb-text-muted);
  font-size: 16px;
  line-height: 1.65;
  max-width: 880px;
}

.cb-calculator-promo-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.cb-calculator-promo-points span {
  background: var(--cb-surface-cool);
  border: 1px solid var(--cb-border-cool);
  border-radius: 999px;
  color: var(--cb-theme-secondary);
  font-size: 13px;
  font-weight: 700;
  padding: 7px 13px;
}

.cb-calculator-promo-action {
  align-self: start;
  background: var(--cb-theme-primary);
  border-radius: var(--cb-radius-sm);
  color: #fff;
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  justify-self: start;
  margin-top: 8px;
  padding: 11px 18px;
}

.cb-calculator-promo-card:hover .cb-calculator-promo-action,
.cb-calculator-promo-card:focus .cb-calculator-promo-action {
  background: var(--cb-theme-secondary);
}

.cb-calculator-promo-compact .cb-calculator-promo-card,
.cb-calculator-promo-compact .cb-calculator-promo-card:visited {
  gap: 18px;
  grid-template-columns: 112px minmax(0, 1fr);
  padding: 22px;
}

.cb-calculator-promo-compact .cb-calculator-promo-media {
  height: 96px;
  padding: 14px;
}

.cb-calculator-promo-compact .cb-calculator-promo-media img {
  max-height: 72px;
}

.cb-calculator-promo-compact .cb-calculator-promo-title {
  font-size: 22px;
}

.cb-calculator-promo-compact .cb-calculator-promo-copy {
  font-size: 14px;
  line-height: 1.55;
}

.cb-calculator-promo-compact .cb-calculator-promo-points {
  display: none;
}

.cb-calculator-promo-compact .cb-calculator-promo-action {
  font-size: 13px;
  padding: 9px 14px;
}

@media (max-width: 600px) {
  .cb-seo-hub-page {
    padding-top: 24px;
  }

  .cb-seo-hub-tools {
    grid-template-columns: 1fr;
  }

  .cb-seo-hub-cta {
    align-items: flex-start;
    display: block;
  }

  .cb-seo-hub-cta .btn {
    margin-top: 14px;
  }

  .cb-embed-commerce-points {
    grid-template-columns: 1fr;
  }

  .cb-embed-intro {
    padding: 24px 18px;
  }

  .cb-embed-intro h2 {
    font-size: 24px;
  }

  .cb-embed-cta-band {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .cb-pricing-card {
    padding: 32px 24px;
  }

  .cb-calculator-promo-card,
  .cb-calculator-promo-card:visited {
    gap: 18px;
    grid-template-columns: 1fr;
    padding: 26px 20px;
  }

  .cb-calculator-promo-media {
    height: 112px;
    justify-self: start;
    width: 132px;
  }

  .cb-calculator-promo-title {
    font-size: 24px;
  }

  .cb-calculator-promo-copy {
    font-size: 15px;
  }

  .cb-calculator-promo-compact .cb-calculator-promo-points {
    display: flex;
  }
}