/* ==========================================================================
   Connect — page styles on top of base.css.
   Ported 1:1 from 03 Features/08 College Connect/campusloom-connect.html. Rules are scoped to .connect (on <main>), the page's
   dark-mode overrides became [data-theme="dark"] and keyframes are prefixed.
   !important is kept: in these pages it decides same-specificity conflicts
   (the .mobile-only / .desktop-only helpers), so dropping it breaks layout.
   ========================================================================== */

.connect-page { overflow-x: hidden; background: #FFFBF5; }
/* The page's own background (the source's body rule) is painted here: fixed,
   behind everything, and inside <main> so it can read the page's tokens. */
.connect::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; }
[data-theme="dark"] .connect-page { background: #0E0E0E; }
.connect { padding: 0px; }   /* the Elementor container's padding on live (0 or 10, per page) */
/* Blocksy wrapped every page's content in a container with overflow: clip, so
   anything wider than the page was trimmed rather than scrollable — Connect's
   directory grid is wider than its box, and its tools dropdown bleeds 100vw.
   clip (not hidden) doesn't make <main> a scroll container. */
.connect { overflow-x: clip; }

/* The element baseline every page sat on in WordPress — measured on live by
   _migration/compare-baseline.py, not guessed. Anything the page doesn't
   style itself falls back to these, exactly as it did on live; the page's own
   rules below override them (same specificity, later in the file). */
/* Blocksy's element layer (its bundle/main.min.css), in its own order and at
   its own selector strength plus the scope — so a page's rules win or lose
   against it exactly as they did on live. Variables resolved to live values;
   sizes measured with _migration/compare-baseline.py. */
.connect :is(p, h1, h2, h3, h4, h5, h6, em, ol, ul, li, tr, th, td, dl, ins, sub, sup, big, cite, form, small, label, table, figure, button, legend, strike, address, caption, fieldset, blockquote) { margin: 0; padding: 0; border: none; font: inherit; }
.connect :is(b, strong) { font-weight: bold; }
.connect small { font-size: 80%; }
.connect hr { height: 1px; border: none; background-color: #E1E8ED; }
.connect img { height: auto; max-width: 100%; vertical-align: middle; }
.connect :is(figure, textarea) { display: block; }
.connect hr { margin: 0; }
.connect table { max-width: 100%; }
.connect :is(code, kbd, samp) { padding: 3px 6px; background: #F2F5F7; border-radius: 3px; }
.connect :is(table, th, td) { border: 1px solid #E1E8ED; }
.connect :is(th, td) { padding: 0.7em 1em; }
.connect th { font-weight: 600; }
.connect h1 { color: #FF6B4A; font-family: "Bricolage Grotesque", sans-serif; font-size: 40px; }
.connect h2 { color: #1A1A1A; font-family: "Bricolage Grotesque", sans-serif; font-size: 35px; }
.connect h3 { color: #1A1A1A; font-family: "Plus Jakarta Sans", sans-serif; font-size: 30px; }
.connect h4 { color: #FFFBF5; font-size: 25px; }
.connect h5 { color: #FFFBF5; font-size: 20px; }
.connect h6 { color: #FFFBF5; font-size: 16px; }
.connect :is(h1, h2, h3, h4, h5, h6) { font-weight: 700; line-height: 1.5; }
.connect p { margin-block-end: 1.5em; }
.connect :is(ul, ol) { padding-inline-start: 2.5em; margin-block-end: 1.5em; }
.connect :is(h1, h2, h3, h4, h5, h6) { margin-block-end: calc(.3em + 10px); }
.connect :is(h1, h2, h3, h4, h5, h6):where(:last-child) { margin-block-end: 0; }
.connect ul:last-child, .connect ol:last-child, .connect ul li:last-child, .connect ol li:last-child, .connect label:last-child { margin-bottom: 0; }
.connect a { color: #FF6B4A; }
.connect select, .connect textarea, .connect input:is([type="url"], [type="tel"], [type="text"], [type="time"], [type="date"], [type="datetime"], [type="datetime-local"], [type="email"], [type="number"], [type="search"], [type="password"]) {
  appearance: none; width: 100%; height: 40px; padding: 0 15px; color: #1A1A1A;
  background-color: transparent; border: 1px solid #E1E8ED; border-radius: 3px;
  font-family: inherit; font-size: 16px; font-weight: 400; line-height: inherit;
  transition: color .12s, outline .12s, border-color .12s, background .12s; }
.connect select { padding-inline-end: 25px; }
.connect textarea { line-height: 1.5; resize: vertical; padding: 12px 15px; }
.connect label { font-size: 15px; line-height: inherit; cursor: pointer; margin: 0 0 0.5em; }
.connect blockquote:where(:not(.is-style-plain):not(.has-text-align-center):not(.has-text-align-right)) { padding-inline-start: 1.5em; border-inline-start: 4px solid #FF6B4A; }
.connect [type="submit"] { appearance: none; height: 40px; padding: 5px 20px; border: 0; border-radius: 3px; color: #fff; background-color: #FF6B4A; font-size: 15px; font-weight: 500; }

.connect { line-height: 1.65; color: #1A1A1A; color-scheme: normal; }
/* Inside Elementor's content area on live: <hr> without the theme's grey fill. */
.connect hr { background-color: transparent; }

/* ══════════════════════════════════════════════════════════
   CAMPUSLOOM CONNECT
   Scoped: #campusloom-connect  ·  Prefix: cl-
   Elementor: !important on all overrides
   CRITICAL: reset uses margin/padding WITHOUT !important
   so component-level !important declarations always win.
══════════════════════════════════════════════════════════ */

/* ── Box sizing reset — box-sizing OK with !important,
   but margin/padding MUST NOT use !important here.
   Reason: #campusloom-connect * has specificity 100 (one ID),
   which beats all .cl-class selectors (specificity 10).
   With equal-priority !important, higher specificity wins,
   so a !important reset would zero out ALL component spacing. ── */
/* Make --orange available globally so the modal (outside #campusloom-connect) resolves it */
.connect {
  --orange: #FF6B4A;
  --cl-verified-green: #25D366;
  --cl-orange: #FF6B4A;
  --cl-ink: #1A1A1A;
  --cl-cream: #FFFBF5;
}
.connect #campusloom-connect *, .connect #campusloom-connect *::before, .connect #campusloom-connect *::after {
  box-sizing: border-box !important;
  margin: 0;
  padding: 0;
}
/* ── Base vars (always present) ── */
.connect #campusloom-connect {
  --orange: #FF6B4A;
  --peach:  #FFD6A8;
  --canvas: #FFFBF5;
  --ink:    #1A1A1A;
  --pill:   #FFF0D9;
  --border: #EDE6DC;
  --brown:  #8B4A0C;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
/* ── Dark mode ── */
.connect #campusloom-connect.cl-dark {
  --bg:        #0E0B08;
  --bg2:       #130F0B;
  --surface:   #1A1612;
  --surface2:  #201C18;
  --txt:       #F0EBE3;
  --txt2:      rgba(240,235,227,0.55);
  --txt3:      rgba(240,235,227,0.28);
  --bdr:       rgba(240,235,227,0.07);
  --bdr2:      rgba(240,235,227,0.12);
  --card-bg:   #181410;
  --card-bdr:  rgba(240,235,227,0.08);
  --inp-bg:    #1A1612;
  --inp-bdr:   rgba(240,235,227,0.14);
}
/* ── Light mode ── */
.connect #campusloom-connect.cl-light {
  --bg:        #FFFBF5;
  --bg2:       #FFF8F0;
  --surface:   #FFFFFF;
  --surface2:  #FDF8F2;
  --txt:       #1A1A1A;
  --txt2:      rgba(26,26,26,0.58);
  --txt3:      rgba(26,26,26,0.32);
  --bdr:       rgba(26,26,26,0.08);
  --bdr2:      rgba(26,26,26,0.13);
  --card-bg:   #FFFFFF;
  --card-bdr:  rgba(26,26,26,0.09);
  --inp-bg:    #FFFFFF;
  --inp-bdr:   #EDE6DC;
}
/* ══════════════════════════════════════════════════
   PAGE SHELL
══════════════════════════════════════════════════ */
.connect #campusloom-connect {
  background: var(--bg) !important;
  min-height: 100vh !important;
  transition: background 0.4s, color 0.4s !important;
}
.connect .cl-page {
  max-width: 1520px !important;
  margin: 0 auto !important;
  padding: 0 48px 0 !important;
}
/* ══════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════ */
.connect .cl-hero {
  padding: 40px 0 0px !important;
  text-align: center !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  position: relative !important;
  overflow: hidden !important;
}
.connect .cl-hero-bg-icon {
  position: absolute !important;
  top: 50% !important;
  right: 6% !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0.035 !important;
  color: #25D366 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.4s !important;
}
.connect #campusloom-connect.cl-light .cl-hero-bg-icon {
  opacity: 0.095 !important;
}
.connect .cl-hero-bg-icon svg {
  width: 220px !important;
  height: 220px !important;
  fill: currentColor !important;
}
.connect .cl-hero > *:not(.cl-hero-bg-icon) {
  position: relative !important;
  z-index: 1 !important;
}
.connect .cl-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: rgba(255,214,168,0.14) !important;
  color: var(--brown) !important;
  border: 1px solid rgba(139,74,12,0.22) !important;
  border-radius: 999px !important;
  padding: 6px 16px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-bottom: 32px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  transition: background 0.4s, border-color 0.4s !important;
  animation: co-cl-eyebrow-glow-light 3s infinite ease-in-out !important;
}
.connect #campusloom-connect.cl-dark .cl-eyebrow {
  background: rgba(255,214,168,0.1) !important;
  color: var(--peach) !important;
  animation: co-cl-eyebrow-glow-dark 3s infinite ease-in-out !important;
}
.connect .cl-eyebrow-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--orange) !important;
  flex-shrink: 0 !important;
  animation: co-cl-dot-pulse 2s infinite ease-in-out !important;
}
@keyframes co-cl-eyebrow-glow-light {
  0% {
    box-shadow: 0 0 2px rgba(139, 74, 12, 0.05);
    border-color: rgba(139, 74, 12, 0.22) !important;
  }
  50% {
    box-shadow: 0 0 10px rgba(139, 74, 12, 0.2);
    border-color: rgba(139, 74, 12, 0.45) !important;
  }
  100% {
    box-shadow: 0 0 2px rgba(139, 74, 12, 0.05);
    border-color: rgba(139, 74, 12, 0.22) !important;
  }
}
@keyframes co-cl-eyebrow-glow-dark {
  0% {
    box-shadow: 0 0 2px rgba(255, 214, 168, 0.05);
    border-color: rgba(255, 214, 168, 0.18) !important;
  }
  50% {
    box-shadow: 0 0 10px rgba(255, 214, 168, 0.25);
    border-color: rgba(255, 214, 168, 0.4) !important;
  }
  100% {
    box-shadow: 0 0 2px rgba(255, 214, 168, 0.05);
    border-color: rgba(255, 214, 168, 0.18) !important;
  }
}
@keyframes co-cl-dot-pulse {
  0% {
    transform: scale(0.92);
    box-shadow: 0 0 0 0 rgba(255, 107, 74, 0.75);
  }
  70% {
    transform: scale(1.08);
    box-shadow: 0 0 0 5px rgba(255, 107, 74, 0);
  }
  100% {
    transform: scale(0.92);
    box-shadow: 0 0 0 0 rgba(255, 107, 74, 0);
  }
}
/* Headline */
.connect .cl-headline {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(32px, 4.2vw, 58px) !important;
  line-height: 0.95 !important;
  letter-spacing: -2px !important;
  color: var(--txt) !important;
  margin-bottom: 12px !important;
  transition: color 0.4s !important;
}
.connect .cl-mobile-br {
  display: none !important;
}
.connect .cl-desktop-br {
  display: inline !important;
}
/* Peach/orange rotated highlight */
.connect .cl-hl {
  position: relative !important;
  display: inline-block !important;
  white-space: nowrap !important;
}
.connect .cl-hl-bg {
  position: absolute !important;
  inset: -4px -10px !important;
  background: var(--orange) !important;
  border-radius: 8px !important;
  z-index: 0 !important;
  transform: rotate(-1.5deg) skewX(-0.5deg) !important;
  box-shadow: 0 0 32px 10px rgba(255,107,74,0.45), 0 0 80px 28px rgba(255,107,74,0.16) !important;
}
.connect .cl-hl-txt {
  position: relative !important;
  z-index: 1 !important;
  color: #fff !important;
}
.connect .cl-orange { color: var(--orange) !important; }
/* Headline — line-1 lighter weight */
.connect .cl-hl-line1 {
  font-weight: 400 !important;
  color: var(--txt2) !important;
  letter-spacing: -2px !important;
}
/* Subheadline — plain, muted, Plus Jakarta Sans */
.connect .cl-hero-sub {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: clamp(14px, 1.5vw, 16px) !important;
  font-weight: 400 !important;
  color: var(--txt2) !important;
  line-height: 1.65 !important;
  max-width: 760px !important;
  margin: 0 auto 24px !important;
  transition: color 0.4s !important;
}
/* Trust pills row */
.connect .cl-trust-pills {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.connect .cl-trust-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 13px !important;
  background: rgba(34,197,94,0.08) !important;
  border: 1px solid rgba(34,197,94,0.2) !important;
  border-radius: 999px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #4ade80 !important;
  white-space: nowrap !important;
}
.connect #campusloom-connect.cl-light .cl-trust-pill {
  background: rgba(34,197,94,0.07) !important;
  color: #16a34a !important;
  border-color: rgba(34,197,94,0.22) !important;
}
/* ══════════════════════════════════════════════════
   CONTROLS ROW
══════════════════════════════════════════════════ */
.connect .cl-controls-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
}
/* Type toggle: IIT / NIT */
.connect .cl-type-toggle {
  display: flex !important;
  align-items: center !important;
  background: var(--surface) !important;
  border: 1.5px solid var(--bdr2) !important;
  border-radius: 999px !important;
  padding: 4px !important;
  gap: 2px !important;
  transition: background 0.4s, border-color 0.4s !important;
}
.connect .cl-type-btn {
  padding: 9px 24px !important;
  border-radius: 999px !important;
  border: none !important;
  background: transparent !important;
  color: var(--txt2) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.18s !important;
  letter-spacing: 0.15px !important;
  white-space: nowrap !important;
}
.connect .cl-type-btn.cl-active {
  background: #1A1A1A !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
}
.connect #campusloom-connect.cl-dark .cl-type-btn.cl-active {
  background: #F0EBE3 !important;
  color: #0E0B08 !important;
}
/* Right side: view toggle + mode toggle */
.connect .cl-controls-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
/* View toggle: Grid / Map */
.connect .cl-view-toggle {
  display: flex !important;
  align-items: center !important;
  background: var(--surface) !important;
  border: 1.5px solid var(--bdr2) !important;
  border-radius: 999px !important;
  padding: 4px !important;
  gap: 2px !important;
  transition: background 0.4s !important;
}
.connect .cl-view-btn {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  border: none !important;
  background: transparent !important;
  color: var(--txt2) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.18s !important;
  white-space: nowrap !important;
}
.connect .cl-view-btn.cl-active {
  background: var(--orange) !important;
  color: #fff !important;
  box-shadow: 0 1px 4px rgba(255,107,74,0.35) !important;
}
.connect .cl-view-btn svg { flex-shrink: 0 !important; }
/* Mode toggle (dark/light) */
.connect .cl-mode-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--surface) !important;
  border: 1.5px solid var(--bdr2) !important;
  border-radius: 999px !important;
  padding: 7px 12px 7px 7px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  color: var(--txt2) !important;
}
.connect .cl-mode-toggle:hover { border-color: var(--orange) !important; }
.connect .cl-mt-track {
  width: 30px !important;
  height: 17px !important;
  border-radius: 999px !important;
  background: var(--orange) !important;
  position: relative !important;
  flex-shrink: 0 !important;
}
.connect .cl-mt-thumb {
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  background: #fff !important;
  position: absolute !important;
  top: 3px !important;
  transition: left 0.25s cubic-bezier(.4,0,.2,1) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25) !important;
}
.connect #campusloom-connect.cl-dark .cl-mt-thumb { left: 3px !important; }
.connect #campusloom-connect.cl-light .cl-mt-thumb { left: 16px !important; }
.connect .cl-mt-icon {
  width: 16px !important;
  height: 16px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.connect #campusloom-connect.cl-dark .cl-mt-sun { opacity: 0.3 !important; }
.connect #campusloom-connect.cl-dark .cl-mt-moon { opacity: 1   !important; }
.connect #campusloom-connect.cl-light .cl-mt-sun { opacity: 1   !important; }
.connect #campusloom-connect.cl-light .cl-mt-moon { opacity: 0.3 !important; }
/* ══════════════════════════════════════════════════
   SEARCH
══════════════════════════════════════════════════ */
.connect .cl-search-wrap {
  position: relative !important;
  margin-bottom: 32px !important;
}
.connect .cl-search-icon {
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--txt3) !important;
  pointer-events: none !important;
  display: flex !important;
}
.connect .cl-search-input {
  width: 100% !important;
  padding: 14px 18px 14px 48px !important;
  background: var(--inp-bg) !important;
  border: 1.5px solid var(--inp-bdr) !important;
  border-radius: 14px !important;
  color: var(--txt) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  outline: none !important;
  transition: border-color 0.2s !important;
  -webkit-appearance: none !important;
}
.connect .cl-search-input::placeholder { color: var(--txt3) !important; }
.connect .cl-search-input:focus { border-color: var(--orange) !important; }
/* ══════════════════════════════════════════════════
   GRID
══════════════════════════════════════════════════ */
.connect #cl-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}
.connect #cl-grid.cl-hidden, .connect #cl-map.cl-hidden { display: none !important; }
.connect .cl-empty {
  grid-column: 1 / -1 !important;
  text-align: center !important;
  padding: 72px 0 !important;
  color: var(--txt3) !important;
  font-size: 15px !important;
}
/* ══════════════════════════════════════════════════
   INSTITUTE CARD
══════════════════════════════════════════════════ */
.connect .cl-card {
  background: var(--card-bg) !important;
  border: 1.5px solid var(--card-bdr) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
}
.connect .cl-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--orange) !important;
  box-shadow: 0 12px 40px rgba(255,107,74,0.13) !important;
}
/* ── Coming-soon card state (mirrors Maths.html pattern) ── */
.connect .cl-card.cl-coming-soon {
  border: 1.5px dashed rgba(240,235,227,0.18) !important;
  cursor: not-allowed !important;
  overflow: hidden !important;
}
.connect #campusloom-connect.cl-light .cl-card.cl-coming-soon {
  border-color: rgba(26,26,26,0.18) !important;
}
.connect .cl-card.cl-coming-soon > *:not(.cl-ribbon) {
  opacity: 0.38 !important;
  pointer-events: none !important;
}
.connect .cl-card.cl-coming-soon:hover {
  transform: none !important;
  border-color: rgba(240,235,227,0.18) !important;
  box-shadow: none !important;
}
.connect #campusloom-connect.cl-light .cl-card.cl-coming-soon:hover {
  border-color: rgba(26,26,26,0.18) !important;
}
/* Diagonal orange ribbon "Soon" */
.connect .cl-ribbon {
  position: absolute !important;
  top: 20px !important;
  right: -32px !important;
  width: 120px !important;
  text-align: center !important;
  background: var(--orange) !important;
  color: #fff !important;
  padding: 5px 0 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  transform: rotate(45deg) !important;
  box-shadow: 0 3px 10px rgba(255,107,74,0.4) !important;
  z-index: 10 !important;
  pointer-events: none !important;
}
/* Detail (info) button — top-right corner */
.connect .cl-detail-btn {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--txt2) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.18s !important;
  z-index: 2 !important;
  flex-shrink: 0 !important;
}
.connect .cl-card .cl-detail-btn, .connect .cl-card .cl-chevron-btn {
  border: 1.5px solid rgba(26,26,26,0.15) !important;
  background: transparent !important;
}
.connect .cl-card .cl-detail-btn:hover, .connect .cl-card .cl-chevron-btn:hover {
  border-color: rgba(26,26,26,0.3) !important;
  background: rgba(26,26,26,0.04) !important;
  color: var(--txt) !important;
}
/* Dark mode */
[data-theme="dark"] .connect .cl-card .cl-detail-btn, [data-theme="dark"] .connect .cl-card .cl-chevron-btn, .connect #campusloom-connect.cl-dark .cl-card .cl-detail-btn, .connect #campusloom-connect.cl-dark .cl-card .cl-chevron-btn {
  border-color: rgba(255,251,245,0.25) !important;
}
[data-theme="dark"] .connect .cl-card .cl-detail-btn:hover, [data-theme="dark"] .connect .cl-card .cl-chevron-btn:hover, .connect #campusloom-connect.cl-dark .cl-card .cl-detail-btn:hover, .connect #campusloom-connect.cl-dark .cl-card .cl-chevron-btn:hover {
  border-color: rgba(255,251,245,0.45) !important;
  background: rgba(255,251,245,0.06) !important;
  color: var(--txt) !important;
}
/* Card top row: logo left, name/city right */
.connect .cl-card-top {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
}
.connect .cl-card-info {
  flex: 1 !important;
  min-width: 0 !important;
  padding-right: 36px !important;
}
/* Logo — white circle with 5px padding so institute seals breathe cleanly
   (matches predictor .college-logo-img pattern: white bg, padding, img fills) */
