/* ==========================================================================
   Grohire — components.css
   Named classes for everything Bootstrap utilities cannot express.
   Rule: no inline styles in views, no utility soup. New look = new class here.
   Loaded after theme.css.
   ========================================================================== */

/* ---- App shell -------------------------------------------------------- */

.cg-shell { min-height: 100vh; display: flex; flex-direction: column; }

.cg-navbar {
  height: var(--cg-navbar-h);
  background: var(--cg-navbar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cg-hairline);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.cg-brand {
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 1.0625rem;
  text-decoration: none;
  color: var(--bs-body-color);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
/* Brand mark is the Grohire PNG icon (green tile + white G): self-contained, so
   it reads on the navy navbar, the navy footer and light surfaces alike. No text
   wordmark — the mark carries the brand. */
.cg-brand-img {

  border-radius: .625rem;
  display: block;
  
}

.cg-body { display: flex; flex: 1 1 auto; align-items: stretch; }

.cg-sidebar {
  width: var(--cg-sidebar-w);
  flex: 0 0 var(--cg-sidebar-w);
  background: var(--cg-sidebar-bg);
  border-right: 1px solid var(--cg-hairline);
  padding: 1rem;
  /* Sticky under the navbar: long ATS and admin lists otherwise scroll the nav away. */
  position: sticky;
  top: var(--cg-navbar-h);
  align-self: flex-start;
  max-height: calc(100vh - var(--cg-navbar-h));
  overflow-y: auto;
}
.cg-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.5rem;
  max-width: 1440px;
  margin-inline: auto;
  width: 100%;
}
@media (max-width: 991.98px) {
  .cg-sidebar { display: none; }           /* → offcanvas, see .cg-tabbar */
  .cg-main { padding: 1rem; padding-bottom: 5rem; }
}

/* Workspace chip at the top of the sidebar */
.cg-workspace {
  border: 1px solid var(--cg-hairline);
  background: var(--cg-surface-sunken);
  border-radius: .75rem;
  padding: .5rem .75rem;
}

/* Sidebar nav item with trailing badge */
.cg-nav-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; width: 100%;
}
.cg-nav-item .cg-nav-label { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.cg-nav-item .cg-nav-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-link .cg-icon { color: var(--cg-faint); flex: 0 0 auto; }
.nav-link:hover .cg-icon { color: var(--bs-emphasis-color); }
.nav-link.active .cg-icon { color: #fff; }
.cg-nav-badge {
  font-size: .625rem; font-weight: 700;
  padding: .1rem .45rem; border-radius: 50rem;
  background: var(--cg-surface-sunken); color: var(--cg-muted);
}
.nav-link.active .cg-nav-badge { background: rgba(255,255,255,.22); color: #fff; }

/* Mobile bottom tab bar (replaces the sidebar under lg) */
.cg-tabbar {
  display: none;
  position: fixed; inset: auto 0 0 0; z-index: 1040;
  background: var(--cg-navbar-bg);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--cg-hairline);
  padding: .375rem .25rem calc(.375rem + env(safe-area-inset-bottom));
}
.cg-tabbar-inner { display: flex; }
.cg-tabbar a {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: .125rem;
  padding: .375rem .25rem;
  font-size: .625rem; font-weight: 700;
  color: var(--cg-faint); text-decoration: none;
  border-radius: .625rem;
}
.cg-tabbar a.active { color: var(--cg-blue-500); background: var(--bs-primary-bg-subtle); }
@media (max-width: 991.98px) { .cg-tabbar { display: block; } }

/* ---- Typography helpers ---------------------------------------------- */

.cg-eyebrow {
  font-size: .625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--cg-faint);
}
.cg-page-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.025em; margin: 0; }
.cg-page-sub { font-size: .8125rem; color: var(--cg-muted); margin: .25rem 0 0; }
.cg-label { font-size: .75rem; font-weight: 600; color: var(--cg-muted); }
.cg-num { font-variant-numeric: tabular-nums; }

.cg-page-head {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: flex-start; justify-content: space-between;
  margin-bottom: 1.25rem;
}

/* ---- Icons ------------------------------------------------------------ */

.cg-icon {
  width: 1rem; height: 1rem;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex: 0 0 auto;
}
.cg-icon-sm { width: .875rem; height: .875rem; }
.cg-icon-lg { width: 1.25rem; height: 1.25rem; }
.cg-icon-xl { width: 1.75rem; height: 1.75rem; }

/* ---- Stat card (KPI strip) ------------------------------------------- */

.cg-stat {
  background: var(--cg-surface);
  border: 1px solid var(--cg-hairline);
  border-radius: 1rem;
  padding: 1.125rem 1.25rem;
  box-shadow: var(--bs-box-shadow-sm);
  transition: border-color .15s ease;
  height: 100%;
}
.cg-stat:hover { border-color: var(--cg-blue-400); }
.cg-stat-label { font-size: .75rem; font-weight: 600; color: var(--cg-muted); }
.cg-stat-value {
  font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em;
  margin-top: .375rem; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  transition: color .15s ease;
}
.cg-stat:hover .cg-stat-value { color: var(--cg-blue-500); }
.cg-stat-delta {
  display: inline-flex; align-items: center; gap: .3rem;
  margin-top: .5rem; font-size: .6875rem; font-weight: 700;
}
.cg-stat-delta.up { color: var(--cg-success); }
.cg-stat-delta.down { color: var(--cg-danger); }
.cg-stat-delta.flat { color: var(--cg-faint); }

/* ---- Rating ring (My Rating, §5.6) ---------------------------------- */

.cg-ring { display: inline-grid; place-items: center; position: relative; }
.cg-ring svg { transform: rotate(-90deg); display: block; }
.cg-ring-track { stroke: var(--cg-surface-sunken); fill: none; }
.cg-ring-fill {
  fill: none; stroke: var(--cg-blue-500); stroke-linecap: round;
  transition: stroke-dashoffset .6s cubic-bezier(.4,0,.2,1);
}
.cg-ring-fill.is-strong { stroke: var(--cg-success); }
.cg-ring-fill.is-mid    { stroke: var(--cg-gold); }
.cg-ring-fill.is-weak   { stroke: var(--cg-accent); }
.cg-ring-label {
  position: absolute; text-align: center; line-height: 1.05;
}
.cg-ring-label b { display: block; font-size: 1.375rem; font-weight: 800; letter-spacing: -.03em; }
.cg-ring-label small { font-size: .625rem; font-weight: 700; color: var(--cg-faint); }

/* Component bars under the ring */
.cg-bar-row { display: grid; grid-template-columns: 8.5rem 1fr 2.5rem; gap: .75rem;
              align-items: center; font-size: .75rem; }
.cg-bar { height: .4375rem; border-radius: 50rem; background: var(--cg-surface-sunken); overflow: hidden; }
.cg-bar > i { display: block; height: 100%; border-radius: 50rem; background: var(--cg-blue-500); }
.cg-bar > i.is-strong { background: var(--cg-success); }
.cg-bar > i.is-mid    { background: var(--cg-gold); }
.cg-bar > i.is-weak   { background: var(--cg-accent); }

/* ---- Verified badge -------------------------------------------------- */

.cg-verified {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .6875rem; font-weight: 700;
  padding: .2rem .55rem; border-radius: 50rem;
  color: var(--cg-success);
  background: rgba(5,150,105,.1);
  border: 1px solid rgba(5,150,105,.25);
}
.cg-verified.is-locked {
  color: var(--cg-faint); background: var(--cg-surface-sunken);
  border-color: var(--cg-hairline);
}

/* ---- 8-axis scorecard ----------------------------------------------- */

.cg-scorecard { display: grid; gap: .625rem; }
.cg-axis { display: grid; grid-template-columns: 9.5rem 1fr 2rem; gap: .75rem; align-items: center; }
.cg-axis-name { font-size: .75rem; font-weight: 600; color: var(--cg-muted); }
.cg-axis-score { font-size: .75rem; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.cg-axis-dots { display: flex; gap: .1875rem; }
.cg-axis-dots i {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--cg-surface-sunken);
}
.cg-axis-dots i.on { background: var(--cg-blue-500); }

/* ---- Kanban (ATS advanced, §6.4) ------------------------------------ */

