/* Tehuacán Participa — Civic Product System v14 */
:root {
  --xp-ink: #102a27;
  --xp-ink-2: #183e38;
  --xp-green: #2f6f5f;
  --xp-green-soft: #dceae1;
  --xp-coral: #f06445;
  --xp-coral-soft: #fde5dc;
  --xp-sand: #f0d7a7;
  --xp-sky: #dcebf0;
  --xp-paper: #f7f8f4;
  --xp-white: #ffffff;
  --xp-text: #17312e;
  --xp-muted: #637571;
  --xp-line: #dfe6e0;
  --xp-radius-sm: 14px;
  --xp-radius-md: 22px;
  --xp-radius-lg: 34px;
  --xp-shadow: 0 20px 60px rgba(16, 42, 39, .09);
  --xp-shadow-card: 0 10px 30px rgba(16, 42, 39, .07);
  --xp-content: 1340px;
}

html { scroll-behavior: smooth; }
body { color: var(--xp-text); background: var(--xp-paper); font-family: "Instrument Sans", system-ui, sans-serif; font-size: 16px; line-height: 1.5; }
button, input, textarea, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [role="button"]:focus-visible { outline: 3px solid rgba(240, 100, 69, .36); outline-offset: 3px; }
.app-shell { overflow: clip; }
.scroll-progress { height: 3px; background: transparent; }.scroll-progress span { background: linear-gradient(90deg,var(--xp-coral),#ffb266); }

/* Header and utility status */
.topbar {
  min-height: 76px;
  padding: 0 max(24px,calc((100vw - var(--xp-content))/2));
  position: sticky;
  top: 0;
  z-index: 120;
  grid-template-columns: auto 1fr auto;
  gap: 38px;
  border-bottom: 1px solid rgba(16,42,39,.08);
  background: rgba(247,248,244,.91);
  box-shadow: 0 8px 30px rgba(16,42,39,.03);
  backdrop-filter: blur(22px) saturate(1.25);
}
.brand { gap: 11px; }.brand-symbol { width: 44px; height: 44px; border-radius: 14px; box-shadow: 0 6px 16px rgba(16,42,39,.12); }
.brand strong { color: var(--xp-ink); font-size: 16px; font-weight: 750; letter-spacing: -.045em; }.brand small { margin-top: 1px; color: var(--xp-coral); font-size: 7px; font-weight: 700; letter-spacing: .24em; }
.desktop-nav { justify-self: center; padding: 4px; gap: 3px; border: 1px solid var(--xp-line); border-radius: 999px; background: rgba(255,255,255,.72); }
.nav-link { min-height: 39px; padding: 0 17px; border: 0 !important; border-radius: 999px; color: var(--xp-muted); font-size: 13px; font-weight: 620; letter-spacing: -.015em; }
.nav-link:hover { color: var(--xp-ink); background: var(--xp-green-soft); }.nav-link.is-active { color: #fff; background: var(--xp-ink); box-shadow: 0 6px 14px rgba(16,42,39,.18); }
.header-actions { gap: 9px; }.search-control { width: clamp(170px,15vw,230px); height: 43px; border: 1px solid var(--xp-line); border-radius: 14px; background: #fff; }.search-control input { color: var(--xp-text); font-size: 13px; }.search-control svg { color: var(--xp-muted); }
.icon-button { min-width: 42px; min-height: 42px; border-radius: 14px; }.notification-button { border: 1px solid var(--xp-line); background: #fff; }.avatar-button { width: 42px; height: 42px; border-radius: 14px; background: var(--xp-ink); font-size: 11px; box-shadow: none; }
.demo-ribbon { min-height: 40px; padding: 7px max(24px,calc((100vw - var(--xp-content))/2)); justify-content: flex-start; color: rgba(255,255,255,.72); background: var(--xp-ink); font-size: 11px; font-weight: 520; letter-spacing: 0; text-transform: none; }
.demo-ribbon strong { color: #fff; font-size: 11px; }.live-dot { width: 7px; height: 7px; background: #75d29b; box-shadow: 0 0 0 5px rgba(117,210,155,.12); }
.connection-badge { margin-left: auto; padding: 5px 9px; border-radius: 999px; color: #bde8cd; background: rgba(255,255,255,.09); font-size: 10px; font-weight: 650; }
.install-chip { min-height: 29px; margin-left: 4px !important; padding: 5px 11px !important; border-radius: 999px !important; color: var(--xp-ink) !important; background: #fff !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; }.install-chip:hover { color: #fff !important; background: var(--xp-coral) !important; }

/* Shared type and controls */
.eyebrow { margin-bottom: 14px; color: var(--xp-green); font-size: 11px; font-weight: 750; letter-spacing: .13em; line-height: 1.2; text-transform: uppercase; }
.primary-button, .secondary-button { min-height: 52px; padding: 0 22px; gap: 10px; border-radius: 15px; font-size: 14px; font-weight: 700; letter-spacing: -.015em; }
.primary-button { color: #fff; border: 1px solid var(--xp-ink); background: var(--xp-ink); box-shadow: 0 10px 24px rgba(16,42,39,.18); }.primary-button:hover { color: #fff; border-color: var(--xp-coral); background: var(--xp-coral); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(240,100,69,.2); }
.secondary-button { color: var(--xp-ink); border: 1px solid var(--xp-line); background: #fff; }.secondary-button:hover { border-color: var(--xp-green); background: var(--xp-green-soft); }
.text-button { color: var(--xp-ink); font-size: 13px; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(16,42,39,.25); text-underline-offset: 5px; }.text-button:hover { color: var(--xp-coral); text-decoration-color: currentColor; }
.status-pill { min-height: 26px; padding: 5px 9px; border-radius: 999px; font-size: 9px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }.status-new { color: #8a3b28; background: var(--xp-coral-soft); }.status-review { color: #225746; background: var(--xp-green-soft); }.status-resolved { color: #175333; background: #d9f2e1; }

/* Home hero */
.hero-grid { max-width: var(--xp-content); min-height: 640px; margin: 24px auto 0; padding: 0 18px; grid-template-columns: minmax(0,1.03fr) minmax(420px,.97fr); gap: 14px; border: 0; background: transparent; }
.hero-copy { width: 100%; min-height: 640px; padding: clamp(56px,6.3vw,92px); position: relative; border: 1px solid var(--xp-line); border-radius: var(--xp-radius-lg); background: #fff; overflow: hidden; }
.hero-copy::before { content: ""; width: 360px; height: 360px; position: absolute; right: -180px; top: -190px; border: 70px solid rgba(47,111,95,.055); border-radius: 50%; }
.hero-copy::after { content: "TEHUACÁN · PUEBLA"; position: absolute; right: 26px; bottom: 24px; color: #a7b3af; font-size: 9px; font-weight: 700; letter-spacing: .2em; writing-mode: vertical-rl; }
.hero-badge { margin: 0 0 28px; padding: 8px 12px; gap: 8px; border: 1px solid var(--xp-line); border-radius: 999px; color: var(--xp-green); background: var(--xp-paper); font-size: 11px; font-weight: 700; }.hero-badge svg { width: 15px; height: 15px; color: var(--xp-coral); }
.hero-copy .eyebrow { margin-bottom: 18px; }
.hero-copy h1 { max-width: 690px; color: var(--xp-ink); font-size: clamp(64px,6.2vw,94px); font-weight: 670; line-height: .9; letter-spacing: -.075em; }.hero-copy h1 em { color: var(--xp-coral); font-family: "Newsreader",serif; font-weight: 520; letter-spacing: -.055em; }
.hero-description { max-width: 560px; margin-top: 26px; color: var(--xp-muted); font-size: 17px; line-height: 1.7; }
.hero-actions { margin-top: 32px; gap: 20px; }.hero-actions .primary-button { min-width: 190px; }
.trust-row { width: calc(100% - 20px); margin-top: auto; padding-top: 34px; border-top: 1px solid var(--xp-line); }.avatar-stack span { width: 35px; height: 35px; border: 3px solid #fff; color: var(--xp-ink); background: var(--xp-green-soft); font-size: 9px; }.trust-row p { color: var(--xp-muted); font-size: 12px; line-height: 1.45; }.trust-row strong { color: var(--xp-ink); font-size: 13px; }
.city-feature { min-height: 640px; border-radius: var(--xp-radius-lg); background: var(--xp-ink); box-shadow: none; overflow: hidden; }
.feature-sky { inset: 0; background: linear-gradient(180deg,rgba(10,35,31,.05),rgba(10,35,31,.52)),url('./hero-tehuacan-clean.webp') 58% center/cover; }.feature-sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(16,42,39,.15),transparent 48%); }
.sun, .mountain, .city-silhouette { display: none; }.feature-pin { top: 25%; left: 58%; width: 48px; height: 48px; border: 5px solid rgba(255,255,255,.5); color: #fff; background: var(--xp-coral); box-shadow: 0 12px 28px rgba(25,44,40,.3); }
.hero-signal { min-width: 210px; padding: 11px 13px; grid-template-columns: 42px 1fr auto; gap: 10px; border: 1px solid rgba(255,255,255,.58); border-radius: 17px; background: rgba(255,255,255,.91); box-shadow: var(--xp-shadow-card); backdrop-filter: blur(16px); }.hero-signal-a { left: 24px; top: 28px; }.hero-signal-b { right: 24px; top: 106px; }.signal-icon { width: 42px; height: 42px; border-radius: 13px; color: #fff; background: var(--xp-ink); }.signal-icon svg { width: 18px; height: 18px; }.hero-signal small { color: var(--xp-muted); font-size: 9px; }.hero-signal strong { margin-top: 2px; color: var(--xp-ink); font-size: 12px; }.hero-signal b { color: var(--xp-coral); font-size: 17px; }
.feature-content { left: 20px; right: 20px; bottom: 20px; width: auto; padding: 26px; border: 1px solid rgba(255,255,255,.34); border-radius: 24px; color: #fff; background: rgba(10,37,34,.82); box-shadow: none; backdrop-filter: blur(18px); }.feature-content::before { display: none; }.feature-topline { position: static; }.feature-content .status-pill { color: var(--xp-ink); background: #fff; }.feature-live { color: rgba(255,255,255,.72); font-size: 10px; }.feature-live i { background: #7ee0a5; }.feature-kicker { margin-top: 30px; color: #a9d7c3; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }.feature-content h2 { max-width: 500px; margin: 7px 0 26px; color: #fff; font-size: clamp(27px,2.6vw,39px); font-weight: 620; line-height: 1.08; letter-spacing: -.045em; }.feature-footer { padding-top: 16px; border-top: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.55); font-size: 10px; }.feature-footer button { color: #fff; font-size: 12px; font-weight: 700; }
.civic-pulse { max-width: calc(var(--xp-content) - 36px); margin: 14px auto 0; padding: 8px; grid-template-columns: repeat(3,1fr) auto; border-radius: 22px; background: var(--xp-ink); box-shadow: none; }.civic-pulse > div { min-height: 78px; padding: 12px 18px; gap: 13px; border-right: 1px solid rgba(255,255,255,.11); }.civic-pulse > div > span { color: #89c2ab; font-size: 10px; }.civic-pulse strong { color: #fff; font-size: 13px; }.civic-pulse small { margin-top: 3px; color: rgba(255,255,255,.54); font-size: 10px; }.civic-pulse > button { min-height: 58px; padding: 0 19px; border-radius: 16px; color: var(--xp-ink); background: #fff; font-size: 12px; font-weight: 700; }

/* Home sections */
.content-section { max-width: var(--xp-content); padding: 110px 18px; }.section-heading { margin-bottom: 36px; align-items: end; }.section-heading h2 { max-width: 760px; color: var(--xp-ink); font-size: clamp(42px,4.5vw,68px); font-weight: 640; line-height: .98; letter-spacing: -.06em; }
.category-grid { gap: 14px; }.category-card { min-height: 250px; padding: 22px; grid-template-columns: 1fr auto; align-content: space-between; border: 1px solid transparent; border-radius: 26px; box-shadow: none; overflow: hidden; }.category-card::before { content: ""; width: 130px; height: 130px; position: absolute; right: -48px; bottom: -58px; border: 28px solid rgba(16,42,39,.055); border-radius: 50%; }.category-card:hover { border-color: rgba(16,42,39,.14); transform: translateY(-5px); box-shadow: var(--xp-shadow-card); }.category-road { background: #f6dfd5; }.category-light { background: #f2dfaf; }.category-clean { background: #dce9df; }.category-water { background: #d9e9ef; }.category-index { color: rgba(16,42,39,.48); font-size: 10px; font-weight: 700; letter-spacing: .14em; }.category-icon { width: 58px; height: 58px; grid-column: 2; grid-row: 1; border-radius: 18px; color: #fff; background: var(--xp-ink); }.category-icon svg { width: 25px; height: 25px; }.category-card > span:nth-of-type(3) { grid-column: 1 / -1; align-self: end; }.category-card strong { color: var(--xp-ink); font-size: 23px; font-weight: 680; letter-spacing: -.035em; }.category-card small { margin-top: 7px; color: rgba(16,42,39,.62); font-size: 12px; }.category-arrow { width: 21px; height: 21px; position: absolute; right: 22px; bottom: 23px; color: var(--xp-ink); }
.process-section { max-width: calc(var(--xp-content) - 36px); margin: 8px auto 90px; padding: 74px; grid-template-columns: .76fr 1.24fr; gap: 72px; border: 0; border-radius: var(--xp-radius-lg); color: #fff; background: linear-gradient(145deg,#102a27,#214d44); box-shadow: none; }.process-section::before { content: ""; width: 430px; height: 430px; position: absolute; left: -210px; bottom: -280px; border: 90px solid rgba(255,255,255,.035); border-radius: 50%; }.process-copy .eyebrow { color: #92d2b7; }.process-copy h2 { color: #fff; font-size: clamp(48px,5vw,68px); font-weight: 610; line-height: .95; letter-spacing: -.06em; }.process-copy h2 em { color: var(--xp-sand); font-family: "Newsreader",serif; font-weight: 500; }.process-copy > p:not(.eyebrow) { max-width: 460px; color: rgba(255,255,255,.63); font-size: 15px; line-height: 1.7; }.process-copy .primary-button { color: var(--xp-ink); border-color: #fff; background: #fff; box-shadow: none; }.process-copy .primary-button:hover { color: #fff; border-color: var(--xp-coral); background: var(--xp-coral); }
.process-board { gap: 12px; }.process-card, .process-card.is-featured { min-height: 310px; padding: 25px; border: 1px solid rgba(255,255,255,.09); border-radius: 24px; color: #fff; background: rgba(255,255,255,.075); }.process-card.is-featured { background: #f6f1e7; color: var(--xp-ink); }.process-card > span { right: 21px; top: 20px; opacity: .55; font-family: inherit; font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .12em; }.process-icon, .process-card.is-featured .process-icon { width: 54px; height: 54px; margin-bottom: auto; border-radius: 16px; color: var(--xp-ink); background: #fff; }.process-card.is-featured .process-icon { color: #fff; background: var(--xp-coral); }.process-icon svg { width: 22px; height: 22px; }.process-card h3, .process-card.is-featured h3 { font-size: 22px; font-weight: 670; }.process-card p, .process-card.is-featured p { margin-top: 8px; color: rgba(255,255,255,.58); font-size: 12px; line-height: 1.55; }.process-card.is-featured p { color: var(--xp-muted); }
.reports-section { padding-top: 40px; }.segmented { padding: 4px; border: 1px solid var(--xp-line); border-radius: 14px; background: #fff; }.segmented button { min-height: 38px; padding: 0 15px; border-radius: 10px; color: var(--xp-muted); font-size: 11px; font-weight: 650; }.segmented button.is-active { color: #fff; background: var(--xp-ink); box-shadow: none; }
.report-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }.report-card { min-width: 0; border: 1px solid var(--xp-line); border-radius: 25px; background: #fff; box-shadow: none; overflow: hidden; }.report-card:hover { border-color: rgba(47,111,95,.34); transform: translateY(-5px); box-shadow: var(--xp-shadow-card); }.report-visual { height: 250px; margin: 8px; border-radius: 18px; }.report-visual::after { background: linear-gradient(180deg,rgba(11,31,29,.02),rgba(11,31,29,.25)); }.report-visual .status-pill { top: 13px; left: 13px; }.report-category-icon { right: 13px; bottom: 13px; width: 42px; height: 42px; border-radius: 13px; color: var(--xp-ink); background: rgba(255,255,255,.92); }.report-body { padding: 19px 21px 22px; }.report-meta { color: var(--xp-green); font-size: 10px; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; }.report-card h3 { margin-top: 10px; color: var(--xp-ink); font-size: 21px; font-weight: 670; line-height: 1.12; letter-spacing: -.035em; }.report-card p { min-height: 66px; margin-top: 10px; color: var(--xp-muted); font-size: 12px; line-height: 1.6; }.report-location { margin-top: 16px; color: var(--xp-muted); font-size: 11px; }.report-card-footer { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--xp-line); }.support-count { color: var(--xp-ink); font-size: 11px; font-weight: 650; }.report-card-footer button { color: var(--xp-coral); font-size: 11px; font-weight: 700; }
.city-impact { max-width: calc(var(--xp-content) - 36px); margin: 30px auto 100px; padding: 58px 64px; grid-template-columns: 1.3fr repeat(3,.7fr); gap: 30px; border: 0; border-radius: var(--xp-radius-lg); color: #fff; background: var(--xp-ink); }.city-impact .eyebrow { color: #8fd1b5; }.city-impact h2 { color: #fff; font-size: clamp(35px,3.5vw,52px); font-weight: 620; }.impact-stat { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.16); }.impact-stat strong { color: #fff; font-size: clamp(38px,4vw,56px); font-weight: 650; }.impact-stat span { margin-top: 5px; color: rgba(255,255,255,.58); font-size: 12px; }

/* Interior pages and map */
.page-intro { max-width: calc(var(--xp-content) - 36px); min-height: 330px; margin: 24px auto 0; padding: 60px 66px; border: 0; border-radius: var(--xp-radius-lg); color: #fff; background: linear-gradient(110deg,rgba(16,42,39,.98),rgba(30,76,68,.86)),url('./hero-tehuacan-clean.webp') center/cover; box-shadow: none; }.page-intro::before { right: 7%; bottom: -250px; width: 420px; height: 420px; border: 74px solid rgba(255,255,255,.045); }.page-intro .eyebrow { color: #90d0b4; }.page-intro h1 { max-width: 820px; color: #fff; font-size: clamp(52px,5.6vw,78px); font-weight: 620; line-height: .92; letter-spacing: -.065em; }.page-intro > div > p:last-child { max-width: 630px; color: rgba(255,255,255,.62); font-size: 14px; line-height: 1.65; }.page-intro .primary-button { color: var(--xp-ink); border-color: #fff; background: #fff; box-shadow: none; }.page-intro .secondary-button { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); }
.map-toolbar { max-width: calc(var(--xp-content) - 36px); margin: 14px auto; padding: 12px; gap: 9px; border: 1px solid var(--xp-line); border-radius: 18px; background: #fff; }.filter-scroll { gap: 6px; }.filter-chip, .locate-button, .map-selects select { min-height: 42px; border: 1px solid var(--xp-line); border-radius: 12px; color: var(--xp-text); background: var(--xp-paper); font-size: 11px; }.filter-chip { padding: 0 13px; }.filter-chip.is-active { color: #fff; border-color: var(--xp-ink); background: var(--xp-ink); }.filter-chip:hover, .locate-button:hover { border-color: var(--xp-green); background: var(--xp-green-soft); }.map-selects { gap: 7px; }.map-selects label { color: var(--xp-muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }.map-selects select { margin-left: 5px; padding-inline: 10px; }.locate-button { padding: 0 14px; font-weight: 700; }
.map-layout { max-width: calc(var(--xp-content) - 36px); height: min(720px,calc(100vh - 210px)); min-height: 570px; margin: 0 auto 90px; grid-template-columns: minmax(0,1fr) 390px; border: 1px solid var(--xp-line); border-radius: 28px; background: #fff; box-shadow: var(--xp-shadow); }.map-results { padding: 18px; border-left: 1px solid var(--xp-line); background: #fff; }.results-heading { padding: 6px 5px 16px; color: var(--xp-muted); font-size: 11px; }.results-heading strong { color: var(--xp-ink); font-size: 15px; }.results-heading button { color: var(--xp-coral); font-size: 10px; font-weight: 700; }.map-list-item { width: 100%; padding: 10px; gap: 12px; border: 0; border-radius: 16px; background: transparent; }.map-list-item:hover { background: var(--xp-paper); }.map-thumb { width: 76px; height: 72px; border-radius: 13px; }.map-list-item h3 { margin: 7px 0 4px; color: var(--xp-ink); font-size: 13px; font-weight: 670; line-height: 1.25; }.map-list-item small { color: var(--xp-muted); font-size: 10px; }.map-legend { padding: 8px 11px; border: 1px solid rgba(16,42,39,.1); border-radius: 12px; font-size: 9px; box-shadow: var(--xp-shadow-card); }

/* Report form */
.report-form-layout { max-width: calc(var(--xp-content) - 36px); margin: 24px auto 90px; grid-template-columns: minmax(0,1.1fr) minmax(380px,.75fr); border: 1px solid var(--xp-line); border-radius: var(--xp-radius-lg); background: #fff; box-shadow: var(--xp-shadow); }.form-panel { padding: 56px clamp(38px,5vw,72px) 72px; }.back-link { margin-bottom: 40px; color: var(--xp-muted); font-size: 12px; font-weight: 650; }.form-panel h1 { max-width: 680px; color: var(--xp-ink); font-size: clamp(52px,5.3vw,76px); font-weight: 640; line-height: .92; letter-spacing: -.065em; }.form-intro { max-width: 620px; color: var(--xp-muted); font-size: 15px; line-height: 1.65; }.form-group { margin-top: 32px; }.form-group > label, .two-columns label { color: var(--xp-text); font-size: 13px; font-weight: 670; }.two-columns { gap: 12px; }
input, textarea { min-height: 50px; margin-top: 9px; padding: 14px 15px; border: 1px solid var(--xp-line); border-radius: 13px; color: var(--xp-text); background: var(--xp-paper); font-size: 14px; }.form-group textarea { min-height: 130px; line-height: 1.55; }input:focus, textarea:focus { border-color: var(--xp-green); background: #fff; box-shadow: 0 0 0 4px rgba(47,111,95,.1); }.char-count { color: var(--xp-muted); font-size: 10px; }
.category-options { gap: 9px; }.category-options span { min-height: 105px; border: 1px solid var(--xp-line); border-radius: 17px; color: var(--xp-text); background: var(--xp-paper); }.category-options span > svg { width: 27px; height: 27px; }.category-options small { font-size: 11px; font-weight: 650; }.category-options input:checked + span { color: #fff; border-color: var(--xp-ink); background: var(--xp-ink); box-shadow: 0 10px 22px rgba(16,42,39,.14); }
.location-upload-grid { gap: 10px; }.location-card, .upload-card { min-height: 94px; padding: 15px; border: 1px dashed rgba(47,111,95,.35); border-radius: 16px; background: #fbfcf9; }.location-card:hover, .upload-card:hover { border-color: var(--xp-green); background: var(--xp-green-soft); }.location-card svg, .upload-card svg { width: 24px; color: var(--xp-green); }.location-card strong, .upload-card strong { font-size: 12px; }.location-card small, .upload-card small { margin-top: 3px; color: var(--xp-muted); font-size: 10px; line-height: 1.35; }.consent-row { margin-top: 25px; color: var(--xp-muted); font-size: 11px !important; line-height: 1.5; }.consent-row input { min-height: auto; }.submit-report { min-width: 210px; margin-top: 18px; }
.form-aside { padding: 54px 32px; border: 0; background: linear-gradient(155deg,#173b36,#0e2724); }.phone-preview { max-width: 345px; border: 6px solid rgba(255,255,255,.96); border-radius: 32px; background: #fff; box-shadow: 0 28px 60px rgba(0,0,0,.24); }.phone-top { color: var(--xp-ink); font-size: 10px; }.preview-image { min-height: 225px; }.preview-copy { padding: 20px; }.preview-copy h3 { color: var(--xp-ink); font-size: 20px; }.preview-copy p { color: var(--xp-muted); font-size: 11px; line-height: 1.55; }.preview-meta { color: var(--xp-muted); font-size: 10px; }.tip-card { margin-top: 14px; padding: 17px; border: 1px solid rgba(255,255,255,.11); border-radius: 17px; background: rgba(255,255,255,.055); }.tip-card > span { color: #93d2b8; font-size: 10px; }.tip-card strong { color: #fff; font-size: 12px; }.tip-card p { margin-top: 5px; color: rgba(255,255,255,.57); font-size: 10px; line-height: 1.55; }

/* Dashboard, profile and dialogs */
.dashboard-stats { max-width: calc(var(--xp-content) - 36px); padding: 18px 0; gap: 12px; }.dashboard-stats article { padding: 24px; border: 1px solid var(--xp-line); border-radius: 20px; background: #fff; box-shadow: none; }.dashboard-stats span { color: var(--xp-muted); font-size: 11px; }.dashboard-stats strong { margin: 12px 0 5px; color: var(--xp-ink); font-size: 42px; font-weight: 650; letter-spacing: -.05em; }.dashboard-stats small { color: var(--xp-green); font-size: 10px; }
.dashboard-grid { max-width: calc(var(--xp-content) - 36px); padding: 0; gap: 12px; }.chart-card, .resolution-card, .queue-card { border: 1px solid var(--xp-line); border-radius: 24px; background: #fff; box-shadow: none; }.chart-card, .resolution-card { padding: 28px; }.card-heading h2, .resolution-card h2 { color: var(--xp-ink); font-size: 24px; font-weight: 670; }.bar-chart { height: 260px; }.bar-chart i { border-radius: 9px 9px 3px 3px; background: linear-gradient(#3c836f,#9dc8b5); }.bar-chart span { color: var(--xp-ink); font-size: 11px; }.bar-chart small { color: var(--xp-muted); font-size: 9px; }.donut { background: conic-gradient(var(--xp-green) 0 72%,#e8eee9 72% 100%); }.donut strong { color: var(--xp-ink); }.resolution-card li { color: var(--xp-muted); font-size: 11px; }.resolution-card li strong { color: var(--xp-ink); }
.queue-card { width: calc(var(--xp-content) - 36px); margin-bottom: 90px; padding: 28px; }.queue-row { min-height: 72px; border-bottom: 1px solid var(--xp-line); color: var(--xp-muted); font-size: 11px; }.queue-row h3 { color: var(--xp-ink); font-size: 13px; font-weight: 660; }.queue-actions button { min-height: 34px; padding: 0 11px; border-radius: 10px; font-size: 10px; }
.panel-access, .profile-card, .profile-empty { border: 1px solid var(--xp-line); border-radius: 28px; background: #fff; box-shadow: var(--xp-shadow); }.panel-access { max-width: 840px; padding: 58px; }.panel-access h2, .profile-empty h1 { color: var(--xp-ink); font-size: clamp(38px,4vw,56px); font-weight: 640; line-height: 1; letter-spacing: -.055em; }.profile-wrap { max-width: calc(var(--xp-content) - 36px); margin: 0 auto; padding: 44px 0 100px; }.profile-card { padding: 36px; }.profile-avatar { width: 82px; height: 82px; border-radius: 24px; background: var(--xp-ink); font-size: 22px; }.profile-identity h1 { color: var(--xp-ink); font-size: 44px; font-weight: 650; }.profile-identity p { color: var(--xp-muted); }.my-report-row { padding: 18px 0; border-bottom: 1px solid var(--xp-line); }.my-report-row h3 { color: var(--xp-ink); font-size: 15px; }.my-report-row p { color: var(--xp-muted); font-size: 11px; }
dialog { border: 1px solid rgba(255,255,255,.6); border-radius: 28px !important; background: #fff; box-shadow: 0 40px 120px rgba(5,25,22,.3); }dialog::backdrop { background: rgba(6,24,22,.66) !important; backdrop-filter: blur(10px) !important; }.auth-dialog { width: min(500px,calc(100vw - 28px)); padding: 40px; }.auth-brand h2 { color: var(--xp-ink); font-size: 39px; font-weight: 640; }.auth-tabs { padding: 5px; border-radius: 13px; background: var(--xp-paper); }.auth-tabs button { min-height: 40px; border-radius: 10px; font-size: 11px; }.auth-tabs button.is-active { color: #fff; background: var(--xp-ink); }.auth-note { color: var(--xp-muted); font-size: 10px; }.report-dialog { width: min(1060px,calc(100vw - 28px)); }.detail-layout { grid-template-columns: 1fr 320px; }.detail-copy { padding: 38px; }.detail-copy h2 { color: var(--xp-ink); font-size: 38px; font-weight: 650; }.detail-copy > p { color: var(--xp-muted); font-size: 14px; line-height: 1.7; }.detail-side { padding: 32px; background: var(--xp-paper); }.detail-stat { border-bottom-color: var(--xp-line); }.detail-stat span { color: var(--xp-muted); font-size: 10px; }.detail-stat strong { color: var(--xp-ink); font-size: 14px; }.timeline, .comments { border-top-color: var(--xp-line); }.timeline h3, .comments h3 { color: var(--xp-ink); font-size: 17px; }.timeline-item { border-left-color: var(--xp-green-soft); }.timeline-item::before { background: var(--xp-green); }.timeline-item strong, .comment strong { color: var(--xp-ink); }.timeline-item span, .comment p, .comment small { color: var(--xp-muted); }.comment { border-color: var(--xp-line); background: var(--xp-paper); }.toast { min-height: 50px; border-radius: 15px; background: var(--xp-ink); font-size: 12px; }

/* Installation dialog */
.install-dialog { padding: 40px; }.install-dialog-hero { background: radial-gradient(circle at 74% 24%,rgba(240,100,69,.24),transparent 32%),linear-gradient(145deg,var(--xp-green-soft),#f6f2e9); }.install-dialog h2 { color: var(--xp-ink); }.install-dialog-copy, .install-footnote { color: var(--xp-muted); }.install-steps li { color: var(--xp-muted); background: var(--xp-paper); }.install-steps strong { color: var(--xp-ink); }.install-steps li svg { color: var(--xp-coral); background: #fff; }

/* Footer */
.site-footer { max-width: calc(var(--xp-content) - 36px); margin: 20px auto 18px; padding: 66px 62px 24px; border-radius: var(--xp-radius-lg); background: linear-gradient(145deg,#102a27,#183f39); }.footer-main { padding-bottom: 52px; }.footer-brand { gap: 22px; }.footer-brand .brand-symbol { width: 76px; height: 76px; border-radius: 22px; }.footer-brand .eyebrow { color: #91d0b4; }.footer-brand h2 { color: #fff; font-size: clamp(42px,4.8vw,66px); }.footer-brand h2 em { color: var(--xp-sand); }.footer-actions p { color: rgba(255,255,255,.57); font-size: 13px; }.footer-grid > div > span { color: #92d1b6; font-size: 9px; }.footer-grid button { min-height: 28px; color: rgba(255,255,255,.72); font-size: 12px; }.footer-team p { color: rgba(255,255,255,.64); font-size: 11px; }.footer-bottom { color: rgba(255,255,255,.42); font-size: 9px; }

/* Mobile drawer and navigation */
.drawer-panel { width: min(390px,calc(100vw - 20px)); height: calc(100% - 20px); margin: 10px; padding: 22px; border-radius: 28px; background: var(--xp-paper); }.drawer-head { margin-bottom: 38px; }.drawer-brand strong { color: var(--xp-ink); font-size: 16px; }.drawer-links button { min-height: 59px; border-bottom: 1px solid var(--xp-line); color: var(--xp-ink); font-size: 19px; }.drawer-links button > span { color: var(--xp-coral); font-family: inherit; font-size: 10px; font-style: normal; font-weight: 700; }.drawer-install { background: var(--xp-ink); }.drawer-note { background: var(--xp-green-soft); }

@media (max-width: 1180px) {
  .topbar { padding-inline: 20px; gap: 20px; }.desktop-nav { gap: 2px; }.nav-link { padding-inline: 12px; font-size: 12px; }.search-control { display: none; }
  .hero-grid { grid-template-columns: 1fr .9fr; }.hero-copy { padding: 58px 48px; }.hero-copy h1 { font-size: 72px; }
  .content-section { padding-inline: 28px; }.process-section { margin-inline: 18px; padding: 54px 42px; gap: 38px; }.process-card, .process-card.is-featured { min-height: 280px; }
  .page-intro, .map-toolbar, .map-layout, .report-form-layout { margin-left: 18px; margin-right: 18px; }.dashboard-stats, .dashboard-grid { margin-inline: 18px; }.queue-card { width: calc(100% - 36px); }
}

@media (max-width: 860px) {
  .desktop-nav { display: none; }.mobile-menu { display: grid; }.topbar { grid-template-columns: 44px 1fr auto; }.brand { justify-self: center; }.notification-button { display: none; }
  .hero-grid { display: block; }.hero-copy, .city-feature { min-height: 580px; }.city-feature { margin-top: 14px; }
  .civic-pulse { margin-inline: 18px; display: flex; overflow-x: auto; }.civic-pulse > div { min-width: 240px; }.civic-pulse > button { min-width: 150px; }
  .category-grid { grid-template-columns: repeat(2,1fr); }.report-grid { grid-template-columns: repeat(2,1fr); }
  .process-section { display: block; }.process-board { margin-top: 44px; }.city-impact { margin-inline: 18px; grid-template-columns: repeat(3,1fr); }.city-impact > div:first-child { grid-column: 1/-1; }
  .map-layout { height: auto; display: block; }.map-canvas { height: 58vh; min-height: 460px; }.map-results { max-height: none; border-top: 1px solid var(--xp-line); border-left: 0; }
  .report-form-layout { display: block; }.form-aside { display: grid; grid-template-columns: minmax(280px,345px) 1fr; align-items: start; gap: 14px; }.phone-preview { grid-row: 1/3; }
  .dashboard-stats { grid-template-columns: repeat(2,1fr); }.dashboard-grid { grid-template-columns: 1fr; }
  .mobile-nav { display: grid; }
}

@media (max-width: 640px) {
  body { padding-bottom: calc(92px + env(safe-area-inset-bottom)); background: #f5f7f3; }
  .topbar { min-height: 64px; padding: 0 12px; grid-template-columns: 40px 1fr 40px; gap: 6px; }.brand { gap: 8px; }.brand-symbol { width: 36px; height: 36px; border-radius: 11px; }.brand strong { font-size: 14px; }.brand small { font-size: 5.8px; }.avatar-button { width: 36px; height: 36px; border-radius: 12px; }.mobile-menu { width: 36px; height: 36px; }
  .demo-ribbon { min-height: 40px; padding: 5px 9px; gap: 6px; font-size: 0; }.demo-ribbon strong { display: none; }.demo-ribbon .live-dot { flex: 0 0 auto; }.connection-badge { margin-left: 0; font-size: 9px; }.install-chip { margin-left: auto !important; font-size: 9px !important; }
  .hero-grid { margin: 10px 0 0; padding: 0 10px; }.hero-copy { min-height: auto; padding: 38px 22px 30px; border-radius: 26px; }.hero-copy::before { width: 190px; height: 190px; right: -120px; top: -120px; border-width: 38px; }.hero-copy::after { display: none; }.hero-badge { margin-bottom: 25px; padding: 7px 10px; font-size: 10px; }.hero-copy .eyebrow { font-size: 9px; }.hero-copy h1 { max-width: 340px; font-size: clamp(50px,15vw,66px); line-height: .89; }.hero-description { margin-top: 22px; font-size: 15px; line-height: 1.6; }.hero-actions { margin-top: 26px; display: grid; gap: 12px; }.hero-actions .primary-button { width: 100%; }.hero-actions .text-button { display: inline-flex; justify-content: center; min-height: 42px; align-items: center; }.trust-row { width: 100%; margin-top: 34px; padding-top: 24px; }.trust-row p { font-size: 11px; }.trust-row strong { font-size: 12px; }
  .city-feature { min-height: 500px; margin-top: 10px; border-radius: 26px; }.hero-signal { min-width: 168px; padding: 8px; grid-template-columns: 34px 1fr auto; gap: 7px; border-radius: 13px; }.hero-signal-a { left: 12px; top: 14px; }.hero-signal-b { right: 12px; top: 76px; }.signal-icon { width: 34px; height: 34px; border-radius: 10px; }.hero-signal strong { font-size: 9px; }.hero-signal b { font-size: 14px; }.feature-content { left: 12px; right: 12px; bottom: 12px; padding: 19px; border-radius: 19px; }.feature-kicker { margin-top: 22px; }.feature-content h2 { margin-bottom: 18px; font-size: 24px; }.feature-footer { font-size: 9px; }
  .civic-pulse { margin: 10px 10px 0; padding: 7px; border-radius: 18px; }.civic-pulse > div { min-width: 225px; min-height: 70px; padding: 10px 12px; }.civic-pulse strong { font-size: 12px; }
  .content-section { padding: 74px 15px; }.section-heading { margin-bottom: 27px; align-items: flex-start; }.section-heading h2 { font-size: 40px; }.section-heading > .text-button { margin-top: 8px; }
  .category-grid, .report-grid { display: flex; gap: 11px; padding-bottom: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }.category-card { min-width: min(78vw,300px); min-height: 220px; scroll-snap-align: start; }.category-card strong { font-size: 21px; }
  .process-section { margin: 8px 10px 70px; padding: 48px 18px 18px; border-radius: 26px; }.process-copy h2 { font-size: 48px; }.process-copy > p:not(.eyebrow) { font-size: 13px; }.process-copy .primary-button { width: 100%; }.process-board { margin-top: 38px; display: grid; grid-template-columns: 1fr; }.process-card, .process-card.is-featured { min-height: 220px; }.process-card h3, .process-card.is-featured h3 { font-size: 21px; }
  .reports-section { padding-top: 12px; }.reports-section .section-heading { display: block; }.segmented { width: 100%; margin-top: 18px; display: grid; grid-template-columns: repeat(3,1fr); }.report-card { min-width: min(86vw,344px); scroll-snap-align: start; }.report-visual { height: 230px; }.report-card p { min-height: 0; }.report-card h3 { font-size: 20px; }
  .city-impact { margin: 22px 10px 70px; padding: 44px 21px; grid-template-columns: repeat(2,1fr); gap: 26px 8px; border-radius: 26px; }.city-impact > div:first-child { grid-column: 1/-1; }.city-impact h2 { font-size: 35px; }.impact-stat { padding-left: 13px; }.impact-stat strong { font-size: 35px; }.impact-stat span { font-size: 10px; }
  .page-intro { min-height: 360px; margin: 10px; padding: 43px 22px 25px; border-radius: 26px; align-items: flex-start; }.page-intro h1 { font-size: 50px; }.page-intro > div > p:last-child { font-size: 13px; }.page-intro .primary-button, .page-intro .secondary-button { width: 100%; }
  .map-toolbar { margin: 10px; padding: 9px; align-items: stretch; }.filter-scroll { margin: 0 -1px; }.filter-chip { flex: 0 0 auto; }.map-selects { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }.map-selects label { display: grid; gap: 4px; }.map-selects select { width: 100%; margin: 0; }.locate-button { width: 100%; justify-content: center; }.map-layout { margin: 0 10px 80px; border-radius: 24px; }.map-canvas { min-height: 430px; }.map-results { padding: 12px; }
  .report-form-layout { margin: 10px 10px 80px; border-radius: 26px; }.form-panel { padding: 38px 17px 55px; }.back-link { margin-bottom: 30px; }.form-panel h1 { font-size: 49px; }.form-intro { font-size: 13px; }.category-options { grid-template-columns: repeat(2,1fr); }.category-options span { min-height: 92px; }.two-columns, .location-upload-grid { grid-template-columns: 1fr; }.submit-report { width: 100%; }.form-aside { padding: 42px 17px; display: block; }.phone-preview { margin: 0 auto 24px; }
  .dashboard-stats, .dashboard-grid { margin-inline: 10px; }.dashboard-stats { grid-template-columns: repeat(2,1fr); }.dashboard-stats article { padding: 17px; }.dashboard-stats strong { font-size: 32px; }.chart-card, .resolution-card { padding: 20px; }.queue-card { width: calc(100% - 20px); padding: 18px; }.queue-row { grid-template-columns: 74px 1fr auto; }.queue-row > :nth-child(3), .queue-row > :nth-child(4) { display: none; }
  .profile-wrap { padding: 35px 10px 90px; }.profile-card { padding: 20px; }.profile-hero { align-items: flex-start; }.profile-identity { align-items: flex-start; }.profile-identity h1 { font-size: 32px; }.profile-avatar { width: 64px; height: 64px; border-radius: 19px; }
  .mobile-nav { left: 10px; right: 10px; bottom: 10px; height: calc(70px + env(safe-area-inset-bottom)); padding: 7px 6px env(safe-area-inset-bottom); border: 1px solid rgba(16,42,39,.12); border-radius: 23px; background: rgba(255,255,255,.94); box-shadow: 0 18px 50px rgba(16,42,39,.18); backdrop-filter: blur(20px); }.mobile-nav button { height: 52px; color: #7a8884; }.mobile-nav button.is-active { color: var(--xp-ink); }.new-report-nav > span { width: 52px; height: 52px; border-color: #fff; background: var(--xp-coral); box-shadow: 0 10px 24px rgba(240,100,69,.32); }
  .auth-dialog { padding: 30px 20px; }.auth-brand h2 { font-size: 34px; }.report-dialog { border-radius: 25px 25px 0 0 !important; }.detail-layout { display: block; }.detail-copy { padding: 26px 20px; }.detail-copy h2 { font-size: 30px; }.detail-side { padding: 24px 20px; }.install-dialog { padding: 28px 20px; }.install-dialog h2 { font-size: 33px; }
  .site-footer { margin: 10px 10px 80px; padding: 45px 20px 20px; border-radius: 27px; }.footer-main { display: block; padding-bottom: 37px; }.footer-brand { display: block; }.footer-brand .brand-symbol { width: 62px; height: 62px; margin-bottom: 24px; }.footer-brand h2 { font-size: 42px; }.footer-actions { margin-top: 28px; }.footer-actions .primary-button { width: 100%; }.footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 20px; padding-block: 32px 40px; }.footer-team { grid-column: 1/-1; }.footer-bottom { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: no-preference) {
  .view.is-active .hero-copy > *, .view.is-active .city-feature, .view.is-active .page-intro > * { animation: xp-rise .62s cubic-bezier(.2,.75,.2,1) both; }.view.is-active .city-feature { animation-delay: .07s; }
  .report-card, .category-card, .primary-button, .nav-link { transition: transform .25s ease,box-shadow .25s ease,border-color .25s ease,background-color .25s ease,color .25s ease; }
  @keyframes xp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }