/* ==========================================================
   RANGANO — STAGE 3.2B
   CORE EXPERIENCES

   This stylesheet intentionally loads after the legacy
   page-specific CSS. Body-level final classes provide enough
   specificity to establish the final visual system without
   changing business logic or client-side behavior.
   ========================================================== */


/* ==========================================================
   SHARED CORE PAGE LANGUAGE
   ========================================================== */

.rangano-final-home,
.rangano-final-restaurants,
.rangano-final-map,
.rangano-final-promotions,
.rangano-final-social,
.rangano-final-discovery {
  background:
    var(
      --rangano-background
    );

  color:
    var(
      --rangano-text
    );
}


.rangano-final-home main,
.rangano-final-restaurants main,
.rangano-final-map main,
.rangano-final-promotions main,
.rangano-final-social main,
.rangano-final-discovery main {
  width:
    min(
      var(
        --rangano-content-width
      ),
      calc(
        100% - 40px
      )
    );

  margin:
    0 auto;

  padding-top:
    46px;

  padding-bottom:
    92px;
}


.rangano-final-home .page-header,
.rangano-final-restaurants .page-header,
.rangano-final-promotions .page-header {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    30px;

  margin-bottom:
    27px;
}


.rangano-final-home .page-header h1,
.rangano-final-restaurants .page-header h1,
.rangano-final-promotions .page-header h1,
.rangano-final-social .social-hero h1,
.rangano-final-discovery .discovery-hero h1 {
  margin:
    0;

  color:
    var(
      --rangano-text
    );

  font-size:
    clamp(
      34px,
      4.4vw,
      48px
    );

  font-weight:
    790;

  line-height:
    1.03;

  letter-spacing:
    -.048em;
}


.rangano-final-home .intro,
.rangano-final-home .page-description,
.rangano-final-restaurants .page-description,
.rangano-final-promotions .page-description,
.rangano-final-social .social-hero p,
.rangano-final-discovery .discovery-hero p {
  max-width:
    690px;

  margin:
    9px 0
    0;

  color:
    var(
      --rangano-muted
    );

  font-size:
    13px;

  line-height:
    1.58;
}


.rangano-final-restaurants .new-button,
.rangano-final-promotions .new-button {
  display:
    inline-flex;

  min-height:
    42px;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 15px;

  color:
    #fff;

  background:
    var(
      --rangano-accent
    );

  border:
    1px solid
    var(
      --rangano-accent
    );

  border-radius:
    10px;

  box-shadow:
    0 6px 18px
    rgb(
      189 103 82 /
      13%
    );

  font-size:
    10.5px;

  font-weight:
    800;

  text-decoration:
    none;

  transition:
    transform
      var(
        --rangano-transition
      ),
    background-color
      var(
        --rangano-transition
      ),
    box-shadow
      var(
        --rangano-transition
      );
}


.rangano-final-restaurants .new-button:hover,
.rangano-final-promotions .new-button:hover {
  background:
    var(
      --rangano-accent-strong
    );

  transform:
    translateY(
      -1px
    );

  box-shadow:
    0 9px 24px
    rgb(
      159 79 60 /
      17%
    );
}


/* ==========================================================
   AUTHENTICATED HOME
   ========================================================== */

.rangano-final-home main {
  max-width:
    1180px;
}


.rangano-final-home .page-header {
  margin-bottom:
    20px;
}