.cg-kanban {
  display: flex; gap: 1rem; align-items: flex-start;
  overflow-x: auto; padding-bottom: .5rem;
  scroll-snap-type: x proximity;
}
.cg-kanban-col {
  flex: 0 0 17.5rem; width: 17.5rem;
  background: var(--cg-surface-sunken);
  border: 1px solid var(--cg-hairline);
  border-radius: 1rem; padding: .75rem;
  scroll-snap-align: start;
}
.cg-kanban-col.is-dragover { border-color: var(--cg-blue-400); background: var(--bs-primary-bg-subtle); }
.cg-kanban-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .625rem; padding-inline: .25rem;
}
.cg-kanban-count {
  font-size: .625rem; font-weight: 700; padding: .1rem .4rem;
  border-radius: 50rem; background: var(--cg-surface); color: var(--cg-muted);
  border: 1px solid var(--cg-hairline);
}
.cg-kanban-list { display: grid; gap: .5rem; min-height: 3rem; }
.cg-kanban-card {
  background: var(--cg-surface);
  border: 1px solid var(--cg-hairline);
  border-radius: .75rem; padding: .75rem;
  cursor: grab; box-shadow: var(--bs-box-shadow-sm);
}
.cg-kanban-card:active { cursor: grabbing; }
.cg-kanban-card.is-dragging { opacity: .45; }
/* Mobile: one stage at a time via the stage switcher */
@media (max-width: 767.98px) {
  .cg-kanban { display: block; }
  .cg-kanban-col { width: auto; flex: none; }
  .cg-kanban-col[hidden] { display: none; }
}

/* ---- Candidate cards (pool, §6.3) ---------------------------------- */

.cg-cand {
  display: flex; gap: .875rem; align-items: flex-start;
  background: var(--cg-surface); border: 1px solid var(--cg-hairline);
  border-radius: 1rem; padding: 1rem; box-shadow: var(--bs-box-shadow-sm);
}
.cg-cand:hover { border-color: var(--cg-blue-400); }
.cg-cand-masked .cg-cand-name { filter: none; }
.cg-cand-masked .cg-mask {
  display: inline-block; border-radius: .25rem;
  background: var(--cg-surface-sunken); color: transparent;
  user-select: none; padding-inline: .25rem;
}
.cg-avatar {
  width: 2.75rem; height: 2.75rem; border-radius: .875rem;
  object-fit: cover; flex: 0 0 auto;
  background: var(--cg-surface-sunken);
  display: grid; place-items: center;
  font-weight: 800; font-size: .8125rem; color: var(--cg-muted);
}
.cg-avatar-sm { width: 2rem; height: 2rem; border-radius: .625rem; font-size: .6875rem; }
.cg-avatar-lg { width: 4rem; height: 4rem; border-radius: 1.125rem; font-size: 1.125rem; }

/* ---- Credit meter (§6.3) -------------------------------------------- */

.cg-credits {
  border: 1px solid var(--cg-hairline); border-radius: 1rem;
  padding: .875rem 1rem; background: var(--cg-surface);
}
.cg-credits.is-warning { border-color: rgba(217,119,6,.4); background: rgba(217,119,6,.06); }
.cg-credits.is-critical { border-color: rgba(220,38,38,.4); background: rgba(220,38,38,.06); }
.cg-credits-value { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---- Upgrade lock (§6.2 — never a dead end) ------------------------- */

.cg-lock {
  position: relative; border: 1px dashed var(--cg-hairline);
  border-radius: 1rem; padding: 1.5rem; text-align: center;
  background: var(--cg-surface-sunken);
}
.cg-lock-icon {
  width: 2.5rem; height: 2.5rem; border-radius: .875rem;
  display: grid; place-items: center; margin: 0 auto .625rem;
  background: var(--bs-primary-bg-subtle); color: var(--cg-blue-500);
}
.cg-lock-title { font-weight: 700; font-size: .9375rem; }
.cg-lock-body { font-size: .8125rem; color: var(--cg-muted); max-width: 26rem; margin: .25rem auto .875rem; }
/* Overlay variant: blurs the real thing behind the prompt */
.cg-lock-overlay { position: relative; }
.cg-lock-overlay > .cg-lock-content { filter: blur(4px); pointer-events: none; user-select: none; }
.cg-lock-overlay > .cg-lock {
  position: absolute; inset: 0; display: grid; align-content: center;
  background: color-mix(in srgb, var(--cg-surface) 82%, transparent);
  border-style: solid;
}

/* ---- Slot picker (mocks / scheduling) ------------------------------- */

.cg-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .5rem; }
.cg-slot {
  border: 1px solid var(--cg-hairline); border-radius: .75rem;
  background: var(--cg-surface); padding: .5rem;
  font-size: .75rem; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums; cursor: pointer;
}
.cg-slot:hover:not(:disabled) { border-color: var(--cg-blue-400); color: var(--cg-blue-500); }
.cg-slot[aria-pressed="true"] {
  background: var(--cg-blue-500); border-color: var(--cg-blue-500); color: #fff;
  box-shadow: 0 6px 16px -6px rgba(46, 166, 114,.6);
}
.cg-slot:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

/* ---- Timeline ------------------------------------------------------- */

.cg-timeline { list-style: none; margin: 0; padding: 0 0 0 1.375rem; position: relative; }
.cg-timeline::before {
  content: ''; position: absolute; left: .3125rem; top: .5rem; bottom: .5rem;
  width: 2px; background: var(--cg-hairline);
}
.cg-timeline > li { position: relative; padding-bottom: 1.125rem; }
.cg-timeline > li::before {
  content: ''; position: absolute; left: -1.375rem; top: .3125rem;
  width: .75rem; height: .75rem; border-radius: 50%;
  background: var(--cg-surface); border: 2px solid var(--cg-hairline);
}
.cg-timeline > li.is-done::before { background: var(--cg-success); border-color: var(--cg-success); }
.cg-timeline > li.is-current::before {
  background: var(--cg-blue-500); border-color: var(--cg-blue-500);
  box-shadow: 0 0 0 4px rgba(46, 166, 114,.18);
}
.cg-timeline-title { font-size: .8125rem; font-weight: 700; }
.cg-timeline-meta { font-size: .6875rem; color: var(--cg-faint); }

/* ---- Heatmap (college readiness, bank health) ----------------------- */

.cg-heatmap { display: grid; gap: .25rem; }
.cg-heat-row { display: grid; gap: .25rem; align-items: center; }
.cg-heat-cell {
  aspect-ratio: 1; border-radius: .3125rem; min-height: 1.5rem;
  display: grid; place-items: center;
  font-size: .625rem; font-weight: 700; color: #fff;
  background: var(--cg-surface-sunken); color: var(--cg-faint);
}
.cg-heat-cell[data-level="1"] { background: rgba(46, 166, 114,.18); color: var(--cg-blue-700); }
.cg-heat-cell[data-level="2"] { background: rgba(46, 166, 114,.38); color: var(--cg-blue-800); }
.cg-heat-cell[data-level="3"] { background: rgba(46, 166, 114,.62); color: #fff; }
.cg-heat-cell[data-level="4"] { background: var(--cg-blue-500); color: #fff; }
.cg-heat-cell[data-level="5"] { background: var(--cg-blue-700); color: #fff; }

/* ---- Audit diff (§4 — before/after JSON) --------------------------- */

.cg-diff { font-family: var(--bs-font-monospace); font-size: .75rem; border-radius: .75rem;
           border: 1px solid var(--cg-hairline); overflow: hidden; }
.cg-diff-row { display: grid; grid-template-columns: 10rem 1fr; gap: 0; }
.cg-diff-row + .cg-diff-row { border-top: 1px solid var(--cg-hairline); }
.cg-diff-key { padding: .5rem .75rem; background: var(--cg-surface-sunken); font-weight: 700; }
.cg-diff-val { padding: .5rem .75rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.cg-diff-old { color: var(--cg-danger); text-decoration: line-through; }
.cg-diff-new { color: var(--cg-success); }

/* ---- Price table (reads price_book) -------------------------------- */

.cg-price-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.cg-price-card {
  border: 1px solid var(--cg-hairline); border-radius: 1.25rem;
  padding: 1.25rem; background: var(--cg-surface); position: relative;
}
.cg-price-card.is-featured {
  border-color: var(--cg-blue-400);
  box-shadow: 0 12px 32px -14px rgba(46, 166, 114,.45);
}
.cg-price-amount { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; }
.cg-price-unit { font-size: .75rem; color: var(--cg-muted); font-weight: 600; }
.cg-price-gst { font-size: .6875rem; color: var(--cg-faint); }

/* ---- Empty / skeleton --------------------------------------------- */

.cg-empty { text-align: center; padding: 2.5rem 1.25rem; }
.cg-empty-icon {
  width: 3rem; height: 3rem; border-radius: 1rem; margin: 0 auto .875rem;
  display: grid; place-items: center;
  background: var(--cg-surface-sunken); color: var(--cg-faint);
}
.cg-empty-title { font-weight: 700; font-size: .9375rem; }
.cg-empty-body { font-size: .8125rem; color: var(--cg-muted); max-width: 24rem; margin: .25rem auto 1rem; }

.cg-skel { background: var(--cg-surface-sunken); border-radius: .5rem; position: relative; overflow: hidden; }
.cg-skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  animation: cg-shimmer 1.4s infinite;
}
[data-bs-theme="dark"] .cg-skel::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
}
@keyframes cg-shimmer { 100% { transform: translateX(100%); } }

/* ---- Gradient help card (demo sidebar footer) --------------------- */

.cg-note {
  border-radius: 1rem; padding: .875rem;
  background: linear-gradient(135deg, var(--cg-blue-50), rgba(46, 166, 114,.08));
  border: 1px solid var(--cg-blue-100);
}
[data-bs-theme="dark"] .cg-note {
  background: linear-gradient(135deg, rgba(46, 166, 114,.12), rgba(46, 166, 114,.08));
  border-color: rgba(46, 166, 114,.28);
}

/* ---- Responsive table → cards (one decision, used everywhere) ----- */

@media (max-width: 767.98px) {
  .cg-table-cards thead { display: none; }
  .cg-table-cards tbody tr {
    display: block; background: var(--cg-surface);
    border: 1px solid var(--cg-hairline); border-radius: 1rem;
    padding: .75rem; margin-bottom: .625rem;
  }
  .cg-table-cards tbody td {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .3125rem 0 !important; border: 0;
  }
  .cg-table-cards tbody td::before {
    content: attr(data-label);
    font-size: .625rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--cg-faint); flex: 0 0 auto;
  }
  .cg-table-cards tbody td[data-label=""]::before { content: none; }
}

/* ---- Inline SVG charts -------------------------------------------- */

/* Charts stretch horizontally (preserveAspectRatio="none") and keep the exact pixel
   height the component asked for. height:auto here would let the 100-unit-wide viewBox
   dictate the height and blow the chart far past its card. */
.cg-chart { width: 100%; display: block; overflow: visible; }
.cg-chart .grid { stroke: var(--cg-hairline); stroke-width: 1; }
.cg-chart .axis { fill: var(--cg-faint); font-size: 10px; font-weight: 600; }
.cg-chart .bar { fill: var(--cg-blue-500); }
.cg-chart .bar-alt { fill: var(--cg-blue-200); }
[data-bs-theme="dark"] .cg-chart .bar-alt { fill: rgba(46, 166, 114,.35); }
.cg-chart .line { fill: none; stroke: var(--cg-blue-500); stroke-width: 2.5;
                  stroke-linecap: round; stroke-linejoin: round; }
.cg-chart .area { fill: rgba(46, 166, 114,.12); }
.cg-chart .dot { fill: var(--cg-blue-500); }
.cg-chart .funnel { fill: var(--cg-blue-500); }

/* ---- Utilities we genuinely need ---------------------------------- */

.cg-hairline-t { border-top: 1px solid var(--cg-hairline); }
.cg-hairline-b { border-bottom: 1px solid var(--cg-hairline); }
.cg-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cg-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Auth layout ---------------------------------------------------- */

.cg-auth-body { min-height: 100vh; }

.cg-auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
}
@media (min-width: 992px) {
  .cg-auth { grid-template-columns: 26rem minmax(0, 1fr); }
}

