/* ============================================================
   Check-In - "The Friendly Notice Board" redesign layer.
   Replaces the earlier editorial-brutalist ("Neighborhood
   Bulletin") system. Scoped under body.ci-redesign so it only
   ever affects the 4 marketing pages that opt in (index,
   about-us, contact, how-it-works). Nothing in styles.css is
   edited or removed - this file loads AFTER it and reskins
   colour/type/shape/shadow. All existing IDs, classes, JS hooks,
   form actions and layout mechanics (flex/grid/position/transform)
   are left untouched so nothing functional breaks.

   World: warm, rounded, hand-friendly - a real neighbor posting a
   real notice, not a police blotter. Purple carries over from the
   prior system (the one fixed brand color); everything else - the
   cream base, the green secondary (matches the logo's checkmark), the
   rounded/soft-shadow shape language, the Baloo 2 + Nunito Sans type
   pairing - is new.

   NOTE: nearly every declaration below uses !important. This is
   not stylistic - styles.css is a legacy file full of defensive
   !important overrides (and a few inline style="...!important"
   attributes), so this layer has to match that specificity to
   reliably win, regardless of selector specificity.
   ============================================================ */

body.ci-redesign {
  --ci-paper: #FFF8F0;
  --ci-paper-deep: #FDEEDE;
  --ci-ink: #3A2E28;
  --ci-muted: #7A6B61;
  --ci-purple: #7C5CBF;
  --ci-purple-deep: #7C5CBF;
  --ci-purple-tint: #F1ECFA;
  --ci-green: #34C08B;
  --ci-green-deep: #23815D;
  --ci-green-tint: #E7F7F1;
  --ci-green-text: #1F7353;
  --ci-display: 'Baloo 2', ui-rounded, system-ui, sans-serif;
  --ci-sans: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
  --ci-radius-sm: 12px;
  --ci-radius-md: 20px;
  --ci-radius-lg: 28px;
  --ci-radius-pill: 999px;
  --ci-shadow-sm: 0 4px 16px rgba(124, 92, 191, 0.14);
  --ci-shadow-md: 0 10px 30px rgba(124, 92, 191, 0.16);
  --ci-shadow-warm: 0 10px 28px rgba(52, 192, 139, 0.2);
  --ci-shadow-ink: 0 8px 24px rgba(58, 46, 40, 0.1);

  background: var(--ci-paper) !important;
  color: var(--ci-ink) !important;
}

body.ci-redesign,
body.ci-redesign p,
body.ci-redesign a,
body.ci-redesign li,
body.ci-redesign span,
body.ci-redesign button,
body.ci-redesign input,
body.ci-redesign textarea,
body.ci-redesign label {
  font-family: var(--ci-sans) !important;
}