.rangano-final-home .period-control {
  display:
    inline-flex;

  gap:
    3px;

  padding:
    4px;

  background:
    var(
      --rangano-surface-soft
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    11px;
}


.rangano-final-home .period-link {
  display:
    inline-flex;

  min-height:
    33px;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 11px;

  color:
    var(
      --rangano-muted
    );

  border-radius:
    8px;

  font-size:
    10px;

  font-weight:
    730;

  text-decoration:
    none;

  transition:
    color
      var(
        --rangano-transition
      ),
    background-color
      var(
        --rangano-transition
      ),
    box-shadow
      var(
        --rangano-transition
      );
}


.rangano-final-home .period-link:hover {
  color:
    var(
      --rangano-text
    );
}


.rangano-final-home .period-link.active {
  color:
    var(
      --rangano-text
    );

  background:
    var(
      --rangano-surface
    );

  box-shadow:
    var(
      --rangano-shadow-xs
    );
}


.rangano-final-home .period-summary {
  width:
    fit-content;

  margin:
    0 0
    27px;

  padding:
    7px 10px;

  color:
    var(
      --rangano-muted
    );

  background:
    var(
      --rangano-background-subtle
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    8px;

  font-size:
    9.5px;
}


.rangano-final-home .period-summary strong {
  color:
    var(
      --rangano-text-soft
    );
}


.rangano-final-home .stats-grid {
  gap:
    10px;

  margin-bottom:
    28px;
}


.rangano-final-home .stat-card {
  position:
    relative;

  overflow:
    hidden;

  min-height:
    112px;

  padding:
    18px;

  background:
    var(
      --rangano-surface
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    15px;

  box-shadow:
    var(
      --rangano-shadow-xs
    );

  transition:
    transform
      var(
        --rangano-transition
      ),
    box-shadow
      var(
        --rangano-transition
      ),
    border-color
      var(
        --rangano-transition
      );
}


.rangano-final-home .stat-card::before {
  position:
    absolute;

  top:
    0;

  right:
    0;

  left:
    0;

  height:
    2px;

  content:
    "";

  background:
    linear-gradient(
      90deg,
      var(
        --rangano-accent
      ),
      rgb(
        189 103 82 /
        16%
      )
    );

  opacity:
    .6;
}


.rangano-final-home .stat-card:hover {
  border-color:
    var(
      --rangano-border-strong
    );

  box-shadow:
    var(
      --rangano-shadow-sm
    );

  transform:
    translateY(
      -1px
    );
}


.rangano-final-home .stat-card strong {
  color:
    var(
      --rangano-text
    );

  font-size:
    27px;

  font-weight:
    760;

  letter-spacing:
    -.04em;
}


.rangano-final-home .stat-card span {
  color:
    var(
      --rangano-muted
    );

  font-size:
    10px;
}


.rangano-final-home .section-grid {
  gap:
    12px;
}


.rangano-final-home .panel {
  overflow:
    hidden;

  padding:
    20px;

  background:
    var(
      --rangano-surface
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    16px;

  box-shadow:
    var(
      --rangano-shadow-xs
    );
}


.rangano-final-home .panel h2 {
  margin-top:
    0;

  color:
    var(
      --rangano-text
    );

  font-size:
    15px;

  font-weight:
    770;

  letter-spacing:
    -.02em;
}


.rangano-final-home .visit-card {
  padding:
    13px 0;

  background:
    transparent;

  border:
    0;

  border-top:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    0;
}


.rangano-final-home .visit-card:first-child {
  border-top:
    0;
}


.rangano-final-home .visit-card a {
  color:
    var(
      --rangano-text
    );

  font-weight:
    740;
}


.rangano-final-home .metric-row {
  background:
    var(
      --rangano-background-subtle
    );

  border:
    1px solid
    transparent;
}


.rangano-final-home .metric-row:hover {
  border-color:
    var(
      --rangano-border
    );
}


/* ==========================================================
   PUBLIC HOME
   ========================================================== */

.rangano-final-public {
  background:
    radial-gradient(
      circle at 74% 24%,
      rgb(
        189 103 82 /
        7%
      ),
      transparent 32%
    ),
    var(
      --rangano-background
    );

  color:
    var(
      --rangano-text
    );
}


.rangano-final-public .public-header {
  position:
    relative;

  z-index:
    10;

  min-height:
    var(
      --rangano-header-height
    );

  border-bottom:
    1px solid
    rgb(
      229 223 218 /
      72%
    );
}


.rangano-final-public .brand-mark {
  width:
    36px;

  height:
    36px;

  background:
    var(
      --rangano-accent
    );

  border-radius:
    11px;

  box-shadow:
    0 5px 14px
    rgb(
      189 103 82 /
      17%
    );
}


.rangano-final-public .header-action {
  min-height:
    38px;

  padding:
    0 13px;

  background:
    var(
      --rangano-text
    );

  border-radius:
    9px;

  font-size:
    10px;
}


.rangano-final-public main {
  padding-top:
    clamp(
      64px,
      9vw,
      112px
    );
}


.rangano-final-public .hero {
  grid-template-columns:
    minmax(
      0,
      1.2fr
    )
    minmax(
      310px,
      .72fr
    );

  gap:
    clamp(
      42px,
      7vw,
      84px
    );
}


.rangano-final-public .hero-copy .eyebrow {
  display:
    inline-flex;

  padding:
    6px 9px;

  background:
    var(
      --rangano-accent-softer
    );

  border:
    1px solid
    rgb(
      189 103 82 /
      10%
    );

  border-radius:
    999px;
}


.rangano-final-public .hero-copy h1 {
  max-width:
    780px;

  margin-top:
    18px;

  font-size:
    clamp(
      48px,
      7vw,
      80px
    );

  font-weight:
    780;

  letter-spacing:
    -.065em;
}


.rangano-final-public .hero-copy > p {
  max-width:
    620px;

  color:
    var(
      --rangano-muted
    );

  font-size:
    15px;
}


.rangano-final-public .primary-cta {
  background:
    var(
      --rangano-accent
    );

  box-shadow:
    0 8px 22px
    rgb(
      189 103 82 /
      15%
    );
}


.rangano-final-public .primary-cta:hover {
  background:
    var(
      --rangano-accent-strong
    );
}


.rangano-final-public .secondary-cta {
  color:
    var(
      --rangano-text-soft
    );

  background:
    rgb(
      255 255 255 /
      72%
    );

  border-color:
    var(
      --rangano-border
    );

  backdrop-filter:
    blur(
      8px
    );
}


.rangano-final-public .hero-panel {
  position:
    relative;

  overflow:
    hidden;

  padding:
    26px;

  border-color:
    var(
      --rangano-border
    );

  border-radius:
    20px;

  box-shadow:
    var(
      --rangano-shadow-md
    );
}


.rangano-final-public .hero-panel::before {
  position:
    absolute;

  top:
    0;

  right:
    0;

  left:
    0;

  height:
    3px;

  content:
    "";

  background:
    linear-gradient(
      90deg,
      var(
        --rangano-accent
      ),
      #d89684
    );
}


.rangano-final-public .hero-feature i {
  color:
    var(
      --rangano-accent-strong
    );

  background:
    var(
      --rangano-accent-soft
    );
}


.rangano-final-public .feature-section {
  margin-top:
    112px;
}


.rangano-final-public .feature-section h2 {
  max-width:
    700px;

  font-size:
    clamp(
      32px,
      4vw,
      42px
    );
}


.rangano-final-public .feature-grid {
  gap:
    10px;
}


.rangano-final-public .feature-card {
  position:
    relative;

  overflow:
    hidden;

  min-height:
    205px;

  border-color:
    var(
      --rangano-border
    );

  box-shadow:
    var(
      --rangano-shadow-xs
    );
}


.rangano-final-public .feature-card::after {
  position:
    absolute;

  right:
    19px;

  bottom:
    17px;

  content:
    "→";

  color:
    var(
      --rangano-accent
    );

  font-size:
    17px;

  transition:
    transform
      var(
        --rangano-transition
      );
}


.rangano-final-public .feature-card:hover::after {
  transform:
    translateX(
      3px
    );
}


.rangano-final-public .public-footer {
  color:
    var(
      --rangano-muted-light
    );

  border-color:
    var(
      --rangano-border
    );
}


/* ==========================================================
   RESTAURANTS
   ========================================================== */

.rangano-final-restaurants main {
  max-width:
    1220px;
}


.rangano-final-restaurants .filters {
  margin-bottom:
    22px;

  padding:
    17px;

  background:
    var(
      --rangano-surface
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    16px;

  box-shadow:
    var(
      --rangano-shadow-xs
    );
}


.rangano-final-restaurants .filter-top {
  gap:
    9px;
}


.rangano-final-restaurants .filter-top input,
.rangano-final-restaurants .filter-top select {
  min-height:
    42px;

  border-color:
    var(
      --rangano-border
    );

  border-radius:
    9px;

  font-size:
    11px;
}


.rangano-final-restaurants .filter-top input[type="search"] {
  background:
    var(
      --rangano-background-subtle
    );
}


.rangano-final-restaurants .filter-groups {
  gap:
    10px;

  margin-top:
    15px;

  padding-top:
    15px;

  border-top:
    1px solid
    var(
      --rangano-border
    );
}


.rangano-final-restaurants .filter-group {
  min-width:
    0;
}


.rangano-final-restaurants .filter-group > strong,
.rangano-final-restaurants .filter-group-title {
  color:
    var(
      --rangano-muted
    );

  font-size:
    9px;

  font-weight:
    820;

  letter-spacing:
    .07em;

  text-transform:
    uppercase;
}


.rangano-final-restaurants .filters label {
  color:
    var(
      --rangano-text-soft
    );

  font-size:
    10px;
}


.rangano-final-restaurants .filters input[type="checkbox"] {
  accent-color:
    var(
      --rangano-accent
    );
}


.rangano-final-restaurants .results-header,
.rangano-final-restaurants .list-header {
  margin:
    19px 0
    10px;

  color:
    var(
      --rangano-muted
    );

  font-size:
    10px;
}


.rangano-final-restaurants .restaurant-list,
.rangano-final-restaurants .restaurants-grid {
  gap:
    9px;
}


.rangano-final-restaurants .restaurant-card {
  position:
    relative;

  overflow:
    hidden;

  padding:
    18px;

  background:
    var(
      --rangano-surface
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    15px;

  box-shadow:
    var(
      --rangano-shadow-xs
    );

  transition:
    border-color
      var(
        --rangano-transition
      ),
    box-shadow
      var(
        --rangano-transition
      ),
    transform
      var(
        --rangano-transition
      );
}


.rangano-final-restaurants .restaurant-card:hover {
  border-color:
    var(
      --rangano-border-strong
    );

  box-shadow:
    var(
      --rangano-shadow-sm
    );

  transform:
    translateY(
      -1px
    );
}


.rangano-final-restaurants .restaurant-name,
.rangano-final-restaurants .restaurant-card h2,
.rangano-final-restaurants .restaurant-card h3 {
  color:
    var(
      --rangano-text
    );

  font-weight:
    770;

  letter-spacing:
    -.025em;
}


.rangano-final-restaurants .primary-meta,
.rangano-final-restaurants .secondary-meta,
.rangano-final-restaurants .restaurant-card p {
  color:
    var(
      --rangano-muted
    );
}


.rangano-final-restaurants .rating {
  color:
    var(
      --rangano-accent-strong
    );

  background:
    var(
      --rangano-accent-softer
    );

  border-color:
    rgb(
      189 103 82 /
      15%
    );
}


.rangano-final-restaurants .chip,
.rangano-final-restaurants .tag,
.rangano-final-restaurants .status-chip {
  color:
    var(
      --rangano-text-soft
    );

  background:
    var(
      --rangano-surface-soft
    );

  border-color:
    var(
      --rangano-border
    );
}


.rangano-final-restaurants .map-panel {
  overflow:
    hidden;

  margin-top:
    23px;

  background:
    var(
      --rangano-surface
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    17px;

  box-shadow:
    var(
      --rangano-shadow-sm
    );
}


.rangano-final-restaurants #restaurant-map {
  min-height:
    400px;

  background:
    #ebe8e3;
}


/* ==========================================================
   DEDICATED MAP
   ========================================================== */

.rangano-final-map main {
  max-width:
    1320px;
}


.rangano-final-map main > header,
.rangano-final-map .map-hero,
.rangano-final-map .page-header {
  margin-bottom:
    22px;
}


.rangano-final-map main h1 {
  margin:
    0;

  font-size:
    clamp(
      34px,
      4.4vw,
      48px
    );

  font-weight:
    790;

  letter-spacing:
    -.048em;
}


.rangano-final-map main h1 + p,
.rangano-final-map .page-description,
.rangano-final-map .map-description {
  max-width:
    720px;

  color:
    var(
      --rangano-muted
    );

  font-size:
    13px;

  line-height:
    1.58;
}


.rangano-final-map .map-controls,
.rangano-final-map .nearby-controls,
.rangano-final-map .location-controls,
.rangano-final-map main > section:first-of-type {
  border-color:
    var(
      --rangano-border
    );
}


.rangano-final-map .map-controls,
.rangano-final-map .nearby-controls,
.rangano-final-map .location-controls {
  padding:
    13px;

  background:
    var(
      --rangano-surface
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    13px;

  box-shadow:
    var(
      --rangano-shadow-xs
    );
}


.rangano-final-map main button {
  min-height:
    39px;

  padding:
    0 12px;

  color:
    var(
      --rangano-text-soft
    );

  background:
    var(
      --rangano-surface
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    9px;

  font:
    inherit;

  font-size:
    10px;

  font-weight:
    760;
}


.rangano-final-map main button:hover {
  color:
    var(
      --rangano-text
    );

  border-color:
    var(
      --rangano-border-strong
    );
}


.rangano-final-map main select {
  min-height:
    39px;

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    9px;
}


.rangano-final-map #map,
.rangano-final-map #rangano-map,
.rangano-final-map .map-canvas,
.rangano-final-map .leaflet-container {
  border-radius:
    17px;

  outline:
    1px solid
    var(
      --rangano-border
    );

  box-shadow:
    var(
      --rangano-shadow-md
    );
}


.rangano-final-map .leaflet-popup-content-wrapper {
  border-radius:
    11px;

  box-shadow:
    var(
      --rangano-shadow-md
    );
}


.rangano-final-map .leaflet-popup-content {
  color:
    var(
      --rangano-text
    );

  font-family:
    var(
      --rangano-font
    );
}


.rangano-final-map .legend,
.rangano-final-map .map-legend {
  color:
    var(
      --rangano-muted
    );

  background:
    rgb(
      255 255 255 /
      92%
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    10px;

  box-shadow:
    var(
      --rangano-shadow-xs
    );
}


.rangano-final-map article,
.rangano-final-map .recommendation-card,
.rangano-final-map .restaurant-card {
  background:
    var(
      --rangano-surface
    );

  border-color:
    var(
      --rangano-border
    );

  border-radius:
    14px;

  box-shadow:
    var(
      --rangano-shadow-xs
    );
}


/* ==========================================================
   PROMOTIONS
   ========================================================== */

.rangano-final-promotions main {
  max-width:
    1120px;
}


.rangano-final-promotions .tabs {
  display:
    inline-flex;

  gap:
    3px;

  margin-bottom:
    17px;

  padding:
    4px;

  background:
    var(
      --rangano-surface-soft
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    11px;
}


.rangano-final-promotions .tab {
  min-height:
    34px;

  padding:
    0 12px;

  color:
    var(
      --rangano-muted
    );

  background:
    transparent;

  border:
    0;

  border-radius:
    8px;

  font-size:
    10px;

  font-weight:
    750;
}


.rangano-final-promotions .tab.active {
  color:
    var(
      --rangano-text
    );

  background:
    var(
      --rangano-surface
    );

  box-shadow:
    var(
      --rangano-shadow-xs
    );
}


.rangano-final-promotions .filters {
  padding:
    16px;

  background:
    var(
      --rangano-surface
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    15px;

  box-shadow:
    var(
      --rangano-shadow-xs
    );
}


.rangano-final-promotions .filter-grid {
  gap:
    9px;
}


.rangano-final-promotions .filter-grid input,
.rangano-final-promotions .filter-grid select {
  min-height:
    41px;

  border-color:
    var(
      --rangano-border
    );

  border-radius:
    9px;

  font-size:
    11px;
}


.rangano-final-promotions .filter-footer {
  margin-top:
    13px;

  padding-top:
    13px;

  border-top:
    1px solid
    var(
      --rangano-border
    );
}


.rangano-final-promotions .promotion-card {
  padding:
    19px;

  background:
    var(
      --rangano-surface
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    15px;

  box-shadow:
    var(
      --rangano-shadow-xs
    );

  transition:
    transform
      var(
        --rangano-transition
      ),
    border-color
      var(
        --rangano-transition
      ),
    box-shadow
      var(
        --rangano-transition
      );
}


.rangano-final-promotions .promotion-card:hover {
  border-color:
    var(
      --rangano-border-strong
    );

  box-shadow:
    var(
      --rangano-shadow-sm
    );

  transform:
    translateY(
      -1px
    );
}


.rangano-final-promotions .promotion-card h2,
.rangano-final-promotions .promotion-card h3 {
  color:
    var(
      --rangano-text
    );

  font-weight:
    770;

  letter-spacing:
    -.025em;
}


.rangano-final-promotions .type-badge,
.rangano-final-promotions .status-badge {
  padding:
    4px 7px;

  border-radius:
    999px;

  font-size:
    8.5px;

  font-weight:
    800;
}


.rangano-final-promotions .type-badge {
  color:
    var(
      --rangano-accent-strong
    );

  background:
    var(
      --rangano-accent-softer
    );
}


.rangano-final-promotions .details-grid > div {
  background:
    var(
      --rangano-background-subtle
    );

  border-color:
    var(
      --rangano-border
    );
}


.rangano-final-promotions .notes {
  background:
    var(
      --rangano-surface-soft
    );
}


/* ==========================================================
   SOCIAL
   ========================================================== */

.rangano-final-social .social-shell {
  max-width:
    1160px;
}


.rangano-final-social .social-hero {
  display:
    grid;

  grid-template-columns:
    1fr
    auto;

  gap:
    36px;

  align-items:
    end;

  margin-bottom:
    27px;
}


.rangano-final-social .hero-stats {
  display:
    flex;

  gap:
    7px;
}


.rangano-final-social .hero-stats > div {
  min-width:
    80px;

  padding:
    12px
    13px;

  background:
    var(
      --rangano-surface
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    12px;

  box-shadow:
    var(
      --rangano-shadow-xs
    );

  text-align:
    center;
}


.rangano-final-social .hero-stats strong {
  display:
    block;

  color:
    var(
      --rangano-text
    );

  font-size:
    20px;

  letter-spacing:
    -.04em;
}


.rangano-final-social .hero-stats span {
  display:
    block;

  margin-top:
    2px;

  color:
    var(
      --rangano-muted
    );

  font-size:
    8.5px;
}


.rangano-final-social .search-panel {
  padding:
    16px;

  background:
    var(
      --rangano-surface
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    15px;

  box-shadow:
    var(
      --rangano-shadow-xs
    );
}


.rangano-final-social .search-panel input {
  min-height:
    42px;

  background:
    var(
      --rangano-background-subtle
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    9px;
}


.rangano-final-social .social-section {
  margin-top:
    31px;
}


.rangano-final-social .section-heading h2 {
  color:
    var(
      --rangano-text
    );

  font-size:
    19px;

  font-weight:
    770;

  letter-spacing:
    -.03em;
}


.rangano-final-social .section-heading p {
  color:
    var(
      --rangano-muted
    );

  font-size:
    11px;
}


.rangano-final-social .count-pill,
.rangano-final-social .soft-badge {
  color:
    var(
      --rangano-accent-strong
    );

  background:
    var(
      --rangano-accent-softer
    );

  border-color:
    rgb(
      189 103 82 /
      12%
    );
}


.rangano-final-social .people-grid {
  gap:
    8px;
}


.rangano-final-social .person-card {
  padding:
    14px;

  background:
    var(
      --rangano-surface
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    13px;

  box-shadow:
    var(
      --rangano-shadow-xs
    );

  transition:
    border-color
      var(
        --rangano-transition
      ),
    transform
      var(
        --rangano-transition
      );
}


.rangano-final-social .person-card:hover {
  border-color:
    var(
      --rangano-border-strong
    );

  transform:
    translateY(
      -1px
    );
}


.rangano-final-social .person-avatar,
.rangano-final-social .feed-avatar,
.rangano-final-social .profile-avatar-large {
  color:
    var(
      --rangano-accent-strong
    );

  background:
    var(
      --rangano-accent-soft
    );
}


.rangano-final-social .social-layout {
  gap:
    12px;
}


.rangano-final-social .feed-list {
  gap:
    7px;
}


.rangano-final-social .feed-card {
  padding:
    15px;

  background:
    var(
      --rangano-surface
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    13px;

  box-shadow:
    var(
      --rangano-shadow-xs
    );
}


.rangano-final-social .network-card {
  background:
    var(
      --rangano-surface
    );

  border-color:
    var(
      --rangano-border
    );

  border-radius:
    14px;

  box-shadow:
    var(
      --rangano-shadow-xs
    );
}


/* ==========================================================
   DISCOVERY
   ========================================================== */

.rangano-final-discovery .discovery-shell {
  max-width:
    1160px;
}


.rangano-final-discovery .discovery-hero {
  display:
    grid;

  grid-template-columns:
    1fr
    minmax(
      240px,
      300px
    );

  gap:
    38px;

  align-items:
    end;

  margin-bottom:
    43px;
}


.rangano-final-discovery .reputation-card {
  position:
    relative;

  overflow:
    hidden;

  padding:
    18px;

  background:
    linear-gradient(
      145deg,
      #fff,
      var(
        --rangano-accent-softer
      )
    );

  border:
    1px solid
    rgb(
      189 103 82 /
      15%
    );

  border-radius:
    15px;

  box-shadow:
    var(
      --rangano-shadow-sm
    );
}


.rangano-final-discovery .reputation-card > span {
  color:
    var(
      --rangano-muted
    );

  font-size:
    8.5px;

  font-weight:
    800;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}


.rangano-final-discovery .reputation-card > strong {
  display:
    block;

  margin-top:
    3px;

  color:
    var(
      --rangano-text
    );

  font-size:
    20px;

  letter-spacing:
    -.03em;
}


.rangano-final-discovery .progress-track {
  overflow:
    hidden;

  height:
    6px;

  margin:
    12px 0
    8px;

  background:
    rgb(
      189 103 82 /
      12%
    );

  border-radius:
    999px;
}


.rangano-final-discovery .progress-track > span {
  display:
    block;

  height:
    100%;

  background:
    var(
      --rangano-accent
    );

  border-radius:
    inherit;
}


.rangano-final-discovery .discovery-section {
  margin-top:
    38px;
}


.rangano-final-discovery .section-heading {
  margin-bottom:
    17px;
}


.rangano-final-discovery .section-heading h2 {
  margin:
    4px 0
    5px;

  color:
    var(
      --rangano-text
    );

  font-size:
    22px;

  font-weight:
    770;

  letter-spacing:
    -.035em;
}


.rangano-final-discovery .section-heading p {
  margin:
    0;

  color:
    var(
      --rangano-muted
    );

  font-size:
    11px;
}


.rangano-final-discovery .location-note {
  display:
    flex;

  gap:
    7px;

  align-items:
    center;

  margin-bottom:
    15px;

  padding:
    10px
    12px;

  color:
    var(
      --rangano-muted
    );

  background:
    var(
      --rangano-warning-soft
    );

  border:
    1px solid
    rgb(
      154 113 56 /
      12%
    );

  border-radius:
    10px;

  font-size:
    10px;
}


.rangano-final-discovery .location-note strong {
  color:
    var(
      --rangano-warning
    );
}


.rangano-final-discovery .restaurant-grid {
  gap:
    9px;
}


.rangano-final-discovery .restaurant-card {
  padding:
    18px;

  background:
    var(
      --rangano-surface
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    15px;

  box-shadow:
    var(
      --rangano-shadow-xs
    );

  transition:
    transform
      var(
        --rangano-transition
      ),
    border-color
      var(
        --rangano-transition
      ),
    box-shadow
      var(
        --rangano-transition
      );
}


.rangano-final-discovery .restaurant-card:hover {
  border-color:
    var(
      --rangano-border-strong
    );

  box-shadow:
    var(
      --rangano-shadow-sm
    );

  transform:
    translateY(
      -1px
    );
}


.rangano-final-discovery .restaurant-category {
  color:
    var(
      --rangano-accent
    );

  font-size:
    8.5px;

  font-weight:
    820;

  letter-spacing:
    .06em;

  text-transform:
    uppercase;
}


.rangano-final-discovery .restaurant-card h3 {
  margin-top:
    5px;

  color:
    var(
      --rangano-text
    );

  font-size:
    17px;

  font-weight:
    770;

  letter-spacing:
    -.03em;
}


.rangano-final-discovery .restaurant-card p {
  color:
    var(
      --rangano-muted
    );
}


.rangano-final-discovery .reason-list,
.rangano-final-discovery .reason-chip,
.rangano-final-discovery .signal {
  color:
    var(
      --rangano-text-soft
    );

  background:
    var(
      --rangano-surface-soft
    );

  border-color:
    var(
      --rangano-border
    );
}


/* ==========================================================
   EMPTY STATES / SMALL SHARED DETAILS
   ========================================================== */

.rangano-final-home .empty-card,
.rangano-final-restaurants .empty-state,
.rangano-final-promotions .empty-state,
.rangano-final-social .empty-card,
.rangano-final-discovery .empty-card,
.rangano-final-discovery .empty-state {
  color:
    var(
      --rangano-muted
    );

  background:
    var(
      --rangano-background-subtle
    );

  border:
    1px dashed
    var(
      --rangano-border-strong
    );

  border-radius:
    14px;

  box-shadow:
    none;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (
  max-width: 900px
) {
  .rangano-final-home .page-header,
  .rangano-final-restaurants .page-header,
  .rangano-final-promotions .page-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .rangano-final-social .social-hero,
  .rangano-final-discovery .discovery-hero {
    grid-template-columns:
      1fr;
  }


  .rangano-final-social .hero-stats {
    width:
      100%;
  }


  .rangano-final-social .hero-stats > div {
    flex:
      1;
  }


  .rangano-final-public .hero {
    grid-template-columns:
      1fr;
  }
}


@media (
  max-width: 720px
) {
  .rangano-final-home main,
  .rangano-final-restaurants main,
  .rangano-final-map main,
  .rangano-final-promotions main,
  .rangano-final-social main,
  .rangano-final-discovery main {
    width:
      calc(
        100% - 28px
      );

    padding-top:
      32px;

    padding-bottom:
      76px;
  }


  .rangano-final-home .page-header h1,
  .rangano-final-restaurants .page-header h1,
  .rangano-final-promotions .page-header h1,
  .rangano-final-social .social-hero h1,
  .rangano-final-discovery .discovery-hero h1,
  .rangano-final-map main h1 {
    font-size:
      35px;
  }


  .rangano-final-home .period-control {
    display:
      flex;

    width:
      100%;
  }


  .rangano-final-home .period-link {
    flex:
      1;
  }


  .rangano-final-restaurants .new-button,
  .rangano-final-promotions .new-button {
    width:
      100%;
  }


  .rangano-final-restaurants .filters,
  .rangano-final-promotions .filters {
    padding:
      13px;
  }


  .rangano-final-social .hero-stats {
    gap:
      5px;
  }


  .rangano-final-social .hero-stats > div {
    min-width:
      0;

    padding:
      10px 6px;
  }


  .rangano-final-discovery .discovery-hero {
    margin-bottom:
      32px;
  }


  .rangano-final-public main {
    width:
      calc(
        100% - 28px
      );

    padding-top:
      52px;
  }


  .rangano-final-public .feature-section {
    margin-top:
      78px;
  }
}


@media (
  max-width: 520px
) {
  .rangano-final-public .hero-copy h1 {
    font-size:
      46px;

    letter-spacing:
      -.055em;
  }


  .rangano-final-public .hero-panel {
    padding:
      21px;
  }


  .rangano-final-public .feature-grid {
    grid-template-columns:
      1fr;
  }


  .rangano-final-home .stats-grid {
    gap:
      7px;
  }


  .rangano-final-home .stat-card {
    min-height:
      96px;
  }


  .rangano-final-restaurants .restaurant-card,
  .rangano-final-promotions .promotion-card,
  .rangano-final-discovery .restaurant-card {
    padding:
      15px;
  }


  .rangano-final-social .social-hero {
    gap:
      20px;
  }
}