/* Decorative panel. Drops away under lg so the form is never below the fold. */
.cg-auth-panel {
  background: linear-gradient(160deg, var(--cg-blue-700), var(--cg-blue-900) 70%);
  color: #fff;
  padding: 2.5rem;
  align-items: center;
}
.cg-brand-invert, .cg-auth-panel a { color: #fff; }
.cg-auth-headline { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.cg-auth-sub { font-size: .875rem; color: rgba(255,255,255,.78); margin-top: .75rem; line-height: 1.6; }
.cg-auth-point { font-size: .8125rem; color: rgba(255,255,255,.88); }
.cg-auth-point .cg-icon { color: var(--cg-blue-300); }

.cg-auth-main {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 2rem 1rem;
}
.cg-auth-card { width: 100%; max-width: 27rem; }
.cg-auth-foot {
  margin: 1.5rem 0 0; font-size: .75rem; color: var(--cg-faint); text-align: center;
}
.cg-auth-foot a { color: inherit; text-decoration: none; }
.cg-auth-foot a:hover { color: var(--bs-body-color); }

.cg-auth-title { font-size: 1.375rem; font-weight: 800; letter-spacing: -.025em; margin: 0; }
.cg-auth-lead { font-size: .8125rem; color: var(--cg-muted); margin: .375rem 0 1.5rem; }

/* Role chooser on /signup */
.cg-role-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.cg-role {
  display: flex; align-items: flex-start; gap: .875rem;
  padding: 1.125rem; border-radius: 1rem;
  border: 1px solid var(--cg-hairline); background: var(--cg-surface);
  text-decoration: none; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cg-role:hover { border-color: var(--cg-blue-400); box-shadow: 0 8px 24px -14px rgba(46, 166, 114,.5); }
.cg-role-icon {
  width: 2.5rem; height: 2.5rem; border-radius: .875rem; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--bs-primary-bg-subtle); color: var(--cg-blue-500);
}
.cg-role-title { font-weight: 700; font-size: .9375rem; }
.cg-role-body { font-size: .75rem; color: var(--cg-muted); margin: .125rem 0 0; line-height: 1.5; }
.cg-role-free { font-size: .6875rem; font-weight: 700; color: var(--cg-success); margin-top: .375rem; }

/* OTP entry */
.cg-otp {
  font-size: 1.5rem; font-weight: 800; text-align: center;
  letter-spacing: .5em; text-indent: .5em;
  font-variant-numeric: tabular-nums;
  padding-block: .75rem;
}

/* ---- Public footer -------------------------------------------------- */

.cg-footer { border-top: 1px solid var(--cg-hairline); background: var(--cg-surface); margin-top: auto; }
.cg-footer-inner {
  max-width: 1440px; margin-inline: auto; padding: 2rem 1.5rem;
  display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between;
}
.cg-footer-links {
  display: grid; grid-template-columns: repeat(2, minmax(8rem, auto)); gap: .5rem 2rem;
  font-size: .8125rem;
}
.cg-footer-links a { color: var(--cg-muted); text-decoration: none; }
.cg-footer-links a:hover { color: var(--bs-body-color); }

/* ---- Hero (public home) --------------------------------------------- */

.cg-hero { padding: 3rem 0 2rem; text-align: center; }
.cg-hero h1 {
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  font-weight: 800; letter-spacing: -.035em; margin: 0;
}
.cg-hero p { font-size: 1rem; color: var(--cg-muted); max-width: 40rem; margin: 1rem auto 0; line-height: 1.6; }
.cg-hero-cta { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.75rem; }

/* ---- Test runner (§5.4) --------------------------------------------- */

.cg-test-bar {
  position: sticky; top: var(--cg-navbar-h); z-index: 1020;
  background: var(--cg-navbar-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--cg-hairline);
  border-radius: 1rem;
  padding: .875rem 1rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--bs-box-shadow-sm);
}
.cg-clock {
  font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Question number chip, so the legend text is not pushed around by it */
.cg-qnum {
  display: inline-grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: .5rem;
  background: var(--bs-primary-bg-subtle); color: var(--cg-blue-500);
  font-size: .75rem; font-weight: 800;
  margin-right: .5rem; vertical-align: 1px;
}

/* The whole option row is the hit target - important at 360px */
.cg-answer {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .75rem .875rem;
  border: 1px solid var(--cg-hairline); border-radius: .75rem;
  background: var(--cg-surface);
  font-size: .875rem; cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.cg-answer:hover { border-color: var(--cg-blue-400); }
.cg-answer:has(input:checked) {
  border-color: var(--cg-blue-500);
  background: var(--bs-primary-bg-subtle);
}
.cg-answer:has(input:focus-visible) { outline: 2px solid var(--cg-blue-500); outline-offset: 2px; }
.cg-answer-letter {
  flex: 0 0 auto; width: 1.25rem;
  font-weight: 800; font-size: .75rem; color: var(--cg-faint);
  padding-top: .0625rem;
}
.cg-answer:has(input:checked) .cg-answer-letter { color: var(--cg-blue-500); }

/* Review after submission */
.cg-answer.is-correct { border-color: rgba(5,150,105,.5); background: rgba(5,150,105,.07); }
.cg-answer.is-wrong   { border-color: rgba(220,38,38,.5); background: rgba(220,38,38,.07); }
.cg-answer.is-correct .cg-answer-letter { color: var(--cg-success); }
.cg-answer.is-wrong .cg-answer-letter   { color: var(--cg-danger); }
.cg-explain {
  border-left: 3px solid var(--cg-blue-400);
  padding: .5rem .875rem; margin-top: .75rem;
  background: var(--cg-surface-sunken); border-radius: 0 .5rem .5rem 0;
  font-size: .8125rem;
}

/* ---------------------------------------------------------------------------
   Prose — long-form CMS content (legal pages, landing copy).
   The rest of the product is dense, scannable UI; a privacy policy is the one
   place someone actually reads paragraphs, so it gets a measure and a rhythm.
   Capped at ~68 characters, which is where the eye stops tracking reliably.
   --------------------------------------------------------------------------- */
.cg-prose { max-width: 68ch; }
.cg-prose h2 { font-size: 1.25rem; font-weight: 700; margin: 2rem 0 .5rem; }
.cg-prose h3 { font-size: 1.0625rem; font-weight: 600; margin: 1.5rem 0 .375rem; }
.cg-prose h4 { font-size: .9375rem; font-weight: 600; margin: 1.25rem 0 .25rem; }
.cg-prose h2:first-child,
.cg-prose h3:first-child { margin-top: 0; }
.cg-prose p,
.cg-prose li { font-size: .9375rem; line-height: 1.7; color: var(--bs-body-color); }
.cg-prose p { margin-bottom: 1rem; }
.cg-prose ul,
.cg-prose ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.cg-prose li { margin-bottom: .375rem; }
.cg-prose hr { margin: 2rem 0; opacity: .25; }
.cg-prose a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Job board — search bar, filter rail, and the card grid.

   Shaped like the Indian job portals people already know (a fat search bar up
   top, facets down the left, dense result cards), because a job seeker should
   not have to learn a new interface to find work. The visual language stays
   ours: our brand blue, our 16px radius, our type scale — a familiar SHAPE,
   not a copied skin.
   --------------------------------------------------------------------------- */

/* The search bar. One row on desktop, stacked on phones, and it is a plain GET
   form underneath so it works with JS off and every search is a shareable URL. */
.cg-searchbar {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.2fr auto;
  gap: .5rem;
  align-items: stretch;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  padding: .4rem .4rem .4rem 1rem;
  box-shadow: var(--bs-box-shadow-lg);
}
.cg-searchbar .cg-sf {
  display: flex; align-items: center; gap: .5rem;
  min-width: 0;
  border-right: 1px solid var(--bs-border-color);
  padding-right: .5rem;
}
.cg-searchbar .cg-sf:last-of-type { border-right: 0; }
.cg-searchbar input,
.cg-searchbar select {
  border: 0; background: transparent; box-shadow: none !important;
  padding: .35rem 0; font-size: .9375rem; color: var(--bs-body-color);
  width: 100%; min-width: 0;
}
.cg-searchbar select { appearance: none; cursor: pointer; }
.cg-searchbar input:focus,
.cg-searchbar select:focus { outline: 2px solid var(--cg-blue-400); outline-offset: 3px; }
.cg-searchbar .btn { border-radius: 999px; padding-inline: 1.5rem; white-space: nowrap; }
.cg-searchbar .cg-sf-icon { color: var(--bs-secondary-color); flex: 0 0 auto; }

@media (max-width: 767.98px) {
  .cg-searchbar {
    grid-template-columns: 1fr;
    border-radius: 1rem;
    padding: .75rem;
  }
  .cg-searchbar .cg-sf {
    border-right: 0;
    border-bottom: 1px solid var(--bs-border-color);
    padding: .25rem 0;
  }
  .cg-searchbar .cg-sf:last-of-type { border-bottom: 0; }
}

/* The filter rail. A details/summary accordion so it collapses on phones with
   no JavaScript at all. */
.cg-rail { position: sticky; top: calc(var(--cg-navbar-h) + 1rem); }
.cg-rail-group { border-bottom: 1px solid var(--bs-border-color); padding: .75rem 0; }
.cg-rail-group:last-child { border-bottom: 0; }
.cg-rail-group > summary {
  cursor: pointer; list-style: none;
  font-size: .8125rem; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
}
.cg-rail-group > summary::-webkit-details-marker { display: none; }
.cg-rail-group > summary::after {
  content: ""; width: .5rem; height: .5rem; flex: 0 0 auto;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease;
  color: var(--bs-secondary-color);
}
.cg-rail-group[open] > summary::after { transform: rotate(-135deg); }
.cg-rail-opt {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem 0; font-size: .8125rem;
}
.cg-rail-opt label { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.cg-rail-count { color: var(--bs-secondary-color); font-size: .75rem; font-variant-numeric: tabular-nums; }

/* The grid the results live in. auto-fill rather than fixed columns, so it
   reflows on its own from phone to ultrawide without a breakpoint per size. */
.cg-jobgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: .875rem;
}

.cg-jobcard {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  padding: 1rem;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cg-jobcard:hover,
.cg-jobcard:focus-within {
  border-color: var(--cg-blue-400);
  box-shadow: var(--bs-box-shadow-lg);
}
@media (prefers-reduced-motion: no-preference) {
  .cg-jobcard:hover { transform: translateY(-2px); }
}
/* A boosted job is marked with a rule down its edge rather than a loud fill:
   the employer paid for prominence, not for the card to shout. */
.cg-jobcard.is-boosted { border-inline-start: 3px solid var(--cg-gold); }

.cg-jobcard-title { font-size: .9375rem; font-weight: 700; line-height: 1.35; margin: 0 0 .125rem; }
.cg-jobcard-title a { color: inherit; text-decoration: none; }
.cg-jobcard-title a:hover { color: var(--bs-primary); }
.cg-jobcard-co { font-size: .8125rem; color: var(--bs-secondary-color); margin: 0 0 .625rem; }

.cg-jobcard-facts {
  display: flex; flex-wrap: wrap; gap: .25rem .875rem;
  font-size: .75rem; color: var(--bs-secondary-color);
  margin-bottom: .625rem;
}
.cg-jobcard-facts span { display: inline-flex; align-items: center; gap: .3rem; }

.cg-jobcard-skills { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .75rem; }
.cg-jobcard-skill {
  font-size: .6875rem; padding: .15rem .45rem;
  border-radius: .375rem;
  background: var(--cg-surface-sunken); color: var(--bs-secondary-color);
  white-space: nowrap;
}

.cg-jobcard-foot {
  margin-top: auto; padding-top: .625rem;
  border-top: 1px solid var(--bs-border-color);
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-size: .6875rem; color: var(--bs-secondary-color);
}

/* Applied-to jobs stay visible but recede — a seeker scanning the grid should
   not keep re-reading the ones they have already sent. */
.cg-jobcard.is-applied { background: var(--cg-surface-sunken); }

/* Filter groups ship collapsed in the markup, so a phone shows the search bar and
   then the jobs — not four expanded facet lists the seeker has to scroll past.
   From lg up they are forced open, because a desktop rail with everything shut is
   just as useless in the other direction. Verified in-browser: overriding the
   closed state this way works in current engines, and if it ever stops, the page
   degrades to collapsed groups the user can still tap open. */
@media (min-width: 992px) {
  .cg-rail-group:not([open]) > .cg-rail-body { display: block !important; }
  .cg-rail-group > summary::after { transform: rotate(-135deg); }
}

/* ============================================================================
   Home page sections (§15)
   Section band, popular chips and the role/city tile grids. The shape is the
   one an Indian job portal visitor already knows; the tokens are ours, so
   nothing here introduces a new colour, radius or shadow.
   ========================================================================= */

.cg-sec { margin-bottom: 3rem; }

.cg-sec-head {
  display: flex; flex-wrap: wrap; gap: .75rem;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: 1rem;
}
.cg-sec-more {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .875rem; font-weight: 600; text-decoration: none;
  white-space: nowrap;
}
.cg-sec-more:hover { text-decoration: underline; }

/* Popular-role chips under the hero search. */
.cg-chiprow {
  display: flex; flex-wrap: wrap; gap: .375rem;
  align-items: center; justify-content: center;
}
.cg-chiprow-label { font-size: .8125rem; color: var(--cg-muted); }

.cg-chip {
  display: inline-block;
  padding: .1875rem .625rem;
  font-size: .8125rem; font-weight: 500;
  color: var(--bs-body-color); text-decoration: none;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-pill);
  transition: border-color .15s ease, color .15s ease;
}
.cg-chip:hover, .cg-chip:focus-visible {
  border-color: var(--cg-blue-400);
  color: var(--cg-blue-600);
}

/* "Browse by role" / "Browse by city": a label and the count it leads to.
   The count is the whole point — a tile without one is a guess. */
.cg-tilegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .5rem;
}

.cg-tile {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem .75rem;
  text-decoration: none; color: var(--bs-body-color);
  background: var(--cg-surface-2);
  border: 1px solid transparent;
  border-radius: var(--bs-border-radius);
  transition: border-color .15s ease, background-color .15s ease;
}
.cg-tile:hover, .cg-tile:focus-visible {
  border-color: var(--cg-blue-400);
  background: var(--bs-body-bg);
}
.cg-tile-label { font-size: .875rem; font-weight: 500; min-width: 0; }
.cg-tile-n {
  flex: none;
  font-size: .75rem; font-variant-numeric: tabular-nums;
  color: var(--cg-muted);
}

/* ============================================================================
   Notification centre (§12 M12)
   The bell count in the portal header, and the list behind it.
   ========================================================================= */

.cg-bell { position: relative; display: inline-flex; }

.cg-bell-count {
  position: absolute; top: -.125rem; inset-inline-end: -.125rem;
  min-width: 1.05rem; padding: 0 .25rem;
  font-size: .625rem; font-weight: 700; line-height: 1.05rem;
  text-align: center;
  color: #fff; background: var(--bs-danger);
  border: 2px solid var(--bs-body-bg);
  border-radius: var(--bs-border-radius-pill);
  pointer-events: none;                 /* the button underneath owns the click */
}

.cg-notiflist {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  overflow: hidden;
  background: var(--bs-body-bg);
}

.cg-notif {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .75rem;
  align-items: start;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.cg-notif:last-child { border-bottom: 0; }
.cg-notif.is-new { background: var(--cg-surface-2); }

/* The dot is the only thing marking a row as new, so it holds its column whether or
   not it is visible — otherwise read and unread rows would not line up. */
.cg-notif-dot {
  width: .5rem; height: .5rem; margin-top: .4rem;
  border-radius: 50%;
  background: transparent;
}
.cg-notif.is-new .cg-notif-dot { background: var(--cg-blue-500); }

.cg-notif-title { margin: 0; font-size: .875rem; font-weight: 600; }
.cg-notif-body  { margin: 0; font-size: .8125rem; color: var(--cg-muted); }
.cg-notif-when  {
  flex: none;
  font-size: .75rem; color: var(--cg-muted); white-space: nowrap;
}

@media (max-width: 575.98px) {
  /* The timestamp drops under the text rather than squeezing it to two words. */
  .cg-notif { grid-template-columns: auto 1fr; }
  .cg-notif-when { grid-column: 2; }
}

/* A compact stand-in for verified_badge where a full pill would wrap — dense tables. */
.cg-verified-mark {
  display: inline-flex; vertical-align: -.15em;
  color: var(--bs-success);
}

/* ============================================================================
   Screening desk (§6.6)
   A booking row: who on the left, a date/time/submit cluster on the right.
   ========================================================================= */

.cg-bookrow {
  display: flex; flex-wrap: wrap; gap: .5rem;
  align-items: center; justify-content: space-between;
  padding: .625rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}
.cg-bookrow:last-child { border-bottom: 0; }

.cg-bookform {
  display: flex; gap: .375rem; align-items: center;
  flex: none;
}
.cg-bookform input[type="date"] { width: 9.5rem; }
.cg-bookform input[type="time"] { width: 7rem; }

@media (max-width: 575.98px) {
  /* The form takes the full width under the name rather than shrinking the inputs
     to a size nobody can type a date into. */
  .cg-bookform { width: 100%; }
  .cg-bookform input[type="date"],
  .cg-bookform input[type="time"] { width: auto; flex: 1 1 0; min-width: 0; }
}

/* ============================================================================
   Expert interviewer cards (§5.5)
   The one product where a candidate picks the person, so the card has to carry
   enough to choose on: experience, where they work, stars, and their rate.
   ========================================================================= */

.cg-expertgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: .5rem;
}

.cg-expert { display: block; cursor: pointer; margin: 0; }

/* The radio is the control; the card is its label. Kept reachable rather than
   display:none so it stays in the tab order and screen readers announce it. */
.cg-expert-radio {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}

.cg-expert-body {
  display: flex; flex-direction: column; gap: .25rem;
  padding: .75rem;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cg-expert-radio:checked + .cg-expert-body {
  border-color: var(--cg-blue-500);
  box-shadow: 0 0 0 1px var(--cg-blue-500);
}
.cg-expert-radio:focus-visible + .cg-expert-body {
  outline: 2px solid var(--cg-blue-500);
  outline-offset: 2px;
}

.cg-expert-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  font-size: .875rem;
}
.cg-expert-rate { font-weight: 700; white-space: nowrap; }
.cg-expert-meta { font-size: .75rem; color: var(--cg-muted); }
.cg-expert-bio  { font-size: .75rem; margin-top: .25rem; }

/* ---- Landing pages (§15) -------------------------------------------- */

/* The hero eyebrow sits centred above the headline, in the brand accent. */
.cg-hero .cg-eyebrow {
  color: var(--cg-blue-500); margin-bottom: .5rem; font-size: .6875rem;
}
.cg-hero-sub { max-width: 44rem; }

/* Feature grid reuses .card + .cg-lock-icon; this just tightens the copy. */
.cg-feature-title { font-size: 1.0625rem; font-weight: 700; margin: 0 0 .375rem; }

/* Split highlight: text beside a visual (a masked card or a big number). */
.cg-bigstat {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: .25rem; min-height: 15rem; border-radius: var(--cg-radius, 1rem);
  border: 1px solid var(--cg-hairline);
  background: linear-gradient(150deg, var(--cg-surface), var(--cg-surface-2));
}
.cg-bigstat-value {
  font-size: clamp(3rem, 9vw, 4.5rem); font-weight: 800; line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(135deg, var(--cg-blue-500), var(--cg-blue-700));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cg-bigstat-label { font-size: 1rem; font-weight: 700; }
.cg-bigstat-sub { font-size: .8125rem; color: var(--cg-muted); max-width: 18rem; }

/* Bullet list with a check glyph, used in split sections. */
.cg-ticklist { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.cg-ticklist li {
  position: relative; padding-left: 1.75rem; font-size: .9375rem;
  color: var(--bs-body-color); line-height: 1.5;
}
.cg-ticklist li::before {
  content: ""; position: absolute; left: 0; top: .05em;
  width: 1.25rem; height: 1.25rem; border-radius: 999px;
  background: color-mix(in srgb, var(--cg-blue-500) 15%, transparent);
}
.cg-ticklist li::after {
  content: ""; position: absolute; left: .4rem; top: .38em;
  width: .45rem; height: .22rem; border-left: 2px solid var(--cg-blue-500);
  border-bottom: 2px solid var(--cg-blue-500); transform: rotate(-45deg);
}

/* FAQ: native <details> so it needs no JavaScript and no inline handler (CSP). */
.cg-faq { display: grid; gap: .75rem; max-width: 52rem; }
.cg-faq-item {
  border: 1px solid var(--cg-hairline); border-radius: .75rem;
  background: var(--cg-surface); padding: 0 1rem;
}
.cg-faq-item summary {
  cursor: pointer; list-style: none; padding: 1rem 0; font-weight: 600;
  font-size: .9375rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.cg-faq-item summary::-webkit-details-marker { display: none; }
.cg-faq-item summary::after {
  content: "+"; font-size: 1.25rem; font-weight: 400; color: var(--cg-muted); line-height: 1;
}
.cg-faq-item[open] summary::after { content: "\2212"; }
.cg-faq-item p { margin: 0 0 1rem; font-size: .875rem; color: var(--cg-muted); line-height: 1.6; }

/* Final call-to-action band. */
.cg-cta {
  text-align: center; border-radius: 1.25rem; padding: 2.5rem 1.5rem;
  border: 1px solid var(--cg-hairline);
  background: linear-gradient(150deg, var(--cg-surface-2), var(--cg-surface));
}
.cg-cta h2 { font-size: clamp(1.375rem, 3.5vw, 1.875rem); font-weight: 800; letter-spacing: -.03em; margin: 0; }
.cg-cta p { color: var(--cg-muted); margin: .625rem auto 0; max-width: 34rem; }

/* ============================================================================
   Premium Public Portal & Modules Styling
   ========================================================================= */

/* Top floating announcement banner */
.cg-top-banner {
  display: inline-flex; align-items: center; gap: .625rem;
  padding: .375rem .875rem;
  background: linear-gradient(135deg, rgba(46, 166, 114,.12), rgba(126, 208, 166,.18));
  border: 1px solid rgba(46, 166, 114,.28);
  border-radius: 999px;
  font-size: .8125rem; font-weight: 600;
  color: var(--bs-body-color);
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 10px -2px rgba(46, 166, 114,.15);
  transition: transform .15s ease, border-color .15s ease;
}
.cg-top-banner:hover {
  border-color: var(--cg-blue-400);
  transform: translateY(-1px);
}
.cg-top-banner-badge {
  background: var(--cg-blue-500);
  color: #fff;
  font-size: .6875rem; font-weight: 700;
  padding: .15rem .5rem; border-radius: 999px;
  letter-spacing: .02em;
}

/* Gradient text accent */
.cg-text-gradient {
  background: linear-gradient(135deg, var(--cg-blue-500) 0%, #1A7A52 50%, #155E40 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

/* Modules navigation dropdown */
.cg-modules-dropdown {
  min-width: 22rem;
  padding: .75rem;
  border-radius: 1rem;
  border: 1px solid var(--cg-hairline);
  box-shadow: 0 20px 40px -15px rgba(0,0,0,.15);
  background: var(--bs-body-bg);
}
.cg-module-nav-item {
  display: flex; align-items: flex-start; gap: .875rem;
  padding: .625rem .75rem;
  border-radius: .75rem;
  text-decoration: none;
  color: var(--bs-body-color);
  transition: background-color .12s ease;
}
.cg-module-nav-item:hover {
  background-color: var(--cg-surface-sunken);
  color: var(--bs-primary);
}
.cg-module-nav-icon {
  width: 2.25rem; height: 2.25rem; border-radius: .625rem;
  display: grid; place-items: center;
  flex: 0 0 auto;
  background: var(--bs-primary-bg-subtle);
  color: var(--cg-blue-500);
}
.cg-module-nav-title {
  font-size: .875rem; font-weight: 700; line-height: 1.25; margin-bottom: .125rem;
}
.cg-module-nav-desc {
  font-size: .75rem; color: var(--cg-muted); line-height: 1.4; margin: 0;
}

/* Trust verification strip */
.cg-trust-strip {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .75rem 1.5rem;
  padding: .875rem 1.25rem;
  margin: 1.5rem auto 2.5rem;
  max-width: 54rem;
  background: var(--cg-surface);
  border: 1px solid var(--cg-hairline);
  border-radius: 999px;
  box-shadow: 0 4px 15px -4px rgba(0,0,0,.04);
}
.cg-trust-item {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8125rem; font-weight: 600;
  color: var(--cg-muted);
}
.cg-trust-item .cg-icon { color: var(--cg-success); }

/* Feature highlight banner cards */
.cg-feature-banner {
  border: 1px solid var(--cg-hairline);
  border-radius: 1.5rem;
  background: linear-gradient(145deg, var(--cg-surface), var(--cg-surface-2));
  padding: 2.25rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.06);
}
.cg-feature-banner::before {
  content: ""; position: absolute;
  top: -40%; right: -20%;
  width: 28rem; height: 28rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 166, 114,.07) 0%, transparent 70%);
  pointer-events: none;
}

/* Modules showcase grid */
.cg-modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.25rem;
}
.cg-module-card {
  border: 1px solid var(--cg-hairline);
  border-radius: 1.25rem;
  background: var(--cg-surface);
  padding: 1.5rem;
  display: flex; flex-direction: column;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  position: relative;
}
.cg-module-card:hover {
  transform: translateY(-3px);
  border-color: var(--cg-blue-400);
  box-shadow: 0 16px 36px -12px rgba(46, 166, 114,.15);
}
.cg-module-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: .2rem .6rem; border-radius: 999px;
  background: var(--bs-primary-bg-subtle); color: var(--cg-blue-500);
  margin-bottom: 1rem;
}
.cg-module-card-icon {
  width: 2.75rem; height: 2.75rem; border-radius: .875rem;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--cg-blue-500), var(--cg-blue-700));
  color: #fff;
  margin-bottom: 1rem;
  box-shadow: 0 6px 16px -4px rgba(46, 166, 114,.4);
}
.cg-module-title {
  font-size: 1.125rem; font-weight: 800; margin-bottom: .5rem; line-height: 1.3;
}
.cg-module-desc {
  font-size: .875rem; color: var(--cg-muted); line-height: 1.6; margin-bottom: 1rem;
}
.cg-module-features {
  list-style: none; padding: 0; margin: 0 0 1.25rem;
  display: grid; gap: .5rem;
  font-size: .8125rem; color: var(--bs-body-color);
}
.cg-module-features li {
  display: flex; align-items: center; gap: .5rem;
}
.cg-module-features li .cg-icon {
  color: var(--cg-success); flex: 0 0 auto;
}

