/* ==========================================================================
   Caroline — visual layer
   Loaded after Caroline.css. Palette is the campaign's own; what's added here
   is depth, motion and the responsive behaviour.

   The structural idea: NY-12 is a transit district and the signature policy is
   about where money travels, so lists that are genuinely sequential — the
   voting timeline, the issue list — are drawn as a route line with stops.
   That's a device the content earns, not decoration applied everywhere.
   ========================================================================== */

:root {
  --ink:        #0a1628;
  --ink-2:      #12233f;
  --ink-3:      #1b3357;
  --signal:     #c41e3a;
  --signal-lit: #e842610;
  --brass:      #d4a843;
  --surface:    #f6f5f2;
  --raised:     #ffffff;
  --slate:      #5b6478;
  --hairline:   rgba(10,22,40,0.09);

  /* Two-layer shadows: a wide ambient one plus a tight contact one. A single
     soft grey blur under everything is the giveaway of a template. */
  --lift-1: 0 1px 2px rgba(10,22,40,0.06), 0 4px 12px -4px rgba(10,22,40,0.10);
  --lift-2: 0 2px 4px rgba(10,22,40,0.07), 0 12px 28px -10px rgba(10,22,40,0.18);
  --lift-3: 0 4px 8px rgba(10,22,40,0.08), 0 28px 60px -20px rgba(10,22,40,0.28);
  --lift-signal: 0 2px 6px rgba(196,30,58,0.22), 0 14px 32px -12px rgba(196,30,58,0.42);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* The affirmative green also lives in Campaigns.css, but that stylesheet is
     only loaded on Campaigns pages. An undefined custom property invalidates
     the whole declaration, which is why the support button computed to
     background:none — white text on white. Defined here as well. */
  --go: #1a8d4f;
  --go-lit: #2fae66;
}

body {
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Hero ---------------------------------------------------------------- */

.Caroline_welcome_hero {
  position: relative;
  min-height: 78vh;
  min-height: 78svh;
  isolation: isolate;
}

/* The gallery sits behind and moves slower than the page. Transform only —
   animating background-position or top would repaint every frame. */
.Caroline_welcome_galleryWrap {
  will-change: transform;
  transform: translate3d(0, var(--parallax, 0px), 0) scale(1.12);
  transform-origin: 50% 30%;
}

.Caroline_welcome_heroScrim {
  background:
    radial-gradient(120% 80% at 15% 100%, rgba(196,30,58,0.30) 0%, transparent 60%),
    linear-gradient(to top,
      rgba(10,22,40,0.94) 0%,
      rgba(10,22,40,0.72) 34%,
      rgba(10,22,40,0.28) 66%,
      rgba(10,22,40,0.10) 100%);
}

.Caroline_welcome_heroContent {
  padding-bottom: 52px;
}

.Caroline_welcome_name {
  font-size: clamp(2.5rem, 9vw, 4.25rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 800;
  text-wrap: balance;
}

.Caroline_welcome_stripe {
  width: 64px;
  height: 4px;
  background: linear-gradient(90deg, var(--signal), var(--brass));
  border-radius: 999px;
}

.Caroline_welcome_tagline {
  font-size: clamp(1.05rem, 4vw, 1.45rem);
  letter-spacing: -0.01em;
  max-width: 30ch;
}

.Caroline_welcome_district {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--brass);
}

.Caroline_welcome_ctaPrimary {
  background: linear-gradient(180deg, #d9224a 0%, var(--signal) 100%);
  box-shadow: var(--lift-signal);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.Caroline_welcome_ctaPrimary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(196,30,58,0.26), 0 20px 44px -14px rgba(196,30,58,0.52);
}

.Caroline_welcome_ctaPrimary:active { transform: translateY(0); }

/* --- Countdown ----------------------------------------------------------- */

.Caroline_welcome_countdown {
  background:
    linear-gradient(180deg, var(--ink-3) 0%, var(--ink-2) 100%);
  border-bottom: none;
  position: relative;
  gap: 14px;
  padding: 22px 24px;
}

.Caroline_welcome_countdown::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--signal), var(--brass) 55%, transparent);
}