.connect .cl-logo-wrap {
  width: 62px !important;
  height: 62px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1.5px solid rgba(0,0,0,0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  padding: 5px !important;
}
.connect .cl-logo-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 0 !important;
}
.connect .cl-logo-initials {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  color: var(--orange) !important;
  letter-spacing: -0.5px !important;
  text-align: center !important;
}
/* Name + verified tick */
.connect .cl-card-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 4px !important;
}
.connect .cl-card-name {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: var(--txt) !important;
  line-height: 1.2 !important;
  transition: color 0.4s !important;
}
.connect .cl-card .cl-verified {
  flex-shrink: 0 !important;
  vertical-align: middle !important;
}
.connect .cl-card .cl-verified .cl-seal {
  fill: rgba(37,211,102,0.15) !important;
  stroke: #25D366 !important;
  stroke-width: 2 !important;
}
.connect .cl-card .cl-verified .cl-check {
  stroke: #25D366 !important;
}
/* Dark mode: same green, slightly stronger translucent fill so the seal reads on #0C0C0C */
[data-theme="dark"] .connect .cl-card .cl-verified .cl-seal, .connect #campusloom-connect.cl-dark .cl-card .cl-verified .cl-seal {
  fill: rgba(37,211,102,0.22) !important;
  stroke: #25D366 !important;
}
[data-theme="dark"] .connect .cl-card .cl-verified .cl-check, .connect #campusloom-connect.cl-dark .cl-card .cl-verified .cl-check {
  stroke: #25D366 !important;
}
/* City */
.connect .cl-card-city {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 12.5px !important;
  color: var(--txt2) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.connect .cl-card-city svg { opacity: 0.5 !important; flex-shrink: 0 !important; }
/* Stat row removed per redesign — branches/founded year no longer shown on card */

/* CTA row */
.connect .cl-cta-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.connect .cl-join-btn {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.18s !important;
  line-height: 1 !important;
}
.connect .cl-card .cl-join-btn, [data-theme="dark"] .connect .cl-card .cl-join-btn, .connect #campusloom-connect.cl-dark .cl-card .cl-join-btn {
  background: #25D366 !important;
  color: #FFFFFF !important;
}
.connect .cl-card .cl-join-btn svg, .connect .cl-card .cl-join-btn svg path, [data-theme="dark"] .connect .cl-card .cl-join-btn svg, [data-theme="dark"] .connect .cl-card .cl-join-btn svg path, .connect #campusloom-connect.cl-dark .cl-card .cl-join-btn svg, .connect #campusloom-connect.cl-dark .cl-card .cl-join-btn svg path {
  fill: #FFFFFF !important;
  stroke: #FFFFFF !important;
}
.connect .cl-card .cl-join-btn:hover, [data-theme="dark"] .connect .cl-card .cl-join-btn:hover, .connect #campusloom-connect.cl-dark .cl-card .cl-join-btn:hover {
  background: #1ebe5c !important;
  transform: scale(1.01) !important;
}
.connect .cl-chevron-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--txt2) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.18s !important;
  flex-shrink: 0 !important;
}
.connect .cl-chevron-btn svg { transition: transform 0.22s !important; }
.connect .cl-chevron-btn.cl-open svg { transform: rotate(180deg) !important; }
/* Branch chips */
.connect .cl-branches-wrap {
  display: none !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--bdr) !important;
}
.connect .cl-branches-wrap.cl-open { display: block !important; }
.connect .cl-branch-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}
.connect .cl-branch-chip {
  display: inline-block !important;
  padding: 5px 11px !important;
  background: var(--pill) !important;
  color: var(--brown) !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: 0.1px !important;
  transition: background 0.4s !important;
}
.connect #campusloom-connect.cl-dark .cl-branch-chip {
  background: rgba(255,214,168,0.1) !important;
  color: var(--peach) !important;
}
/* NIRF badge on card */
.connect .cl-nirf-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap !important;
}
.connect .cl-nirf-badge::before {
  content: '' !important;
  display: inline-block !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  margin-right: 4px !important;
  flex-shrink: 0 !important;
}
.connect .cl-card .cl-nirf-badge {
  background: rgba(255,107,74,0.08) !important;
  border: 1px solid rgba(139,74,12,0.25) !important;
  color: #8B4A0C !important;
}
.connect .cl-card .cl-nirf-badge::before {
  background-color: #FF6B4A !important;
}
/* Dark mode */
[data-theme="dark"] .connect .cl-card .cl-nirf-badge, .connect #campusloom-connect.cl-dark .cl-card .cl-nirf-badge {
  background: rgba(255,107,74,0.12) !important;
  border: 1px solid rgba(255,214,168,0.3) !important;
  color: #FFD6A8 !important;
}
[data-theme="dark"] .connect .cl-card .cl-nirf-badge::before, .connect #campusloom-connect.cl-dark .cl-card .cl-nirf-badge::before {
  background-color: #FF6B4A !important;
}
/* ── Modal section redesign ── */
.connect .cl-modal-section { margin-bottom: 20px !important; }
.connect .cl-modal-section:last-child { margin-bottom: 0 !important; }
.connect .cl-modal-sec-hdr {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 11px !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.1px !important;
  color: rgba(240,235,227,0.38) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.connect .cl-modal-overlay.cl-light .cl-modal-sec-hdr { color: rgba(26,26,26,0.38) !important; }
.connect .cl-modal-sec-hdr .cl-sec-bar {
  width: 3px !important;
  height: 13px !important;
  background: var(--orange) !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}
/* Location chips */
.connect .cl-loc-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.connect .cl-loc-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 11px !important;
  background: rgba(255,107,74,0.08) !important;
  border: 1px solid rgba(255,107,74,0.18) !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: rgba(240,235,227,0.78) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.connect .cl-loc-chip svg { color: var(--orange) !important; flex-shrink: 0 !important; }
.connect .cl-modal-overlay.cl-light .cl-loc-chip { color: rgba(26,26,26,0.75) !important; background: rgba(255,107,74,0.06) !important; }
/* Flexibility tags */
.connect .cl-flex-tags { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.connect .cl-flex-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 13px !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.connect .cl-flex-tag.ft-yes { background: rgba(34,197,94,0.1) !important; border: 1px solid rgba(34,197,94,0.25) !important; color: #4ade80 !important; }
.connect .cl-flex-tag.ft-no { background: rgba(239,68,68,0.1)  !important; border: 1px solid rgba(239,68,68,0.25)  !important; color: #f87171 !important; }
.connect .cl-flex-tag.ft-unk { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: rgba(240,235,227,0.38) !important; }
.connect .cl-modal-overlay.cl-light .cl-flex-tag.ft-unk { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.1) !important; color: rgba(26,26,26,0.35) !important; }
/* Campus life grid */
.connect .cl-life-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}
.connect .cl-life-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 14px 8px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 12px !important;
  text-align: center !important;
}
.connect .cl-modal-overlay.cl-light .cl-life-item { background: rgba(26,26,26,0.03) !important; border-color: rgba(26,26,26,0.07) !important; }
.connect .cl-life-icon { color: var(--orange) !important; display: flex !important; margin-bottom: 2px !important; }
.connect .cl-life-lbl { font-size: 9.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.7px !important; color: rgba(240,235,227,0.32) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; }
.connect .cl-life-val { font-size: 12.5px !important; font-weight: 600 !important; color: rgba(240,235,227,0.82) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; line-height: 1.3 !important; }
.connect .cl-modal-overlay.cl-light .cl-life-lbl { color: rgba(26,26,26,0.32) !important; }
.connect .cl-modal-overlay.cl-light .cl-life-val { color: rgba(26,26,26,0.8) !important; }
/* ══════════════════════════════════════════════════
   TOOLS DROPDOWN (hero → controls gap)
══════════════════════════════════════════════════ */
.connect .cl-tools-dropdown-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin-top: -18px !important;
  margin-bottom: 28px !important;
}
.connect .cl-tools-trigger-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
/* "While you're here —" label inline with trigger */
.connect .cl-tools-label {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  color: var(--txt2) !important;
  letter-spacing: 0.1px !important;
  white-space: nowrap !important;
}
/* Trigger: orange solid pill */
.connect .cl-tools-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 12px 28px !important;
  border-radius: 999px !important;
  border: none !important;
  background: #FF6B4A !important;
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.18s !important;
  white-space: nowrap !important;
  letter-spacing: 0px !important;
}
.connect .cl-tools-trigger:hover {
  background: #e85a38 !important;
}
/* Secondary Trigger: Laptop Finder */
.connect .cl-laptop-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 12px 28px !important;
  border-radius: 999px !important;
  border: 1.5px solid var(--bdr2) !important;
  background: transparent !important;
  color: var(--txt) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  letter-spacing: 0px !important;
}
.connect .cl-laptop-btn:hover {
  background: var(--surface2) !important;
  border-color: var(--orange) !important;
  color: var(--orange) !important;
  transform: translateY(-2px) !important;
}
.connect .cl-laptop-btn:active {
  transform: translateY(0px) !important;
}
/* Dropdown panel — smooth max-height animation */
.connect .cl-tools-panel {
  overflow: hidden !important;
  max-height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 100% !important;
  transition: max-height 0.38s cubic-bezier(.4,0,.2,1), opacity 0.28s ease, margin-top 0.28s ease !important;
  margin-top: 0 !important;
}
.connect .cl-tools-panel.cl-open {
  max-height: 800px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  margin-top: 18px !important;
  padding-top: 8px !important;
}
/* Bento grid: 4 equal cols — one row */
.connect .cl-tools-panel-inner {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 4px !important;
}
/* ── Base bento card ── */
.connect .cl-td-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-bdr) !important;
  border-radius: 22px !important;
  padding: 22px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  color: inherit !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 180px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
  transition: transform 0.32s cubic-bezier(0.16,1,0.3,1), background 0.28s ease, border-color 0.28s ease, box-shadow 0.32s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