/* Marketplace comparison card */
.cg-comparison-card {
  border: 1px solid var(--cg-hairline);
  border-radius: 1.5rem;
  background: var(--cg-surface);
  overflow: hidden;
  box-shadow: 0 12px 32px -12px rgba(0,0,0,.08);
}
.cg-comp-head {
  padding: 1.25rem 1.5rem;
  background: var(--cg-surface-sunken);
  border-bottom: 1px solid var(--cg-hairline);
  font-weight: 700; font-size: .9375rem;
}
.cg-comp-row {
  display: grid; grid-template-columns: 1fr 1fr;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--cg-hairline);
  font-size: .875rem;
  align-items: center;
}
.cg-comp-row:last-child { border-bottom: 0; }
.cg-comp-bad { color: var(--cg-muted); }
.cg-comp-good { font-weight: 600; color: var(--bs-body-color); }
@media (max-width: 767.98px) {
  .cg-comp-row { grid-template-columns: 1fr; gap: .5rem; }
}

/* 4-Column Modern Public Footer — always deep navy, light text, green link hover. */
.cg-footer-modern {
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: var(--cg-footer-bg);
  color: #A9BDD0;
  padding: 3.5rem 1.5rem 2rem;
  margin-top: auto;
}
.cg-footer-modern .cg-page-sub,
.cg-footer-modern p { color: #A9BDD0; }
.cg-footer-modern-inner {
  max-width: 1440px; margin-inline: auto;
}
.cg-footer-col-title {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #8CA3B8; margin-bottom: 1rem;
}
.cg-footer-nav {
  display: flex; flex-direction: column; gap: .625rem;
}
.cg-footer-nav a {
  font-size: .875rem; color: #A9BDD0; text-decoration: none;
  transition: color .12s ease;
}
.cg-footer-nav a:hover { color: var(--cg-blue-500); }
.cg-footer-bottom {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 1rem;
  font-size: .8125rem; color: #6B8299;
}

/* Naukri-Style Job Category Cards */
.cg-cat-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.25rem;
  background: var(--cg-surface);
  border: 1px solid var(--cg-hairline);
  border-radius: 1rem;
  transition: all .2s ease;
  position: relative;
}
.cg-cat-card:hover {
  transform: translateY(-2px);
  border-color: var(--bs-primary);
  box-shadow: 0 8px 24px -8px rgba(46, 166, 114,.2);
}
.cg-cat-icon {
  width: 2.75rem; height: 2.75rem;
  border-radius: .75rem;
  display: grid; place-items: center;
  background: var(--cg-surface-sunken);
  color: var(--bs-primary);
  margin-bottom: .875rem;
  transition: all .2s ease;
}
.cg-cat-card:hover .cg-cat-icon {
  background: var(--bs-primary);
  color: #fff;
}
.cg-cat-title {
  font-size: .9375rem; font-weight: 700;
  color: var(--bs-body-color);
  margin-bottom: .25rem;
  line-height: 1.3;
}
.cg-cat-sub {
  font-size: .75rem; color: var(--cg-muted);
  margin-bottom: 0; line-height: 1.4;
}
.cg-cat-arrow {
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  color: var(--cg-faint);
  transition: all .2s ease;
}
.cg-cat-card:hover .cg-cat-arrow {
  color: var(--bs-primary);
  transform: translateX(2px);
}