body.ci-redesign h1,
body.ci-redesign h2,
body.ci-redesign h3 {
  font-family: var(--ci-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

body.ci-redesign .highlight-purple,
body.ci-redesign .purple-word {
  color: var(--ci-purple) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

/* Hand-drawn highlighter swipe - opt-in via .ci-green-highlight, applied only
   to a handful of specific call-outs (not every .highlight-purple/.purple-word
   instance). Background-image (not a pseudo-element) so it paints behind the
   glyphs for free and clones per wrapped line via box-decoration-break, so
   phrases that wrap onto a second line still get their own highlight instead
   of one broken bar. The path is basically a straight bar, not a wave -
   top/bottom edges only wobble slightly and non-periodically, and the two end
   caps are cut at a slight opposing slant, so it reads as one quick marker
   stroke rather than a squiggle.

   Fills in on scroll: starts at background-size 0% width (image hidden) and
   script.js adds .ci-highlight-in-view once the word scrolls into view, which
   animates the width to 100%. Height stays fixed the whole time, and
   background-position stays left-anchored, so it reads as the stroke being
   drawn left-to-right rather than fading or scaling in. The transition-delay
   (0.5s) holds the fill until just after the word itself is likely on screen,
   so the reader registers the plain text first and then watches the
   highlight get drawn under it, instead of both appearing at once as one flat
   pop. */
body.ci-redesign .ci-green-highlight {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0.5,2.6 C20,1 45,2.4 65,1.3 C80,0.5 92,1.7 99.5,2.2 L100,8.6 C88,9.6 70,8 50,9.2 C32,10.1 14,8.8 0,9.4 Z' fill='%2334C08B' fill-opacity='0.48'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 0 58% !important;
  background-size: 0% 0.8em !important;
  transition: background-size 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.5s !important;
  padding: 0.02em 0.2em 0.06em !important;
  margin: 0 -0.2em !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
}

body.ci-redesign .ci-green-highlight.ci-highlight-in-view {
  background-size: 100% 0.8em !important;
}

@media (prefers-reduced-motion: reduce) {
  body.ci-redesign .ci-green-highlight {
    background-size: 100% 0.8em !important;
    transition: none !important;
  }
}

/* ---------- Tag / kicker pill ---------- */
body.ci-redesign .ci-tag {
  display: inline-block;
  background: var(--ci-purple-tint) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--ci-radius-pill) !important;
  padding: 7px 16px;
  font-family: var(--ci-sans) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  color: var(--ci-purple-deep) !important;
}

/* ---------- Nav ---------- */
body.ci-redesign .navbar {
  background-color: var(--ci-paper) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 12px rgba(58, 46, 40, 0.06) !important;
}

body.ci-redesign .logo h1 {
  font-family: var(--ci-display) !important;
  color: var(--ci-ink) !important;
}

body.ci-redesign .logo-image {
  width: auto !important;
  height: 56px !important;
}

body.ci-redesign .mobile-logo .logo-image {
  width: auto !important;
  height: 45px !important;
}

body.ci-redesign .nav-links a {
  font-family: var(--ci-sans) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ci-ink) !important;
}

body.ci-redesign .nav-links a:hover,
body.ci-redesign .nav-links a.active {
  color: var(--ci-purple) !important;
}

body.ci-redesign .nav-links a::after {
  background: var(--ci-green) !important;
  border-radius: var(--ci-radius-pill) !important;
}

body.ci-redesign .mobile-menu-toggle,
body.ci-redesign .mobile-menu-toggle i {
  color: var(--ci-ink) !important;
}

body.ci-redesign .mobile-nav-content {
  background-color: var(--ci-paper) !important;
  border-left: none !important;
  box-shadow: -8px 0 30px rgba(58, 46, 40, 0.1) !important;
}

body.ci-redesign .mobile-nav-link:hover,
body.ci-redesign .mobile-nav-link.active {
  color: var(--ci-purple) !important;
}

body.ci-redesign .mobile-button-primary,
body.ci-redesign .mobile-button-primary:hover {
  background-color: var(--ci-purple) !important;
  border-radius: var(--ci-radius-pill) !important;
  box-shadow: var(--ci-shadow-sm) !important;
}

/* ---------- Buttons (shared) ---------- */
body.ci-redesign .cta-button-primary,
body.ci-redesign .cta-button-primary:link,
body.ci-redesign .cta-button-primary:visited,
body.ci-redesign .cta-button-primary:hover,
body.ci-redesign .cta-button-primary:active,
body.ci-redesign .cta-button-primary:focus {
  background: var(--ci-purple) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ci-radius-pill) !important;
  box-shadow: var(--ci-shadow-md) !important;
  font-family: var(--ci-sans) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0;
  text-transform: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

body.ci-redesign .cta-button-primary:hover {
  transform: translateY(-2px) !important;
  background: var(--ci-purple-deep) !important;
  box-shadow: 0 14px 34px rgba(124, 92, 191, 0.28) !important;
}

body.ci-redesign .cta-button-secondary,
body.ci-redesign .cta-button-secondary:hover {
  background: #fff !important;
  color: var(--ci-purple-deep) !important;
  border: 2px solid var(--ci-purple-tint) !important;
  border-radius: var(--ci-radius-pill) !important;
  font-family: var(--ci-sans) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0;
  text-transform: none;
  backdrop-filter: none !important;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease !important;
}

body.ci-redesign .cta-button-secondary:hover {
  background: var(--ci-purple-tint) !important;
  color: var(--ci-purple-deep) !important;
  border-color: var(--ci-purple) !important;
  transform: translateY(-2px) !important;
  box-shadow: none !important;
}

body.ci-redesign .button.button-primary,
body.ci-redesign .login-button {
  background-color: var(--ci-purple) !important;
  border-radius: var(--ci-radius-pill) !important;
  box-shadow: var(--ci-shadow-sm) !important;
}

/* Shared inline .cta-button (about-us "Get Started" / how-it-works "Become a Moderator") */
body.ci-redesign .cta-button,
body.ci-redesign .cta-button:hover {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--ci-purple) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ci-radius-pill) !important;
  box-shadow: var(--ci-shadow-md) !important;
  padding: 15px 34px !important;
  font-family: var(--ci-sans) !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

body.ci-redesign .cta-button:hover {
  transform: translateY(-2px) !important;
  background: var(--ci-purple-deep) !important;
  box-shadow: 0 14px 30px rgba(124, 92, 191, 0.26) !important;
}

/* ---------- Hero ---------- */
body.ci-redesign .hero {
  /* .navbar is position:fixed at ~72px tall (56px logo + 16px vertical
     padding); this margin is the sole nav-clearance mechanism now that
     there's no masthead in between. */
  margin-top: 72px !important;
  background: linear-gradient(180deg, var(--ci-purple-tint) 0%, var(--ci-paper) 55%) !important;
  background-color: var(--ci-paper) !important;
  background-image: linear-gradient(180deg, var(--ci-purple-tint) 0%, var(--ci-paper) 55%) !important;
  color: var(--ci-ink) !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(1.5rem, 3vw, 2.5rem) !important;
  padding: 2.75rem 10% 4rem !important;
  min-height: 0 !important;
}

body.ci-redesign .hero::before {
  display: none !important;
}

body.ci-redesign .phone-mockup-container img,
body.ci-redesign .animate-image,
body.ci-redesign .app-screenshot,
body.ci-redesign .primary-mockup,
body.ci-redesign .secondary-mockup {
  box-shadow: none !important;
  filter: drop-shadow(0 22px 40px rgba(124, 92, 191, 0.22)) !important;
}