/* Top shimmer */
.connect .cl-td-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 18px !important; right: 18px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,107,74,0.55), transparent) !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
  pointer-events: none !important;
  z-index: 5 !important;
}
/* Corner highlight */
.connect .cl-td-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 100% 0%, rgba(255,107,74,0.05) 0%, transparent 60%) !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
  pointer-events: none !important;
  z-index: 3 !important;
}
/* Hover — odd left tilt, even right tilt, full orange */
.connect .cl-td-card:not(.cl-td-soon):nth-child(odd):hover {
  transform: translateY(-6px) rotate(-0.6deg) !important;
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  box-shadow: 0 18px 42px rgba(255,107,74,0.28), 0 6px 16px rgba(255,107,74,0.14), 0 0 0 1px rgba(255,255,255,0.08) inset !important;
}
.connect .cl-td-card:not(.cl-td-soon):nth-child(even):hover {
  transform: translateY(-6px) rotate(0.6deg) !important;
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  box-shadow: 0 18px 42px rgba(255,107,74,0.28), 0 6px 16px rgba(255,107,74,0.14), 0 0 0 1px rgba(255,255,255,0.08) inset !important;
}
.connect .cl-td-card:not(.cl-td-soon):active {
  transform: scale(0.97) translateY(-2px) !important;
  background: var(--orange) !important;
  border-color: var(--orange) !important;
}
.connect .cl-td-card:not(.cl-td-soon):hover::before, .connect .cl-td-card:not(.cl-td-soon):active::before { opacity: 1 !important; }
.connect .cl-td-card:not(.cl-td-soon):hover::after, .connect .cl-td-card:not(.cl-td-soon):active::after { opacity: 1 !important; }
/* Coming-soon state */
.connect .cl-td-card.cl-td-soon {
  border: 1.5px dashed var(--bdr2) !important;
  cursor: not-allowed !important;
}
.connect .cl-td-card.cl-td-soon > *:not(.cl-td-ribbon) { opacity: 0.40 !important; }
.connect .cl-td-ribbon {
  position: absolute !important;
  top: 18px !important; right: -30px !important;
  width: 115px !important;
  text-align: center !important;
  background: var(--orange) !important;
  color: #fff !important;
  padding: 4px 0 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  transform: rotate(45deg) !important;
  box-shadow: 0 3px 10px rgba(255,107,74,0.35) !important;
  z-index: 10 !important;
  pointer-events: none !important;
}
/* Pill badge */
.connect .cl-td-pill {
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  margin-bottom: 10px !important;
  position: relative !important;
  z-index: 2 !important;
  background: rgba(255,107,74,0.10) !important;
  color: var(--orange) !important;
  border: 1px solid rgba(255,107,74,0.20) !important;
  white-space: nowrap !important;
  transition: background 0.25s, color 0.25s, border-color 0.25s !important;
}
.connect #campusloom-connect.cl-dark .cl-td-pill {
  background: rgba(255,107,74,0.13) !important;
  color: #FF9A78 !important;
  border-color: rgba(255,107,74,0.22) !important;
}
.connect .cl-td-card:not(.cl-td-soon):hover .cl-td-pill, .connect .cl-td-card:not(.cl-td-soon):active .cl-td-pill {
  background: rgba(255,255,255,0.20) !important;
  color: #fff !important;
  border-color: transparent !important;
}
/* Card title */
.connect .cl-td-name {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  color: var(--txt) !important;
  position: relative !important;
  z-index: 2 !important;
  max-width: 85% !important;
  transition: color 0.25s !important;
}
.connect .cl-td-card:not(.cl-td-soon):hover .cl-td-name, .connect .cl-td-card:not(.cl-td-soon):active .cl-td-name { color: #fff !important; }
/* Description */
.connect .cl-td-desc {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12.5px !important;
  color: var(--txt2) !important;
  line-height: 1.55 !important;
  position: relative !important;
  z-index: 2 !important;
  margin-top: 7px !important;
  max-width: 85% !important;
  transition: color 0.25s !important;
}
.connect .cl-td-card:not(.cl-td-soon):hover .cl-td-desc, .connect .cl-td-card:not(.cl-td-soon):active .cl-td-desc { color: rgba(255,255,255,0.82) !important; }
.connect .cl-td-desc-mobile { display: none !important; }
/* Bottom tags */
.connect .cl-td-bottom {
  margin-top: auto !important;
  padding-top: 18px !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
}
.connect .cl-td-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}
.connect .cl-td-tag {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--txt2) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  background: var(--surface2) !important;
  border: 1px solid var(--bdr) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  transition: background 0.25s, color 0.25s, border-color 0.25s !important;
}
.connect .cl-td-card:not(.cl-td-soon):hover .cl-td-tag, .connect .cl-td-card:not(.cl-td-soon):active .cl-td-tag {
  background: rgba(255,255,255,0.18) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.connect .cl-td-dot {
  width: 5px !important; height: 5px !important;
  border-radius: 50% !important;
  background: var(--orange) !important;
  flex-shrink: 0 !important;
  transition: background 0.25s !important;
}
.connect .cl-td-card:not(.cl-td-soon):hover .cl-td-dot, .connect .cl-td-card:not(.cl-td-soon):active .cl-td-dot { background: #fff !important; }
/* Floating icon — bottom-right, rotated */
.connect .cl-td-icon {
  position: absolute !important;
  bottom: -16px !important; right: -16px !important;
  width: 88px !important; height: 88px !important;
  background: var(--surface2) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--txt3) !important;
  z-index: 1 !important;
  transform: rotate(-4deg) !important;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s !important;
}
.connect .cl-td-icon svg {
  width: 44px !important; height: 44px !important;
  stroke-width: 1.8 !important; opacity: 0.85 !important;
}
.connect .cl-td-card:not(.cl-td-soon):hover .cl-td-icon, .connect .cl-td-card:not(.cl-td-soon):active .cl-td-icon {
  background: rgba(255,255,255,0.92) !important;
  border-color: transparent !important;
  color: var(--orange) !important;
  transform: scale(1.12) rotate(-12deg) translateY(-8px) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.12) !important;
}
/* Responsive */
@media (max-width: 900px) {
  .connect .cl-tools-panel-inner { grid-template-columns: repeat(2, 1fr) !important; }
  .connect .cl-tools-panel.cl-open { max-height: 700px !important; }
}
@media (max-width: 560px) {
  .connect .cl-tools-panel-inner { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .connect .cl-tools-panel.cl-open { max-height: 700px !important; }
  .connect .cl-td-card { padding: 15px !important; min-height: 140px !important; border-radius: 16px !important; }
  .connect .cl-td-pill { font-size: 9px !important; padding: 4px 8px !important; margin-bottom: 8px !important; }
  .connect .cl-td-name { font-size: 14px !important; max-width: 90% !important; }
  .connect .cl-td-desc { font-size: 11px !important; line-height: 1.4 !important; max-width: 90% !important; }
  .connect .cl-td-desc-desktop { display: none !important; }
  .connect .cl-td-desc-mobile { display: inline !important; }
  .connect .cl-td-icon { width: 70px !important; height: 70px !important; bottom: -12px !important; right: -12px !important; }
  .connect .cl-td-icon svg { width: 34px !important; height: 34px !important; }
  .connect .cl-td-bottom { display: none !important; }
  .connect .cl-tools-trigger, .connect .cl-laptop-btn {
    padding: 10px 20px !important;
    font-size: 13px !important;
  }
  .connect .cl-hero-bg-icon {
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    opacity: 0.022 !important;
  }
  .connect #campusloom-connect.cl-light .cl-hero-bg-icon {
    opacity: 0.075 !important;
  }
  .connect .cl-hero-bg-icon svg {
    width: 130px !important;
    height: 130px !important;
  }
}
/* ══════════════════════════════════════════════════
   MAP VIEW
══════════════════════════════════════════════════ */
.connect #cl-map {
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1.5px solid var(--bdr2) !important;
}
.connect #cl-leaflet-map {
  width: 100% !important;
  height: 600px !important;
  background: #0a0a0f !important;
}
.connect .cl-map-tip {
  background: #1E1A16 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
}
.connect .cl-map-tip::before { display: none !important; }
/* ══════════════════════════════════════════════════
   DARK TOOLS BAND (full-bleed)
══════════════════════════════════════════════════ */
.connect .cl-tools-outer {
  background: #08060400 !important;
  margin: 72px -40px 0 !important;
  padding: 68px 40px 72px !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  position: relative !important;
}
.connect .cl-tools-outer::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: #070504 !important;
  z-index: 0 !important;
}
.connect .cl-tools-inner {
  max-width: 1520px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 1 !important;
}
.connect .cl-tools-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255,107,74,0.1) !important;
  color: var(--orange) !important;
  border: 1px solid rgba(255,107,74,0.22) !important;
  border-radius: 999px !important;
  padding: 5px 13px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-bottom: 22px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.connect .cl-tools-headline {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(30px, 4vw, 50px) !important;
  line-height: 1.04 !important;
  letter-spacing: -1.8px !important;
  color: #F0EBE3 !important;
  margin-bottom: 40px !important;
  max-width: 620px !important;
}
.connect .cl-tools-headline .cl-orange { color: var(--orange) !important; }
/* ── Bento grid: 2 × 2 ── */
.connect .cl-tool-cards {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
}
@media (max-width: 640px) {
  .connect .cl-tool-cards { grid-template-columns: 1fr !important; }
}
/* ── Base card ── */
.connect .cl-tool-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 22px !important;
  padding: 24px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  color: inherit !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 210px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.50), 0 0 0 1px rgba(255,255,255,0.03) inset !important;
  transition: transform 0.32s cubic-bezier(0.16,1,0.3,1), background 0.28s ease, border-color 0.28s ease, box-shadow 0.32s ease !important;
  animation: co-clBentoIn 0.4s ease both !important;
}
@keyframes co-clBentoIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
/* Top shimmer */
.connect .cl-tool-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 18px !important; right: 18px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,107,74,0.55), transparent) !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
  pointer-events: none !important;
  z-index: 5 !important;
}
/* Corner radial highlight */
.connect .cl-tool-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 100% 0%, rgba(255,107,74,0.05) 0%, transparent 60%) !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
  pointer-events: none !important;
  z-index: 3 !important;
}
/* Hover — odd tilts left, even tilts right, both go orange */
.connect .cl-tool-card:nth-child(odd):hover {
  transform: translateY(-6px) rotate(-0.6deg) !important;
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  box-shadow: 0 18px 42px rgba(255,107,74,0.28), 0 6px 16px rgba(255,107,74,0.14), 0 0 0 1px rgba(255,255,255,0.08) inset !important;
}
.connect .cl-tool-card:nth-child(even):hover {
  transform: translateY(-6px) rotate(0.6deg) !important;
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  box-shadow: 0 18px 42px rgba(255,107,74,0.28), 0 6px 16px rgba(255,107,74,0.14), 0 0 0 1px rgba(255,255,255,0.08) inset !important;
}
.connect .cl-tool-card:active {
  transform: scale(0.97) translateY(-2px) !important;
  background: var(--orange) !important;
  border-color: var(--orange) !important;
}
.connect .cl-tool-card:hover::before, .connect .cl-tool-card:active::before { opacity: 1 !important; }
.connect .cl-tool-card:hover::after, .connect .cl-tool-card:active::after { opacity: 1 !important; }
/* Stagger */
.connect .cl-tool-card:nth-child(1) { animation-delay: 0ms   !important; }
.connect .cl-tool-card:nth-child(2) { animation-delay: 60ms  !important; }
.connect .cl-tool-card:nth-child(3) { animation-delay: 120ms !important; }
.connect .cl-tool-card:nth-child(4) { animation-delay: 180ms !important; }
/* Pill badge */
.connect .cl-tool-pill {
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  margin-bottom: 12px !important;
  position: relative !important;
  z-index: 2 !important;
  background: rgba(255,107,74,0.13) !important;
  color: #FF9A78 !important;
  border: 1px solid rgba(255,107,74,0.22) !important;
  white-space: nowrap !important;
  transition: background 0.25s, color 0.25s, border-color 0.25s !important;
}
.connect .cl-tool-card:hover .cl-tool-pill, .connect .cl-tool-card:active .cl-tool-pill {
  background: rgba(255,255,255,0.20) !important;
  color: #fff !important;
  border-color: transparent !important;
}
/* Card title */
.connect .cl-tool-name {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  color: #F2EDE6 !important;
  position: relative !important;
  z-index: 2 !important;
  max-width: 85% !important;
  transition: color 0.25s !important;
}
.connect .cl-tool-card:hover .cl-tool-name, .connect .cl-tool-card:active .cl-tool-name { color: #fff !important; }
/* Description */
.connect .cl-tool-desc {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  color: rgba(242,237,230,0.50) !important;
  line-height: 1.58 !important;
  position: relative !important;
  z-index: 2 !important;
  margin-top: 8px !important;
  max-width: 85% !important;
  transition: color 0.25s !important;
}
.connect .cl-tool-card:hover .cl-tool-desc, .connect .cl-tool-card:active .cl-tool-desc { color: rgba(255,255,255,0.82) !important; }
/* Bottom tags row */
.connect .cl-tool-bottom {
  margin-top: auto !important;
  padding-top: 20px !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
}
.connect .cl-tool-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}
.connect .cl-tool-tag {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(242,237,230,0.52) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  transition: background 0.25s, color 0.25s, border-color 0.25s !important;
}
.connect .cl-tool-card:hover .cl-tool-tag, .connect .cl-tool-card:active .cl-tool-tag {
  background: rgba(255,255,255,0.18) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.connect .cl-tag-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--orange) !important;
  flex-shrink: 0 !important;
  transition: background 0.25s !important;
}
.connect .cl-tool-card:hover .cl-tag-dot, .connect .cl-tool-card:active .cl-tag-dot { background: #fff !important; }
/* Floating icon — absolute, bottom-right, rotated */
.connect .cl-tool-icon {
  position: absolute !important;
  bottom: -18px !important;
  right: -18px !important;
  width: 100px !important;
  height: 100px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(242,237,230,0.25) !important;
  z-index: 1 !important;
  transform: rotate(-4deg) !important;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s !important;
}
.connect .cl-tool-icon svg {
  width: 52px !important;
  height: 52px !important;
  stroke-width: 1.8 !important;
  opacity: 0.85 !important;
}
/* Icon springs up on hover */
.connect .cl-tool-card:hover .cl-tool-icon, .connect .cl-tool-card:active .cl-tool-icon {
  background: rgba(255,255,255,0.92) !important;
  border-color: transparent !important;
  color: var(--orange) !important;
  transform: scale(1.12) rotate(-12deg) translateY(-8px) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.14) !important;
}
/* ══════════════════════════════════════════════════
   CONTACT BLOCK
══════════════════════════════════════════════════ */
.connect .cl-contact-block {
  margin-top: 64px !important;
  text-align: center !important;
  padding: 80px 40px !important;
  background: #0C0C0C !important;
  border: none !important;
  border-radius: 0 !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
}
.connect .cl-contact-icon {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: #FFD6A8 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 20px !important;
  color: #FF6B4A !important;
}
.connect .cl-contact-icon svg {
  width: 24px !important;
  height: 24px !important;
}
.connect .cl-contact-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(22px, 3vw, 32px) !important;
  color: #FFFBF5 !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.8px !important;
  line-height: 1.15 !important;
}
.connect .cl-contact-desc {
  font-size: 15px !important;
  color: rgba(255,251,245,0.65) !important;
  line-height: 1.65 !important;
  max-width: 420px !important;
  margin: 0 auto 28px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.connect .cl-wa-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 13px 28px !important;
  background: #25D366 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.18s !important;
}
.connect .cl-wa-btn:hover { background: #1ebe5c !important; transform: scale(1.02) !important; }
/* ══════════════════════════════════════════════════
   GROUP PICKER MODAL
══════════════════════════════════════════════════ */
.connect .cl-group-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.65) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 99999999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}
.connect .cl-group-overlay.cl-show { display: flex !important; }
.connect .cl-group-box {
  background: #1A1410 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 20px !important;
  padding: 28px 24px 24px !important;
  width: 100% !important;
  max-width: 380px !important;
  animation: co-clModalIn 0.2s ease-out both !important;
  position: relative !important;
}
.connect .cl-group-overlay.cl-light .cl-group-box {
  background: #fff !important;
  border-color: rgba(26,26,26,0.1) !important;
}
.connect .cl-group-close {
  position: absolute !important;
  top: 14px !important; right: 14px !important;
  width: 30px !important; height: 30px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-size: 15px !important;
  color: rgba(240,235,227,0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s !important;
}
.connect .cl-group-overlay.cl-light .cl-group-close {
  border-color: rgba(26,26,26,0.12) !important;
  background: rgba(26,26,26,0.05) !important;
  color: rgba(26,26,26,0.4) !important;
}
.connect .cl-group-close:hover { color: var(--orange) !important; border-color: var(--orange) !important; }
.connect .cl-group-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #F0EBE3 !important;
  margin-bottom: 4px !important;
  padding-right: 32px !important;
}
.connect .cl-group-overlay.cl-light .cl-group-title { color: #1A1A1A !important; }
.connect .cl-group-sub {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12.5px !important;
  color: rgba(240,235,227,0.45) !important;
  margin-bottom: 20px !important;
}
.connect .cl-group-overlay.cl-light .cl-group-sub { color: rgba(26,26,26,0.5) !important; }
.connect .cl-group-btns {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.connect .cl-group-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 13px 18px !important;
  background: #25D366 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 0.18s, transform 0.18s !important;
}
.connect .cl-group-btn:hover { background: #1ebe5c !important; transform: scale(1.02) !important; }
.connect .cl-group-btn.cl-telegram { background: #229ED9 !important; }
.connect .cl-group-btn.cl-telegram:hover { background: #1e8ec3 !important; transform: scale(1.02) !important; }
.connect .cl-group-btn-label { display: flex !important; align-items: center !important; gap: 9px !important; }
.connect .cl-group-btn-arrow { opacity: 0.75 !important; font-size: 16px !important; }
.connect .cl-group-overlay.cl-light {
  --brown: #8B4A0C;
  --peach: #FFD6A8;
  --bdr: rgba(26,26,26,0.08);
  --txt2: rgba(26,26,26,0.58);
}
.connect .cl-group-overlay.cl-dark {
  --brown: #8B4A0C;
  --peach: #FFD6A8;
  --bdr: rgba(240,235,227,0.07);
  --txt2: rgba(240,235,227,0.55);
}
.connect .cl-group-label {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--brown) !important;
  margin-bottom: 10px !important;
  display: block !important;
  text-align: left !important;
}
.connect #campusloom-connect.cl-dark .cl-group-label, .connect .cl-group-overlay.cl-dark .cl-group-label {
  color: var(--peach) !important;
}
.connect .cl-group-divider {
  border-top: 1px solid var(--bdr) !important;
  margin: 20px 0 16px 0 !important;
}
.connect .cl-group-text {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: var(--txt2) !important;
  margin-bottom: 14px !important;
  text-align: left !important;
}
.connect .cl-freshers-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 13px 18px !important;
  border-radius: 999px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background 0.18s, transform 0.18s !important;
  border: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Light mode */
.connect .cl-group-overlay.cl-light .cl-freshers-btn {
  background: #2563EB !important;
  color: #FFFFFF !important;
}
.connect .cl-group-overlay.cl-light .cl-freshers-btn:not(.cl-disabled):hover {
  background: #1D4ED8 !important;
  transform: scale(1.02) !important;
}
/* Dark mode */
.connect .cl-group-overlay.cl-dark .cl-freshers-btn {
  background: #3B82F6 !important;
  color: #FFFFFF !important;
}
.connect .cl-group-overlay.cl-dark .cl-freshers-btn:not(.cl-disabled):hover {
  background: #2563EB !important;
  transform: scale(1.02) !important;
}
/* Disabled/Coming soon state */
.connect .cl-freshers-btn.cl-disabled {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
.connect .cl-group-overlay.cl-light .cl-freshers-btn.cl-disabled {
  background: #9CA3AF !important;
  color: #374151 !important;
}
.connect .cl-group-overlay.cl-dark .cl-freshers-btn.cl-disabled {
  background: #4B5563 !important;
  color: #9CA3AF !important;
}
/* ══════════════════════════════════════════════════
   DETAIL MODAL
══════════════════════════════════════════════════ */
.connect .cl-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.75) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  z-index: 99999999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}
.connect .cl-modal-overlay.cl-show { display: flex !important; }
.connect .cl-modal {
  background: #1A1410 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 22px !important;
  max-width: 600px !important;
  width: 100% !important;
  padding: 28px !important;
  position: relative !important;
  animation: co-clModalIn 0.22s ease-out !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
}
/* Light mode — modal overlay carries cl-light since it's outside #campusloom-connect */
.connect .cl-modal-overlay.cl-light .cl-modal {
  background: #FFFFFF !important;
  border-color: rgba(26,26,26,0.1) !important;
}
@keyframes co-clModalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.connect .cl-modal-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 32px !important;
  height: 32px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-size: 16px !important;
  color: rgba(240,235,227,0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s !important;
}
.connect .cl-modal-overlay.cl-light .cl-modal-close {
  border-color: rgba(26,26,26,0.12) !important;
  background: rgba(26,26,26,0.05) !important;
  color: rgba(26,26,26,0.4) !important;
}
.connect .cl-modal-close:hover { color: #FF6B4A !important; border-color: #FF6B4A !important; }
/* Header row: logo + name/sub + predictor CTA */
/* Header wrapper: logo-row on left, predictor btn on right (desktop)
   stacks vertically on mobile */
.connect .cl-modal-hdr {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 22px !important;
  padding-right: 42px !important;
}
.connect .cl-modal-logo-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex: 1 !important;
  min-width: 0 !important;
  padding-right: 0 !important;
}
/* Circle logo matching card style */
.connect .cl-modal-logo {
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1.5px solid rgba(0,0,0,0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  padding: 5px !important;
}
.connect .cl-modal-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 0 !important;
}
.connect .cl-modal-name-wrap { flex: 1 !important; min-width: 0 !important; }
.connect .cl-modal-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #F0EBE3 !important;
  line-height: 1.2 !important;
}
.connect .cl-modal-overlay.cl-light .cl-modal-title { color: #1A1A1A !important; }
.connect .cl-modal-sub {
  font-size: 12.5px !important;
  color: rgba(240,235,227,0.42) !important;
  margin-top: 3px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.connect .cl-modal-overlay.cl-light .cl-modal-sub { color: rgba(26,26,26,0.5) !important; }
/* "Check your chances" CTA in modal header */
.connect .cl-predictor-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  background: rgba(255,107,74,0.12) !important;
  border: 1px solid rgba(255,107,74,0.28) !important;
  border-radius: 999px !important;
  color: #FF6B4A !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.18s !important;
}
.connect .cl-predictor-btn:hover {
  background: rgba(255,107,74,0.2) !important;
  border-color: rgba(255,107,74,0.5) !important;
}
.connect .cl-modal-overlay.cl-light .cl-predictor-btn {
  background: rgba(255,107,74,0.08) !important;
  border-color: rgba(255,107,74,0.22) !important;
}
/* Section grid container — single column flow */
.connect .cl-modal-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}
.connect .cl-modal-item {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
}
.connect .cl-modal-overlay.cl-light .cl-modal-item {
  background: rgba(26,26,26,0.03) !important;
  border-color: rgba(26,26,26,0.07) !important;
}
.connect .cl-modal-item-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.9px !important;
  color: rgba(240,235,227,0.32) !important;
  margin-bottom: 5px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.connect .cl-modal-overlay.cl-light .cl-modal-item-label { color: var(--txt3) !important; }