/* Naukri-Style City Cards */
.cg-city-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1rem;
  background: var(--cg-surface);
  border: 1px solid var(--cg-hairline);
  border-radius: .75rem;
  text-decoration: none;
  color: var(--bs-body-color);
  transition: all .15s ease;
}
.cg-city-card:hover {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
  transform: translateY(-1px);
}
.cg-city-icon {
  color: var(--cg-muted);
}
.cg-city-card:hover .cg-city-icon {
  color: var(--bs-primary);
}
.cg-city-name {
  font-weight: 600; font-size: .875rem;
}
.cg-city-badge {
  font-size: .75rem; font-weight: 600;
  color: var(--cg-muted);
}

/* Naukri-Style Company Cards */
.cg-company-card {
  padding: 1.25rem;
  background: var(--cg-surface);
  border: 1px solid var(--cg-hairline);
  border-radius: 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all .2s ease;
}
.cg-company-card:hover {
  border-color: var(--bs-primary);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.08);
}
.cg-company-avatar {
  width: 2.75rem; height: 2.75rem;
  border-radius: .75rem;
  background: linear-gradient(135deg, var(--cg-blue-500), var(--cg-blue-700));
  color: #fff;
  font-weight: 800; font-size: .9375rem;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.cg-company-name {
  font-size: .9375rem; font-weight: 700;
  color: var(--bs-body-color);
  line-height: 1.3;
}

/* Platform Highlight Icons */
.cg-highlight-icon {
  width: 3.25rem; height: 3.25rem;
  border-radius: 1rem;
  display: grid; place-items: center;
}

/* ==========================================================================
   Inner Audience Pages Premium Styling & Alignment Fixes
   ========================================================================== */
.cg-inner-hero {
  padding: 2.25rem 0 3.25rem;
  text-align: left;
}
.cg-inner-hero-left {
  text-align: left !important;
}
.cg-inner-hero-left h1 {
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--bs-heading-color);
  margin-bottom: 1rem;
  text-align: left !important;
}
.cg-inner-hero-left .cg-lead {
  font-size: 1.0625rem;
  color: var(--cg-muted);
  line-height: 1.6;
  max-width: 40rem;
  margin: 0 0 1.5rem !important;
  text-align: left !important;
}