.Caroline_welcome_daysNum {
  font-size: clamp(2.25rem, 8vw, 3rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #f0d089, var(--brass));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Tiles --------------------------------------------------------------- */

.Caroline_welcome_actions { padding: 28px 24px 8px; }

.Caroline_welcome_tile {
  border: 1px solid var(--hairline);
  border-left-width: 4px;
  border-radius: 14px;
  box-shadow: var(--lift-1);
  background: linear-gradient(180deg, #fff 0%, #fcfbf9 100%);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
              border-color 0.2s var(--ease);
}

.Caroline_welcome_tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--lift-2);
}

/* --- Issue list: a route line with stops --------------------------------- */

.Caroline_welcome_issues { padding-bottom: 36px; }

.Caroline_welcome_issues h2 {
  font-size: clamp(1.3rem, 5vw, 1.6rem);
  letter-spacing: -0.02em;
}

.Caroline_welcome_issueGrid { position: relative; }

.Caroline_welcome_issueChip {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: var(--lift-1);
  background: var(--raised);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease),
              border-color 0.16s var(--ease);
}

.Caroline_welcome_issueChip:hover {
  transform: translateX(3px);
  border-color: rgba(196,30,58,0.45);
  box-shadow: var(--lift-2);
}

.Caroline_welcome_chipPct {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* --- About + footer ------------------------------------------------------ */

.Caroline_welcome_about {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(212,168,67,0.16) 0%, transparent 55%),
    linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
  padding-top: 40px;
  padding-bottom: 40px;
}

.Caroline_welcome_about h2 { letter-spacing: -0.02em; }
.Caroline_welcome_about p { max-width: 62ch; }
.Caroline_welcome_footer { background: #071122; }

/* --- Sidebar ------------------------------------------------------------- */

.Q_layout_sidebar #dashboard {
  background:
    linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 62%, #071122 100%) !important;
  box-shadow: 1px 0 0 rgba(255,255,255,0.05), 6px 0 28px -12px rgba(10,22,40,0.5);
}

.Q_layout_sidebar #dashboard .Q_tabs_tab {
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease);
}

/* --- Mobile tab bar: the one place blur genuinely earns its keep ---------- */

@media (max-width: 799px) {
  #dashboard {
    background: linear-gradient(180deg,
      rgba(10,22,40,0.82) 0%, rgba(7,17,34,0.94) 100%) !important;
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* was 82svh, which left a tall empty band above the faces once the stats
     moved to the top. Sized to its content instead, with a floor. */
  .Caroline_welcome_hero { min-height: 0; }
  .Caroline_welcome_heroContent { padding: 26px 20px 34px; }
  .Caroline_welcome_heroContent { padding: 32px 20px 40px; }
  .Caroline_welcome_actions,
  .Caroline_welcome_issues { padding-left: 20px; padding-right: 20px; }
}

/* --- Motion -------------------------------------------------------------- */

/* Motion is limited to the hero parallax. Fading every section in on scroll
   hides content whenever the observer misses, and reads as boilerplate. */