.connect .cl-modal-item-val {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #F0EBE3 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  line-height: 1.3 !important;
}
.connect .cl-modal-overlay.cl-light .cl-modal-item-val { color: var(--ink) !important; }
/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .connect .cl-page { padding: 0 24px 0 !important; }
  .connect .cl-hero { padding: 28px 0 0px !important; }
  .connect #cl-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .connect .cl-page { padding: 0 16px 0 !important; }
  /* Controls: one row — type toggle left, view toggle right */
  .connect .cl-controls-row { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; gap: 8px !important; }
  .connect .cl-type-toggle { width: auto !important; flex-shrink: 1 !important; min-width: 0 !important; }
  .connect .cl-type-btn { padding: 7px 10px !important; font-size: 11px !important; white-space: nowrap !important; }
  .connect .cl-controls-right { flex-shrink: 0 !important; gap: 6px !important; }
  .connect .cl-view-btn { padding: 7px 12px !important; font-size: 11px !important; }
  .connect .cl-life-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .connect #cl-grid { grid-template-columns: 1fr !important; }
  .connect .cl-contact-block { padding: 56px 20px !important; }
  /* Modal header: stack predictor btn below logo+name row */
  .connect .cl-modal-hdr { flex-direction: column !important; gap: 10px !important; padding-right: 42px !important; }
  .connect .cl-modal-logo-row { padding-right: 0 !important; }
  .connect .cl-predictor-btn { width: 100% !important; justify-content: center !important; }
  .connect .cl-mobile-br { display: inline !important; }
  .connect .cl-desktop-br { display: none !important; }
  .connect .cl-headline { font-size: clamp(32px, 10vw, 38px) !important; line-height: 1.0 !important; letter-spacing: -1.5px !important; }
  .connect .cl-hero { padding-bottom: 0px !important; }
}
@media (max-width: 400px) {
  .connect .cl-headline { font-size: clamp(30px, 10vw, 36px) !important; line-height: 1.0 !important; letter-spacing: -1.5px !important; }
}
/* ==========================================================================
   The live footer's stylesheet, as it applied to this page.
   Generated by _migration/build-footer-css.py — do not edit.
   On live the footer's CSS is global, and this page reuses its class names
   (Connect embeds its own copy of the tools dropdown; the predictor's
   disclaimer block is id="cl-footer"), so the page's design depends on those
   rules reaching it: Connect's hero spacing comes from the footer's padding
   and full-bleed margin. Kept verbatim — !important included — and appended
   after the page's own CSS, where it sat on live.
   ========================================================================== */