/* Premium Checklist */
.cg-checklist {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 1.75rem;
  text-align: left !important;
}
.cg-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--bs-body-color);
  text-align: left !important;
}
.cg-checklist-item .cg-icon {
  color: var(--cg-success);
  flex-shrink: 0;
  margin-top: .15rem;
}

/* Hero Auth Card */
.cg-hero-auth-card {
  border: 1px solid var(--cg-hairline);
  background: var(--cg-surface);
  border-radius: 1.25rem;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.08);
  overflow: hidden;
  text-align: left !important;
}
.cg-hero-auth-tabs {
  background: var(--cg-surface-sunken);
  padding: .375rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .375rem;
  border-bottom: 1px solid var(--cg-hairline);
}
.cg-hero-auth-tab {
  border: 0;
  background: transparent;
  padding: .625rem 1rem;
  border-radius: .75rem;
  font-weight: 700;
  font-size: .875rem;
  color: var(--cg-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transition: all .15s ease;
  cursor: pointer;
  text-decoration: none;
}
.cg-hero-auth-tab:hover {
  color: var(--bs-body-color);
}
.cg-hero-auth-tab.active {
  background: var(--cg-surface);
  color: var(--bs-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.cg-hero-auth-body {
  padding: 1.5rem;
  text-align: left !important;
}
@media (min-width: 576px) {
  .cg-hero-auth-body {
    padding: 1.75rem;
  }
}

/* Strict left-alignment and resets for forms inside card */
.cg-hero-auth-body form {
  text-align: left !important;
}
.cg-hero-auth-body .form-label,
.cg-hero-auth-body legend.form-label {
  text-align: left !important;
  display: block;
  font-weight: 600;
  font-size: .8125rem;
  margin-bottom: .375rem;
}
.cg-hero-auth-body .cg-role {
  text-align: left !important;
  border: 1px solid var(--cg-hairline);
  border-radius: .75rem;
  padding: .75rem 1rem;
  transition: all .15s ease;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .5rem;
  cursor: pointer;
}
.cg-hero-auth-body .cg-role:hover {
  border-color: var(--bs-primary);
  background: var(--cg-surface-sunken);
}
.cg-hero-auth-body .cg-role-title {
  font-weight: 700;
  font-size: .875rem;
  color: var(--bs-body-color);
  display: block;
  text-align: left !important;
}
.cg-hero-auth-body .cg-role-body {
  font-size: .75rem !important;
  color: var(--cg-muted) !important;
  margin: .125rem 0 0 !important;
  line-height: 1.35 !important;
  text-align: left !important;
}
.cg-hero-auth-body .form-check {
  text-align: left !important;
}
.cg-hero-auth-body .form-check-label {
  text-align: left !important;
}
.cg-hero-auth-body .form-text {
  text-align: left !important;
  margin-top: .25rem;
}

/* Modern Audience Feature Cards */
.cg-audience-feature-card {
  height: 100%;
  padding: 1.75rem;
  border-radius: 1.25rem;
  border: 1px solid var(--cg-hairline);
  background: var(--cg-surface);
  transition: all .2s ease;
  display: flex;
  flex-direction: column;
}
.cg-audience-feature-card:hover {
  transform: translateY(-3px);
  border-color: var(--bs-primary);
  box-shadow: 0 12px 32px -12px rgba(46, 166, 114,.15);
}
.cg-feature-badge-icon {
  width: 3.25rem; height: 3.25rem;
  border-radius: 1rem;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--bs-primary-bg-subtle), var(--cg-surface-sunken));
  color: var(--bs-primary);
  margin-bottom: 1.25rem;
}

/* ==========================================================================
   Premium Inner Landing Page Grid & Components
   ========================================================================== */

.cg-landing-wrap {
  max-width: 1240px;
  margin-inline: auto;
  width: 100%;
}

.cg-landing-hero {
  padding: 2rem 0 3.5rem;
  position: relative;
}

/* Hero Auth Box */
.cg-auth-box {
  background: var(--cg-surface);
  border: 1px solid var(--cg-hairline);
  border-radius: 1.25rem;
  box-shadow: 0 20px 48px -12px rgba(0,0,0,.09);
  overflow: hidden;
}

.cg-auth-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: .375rem;
  background: var(--cg-surface-sunken);
  border-bottom: 1px solid var(--cg-hairline);
  gap: .375rem;
}