body.ci-redesign .headline-line-1,
body.ci-redesign .headline-line-2,
body.ci-redesign .headline-line-3 {
  color: var(--ci-ink) !important;
  font-family: var(--ci-display) !important;
  font-weight: 700 !important;
  font-size: 1.1em !important;
}

body.ci-redesign .gradient-text::after {
  display: none !important;
}

body.ci-redesign .hero-content {
  max-width: 560px !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

body.ci-redesign .hero-headline {
  text-align: left !important;
  width: auto !important;
  margin: 0 0 1.75rem !important;
  font-size: clamp(2.25rem, 2.4vw + 1.6rem, 4rem) !important;
  line-height: 1.15 !important;
}

body.ci-redesign .hero-headline .headline-line-1,
body.ci-redesign .hero-headline .headline-line-2 {
  margin-bottom: 0.15em !important;
}

body.ci-redesign .hero-headline .headline-line-3 {
  margin-bottom: 0 !important;
}

body.ci-redesign .hero-subheading {
  color: var(--ci-muted) !important;
  font-family: var(--ci-sans) !important;
  font-weight: 500;
  text-align: left !important;
  width: auto !important;
  max-width: 42ch !important;
  margin: 0 0 2.25rem !important;
}

body.ci-redesign .hero-cta-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: auto !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 1rem !important;
}

body.ci-redesign .hero-cta-section .cta-button-primary,
body.ci-redesign .hero-cta-section .cta-button-secondary {
  width: auto !important;
  max-width: 240px !important;
}

@media (max-width: 900px) {
  body.ci-redesign .hero {
    flex-direction: column !important;
    text-align: center !important;
    padding: 3rem 8% 3rem !important;
  }

  body.ci-redesign .hero-content {
    text-align: center !important;
    align-items: center;
  }

  body.ci-redesign .hero-headline,
  body.ci-redesign .hero-subheading {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }

  body.ci-redesign .hero-cta-section {
    align-items: center !important;
  }
}

/* ---------- Official Partner band ----------
   Two independent flex columns, middle-aligned against each other
   (align-items: center on .partner-columns) since the two sides now carry
   very different content weight - a large standalone logo + stat card on
   the left vs. a compact card grid on the right - and centering their
   midpoints reads better than pinning both to the top. Each column's own
   height is still purely its own content (header + body stacked with
   `gap`, no forced min-heights or shared grid rows), so nothing here can
   stretch or leave dead space under the other column. */
body.ci-redesign .exclusive-partners-section {
  border-top: none !important;
  border-bottom: none !important;
  padding: 36px 0 !important;
  background: var(--ci-purple-tint) !important;
}

body.ci-redesign .partner-band {
  width: min(100%, 1600px);
  margin: 0 auto;
  padding: 0 98px;
  box-sizing: border-box;
}

/* Wide gap + space-between so the two blocks sit toward the outer edges
   and use the band's full horizontal length instead of huddling in the
   middle with dead space at either end.
   align-items: flex-start puts both columns' first child - the two header
   labels - on the same baseline, so they read as a matched pair. */
body.ci-redesign .partner-columns {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 170px;
  width: 100%;
}

body.ci-redesign .partner-col-official,
body.ci-redesign .partner-col-secondary {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 26px;
  min-width: 0;
}

body.ci-redesign .partner-col-official {
  flex: 0.85 1 0;
}

/* Only the official-partner column remains (secondary partners-of block
   was removed) - drop the space-between two-column layout and center
   the single column instead, so it doesn't hug the left edge. */
body.ci-redesign .partner-columns-single {
  justify-content: center !important;
}

body.ci-redesign .partner-columns-single .partner-col-official {
  flex: 1 1 auto;
  width: 100%;
  max-width: 500px;
}

/* Slightly wider so three logo cards always fit on one row at desktop.
   align-self: stretch makes this column match the taller left column's
   height; the logo strip then takes `margin: auto 0` below to sit at the
   column's vertical midpoint - header stays pinned to the top, cards ride
   the middle. */
body.ci-redesign .partner-col-secondary {
  flex: 1.15 1 0;
  align-self: stretch;
}

body.ci-redesign .partner-header {
  display: flex !important;
  flex-direction: column !important;
  text-align: center;
  width: 100%;
}

/* Both eyebrow labels are the same deep purple now - one was green, the
   other muted gray, which read as unrelated. */
body.ci-redesign .partner-label,
body.ci-redesign .partner-secondary-label {
  font-family: var(--ci-sans) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ci-purple-deep) !important;
  margin: 0 0 2px !important;
  text-align: center !important;
}

body.ci-redesign .partner-name,
body.ci-redesign .partner-secondary-name {
  font-family: var(--ci-display) !important;
  font-weight: 700 !important;
  font-size: 36px !important;
  line-height: 1.15 !important;
  color: var(--ci-ink) !important;
  margin: 0 !important;
}

/* Logo + stat live in the official column's own flow, spaced with `gap`
   rather than margins, so this block's total height is exactly its
   content - nothing else in the section depends on or is stretched by
   its size. */
body.ci-redesign .partner-official-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px;
  width: 100%;
  margin-top: -24px;
}

/* Standalone, no card/background - the logo's own transparency carries
   it. This is the primary brand element of the whole band: deliberately
   the largest single asset in the section. */