.connect #cl-footer {
  --bg: #111115;
  --border: rgba(255, 255, 255, 0.08);
  --t1: #EEEAE4;
  --t2: #999999;
  --orange: #FF6B4A;
  --font-d: 'Bricolage Grotesque', sans-serif;
  --font-b: 'Plus Jakarta Sans', sans-serif;
}
.connect *, .connect *::before, .connect *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ─── FOOTER ─── */
.connect #cl-footer {
  background: var(--bg) !important;
  color: var(--t1) !important;
  border-top: 1px solid var(--border) !important;
  padding: 64px 64px 0;
  font-family: var(--font-b) !important;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow: hidden;
}
/* Subtle background glow to match the theme */
.connect #cl-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,107,74,0.15), transparent);
  pointer-events: none;
}
.connect .footer-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.connect .footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border) !important;
}
/* Brand Section */
.connect .footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  text-decoration: none;
  width: fit-content;
}
.connect .footer-logo img {
  height: 52px;
  width: auto;
  display: block;
}
.connect .footer-logo-name {
  font-family: var(--font-d) !important;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--t1) !important;
}
.connect .footer-tagline {
  font-size: 13.5px;
  color: var(--t2) !important;
  line-height: 1.7;
  max-width: 280px;
  margin-bottom: 16px;
}
.connect .footer-tagline strong {
  color: var(--t1) !important;
  font-weight: 600;
}
.connect .footer-builder {
  font-size: 12px;
  color: var(--t2) !important;
  margin-bottom: 12px;
}
.connect .footer-builder span {
  color: var(--orange) !important;
  font-weight: 600;
}
.connect .footer-contact {
  font-size: 12.5px;
  color: var(--t2) !important;
  line-height: 1.6;
}
.connect .footer-contact a {
  color: var(--orange) !important;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s, text-decoration 0.2s;
  display: inline-block;
}
.connect .footer-contact a:hover {
  color: #ff5430 !important;
  text-decoration: underline;
}
/* Navigation Columns */
.connect #cl-footer .footer-col-title {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #FFD6A8 !important;
  margin-bottom: 20px !important;
  opacity: 1 !important;
}
.connect #cl-footer .footer-links {
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.connect #cl-footer .footer-links li a {
  font-size: 13.5px !important;
  color: var(--t2) !important;
  text-decoration: none !important;
  transition: color 0.18s, transform 0.18s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: fit-content !important;
}
.connect #cl-footer .footer-links li a:hover {
  color: var(--t1) !important;
  transform: translateX(2px) !important;
}
/* Bottom Copy */
.connect .footer-bottom {
  padding: 24px 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.connect .footer-copy {
  font-size: 12.5px;
  color: var(--t2) !important;
}
.connect .footer-copy em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: var(--orange) !important;
  font-size: 14px;
}
/* Responsive Breakpoints */
@media (max-width: 960px) {
  .connect #cl-footer {
    padding: 48px 32px 0;
  }
  .connect .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    padding-bottom: 36px;
  }
  .connect .footer-brand {
    grid-column: 1 / -1;
    margin-bottom: 12px;
  }
  .connect .footer-tagline {
    max-width: 100%;
  }
}
@media (max-width: 560px) {
  .connect #cl-footer {
    padding: 40px 20px 0;
  }
  .connect .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .connect .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 0 28px;
  }
  .connect .footer-copy {
    text-align: center;
  }
  .connect .footer-links li a:hover {
    transform: none; /* Disable shift on hover on mobile */
  }
}
/* ─── TOOLS DROPDOWN SECTION ─── */
.connect .cl-tools-dropdown-wrap {
  --bg:        #FFFBF5;
  --bg2:       #FFF8F0;
  --surface:   #FFFFFF;
  --surface2:  #FDF8F2;
  --txt:       #1A1A1A;
  --txt2:      rgba(26,26,26,0.58);
  --txt3:      rgba(26,26,26,0.32);
  --bdr:       rgba(26,26,26,0.08);
  --bdr2:      rgba(26,26,26,0.13);
  --card-bg:   #FFFFFF;
  --card-bdr:  rgba(26,26,26,0.09);
  --orange:    #FF6B4A;
  --pill:      rgba(255,107,74,0.10);
  --brown:     #8B4A0C;
  
  background: var(--bg) !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
  padding: 48px 0 !important;
  transition: background 0.4s, color 0.4s !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
[data-theme="dark"] .connect .cl-tools-dropdown-wrap, [data-theme="dark"] .connect .cl-tools-dropdown-wrap {
  --bg:        #0E0B08;
  --bg2:       #130F0B;
  --surface:   #1A1612;
  --surface2:  #201C18;
  --txt:       #F0EBE3;
  --txt2:      rgba(240,235,227,0.55);
  --txt3:      rgba(240,235,227,0.28);
  --bdr:       rgba(240,235,227,0.07);
  --bdr2:      rgba(240,235,227,0.12);
  --card-bg:   #181410;
  --card-bdr:  rgba(240,235,227,0.08);
  --pill:      rgba(255,107,74,0.13);
}
.connect .cl-tools-dropdown-wrap .cl-tools-trigger-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.connect .cl-tools-dropdown-wrap .cl-tools-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 12px 28px !important;
  border-radius: 999px !important;
  border: none !important;
  background: #FF6B4A !important;
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.18s !important;
  white-space: nowrap !important;
  letter-spacing: 0px !important;
}
.connect .cl-tools-dropdown-wrap .cl-tools-trigger:hover {
  background: #e85a38 !important;
}
.connect .cl-tools-dropdown-wrap .cl-tools-panel {
  overflow: hidden !important;
  max-height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 100% !important;
  transition: max-height 0.38s cubic-bezier(.4,0,.2,1), opacity 0.28s ease, margin-top 0.28s ease !important;
  margin-top: 0 !important;
}
.connect .cl-tools-dropdown-wrap .cl-tools-panel.cl-open {
  max-height: 800px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  margin-top: 18px !important;
  padding-top: 8px !important;
}
.connect .cl-tools-dropdown-wrap .cl-tools-panel-inner {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 4px !important;
}
.connect .cl-tools-dropdown-wrap .cl-td-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-bdr) !important;
  border-radius: 22px !important;
  padding: 22px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  color: var(--txt) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 180px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
  transition: transform 0.32s cubic-bezier(0.16,1,0.3,1), background 0.28s ease, border-color 0.28s ease, box-shadow 0.32s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