.cg-auth-tab-btn {
  border: 0;
  background: transparent;
  padding: .625rem 1rem;
  border-radius: .75rem;
  font-size: .875rem;
  font-weight: 700;
  color: var(--cg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transition: all .2s ease;
  cursor: pointer;
}

.cg-auth-tab-btn:hover {
  color: var(--bs-body-color);
}

.cg-auth-tab-btn.is-active {
  background: var(--cg-surface);
  color: var(--bs-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.cg-auth-content {
  padding: 1.5rem;
}
@media (min-width: 576px) {
  .cg-auth-content {
    padding: 1.75rem;
  }
}

.cg-auth-tab-panel {
  display: none;
}
.cg-auth-tab-panel.is-active {
  display: block;
  animation: cgFadeIn .2s ease;
}

@keyframes cgFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Role Selector Compact styling inside Hero Card */
.cg-auth-box .cg-role {
  padding: .625rem .75rem !important;
  margin-bottom: .375rem !important;
  border-radius: .625rem !important;
  gap: .625rem !important;
}
.cg-auth-box .cg-role-title {
  font-size: .8125rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
.cg-auth-box .cg-role-body {
  font-size: .6875rem !important;
  margin-top: .1rem !important;
  line-height: 1.3 !important;
}

/* Horizontal Process Step Cards (Grid) */
.cg-process-card {
  height: 100%;
  padding: 1.5rem;
  background: var(--cg-surface);
  border: 1px solid var(--cg-hairline);
  border-radius: 1.25rem;
  position: relative;
  transition: all .2s ease;
  display: flex;
  flex-direction: column;
}
.cg-process-card:hover {
  transform: translateY(-2px);
  border-color: var(--bs-primary);
  box-shadow: 0 8px 24px -8px rgba(46, 166, 114,.15);
}
.cg-process-step-num {
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .05em;
  color: var(--bs-primary);
  background: var(--bs-primary-bg-subtle);
  border: 1px solid var(--cg-hairline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .625rem;
  margin-bottom: 1rem;
}
.cg-process-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--bs-body-color);
  margin-bottom: .5rem;
  line-height: 1.3;
}
.cg-process-desc {
  font-size: .8125rem;
  color: var(--cg-muted);
  line-height: 1.5;
  margin-bottom: 0;
}

/* Hero KPI Bar */
.cg-kpi-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--cg-surface);
  border: 1px solid var(--cg-hairline);
  border-radius: 1rem;
  box-shadow: 0 4px 16px -4px rgba(0,0,0,.04);
}
.cg-kpi-item {
  display: flex;
  flex-direction: column;
}
.cg-kpi-val {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--bs-primary);
  line-height: 1.1;
}
.cg-kpi-lbl {
  font-size: .75rem;
  font-weight: 600;
  color: var(--cg-muted);
  margin-top: .25rem;
}