@media (prefers-reduced-motion: reduce) {
  .Caroline_welcome_galleryWrap { transform: none !important; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- Focus --------------------------------------------------------------- */

a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 2px;
  border-radius: 6px;
}

/* The dialog title truncated to "Welcome to Caroline for Con…" at 390px */
.Users_login_dialog .Q_dialog_title, .Q_overlay_title {
  font-size: clamp(15px, 4.6vw, 20px);
  line-height: 1.25;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* The front-page CTA is an affirmative action like the rest */
.Caroline_welcome_ctaPrimary {
  background: linear-gradient(180deg, #2fae66 0%, #1a8d4f 100%);
  box-shadow: 0 2px 6px rgba(26,141,79,0.24), 0 16px 36px -12px rgba(26,141,79,0.46);
}
.Caroline_welcome_ctaPrimary:hover {
  background: linear-gradient(180deg, #37bd71 0%, #1e9c58 100%);
  box-shadow: 0 4px 10px rgba(26,141,79,0.28), 0 20px 44px -14px rgba(26,141,79,0.52);
}

/* ── Events ────────────────────────────────────────────────────────────── */
.Caroline_welcome_events {
  padding: 8px 24px 30px;
  max-width: 900px;
  margin: 0 auto;
}

.Caroline_welcome_events h2 {
  margin: 8px 0 4px;
  font-size: clamp(1.3rem, 5vw, 1.6rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.Caroline_welcome_event {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: var(--lift-1);
  text-decoration: none !important;
  color: var(--ink);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}

.Caroline_welcome_event:hover {
  transform: translateY(-2px);
  box-shadow: var(--lift-2);
}

.Caroline_welcome_eventDate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  border-radius: 9px;
  background: linear-gradient(180deg, var(--ink-3), var(--ink));
  color: #fff;
}

.Caroline_welcome_eventMonth {
  font-size: 10px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--brass);
}

.Caroline_welcome_eventDay {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.Caroline_welcome_eventInfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.Caroline_welcome_eventTitle { font-weight: 700; font-size: 15px; }
.Caroline_welcome_eventMeta { font-size: 12px; color: var(--slate); }

@media (max-width: 799px) {
  .Caroline_welcome_proof, .Caroline_welcome_events { padding-left: 20px; padding-right: 20px; }
}

/* ── Hero top ──────────────────────────────────────────────────────────────
   The hero is bottom-anchored, which left the whole upper half empty. These
   four figures fill it with the things a first-time visitor actually wants:
   how long is left, what is being asked, who else is here, and where this is. */
/* Not display:flex on the hero — that stopped .heroContent stretching, so its
   width:100% plus 40px of padding measured 430px inside a 390px viewport and
   the name hung off both edges. The hero keeps its original bottom-aligned
   layout and the stats are positioned over the top instead. */
.Caroline_welcome_heroContent,
.Caroline_welcome_heroTop { box-sizing: border-box; }

.Caroline_welcome_heroTop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 30px;
  padding: 26px 24px 0;
}

.Caroline_welcome_stat { display: flex; flex-direction: column; gap: 5px; }

.Caroline_welcome_statNum {
  font-size: clamp(1.5rem, 4.4vw, 2.1rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.Caroline_welcome_countdown { display: none; }

.Caroline_welcome_statWide .Caroline_welcome_statNum {
  color: var(--brass);
  letter-spacing: -0.02em;
}

.Caroline_welcome_statLabel {
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,0.66);
}

@media (max-width: 799px) {
  /* Four across is unreadable at 390px; two rows of two holds the type size. */
  .Caroline_welcome_heroTop {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 14px;
    padding: 22px 20px 0;
    justify-content: stretch;
  }
}

@media (min-width: 800px) {
  .Caroline_welcome_heroTop {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    padding: 34px 24px 0;
    gap: 46px;
  }
}

/* ── Navigation labels ─────────────────────────────────────────────────────
   11px in a sidebar is a squint; the bottom bar was little better. */
.Q_layout_sidebar #dashboard .Q_tabs_tab a { font-size: 18px !important; }
.Q_layout_sidebar #dashboard .Q_tabs_tab { padding: 18px 22px; }

@media (max-width: 799px) {
  #dashboard .Q_tabs_tab .Q_tabs_title {
    font-size: 13.5px !important;
    font-weight: 600;
  }
  #dashboard .Q_tabs_tab { padding-top: 10px; padding-bottom: 10px; }
}

.Caroline_welcome_statLink { text-decoration: none !important; }
.Caroline_welcome_statLink .Caroline_welcome_statNum { color: var(--brass); }
.Caroline_welcome_statLink:hover .Caroline_welcome_statLabel { color: rgba(255,255,255,0.9); }

/* ── Support section ───────────────────────────────────────────────────────
   A full-bleed row of real supporters over a two-column ask. The faces run
   edge to edge and clip, which reads as "more of them than fit" rather than a
   tidy set of twelve. */
.Caroline_welcome_support {
  background: linear-gradient(180deg, #ffffff 0%, #faf9f6 100%);
  border-top: 1px solid var(--hairline);
  padding-bottom: 34px;
  overflow: hidden;
}

.Caroline_welcome_faceStrip {
  display: flex;
  gap: 10px;
  padding: 26px 0 22px;
  margin: 0 -8px;
  justify-content: center;
  flex-wrap: nowrap;
}

.Caroline_welcome_face { flex: 0 0 auto; }

.Caroline_welcome_face img,
.Caroline_welcome_face .Users_avatar_icon {
  width: 66px !important;
  height: 66px !important;
  border-radius: 50%;
  display: block;
  background: #fff;
  box-shadow: 0 1px 3px rgba(10,22,40,0.14), 0 8px 20px -8px rgba(10,22,40,0.22);
}

/* the avatar tool prints a name beside the icon; only the face is wanted */
.Caroline_welcome_face .Users_avatar_name,
.Caroline_welcome_face .Streams_avatar_name { display: none !important; }

.Caroline_welcome_supportGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
  padding: 6px 24px 0;
  box-sizing: border-box;
}

.Caroline_welcome_supportRule {
  width: 46px;
  height: 4px;
  border-radius: 2px;
  background: var(--signal);
  margin-bottom: 12px;
}

.Caroline_welcome_supportCopy h2 {
  margin: 0 0 8px;
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.Caroline_welcome_supportLede {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate);
  max-width: 46ch;
}

.Caroline_welcome_supportLede strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.Caroline_welcome_supportAsk {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.Caroline_welcome_amountGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-bottom: 12px;
}

.Caroline_welcome_amount {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  border: 1px solid rgba(10,22,40,0.16);
  border-radius: 10px;
  background: #fff;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  text-decoration: none !important;
  font-variant-numeric: tabular-nums;
  transition: border-color .14s var(--ease), transform .14s var(--ease), box-shadow .14s var(--ease);
}

.Caroline_welcome_amount:hover {
  border-color: var(--go);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -6px rgba(26,141,79,0.4);
}

.Caroline_welcome_amountOther { grid-column: span 3; font-weight: 600; }

.Caroline_welcome_supportCta {
  display: block;
  text-align: center;
  padding: 16px;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 800;
  color: #fff !important;
  text-decoration: none !important;
  /* !important because a later stylesheet resets backgrounds on anchors in
     this region, which left the button transparent with white text on white. */
  background: linear-gradient(180deg, var(--go-lit) 0%, var(--go) 100%) !important;
  background-color: var(--go) !important;
  box-shadow: 0 2px 6px rgba(26,141,79,0.24), 0 16px 34px -12px rgba(26,141,79,0.46) !important;
  transition: transform .16s var(--ease);
}

.Caroline_welcome_supportCta:hover { transform: translateY(-2px); }

.Caroline_welcome_supportNote {
  margin: 10px 0 0;
  text-align: center;
  font-size: 11.5px;
  color: #8a92a1;
}

@media (min-width: 860px) {
  .Caroline_welcome_supportGrid {
    grid-template-columns: 1fr 380px;
    gap: 48px;
    align-items: start;
    padding-top: 4px;
  }
  .Caroline_welcome_faceStrip { justify-content: flex-start; padding-left: 18px; }
  .Caroline_welcome_face img,
  .Caroline_welcome_face .Users_avatar_icon { width: 76px !important; height: 76px !important; }
}

/* ── About + footer: full-bleed band, centred column ───────────────────── */
.Caroline_welcome_about > *,
.Caroline_welcome_footer > * {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.Caroline_welcome_about { padding-left: 24px; padding-right: 24px; }
.Caroline_welcome_footer { padding-left: 24px; padding-right: 24px; }

@media (max-width: 799px) {
  .Caroline_welcome_about,
  .Caroline_welcome_footer { padding-left: 20px; padding-right: 20px; }
}

/* ── Support section is secondary ──────────────────────────────────────────
   The page has one primary action — the questionnaire — and the hero owns it.
   This heading was competing at 2.2rem; it steps back to sit below the issue
   list in the visual order. */
.Caroline_welcome_support h2 {
  font-size: clamp(1.15rem, 3.6vw, 1.4rem) !important;
  letter-spacing: -0.02em;
}

.Caroline_welcome_supportLede { font-size: 14px; }
.Caroline_welcome_supportAsk { font-size: 14px; }

.Caroline_welcome_supportCta {
  padding: 13px !important;
  font-size: 15px !important;
  box-shadow: 0 1px 3px rgba(26,141,79,0.18), 0 8px 18px -8px rgba(26,141,79,0.34) !important;
}

.Caroline_welcome_amount { min-height: 44px; font-size: 15px; }

/* Faces: centred at every width, and smaller so they read as a detail
   rather than a banner. */
.Caroline_welcome_faceStrip {
  justify-content: center !important;
  flex-wrap: wrap;
  gap: 8px;
  padding: 22px 16px 16px !important;
  margin: 0;
}

.Caroline_welcome_face img,
.Caroline_welcome_face .Users_avatar_icon {
  width: 52px !important;
  height: 52px !important;
}

@media (min-width: 860px) {
  .Caroline_welcome_faceStrip { padding-left: 24px !important; padding-right: 24px !important; }
  .Caroline_welcome_face img,
  .Caroline_welcome_face .Users_avatar_icon { width: 56px !important; height: 56px !important; }
}

/* ── Supporter faces in the hero ───────────────────────────────────────────
   Caroline's own portrait is in the sidebar; these are the people behind her,
   placed right under the primary action where the ask actually happens. */
.Caroline_welcome_heroProof {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.Caroline_welcome_heroFaces { display: flex; }

.Caroline_welcome_heroFace { margin-left: -9px; }
.Caroline_welcome_heroFace:first-child { margin-left: 0; }

.Caroline_welcome_heroFace img,
.Caroline_welcome_heroFace .Users_avatar_icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50%;
  display: block;
  border: 2px solid rgba(255,255,255,0.85);
  background: #cdd3dc;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.Caroline_welcome_heroFace .Users_avatar_name,
.Caroline_welcome_heroFace .Streams_avatar_name { display: none !important; }

.Caroline_welcome_heroProofText {
  font-size: 13px;
  color: rgba(255,255,255,0.78);
}

.Caroline_welcome_heroProofText strong {
  color: #fff;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* ── District map ──────────────────────────────────────────────────────────
   Real 119th-Congress boundary, not a drawing. Decorative here, so it is
   aria-hidden; the district is named in text in the stats above. */
.Caroline_welcome_heroMap {
  position: absolute;
  right: 4%;
  bottom: 6%;
  z-index: 1;
  display: none;
  pointer-events: none;
  text-align: center;
}

.Caroline_welcome_heroMap img {
  display: block;
  height: 46vh;
  max-height: 380px;
  width: auto;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,0.35));
  opacity: 0.95;
}

.Caroline_welcome_heroMapLabel {
  display: none;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--brass);
}

@media (min-width: 900px) {
  .Caroline_welcome_heroMap { display: block; }
}

/* ── Welcome hero: one complete screen, centred ────────────────────────────
   Stats pinned top, the ask centred, action tiles resting at the bottom of
   the viewport — so a desktop visitor sees the whole proposition without
   scrolling. Everything below (issues, events, support) is the second screen. */
@media (min-width: 900px) and (min-height: 620px) {
  .Caroline_welcome_hero {
    /* 132px was a guess; the tiles overran by 5px. Reserve their real height
       (about 96px including padding) plus a little breathing room. */
    min-height: calc(100vh - 150px);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .Caroline_welcome_heroContent {
    position: relative;
    z-index: 3;
    box-sizing: border-box;
    text-align: center;
    max-width: 760px;
    padding: 0 24px;
  }

  .Caroline_welcome_stripe { margin-left: auto; margin-right: auto; }
  .Caroline_welcome_tagline { max-width: none; }
  .Caroline_welcome_ctaNote { text-align: center; }

  .Caroline_welcome_ctaPrimary {
    display: inline-block;
    padding: 18px 44px;
    font-size: 19px;
  }

  .Caroline_welcome_heroProof { justify-content: center; }

  /* the map moves out of the way of centred type */
  /* Behind the centred type, not beside it: at full strength it collided
     with the headline. Right-weighted so the island reads, dimmed so the
     words stay legible over it. */
  .Caroline_welcome_heroMap {
    right: -6%; bottom: auto; top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
    display: flex; align-items: center;
  }
  .Caroline_welcome_heroMap img { height: 76vh; max-height: 620px; }

  /* the three tiles finish the first screen */
  .Caroline_welcome_actions { padding: 16px 24px; }
  .Caroline_welcome_tile { padding: 12px 16px; }
}

/* Under a short viewport the hero cannot hold everything without cramping,
   so it falls back to its natural height rather than clipping. */
@media (min-width: 900px) and (max-height: 619px) {
  .Caroline_welcome_hero { min-height: 78vh; }
}

.Caroline_welcome_heroProof {
  text-decoration: none !important;
  transition: opacity .16s var(--ease);
}
.Caroline_welcome_heroProof:hover { opacity: .82; }

/* ── Supporters above the name ─────────────────────────────────────────────
   Faces read as "these are the people" before the name reads as "this is
   who they are behind", and the hero had the room. */
.Caroline_welcome_heroProof {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
}

.Caroline_welcome_heroFaces { display: flex; justify-content: center; }

.Caroline_welcome_heroFace { margin-left: -12px; }
.Caroline_welcome_heroFace:first-child { margin-left: 0; }

.Caroline_welcome_heroFace img,
.Caroline_welcome_heroFace .Users_avatar_icon {
  width: 54px !important;
  height: 54px !important;
  border-width: 3px;
}

.Caroline_welcome_heroProofText { font-size: 13.5px; }

/* ── Stats centred ─────────────────────────────────────────────────────── */
.Caroline_welcome_heroTop {
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(0, max-content));
  text-align: center;
}

.Caroline_welcome_stat { align-items: center; }

@media (min-width: 800px) {
  .Caroline_welcome_heroTop { justify-content: center; gap: 52px; }
}

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 799px) {
  .Caroline_welcome_heroTop {
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    gap: 16px 20px;
    padding: 20px 16px 0;
  }
  .Caroline_welcome_statNum { font-size: 1.35rem; }
  .Caroline_welcome_statLabel { font-size: 9.5px; letter-spacing: .03em; }

  .Caroline_welcome_heroContent { text-align: center; }
  .Caroline_welcome_stripe { margin-left: auto; margin-right: auto; }
  .Caroline_welcome_tagline { max-width: none; }
  .Caroline_welcome_ctaNote { text-align: center; }

  .Caroline_welcome_heroFace img,
  .Caroline_welcome_heroFace .Users_avatar_icon {
    width: 40px !important; height: 40px !important; border-width: 2px;
  }
  .Caroline_welcome_heroFace { margin-left: -10px; }
  .Caroline_welcome_heroProof { margin-bottom: 16px; }

  /* the map is the backdrop on mobile too, just fainter */
  .Caroline_welcome_heroMap {
    display: block;
    right: -28%;
    top: 46%;
    transform: translateY(-50%);
    opacity: 0.32;
    z-index: 1;
  }
  .Caroline_welcome_heroMap img { height: 58vh; max-height: 430px; }
  .Caroline_welcome_heroMapLabel { display: none; }
}

@media (max-width: 799px) {
  /* the stats sit over the top of the hero, so the content needs to clear them */
  .Caroline_welcome_heroContent { padding-top: 96px; }
  .Caroline_welcome_hero { min-height: 0; }
}

/* ── Hero rhythm ───────────────────────────────────────────────────────────
   The name should stand on its own line of sight, so the stats sit closer to
   it and the supporting elements group under the button. */
.Caroline_welcome_flag {
  font-size: 0.62em;
  vertical-align: 0.22em;
  margin-right: 0.12em;
}

.Caroline_welcome_heroProof {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin: 22px 0 0;
}

/* the tiles share the hero's measure, so the two edges agree */
.Caroline_welcome_heroContent,
.Caroline_welcome_actions {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 900px) and (min-height: 620px) {
  .Caroline_welcome_heroContent { max-width: 860px; }
  .Caroline_welcome_heroTop { padding-top: 20px; }
  /* Content sits just under the stats rather than floating mid-hero, so the
     name reads on its own. The reserved height covers the tiles beneath. */
  .Caroline_welcome_hero {
    align-items: flex-start;
    box-sizing: border-box;   /* or the 92px padding is added to min-height */
    padding-top: 92px;
    min-height: calc(100vh - 140px);
  }
  .Caroline_welcome_name { margin-top: 0; }
  /* Both boxes are border-box at the same measure, so their edges agree. */
  .Caroline_welcome_actions {
    box-sizing: border-box;
    padding: 12px 24px 16px;
  }
}

@media (max-width: 799px) {
  .Caroline_welcome_heroContent { padding-top: 84px; }
  .Caroline_welcome_actions { max-width: none; }
}