.connect .cl-tools-dropdown-wrap .cl-td-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 18px !important; right: 18px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,107,74,0.55), transparent) !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
  pointer-events: none !important;
  z-index: 5 !important;
}
.connect .cl-tools-dropdown-wrap .cl-td-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 100% 0%, rgba(255,107,74,0.05) 0%, transparent 60%) !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
  pointer-events: none !important;
  z-index: 3 !important;
}
.connect .cl-tools-dropdown-wrap .cl-td-card:not(.cl-td-soon):nth-child(odd):hover {
  transform: translateY(-6px) rotate(-0.6deg) !important;
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  box-shadow: 0 18px 42px rgba(255,107,74,0.28), 0 6px 16px rgba(255,107,74,0.14), 0 0 0 1px rgba(255,255,255,0.08) inset !important;
}
.connect .cl-tools-dropdown-wrap .cl-td-card:not(.cl-td-soon):nth-child(even):hover {
  transform: translateY(-6px) rotate(0.6deg) !important;
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  box-shadow: 0 18px 42px rgba(255,107,74,0.28), 0 6px 16px rgba(255,107,74,0.14), 0 0 0 1px rgba(255,255,255,0.08) inset !important;
}
.connect .cl-tools-dropdown-wrap .cl-td-card:not(.cl-td-soon):active {
  transform: scale(0.97) translateY(-2px) !important;
  background: var(--orange) !important;
  border-color: var(--orange) !important;
}
.connect .cl-tools-dropdown-wrap .cl-td-card:not(.cl-td-soon):hover::before, .connect .cl-tools-dropdown-wrap .cl-td-card:not(.cl-td-soon):active::before { opacity: 1 !important; }
.connect .cl-tools-dropdown-wrap .cl-td-card:not(.cl-td-soon):hover::after, .connect .cl-tools-dropdown-wrap .cl-td-card:not(.cl-td-soon):active::after { opacity: 1 !important; }
.connect .cl-tools-dropdown-wrap .cl-td-pill {
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  margin-bottom: 10px !important;
  position: relative !important;
  z-index: 2 !important;
  background: rgba(255,107,74,0.10) !important;
  color: var(--orange) !important;
  border: 1px solid rgba(255,107,74,0.20) !important;
  white-space: nowrap !important;
  transition: background 0.25s, color 0.25s, border-color 0.25s !important;
}
[data-theme="dark"] .connect .cl-tools-dropdown-wrap .cl-td-pill, [data-theme="dark"] .connect .cl-tools-dropdown-wrap .cl-td-pill {
  background: rgba(255,107,74,0.13) !important;
  color: #FF9A78 !important;
  border-color: rgba(255,107,74,0.22) !important;
}
.connect .cl-tools-dropdown-wrap .cl-td-card:not(.cl-td-soon):hover .cl-td-pill, .connect .cl-tools-dropdown-wrap .cl-td-card:not(.cl-td-soon):active .cl-td-pill {
  background: rgba(255,255,255,0.20) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.connect .cl-tools-dropdown-wrap .cl-td-name {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  color: var(--txt) !important;
  position: relative !important;
  z-index: 2 !important;
  max-width: 85% !important;
  transition: color 0.25s !important;
}
.connect .cl-tools-dropdown-wrap .cl-td-card:not(.cl-td-soon):hover .cl-td-name, .connect .cl-tools-dropdown-wrap .cl-td-card:not(.cl-td-soon):active .cl-td-name { color: #fff !important; }
.connect .cl-tools-dropdown-wrap .cl-td-desc {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12.5px !important;
  color: var(--txt2) !important;
  line-height: 1.55 !important;
  position: relative !important;
  z-index: 2 !important;
  margin-top: 7px !important;
  max-width: 85% !important;
  transition: color 0.25s !important;
}
.connect .cl-tools-dropdown-wrap .cl-td-card:not(.cl-td-soon):hover .cl-td-desc, .connect .cl-tools-dropdown-wrap .cl-td-card:not(.cl-td-soon):active .cl-td-desc { color: rgba(255,255,255,0.82) !important; }
.connect .cl-tools-dropdown-wrap .cl-td-desc-mobile { display: none !important; }
.connect .cl-tools-dropdown-wrap .cl-td-bottom {
  margin-top: auto !important;
  padding-top: 18px !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
}
.connect .cl-tools-dropdown-wrap .cl-td-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}
.connect .cl-tools-dropdown-wrap .cl-td-tag {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--txt2) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  background: var(--surface2) !important;
  border: 1px solid var(--bdr) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  transition: background 0.25s, color 0.25s, border-color 0.25s !important;
}
.connect .cl-tools-dropdown-wrap .cl-td-card:not(.cl-td-soon):hover .cl-td-tag, .connect .cl-tools-dropdown-wrap .cl-td-card:not(.cl-td-soon):active .cl-td-tag {
  background: rgba(255,255,255,0.18) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.connect .cl-tools-dropdown-wrap .cl-td-dot {
  width: 5px !important; height: 5px !important;
  border-radius: 50% !important;
  background: var(--orange) !important;
  flex-shrink: 0 !important;
  transition: background 0.25s !important;
}
.connect .cl-tools-dropdown-wrap .cl-td-card:not(.cl-td-soon):hover .cl-td-dot, .connect .cl-tools-dropdown-wrap .cl-td-card:not(.cl-td-soon):active .cl-td-dot { background: #fff !important; }
.connect .cl-tools-dropdown-wrap .cl-td-icon {
  position: absolute !important;
  bottom: -16px !important; right: -16px !important;
  width: 88px !important; height: 88px !important;
  background: var(--surface2) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--txt3) !important;
  z-index: 1 !important;
  transform: rotate(-4deg) !important;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s !important;
}
.connect .cl-tools-dropdown-wrap .cl-td-icon svg {
  width: 44px !important; height: 44px !important;
  stroke-width: 1.8 !important; opacity: 0.85 !important;
}
.connect .cl-tools-dropdown-wrap .cl-td-card:not(.cl-td-soon):hover .cl-td-icon, .connect .cl-tools-dropdown-wrap .cl-td-card:not(.cl-td-soon):active .cl-td-icon {
  background: rgba(255,255,255,0.92) !important;
  border-color: transparent !important;
  color: var(--orange) !important;
  transform: scale(1.12) rotate(-12deg) translateY(-8px) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.12) !important;
}
@media (max-width: 900px) {
  .connect .cl-tools-dropdown-wrap .cl-tools-panel-inner { grid-template-columns: repeat(2, 1fr) !important; }
  .connect .cl-tools-dropdown-wrap .cl-tools-panel.cl-open { max-height: 700px !important; }
}
@media (max-width: 560px) {
  .connect .cl-tools-dropdown-wrap { padding: 32px 16px !important; }
  .connect .cl-tools-dropdown-wrap .cl-tools-panel-inner { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .connect .cl-tools-dropdown-wrap .cl-tools-panel.cl-open { max-height: 700px !important; }
  .connect .cl-tools-dropdown-wrap .cl-td-card { padding: 15px !important; min-height: 140px !important; border-radius: 16px !important; }
  .connect .cl-tools-dropdown-wrap .cl-td-pill { font-size: 9px !important; padding: 4px 8px !important; margin-bottom: 8px !important; }
  .connect .cl-tools-dropdown-wrap .cl-td-name { font-size: 14px !important; max-width: 90% !important; }
  .connect .cl-tools-dropdown-wrap .cl-td-desc { font-size: 11px !important; line-height: 1.4 !important; max-width: 90% !important; }
  .connect .cl-tools-dropdown-wrap .cl-td-desc-desktop { display: none !important; }
  .connect .cl-tools-dropdown-wrap .cl-td-desc-mobile { display: inline !important; }
  .connect .cl-tools-dropdown-wrap .cl-td-icon { width: 70px !important; height: 70px !important; bottom: -12px !important; right: -12px !important; }
  .connect .cl-tools-dropdown-wrap .cl-td-icon svg { width: 34px !important; height: 34px !important; }
  .connect .cl-tools-dropdown-wrap .cl-td-bottom { display: none !important; }
}

/* ---- and the other direction: this page's own rules that reached the site
   footer on live. Its stylesheet was global there and reuses the footer's
   class names, so wherever the footer's own CSS didn't set a property, the
   page's value applied (Connect's -18px / 28px margins and centring on the
   tools panel). Properties the footer sets itself are left out — the footer
   loaded later and won those. ---- */
body.connect-page #site-footer .cl-tools-dropdown-wrap { display: flex !important; flex-direction: column !important; align-items: center !important; margin-top: -18px !important; margin-bottom: 28px !important; }
body.connect-page #site-footer .cl-tools-label { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 13px !important; color: var(--txt2) !important; letter-spacing: 0.1px !important; white-space: nowrap !important; }
body.connect-page #site-footer .cl-td-card.cl-td-soon > *:not(.cl-td-ribbon) { opacity: 0.40 !important; }
body.connect-page #site-footer .cl-td-ribbon { position: absolute !important; top: 18px !important; right: -30px !important; width: 115px !important; text-align: center !important; background: var(--orange) !important; color: #fff !important; padding: 4px 0 !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 8.5px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.10em !important; transform: rotate(45deg) !important; box-shadow: 0 3px 10px rgba(255,107,74,0.35) !important; z-index: 10 !important; pointer-events: none !important; }
body.connect-page #site-footer .cl-tools-outer { background: #08060400 !important; margin: 72px -40px 0 !important; padding: 68px 40px 72px !important; border-top: 1px solid rgba(255,255,255,0.05) !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; position: relative !important; }
body.connect-page #site-footer .cl-tools-outer::before { content: '' !important; position: absolute !important; inset: 0 !important; background: #070504 !important; z-index: 0 !important; }
body.connect-page #site-footer .cl-tools-inner { max-width: 1520px !important; margin: 0 auto !important; position: relative !important; z-index: 1 !important; }
body.connect-page #site-footer .cl-tools-eyebrow { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: rgba(255,107,74,0.1) !important; color: var(--orange) !important; border: 1px solid rgba(255,107,74,0.22) !important; border-radius: 999px !important; padding: 5px 13px !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; margin-bottom: 22px !important; font-family: 'Plus Jakarta Sans', sans-serif !important; }
body.connect-page #site-footer .cl-tools-headline { font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 800 !important; font-size: clamp(30px, 4vw, 50px) !important; line-height: 1.04 !important; letter-spacing: -1.8px !important; color: #F0EBE3 !important; margin-bottom: 40px !important; max-width: 620px !important; }