/* Modern 2-Column FAQ Grid */
.cg-faq-grid {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  width: 100%;
}
.cg-faq-card {
  border: 1px solid var(--cg-hairline);
  background: var(--cg-surface);
  border-radius: 1rem;
  overflow: hidden;
  transition: all .2s ease;
}
.cg-faq-card:hover {
  border-color: var(--cg-blue-400);
}
.cg-faq-card[open] {
  border-color: var(--bs-primary);
  box-shadow: 0 4px 20px -6px rgba(46, 166, 114,.12);
}
.cg-faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.125rem 1.25rem;
  font-weight: 700;
  font-size: .9375rem;
  color: var(--bs-body-color);
  cursor: pointer;
  list-style: none;
  user-select: none;
  gap: 1rem;
}
.cg-faq-question::-webkit-details-marker { display: none; }
.cg-faq-toggle-icon {
  color: var(--cg-muted);
  transition: transform .2s ease;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.cg-faq-card[open] .cg-faq-toggle-icon {
  transform: rotate(180deg);
  color: var(--bs-primary);
}
.cg-faq-answer {
  padding: 0 1.25rem 1.25rem;
  font-size: .875rem;
  color: var(--cg-muted);
  line-height: 1.65;
}






/* ==== Public marketing portal — premium surface (§15) ================== */
/* An ambient tinted wash plus a soft aurora behind the top of every public
   page, so the marketing side reads as a designed surface, not flat white.
   Scoped to .cg-public, so the signed-in portals are untouched. Pure CSS and
   no images — the strict CSP has nothing extra to load. Tokens flip in dark. */

.cg-public {
  position: relative;
  isolation: isolate;
  /* The page never resolves to flat white: a faint blue-grey wash persists the
     whole way down, and cards (on --cg-surface, white) lift off it. */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--cg-blue-500) 11%, var(--bs-body-bg)) 0,
      var(--bs-body-bg) 40rem,
      color-mix(in srgb, var(--cg-blue-500) 4%, var(--bs-body-bg)) 100%);
}
/* A rich three-colour aurora behind the hero — blue, violet and a touch of cyan. */
.cg-public::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 54rem;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(46rem 34rem at 6% -6%,
      color-mix(in srgb, var(--cg-blue-500) 42%, transparent), transparent 66%),
    radial-gradient(42rem 32rem at 97% -2%,
      color-mix(in srgb, #1C3A56 36%, transparent), transparent 64%),
    radial-gradient(40rem 28rem at 55% 5rem,
      color-mix(in srgb, #4FBF8B 20%, transparent), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
          mask-image: linear-gradient(180deg, #000 60%, transparent);
}
/* A soft glow at the foot of the page, so the closing call sits in light too. */
.cg-public::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 30rem;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(46rem 24rem at 50% 120%,
      color-mix(in srgb, var(--cg-blue-500) 22%, transparent), transparent 70%);
}
/* Stronger still in dark, where a low-alpha wash otherwise disappears. */
:root[data-theme="dark"] .cg-public::before,
:root:not([data-theme="light"]) .cg-public::before {
  background:
    radial-gradient(48rem 36rem at 4% -8%,
      color-mix(in srgb, var(--cg-blue-500) 55%, transparent), transparent 64%),
    radial-gradient(44rem 34rem at 99% -4%,
      color-mix(in srgb, #1C3A56 46%, transparent), transparent 62%),
    radial-gradient(42rem 30rem at 55% 5rem,
      color-mix(in srgb, #4FBF8B 26%, transparent), transparent 68%);
  -webkit-mask-image: linear-gradient(180deg, #000 64%, transparent);
          mask-image: linear-gradient(180deg, #000 64%, transparent);
}
.cg-public > .cg-main,
.cg-public > .cg-footer { position: relative; z-index: 1; }

/* Public navbar: deep navy chrome (spec). The green brand tile and green primary
   button carry the accent; links are muted and brighten to white on hover. */
.cg-public .cg-navbar {
  background: var(--cg-navbar-public-bg);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.cg-public .cg-navbar .cg-brand { color: #fff; }
.cg-public .cg-navbar .btn-ghost {
  --bs-btn-color: #9FB4C7;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(255, 255, 255, .08);
  --bs-btn-active-bg: rgba(255, 255, 255, .12);
}
.cg-public .cg-navbar .btn-ghost.text-body-secondary { color: #9FB4C7 !important; }
.cg-public .cg-navbar .btn-outline-primary {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, .28);
  --bs-btn-hover-bg: var(--cg-blue-500);
  --bs-btn-hover-border-color: var(--cg-blue-500);
  --bs-btn-hover-color: #fff;
}

/* ---- Hero ------------------------------------------------------------- */
.cg-public .cg-hero { padding: 4.5rem 0 2.5rem; }
.cg-public .cg-hero h1 { font-size: clamp(2rem, 5.2vw, 3.25rem); line-height: 1.05; }
.cg-public .cg-hero p { font-size: 1.0625rem; }
/* The eyebrow becomes a glassy pill above the headline. */
.cg-public .cg-hero .cg-eyebrow {
  display: inline-block; padding: .4rem .85rem; border-radius: 999px;
  font-size: .6875rem; color: var(--cg-blue-600);
  background: color-mix(in srgb, var(--cg-blue-500) 12%, var(--cg-surface));
  border: 1px solid color-mix(in srgb, var(--cg-blue-500) 28%, transparent);
  box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--cg-blue-500) 45%, transparent);
}
:root[data-theme="dark"] .cg-public .cg-hero .cg-eyebrow,
:root:not([data-theme="light"]) .cg-public .cg-hero .cg-eyebrow { color: var(--cg-blue-300, #7ED0A6); }

/* ---- Section rhythm --------------------------------------------------- */
.cg-public .cg-main { padding-top: .5rem; padding-bottom: 3rem; }
.cg-public .cg-sec { margin-bottom: 4.5rem; }
.cg-public .cg-sec .h2 { font-size: clamp(1.375rem, 2.6vw, 1.875rem); letter-spacing: -.03em; }

/* ---- Cards: softer elevation, a gentle lift on the interactive ones --- */
.cg-public .card {
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px -20px rgba(15, 23, 42, .18);
}
.cg-public .cg-sec .card.h-100,
.cg-public .cg-price-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cg-public .cg-sec .card.h-100:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--cg-blue-500) 30%, var(--cg-hairline));
  box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--cg-blue-500) 30%, transparent);
}
.cg-public .cg-price-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px -18px color-mix(in srgb, var(--cg-blue-500) 32%, transparent);
}
/* The feature icon tile gets the brand gradient instead of a flat wash. */
.cg-public .cg-lock-icon {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cg-blue-500) 16%, var(--cg-surface)),
    color-mix(in srgb, #1C3A56 14%, var(--cg-surface)));
  color: var(--cg-blue-600); border: 1px solid color-mix(in srgb, var(--cg-blue-500) 20%, transparent);
}
:root[data-theme="dark"] .cg-public .cg-lock-icon,
:root:not([data-theme="light"]) .cg-public .cg-lock-icon { color: var(--cg-blue-300, #7ED0A6); }

/* ---- Stat band sits on its own panel, not floating on the wash -------- */
.cg-public .cg-statband {
  background: color-mix(in srgb, var(--cg-surface) 82%, transparent);
  border: 1px solid var(--cg-hairline); border-radius: 1.25rem;
  padding: 1.5rem 1.25rem; backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px -18px rgba(15, 23, 42, .25);
}

/* ---- Footer: a soft wash so the page resolves rather than stops ------- */
.cg-public .cg-footer {
  background: linear-gradient(180deg, transparent,
    color-mix(in srgb, var(--cg-blue-500) 6%, var(--bs-body-bg)));
  border-top: 1px solid var(--cg-hairline);
  padding: 3.25rem 0 2.25rem; margin-top: 2rem;
}

/* ---- Small utilities used by the audience landing view --------------- */
.cg-icon-xs { width: .75rem; height: .75rem; }
.cg-icon-md { width: 1.125rem; height: 1.125rem; }
.fw-extrabold { font-weight: 800; }
.tracking-tight { letter-spacing: -.03em; }

/* ---- Premium lift for the landing's surfaces (over the base rules above) --- */
.cg-public .cg-auth-box {
  position: relative;
  box-shadow: 0 28px 70px -28px color-mix(in srgb, var(--cg-blue-500) 42%, transparent),
              0 6px 18px -10px rgba(15, 23, 42, .14);
}
/* A thin brand-gradient accent along the top edge of the auth card. */
.cg-public .cg-auth-box::before {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, var(--cg-blue-500), #1C3A56, #4FBF8B);
}
/* Feature and process cards get a whisper of tint so they are not flat white. */
.cg-public .cg-audience-feature-card,
.cg-public .cg-process-card {
  background: linear-gradient(180deg, var(--cg-surface),
    color-mix(in srgb, var(--cg-blue-500) 4%, var(--cg-surface)));
}
/* The stat bar values pick up the brand gradient. */
.cg-public .cg-kpi-val {
  background: linear-gradient(135deg, var(--cg-blue-600), #1C3A56);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
:root[data-theme="dark"] .cg-public .cg-kpi-val,
:root:not([data-theme="light"]) .cg-public .cg-kpi-val {
  background: linear-gradient(135deg, var(--cg-blue-400, #4FBF8B), #A78BFA);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---- Scroll reveal (JS-gated; see reveal.js) ------------------------- */
/* The initial hidden state applies ONLY once reveal.js has added .cg-reveal-on
   to <html>, so no-JS and reduced-motion visitors always see the content. */
.cg-reveal-on .cg-public .cg-landing-hero,
.cg-reveal-on .cg-public .cg-hero,
.cg-reveal-on .cg-public .cg-sec {
  opacity: 0;
  transform: translateY(22px);
}
.cg-reveal-on .cg-public .cg-landing-hero.is-visible,
.cg-reveal-on .cg-public .cg-hero.is-visible,
.cg-reveal-on .cg-public .cg-sec.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .6s cubic-bezier(.16, .84, .44, 1),
              transform .6s cubic-bezier(.16, .84, .44, 1);
}