body.ci-redesign .partner-featured-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 100%;
  margin: -32px 0 30px !important;
}

body.ci-redesign .partner-featured-logo a {
  display: block !important;
  width: 100% !important;
}

/* The source PNG was 447x447 with only 383x160 of actual artwork - 64% of
   its height was transparent padding, which is what inflated this column
   and made the logo look small at any given box size. Cropped asset is
   383x160 (2.4:1), so it's sized by WIDTH now, not height. */
body.ci-redesign .partner-featured-logo img {
  display: block !important;
  width: 100% !important;
  max-width: 500px !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Horizontal pill, not a stacked block: the number and its caption sit
   side by side so the card is ~88px tall instead of ~136px. That height
   comes straight off the section, since this column is what sets the
   band's overall height. */
body.ci-redesign .partner-stat {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  background: #fff !important;
  border-radius: var(--ci-radius-lg) !important;
  padding: 14px 32px !important;
  box-shadow: var(--ci-shadow-sm) !important;
}

body.ci-redesign .partner-stat-num {
  font-family: var(--ci-display) !important;
  font-weight: 700 !important;
  font-size: 60px !important;
  line-height: 1 !important;
  color: var(--ci-purple) !important;
}

body.ci-redesign .partner-note {
  font-family: var(--ci-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ci-text-muted, #6b6b78) !important;
  text-align: center !important;
  margin: 0 !important;
}

body.ci-redesign .partner-stat-cap {
  font-family: var(--ci-sans) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  max-width: 20ch;
  line-height: 1.35 !important;
  color: var(--ci-ink) !important;
  text-align: left;
}

body.ci-redesign .partner-logo-strip {
  width: 100%;
  margin: auto 0;
}

/* Explicitly three across on desktop so the row is always clean and even;
   the responsive breakpoints below switch to auto-fit so it can reflow. */
body.ci-redesign .partner-logo-track {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  justify-items: stretch;
  gap: 24px;
  width: 100%;
}

body.ci-redesign .partner-logo-item {
  height: 260px;
  background: #fff !important;
  border-radius: var(--ci-radius-md) !important;
  box-shadow: var(--ci-shadow-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

body.ci-redesign .partner-logo-item:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: var(--ci-shadow-md) !important;
}

/* Full color always. object-fit: contain (via max-width/max-height + auto)
   preserves each logo's native aspect ratio - nothing stretches or distorts. */
body.ci-redesign .partner-logo-item img {
  display: block !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

@media (max-width: 900px) {
  body.ci-redesign .partner-band {
    padding: 0 20px;
  }

  /* Stacked: reset the desktop space-between/wide-gap pair, which would
     otherwise spread the two blocks apart vertically. */
  body.ci-redesign .partner-columns {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 32px;
  }

  body.ci-redesign .partner-col-official,
  body.ci-redesign .partner-col-secondary {
    flex: 0 1 auto;
    align-self: auto;
    width: 100%;
    max-width: 560px;
  }

  /* Stacked, so there is no leftover column height to center within -
     drop the desktop auto margins that would add stray space. */
  body.ci-redesign .partner-logo-strip {
    margin: 0;
  }

  body.ci-redesign .partner-featured-logo img {
    max-width: 470px !important;
  }

  body.ci-redesign .partner-stat-num {
    font-size: 48px !important;
  }

  body.ci-redesign .partner-logo-track {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 18px;
  }

  body.ci-redesign .partner-logo-item {
    height: 170px;
    padding: 18px !important;
  }
}

@media (max-width: 600px) {
  body.ci-redesign .exclusive-partners-section {
    padding: 2rem 0 !important;
  }

  body.ci-redesign .partner-name,
  body.ci-redesign .partner-secondary-name {
    font-size: 27px !important;
  }

  body.ci-redesign .partner-stat {
    padding: 20px 32px !important;
  }

  body.ci-redesign .partner-stat-num {
    font-size: 42px !important;
  }

  body.ci-redesign .partner-featured-logo img {
    max-width: 340px !important;
  }

  body.ci-redesign .partner-logo-track {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 14px;
  }

  body.ci-redesign .partner-logo-item {
    height: 120px;
    padding: 16px !important;
  }
}

/* ---------- Demo (YouTube) section ---------- */
body.ci-redesign .demo-section {
  background: var(--ci-paper) !important;
  border-bottom: none !important;
  min-height: 0 !important;
}

body.ci-redesign .demo-section .fog-effect,
body.ci-redesign .fog-layer {
  display: none !important;
}

body.ci-redesign .demo-section h2 {
  color: var(--ci-ink) !important;
}

body.ci-redesign .video-container {
  border: none !important;
  border-radius: var(--ci-radius-lg) !important;
  box-shadow: var(--ci-shadow-ink) !important;
  overflow: hidden;
}

/* ---------- Features / live map widget ---------- */
body.ci-redesign .features-section {
  background: var(--ci-purple) !important;
  border-bottom: none !important;
}

body.ci-redesign .features-left,
body.ci-redesign .features-right,
body.ci-redesign .feature-button {
  min-width: 0 !important;
}

@media (max-width: 480px) {
  body.ci-redesign .features-section .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.ci-redesign .features-left h2 {
    font-size: 1.6rem !important;
    line-height: 1.25 !important;
    margin-bottom: 1.25rem !important;
  }

  body.ci-redesign .features-left .features-list,
  body.ci-redesign .features-list {
    margin-bottom: 1.5rem !important;
  }

  body.ci-redesign .features-left .features-list li,
  body.ci-redesign .features-list li {
    font-size: 0.95rem !important;
  }

  body.ci-redesign .feature-buttons {
    gap: 0.6rem !important;
  }
}

body.ci-redesign .features-section h2 {
  color: #fff !important;
}

/* .highlight-purple defaults to purple text, which nearly disappears
   against this panel's purple-deep background - swap to green-tint,
   matching how .features-list li strong already handles the same panel. */
body.ci-redesign .features-section h2 .highlight-purple {
  color: var(--ci-green-tint) !important;
}

body.ci-redesign .features-left .features-list li,
body.ci-redesign .features-list li {
  color: #fff !important;
  opacity: 0.92;
}

body.ci-redesign .features-left .features-list li strong,
body.ci-redesign .features-list li strong {
  color: var(--ci-green-tint) !important;
}

body.ci-redesign .features-list li::before {
  color: #fff !important;
}

body.ci-redesign .feature-button {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ci-radius-pill) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background 0.18s ease, transform 0.15s ease !important;
}

body.ci-redesign .feature-button:hover {
  border-color: transparent !important;
  background: rgba(255, 255, 255, 0.2) !important;
  box-shadow: none !important;
  transform: translateY(-2px) !important;
}

body.ci-redesign .feature-button:active {
  background: rgba(255, 255, 255, 0.28) !important;
  transform: scale(0.95) !important;
  transition: background 0.08s ease, transform 0.08s ease !important;
}

body.ci-redesign .feature-button i {
  color: var(--ci-green-tint) !important;
}

body.ci-redesign .safety-dashboard.landing-live-map-mockup {
  border: none !important;
  border-radius: var(--ci-radius-lg) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
  overflow: hidden;
}

body.ci-redesign .landing-map-title {
  font-family: var(--ci-display) !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
}

body.ci-redesign .landing-map-title .highlight-purple {
  color: var(--ci-purple) !important;
}

body.ci-redesign .landing-category-toggles button.active {
  background: var(--ci-purple) !important;
  border-color: var(--ci-purple) !important;
  border-radius: var(--ci-radius-pill) !important;
}

@media (min-width: 901px) {
  body.ci-redesign .safety-dashboard.landing-live-map-mockup {
    width: calc(100% - 2.25rem) !important;
  }
}

body.ci-redesign .landing-category-toggles button:hover {
  background: var(--ci-purple-tint) !important;
}

/* green-deep, not the bright true-logo green - white text on the bright
   green measured 2.32:1 (badly fails AA); green-deep clears 4.8:1. The
   bright green stays reserved for icons/underlines/decorative fills that
   don't pair with white text. */
body.ci-redesign .landing-ping-button {
  background: var(--ci-green-deep) !important;
  border-radius: var(--ci-radius-pill) !important;
  box-shadow: 0 6px 16px rgba(52, 192, 139, 0.3) !important;
}

body.ci-redesign .landing-map-view {
  border: none !important;
  border-radius: var(--ci-radius-md) !important;
}

/* The "Other" ping category badge in the sidebar list still carried the
   old pre-redesign green (#4caf50/#e8f5e8 from styles.css) - swap it to
   the same green-tint/green-text pair used for every other green badge
   in this file so it matches the logo's checkmark green. */
body.ci-redesign .safety-dashboard .ping-category.other {
  background: var(--ci-green-tint) !important;
  color: var(--ci-green-text) !important;
}

/* ---------- App showcase (feature video rows) ---------- */
body.ci-redesign .app-showcase {
  background: var(--ci-paper) !important;
}

body.ci-redesign .app-showcase h2 {
  color: var(--ci-ink) !important;
}

body.ci-redesign .showcase-grid {
  gap: 0.5rem !important;
}

body.ci-redesign .showcase-item {
  margin-bottom: 0 !important;
}

@media (min-width: 769px) {
  body.ci-redesign .showcase-item {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
}

body.ci-redesign .showcase-text h3 {
  color: var(--ci-ink) !important;
  font-family: var(--ci-display) !important;
  font-weight: 700 !important;
  font-size: 1.7rem !important;
}

body.ci-redesign .showcase-features li {
  color: var(--ci-ink) !important;
}

body.ci-redesign .showcase-features li::before {
  color: var(--ci-purple) !important;
}

body.ci-redesign .video-frame-small {
  border: none !important;
  border-radius: var(--ci-radius-lg) !important;
  box-shadow: var(--ci-shadow-ink) !important;
  overflow: hidden;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  aspect-ratio: 14 / 9 !important;
}

body.ci-redesign .video-frame-small .frame-content,
body.ci-redesign .video-frame-small iframe,
body.ci-redesign .showcase-item .video-frame-small .frame-content iframe {
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
}

/* ---------- Newsletter modal ---------- */
body.ci-redesign .newsletter-modal {
  background: #fff !important;
  border: none !important;
  border-radius: var(--ci-radius-lg) !important;
  box-shadow: 0 24px 60px rgba(58, 46, 40, 0.28) !important;
}

body.ci-redesign .newsletter-modal-kicker {
  color: var(--ci-green-text) !important;
  font-family: var(--ci-sans) !important;
  font-weight: 800;
}

body.ci-redesign .newsletter-modal-title {
  font-family: var(--ci-display) !important;
  font-weight: 700 !important;
  color: var(--ci-ink) !important;
}

body.ci-redesign .newsletter-modal-subtitle {
  color: var(--ci-muted) !important;
}

body.ci-redesign .newsletter-modal-form input[type="email"] {
  border: 2px solid var(--ci-paper-deep) !important;
  border-radius: var(--ci-radius-pill) !important;
  background: var(--ci-paper) !important;
}

body.ci-redesign .newsletter-modal-form input[type="email"]:focus {
  border-color: var(--ci-purple) !important;
  outline: none !important;
}

body.ci-redesign .newsletter-modal-submit {
  background: var(--ci-purple) !important;
  color: #fff !important;
  border-radius: var(--ci-radius-pill) !important;
  font-family: var(--ci-sans) !important;
  font-weight: 800;
}

body.ci-redesign .newsletter-modal-submit:hover {
  background: var(--ci-purple-deep) !important;
}

body.ci-redesign .newsletter-modal-close {
  border-radius: var(--ci-radius-pill) !important;
  border: none !important;
  background: var(--ci-paper-deep) !important;
  color: var(--ci-ink) !important;
}

body.ci-redesign .newsletter-modal-fine-print {
  color: var(--ci-muted) !important;
}

/* ---------- Inline newsletter band ---------- */
body.ci-redesign .news-band {
  background: var(--ci-purple) !important;
  border-bottom: none !important;
}

body.ci-redesign .news-inner {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 26px 48px !important;
  max-width: 1240px;
  margin: 0 auto !important;
  flex-wrap: wrap;
}

body.ci-redesign .news-text {
  flex: 1;
  min-width: 240px;
}

body.ci-redesign .news-title {
  font-family: var(--ci-display) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  color: #fff !important;
  margin: 0 !important;
}

body.ci-redesign .news-sub {
  font-family: var(--ci-sans) !important;
  font-size: 14px !important;
  font-weight: 600;
  opacity: 0.95;
  margin: 4px 0 0 !important;
  color: #fff !important;
}

body.ci-redesign .news-fine {
  font-family: var(--ci-sans) !important;
  font-size: 11px !important;
  opacity: 0.85;
  margin: 6px 0 0 !important;
  color: #fff !important;
}

body.ci-redesign .news-form {
  display: flex !important;
  gap: 8px !important;
  flex-shrink: 0;
}

body.ci-redesign .news-form input {
  border: none !important;
  border-radius: var(--ci-radius-pill) !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
  width: 220px;
  outline: none;
  background: #fff !important;
  color: var(--ci-ink) !important;
  font-family: var(--ci-sans) !important;
}

/* green-deep at rest, green-text on hover - white on the bright true-logo
   green fails contrast (2.32:1); both these darker shades clear 4.5:1. */
body.ci-redesign .news-form button {
  border: none !important;
  border-radius: var(--ci-radius-pill) !important;
  background: var(--ci-green-deep) !important;
  color: #fff !important;
  font-weight: 800 !important;
  padding: 0 24px !important;
  cursor: pointer;
  font-family: var(--ci-sans) !important;
  font-size: 0.85rem !important;
  text-transform: none;
  letter-spacing: 0;
  transition: background 0.18s ease, transform 0.18s ease !important;
}

body.ci-redesign .news-form button:hover {
  background: var(--ci-green-text) !important;
  transform: translateY(-2px) !important;
}

body.ci-redesign .news-form button:disabled {
  opacity: 0.75;
  cursor: not-allowed;
  transform: none !important;
}

body.ci-redesign .news-status {
  flex-basis: 100%;
  font-family: var(--ci-sans) !important;
  font-size: 13px !important;
  margin: 8px 0 0 !important;
  color: #fff !important;
}

body.ci-redesign .news-status:empty {
  display: none !important;
}

@media (max-width: 700px) {
  body.ci-redesign .news-inner {
    flex-direction: column;
    align-items: flex-start !important;
  }

  body.ci-redesign .news-form {
    width: 100%;
  }

  body.ci-redesign .news-form input {
    flex: 1;
    min-width: 0;
    width: auto;
  }
}

@media (max-width: 420px) {
  body.ci-redesign .news-form {
    flex-direction: column;
  }

  body.ci-redesign .news-form input {
    width: 100%;
    box-sizing: border-box;
  }

  body.ci-redesign .news-form button {
    width: 100%;
    padding: 12px 20px !important;
  }
}

/* ---------- Footer ---------- */
body.ci-redesign .footer {
  background: #000 !important;
  border-top: none !important;
}

body.ci-redesign .footer-section h3 {
  font-family: var(--ci-sans) !important;
  font-size: 0.85rem !important;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #fff !important;
}

body.ci-redesign .footer .social-links a {
  transition: color 0.18s ease, transform 0.18s ease;
}

body.ci-redesign .footer .social-links a:hover {
  color: var(--ci-green) !important;
  transform: translateY(-2px);
}

body.ci-redesign .footer-bottom {
  font-family: var(--ci-sans) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0;
  opacity: 0.75;
}

/* ---------- Inner-page hero (about/contact/how-it-works) ---------- */
body.ci-redesign .page-hero,
body.ci-redesign .inner-hero {
  background: var(--ci-paper) !important;
  border-bottom: none !important;
}

/* ---------- About page ---------- */
body.ci-redesign .about-banner {
  background: linear-gradient(135deg, var(--ci-purple) 0%, var(--ci-purple-deep) 100%) !important;
  margin-top: 72px !important;
}

body.ci-redesign .about-banner::before {
  display: none !important;
}

body.ci-redesign .about-banner h1 {
  color: #fff !important;
  font-family: var(--ci-display) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

body.ci-redesign .about-banner p,
body.ci-redesign .about-banner p span {
  color: #fff !important;
  text-shadow: none !important;
}

body.ci-redesign .about-content {
  background: var(--ci-paper) !important;
}

body.ci-redesign .about-section,
body.ci-redesign .why-created-section,
body.ci-redesign .join-movement {
  background: #fff !important;
  border: none !important;
  border-radius: var(--ci-radius-lg) !important;
  box-shadow: var(--ci-shadow-ink) !important;
}

body.ci-redesign .about-section h2,
body.ci-redesign .why-created-section h2,
body.ci-redesign .join-movement h2 {
  font-family: var(--ci-display) !important;
  font-weight: 700 !important;
  color: var(--ci-ink) !important;
}

body.ci-redesign .about-section h2::after {
  display: none !important;
}

body.ci-redesign .about-section p,
body.ci-redesign .why-created-section p,
body.ci-redesign .join-movement p {
  color: var(--ci-muted) !important;
}

/* Problem log - kept as a single flowing list (not a same-size card grid),
   re-skinned warm: soft rounded icon chips and a light hairline divider
   instead of ink rules. */
body.ci-redesign .problem-log {
  margin-top: 8px !important;
  border-top: none !important;
}

body.ci-redesign .problem-entry {
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
  padding: 22px 0 !important;
  border-bottom: 1px solid var(--ci-paper-deep) !important;
}

body.ci-redesign .problem-entry:last-child {
  border-bottom: none !important;
}

body.ci-redesign .problem-entry i {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ci-radius-pill) !important;
  background: var(--ci-purple-tint) !important;
  font-size: 1.15rem !important;
  color: var(--ci-purple) !important;
}

body.ci-redesign .problem-entry-body h3 {
  font-family: var(--ci-display) !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  color: var(--ci-ink) !important;
  margin: 0 0 4px !important;
}

body.ci-redesign .problem-entry-body p {
  color: var(--ci-muted) !important;
  margin: 0 !important;
}

@media (max-width: 480px) {
  body.ci-redesign .problem-entry {
    gap: 14px !important;
  }

  body.ci-redesign .problem-entry i {
    width: 36px;
    height: 36px;
    font-size: 1rem !important;
  }
}

/* ---------- How It Works page ---------- */
body.ci-redesign .how-it-works-page {
  background: var(--ci-paper) !important;
  margin-top: 72px !important;
  padding-top: 2.75rem !important;
}

@media (max-width: 768px) {
  body.ci-redesign .how-it-works-page {
    padding-top: 2rem !important;
  }
}

@media (max-width: 480px) {
  body.ci-redesign .how-it-works-page {
    padding-top: 1.5rem !important;
  }
}

body.ci-redesign .how-it-works-page h2 {
  font-family: var(--ci-display) !important;
  font-weight: 700 !important;
  color: var(--ci-ink) !important;
}

/* Procedure list - kept as a real numbered sequence (order genuinely
   matters here), re-skinned warm: soft purple number chip + light divider. */
body.ci-redesign .procedure-list {
  display: flex !important;
  flex-direction: column !important;
  border-top: none !important;
  margin-top: 8px !important;
}

body.ci-redesign .procedure-step {
  display: flex !important;
  align-items: flex-start !important;
  gap: 24px !important;
  padding: 28px 0 !important;
  border-bottom: 1px solid var(--ci-paper-deep) !important;
}

body.ci-redesign .procedure-step:last-child {
  border-bottom: none !important;
}

body.ci-redesign .procedure-num {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ci-radius-pill) !important;
  background: var(--ci-purple) !important;
  font-family: var(--ci-display) !important;
  font-weight: 700 !important;
  font-size: 1.4rem !important;
  line-height: 1 !important;
  color: #fff !important;
}

body.ci-redesign .procedure-body h3 {
  font-family: var(--ci-display) !important;
  font-weight: 700 !important;
  font-size: 1.4rem !important;
  color: var(--ci-ink) !important;
  margin: 0 0 8px !important;
}

body.ci-redesign .procedure-body p {
  color: var(--ci-muted) !important;
  margin: 0 0 8px !important;
  max-width: 60ch;
}

body.ci-redesign .procedure-note {
  display: block;
  font-family: var(--ci-sans) !important;
  font-size: 0.85rem !important;
  color: var(--ci-muted) !important;
  opacity: 0.85;
}

@media (max-width: 600px) {
  body.ci-redesign .procedure-step {
    gap: 14px !important;
    padding: 20px 0 !important;
  }

  body.ci-redesign .procedure-num {
    width: 40px;
    height: 40px;
    font-size: 1.1rem !important;
  }
}

body.ci-redesign .moderator-info {
  background: var(--ci-purple-tint) !important;
  border: none !important;
  border-radius: var(--ci-radius-lg) !important;
}

body.ci-redesign .moderator-info h3 {
  font-family: var(--ci-display) !important;
  font-weight: 700 !important;
  color: var(--ci-ink) !important;
}

body.ci-redesign .moderator-info p,
body.ci-redesign .moderator-info li {
  color: var(--ci-ink) !important;
  opacity: 0.82;
}

body.ci-redesign .moderator-info ul li:before {
  color: var(--ci-purple) !important;
}

/* ---------- Contact page ---------- */
body.ci-redesign .contact-page {
  background: var(--ci-paper) !important;
  margin-top: 72px !important;
  padding-top: 2.75rem !important;
}

body.ci-redesign .contact-title {
  font-family: var(--ci-display) !important;
  font-weight: 700 !important;
  color: var(--ci-ink) !important;
}

body.ci-redesign .contact-subtitle {
  color: var(--ci-muted) !important;
}

/* Contact directory - mono-label rows re-skinned warm: soft rounded
   pill labels, light hairline dividers instead of ink rules. */
body.ci-redesign .contact-directory {
  border-top: none !important;
}

body.ci-redesign .directory-entry {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 18px 0 !important;
  border-bottom: 1px solid var(--ci-paper-deep) !important;
}

body.ci-redesign .directory-entry:last-child {
  border-bottom: none !important;
}

body.ci-redesign .directory-label {
  font-family: var(--ci-sans) !important;
  font-size: 0.85rem !important;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ci-muted) !important;
}

body.ci-redesign .directory-value {
  font-family: var(--ci-sans) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--ci-ink) !important;
  text-decoration: none !important;
}

body.ci-redesign a.directory-value:hover {
  color: var(--ci-purple) !important;
}

body.ci-redesign .directory-socials {
  display: flex !important;
  gap: 12px;
}

body.ci-redesign .directory-socials a {
  background: var(--ci-purple-tint) !important;
  border: none !important;
  color: var(--ci-purple) !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: var(--ci-radius-pill) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  transition: background 0.18s ease, color 0.18s ease !important;
}

body.ci-redesign .directory-socials a:hover {
  background: var(--ci-purple) !important;
  color: #fff !important;
}

body.ci-redesign .directory-socials a svg,
body.ci-redesign .directory-socials a i {
  font-size: 1.2rem !important;
  width: 18px !important;
  height: 18px !important;
}

@media (max-width: 768px) {
  body.ci-redesign .contact-info-cards {
    display: flex !important;
  }
}

body.ci-redesign .contact-form-panel {
  /* The prior inline-styled version of this panel carried flex: 1 directly
     on the element; moving it to a class dropped that, so .contact-info-cards
     (flex: 1 from styles.css) grabbed all the extra row width while this
     panel shrank to its own content size. Restore the balance. */
  flex: 1;
  min-width: 0;
  background: #fff !important;
  border: none !important;
  border-radius: var(--ci-radius-lg) !important;
  box-shadow: var(--ci-shadow-ink) !important;
  padding: 40px !important;
}

body.ci-redesign .contact-form-panel h3 {
  font-family: var(--ci-display) !important;
  font-weight: 700 !important;
  font-size: 1.6rem !important;
  color: var(--ci-ink) !important;
  margin: 0 0 24px !important;
}

body.ci-redesign .contact-form-panel h3 span {
  color: var(--ci-purple) !important;
}

body.ci-redesign #contactForm {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

body.ci-redesign .form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

body.ci-redesign .form-group label {
  font-family: var(--ci-sans) !important;
  font-size: 0.8rem !important;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ci-ink) !important;
}

body.ci-redesign .form-group input,
body.ci-redesign .form-group textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 18px !important;
  font-family: var(--ci-sans) !important;
  font-size: 1rem !important;
  border: 2px solid var(--ci-paper-deep) !important;
  border-radius: var(--ci-radius-md) !important;
  background: var(--ci-paper) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

body.ci-redesign .form-group textarea {
  resize: vertical;
  min-height: 100px;
  border-radius: var(--ci-radius-md) !important;
}

body.ci-redesign .form-group input:focus,
body.ci-redesign .form-group textarea:focus {
  outline: none !important;
  border-color: var(--ci-purple) !important;
  box-shadow: 0 0 0 4px var(--ci-purple-tint) !important;
  background: #fff !important;
}

@media (max-width: 480px) {
  body.ci-redesign .contact-form-panel {
    padding: 24px !important;
  }
}

body.ci-redesign .submit-button {
  width: 100%;
  background: var(--ci-purple) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ci-radius-pill) !important;
  box-shadow: var(--ci-shadow-md) !important;
  padding: 16px 40px !important;
  font-family: var(--ci-sans) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

body.ci-redesign .submit-button:hover {
  background: var(--ci-purple-deep) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px rgba(124, 92, 191, 0.28) !important;
}