:root {
  --wh2-radius-card: 22px;
  --wh2-radius-pill: 999px;
  --wh2-shadow-card: 0 14px 34px rgba(107, 43, 36, 0.12);
}

[data-time-phase="morning"] {
  --link: #8c3600;
  --sky: #ffc24e;
  --sky-2: #ff8b50;
  --sky-mid: #ffdf83;
  --on-sky: #381600;
  --surface: #fffaf2;
  --surface-2: #ffedd6;
  --ink: #321f13;
  --ink-muted: #674a38;
  --accent: #b8440a;
  --accent-2: #ffd166;
  --on-accent: #2f1600;
  --line: rgba(85, 43, 20, 0.15);
  --shadow: rgba(159, 76, 29, 0.2);
  --wash: rgba(255, 149, 64, 0.2);
  --body-grad: linear-gradient(180deg, #ffe7a4 0%, #ffd1a0 20%, rgba(255, 228, 194, 0.3) 42%, transparent 68%);
  --cat-food-drink: #e88013;
  --cat-arts-theatre: #d64c83;
}

[data-time-phase="afternoon"],
[data-time-phase="day"] {
  --link: #8f3046;
  --sky: #ff704f;
  --sky-2: #ffbd59;
  --sky-mid: #ff9362;
  --on-sky: #37140f;
  --surface: #fff8f6;
  --surface-2: #ffe7e0;
  --ink: #331824;
  --ink-muted: #674456;
  --accent: #b83d50;
  --accent-2: #ffbb48;
  --on-accent: #fff9f5;
  --line: rgba(83, 27, 47, 0.14);
  --shadow: rgba(154, 48, 67, 0.19);
  --wash: rgba(255, 112, 108, 0.17);
  --body-grad: linear-gradient(180deg, #ffd590 0%, #ffb28f 17%, rgba(255, 188, 179, 0.28) 38%, transparent 66%);
  --cat-food-drink: #e88013;
  --cat-arts-theatre: #d64c83;
}

[data-time-phase="sunset"] {
  --link: #8f214d;
  --sky: #ff5889;
  --sky-2: #ffbf53;
  --sky-mid: #ff765f;
  --on-sky: #32102b;
  --surface: #fff4f3;
  --surface-2: #ffdfdb;
  --ink: #38142d;
  --ink-muted: #60334f;
  --accent: #a92a57;
  --accent-2: #ffb546;
  --on-accent: #fff9fa;
  --line: rgba(80, 18, 56, 0.16);
  --shadow: rgba(131, 30, 77, 0.22);
  --wash: rgba(235, 67, 145, 0.19);
  --body-grad: linear-gradient(180deg, #69427c 0%, #d94c8a 12%, #ff745e 26%, #ffad5b 42%, rgba(255, 220, 196, 0.15) 66%, transparent 82%);
  --cat-food-drink: #e88013;
  --cat-arts-theatre: #d64c83;
}

[data-time-phase="night"] {
  --link: #ffc6e0;
  --sky: #9851d7;
  --sky-2: #ff9a62;
  --sky-mid: #dc5b9d;
  --on-sky: #fff7ff;
  --surface: #1f1534;
  --surface-2: #302044;
  --ink: #fff5fd;
  --ink-muted: #e1cfe7;
  --accent: #ff9c67;
  --accent-2: #ff6fae;
  --on-accent: #33122b;
  --line: rgba(255, 231, 249, 0.16);
  --shadow: rgba(0, 0, 0, 0.48);
  --wash: rgba(208, 89, 197, 0.18);
  --body-grad: linear-gradient(180deg, #261742 0%, #42204f 24%, rgba(106, 35, 93, 0.35) 46%, transparent 70%);
  --cat-food-drink: #ffc05d;
  --cat-arts-theatre: #ff86c2;
}

.hp-body {
  background-image:
    radial-gradient(110% 42% at 50% 0%, var(--wash), transparent 72%),
    var(--body-grad),
    linear-gradient(180deg, transparent 48%, var(--surface-2) 100%);
}

.hp-app-navigation .hp-toolbar__location,
.hp-app-navigation .hp-current-location summary {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--wh2-radius-pill);
  background: rgba(255, 255, 255, 0.35);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  box-shadow: 0 5px 18px -12px var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hp-app-navigation .hp-current-location summary {
  padding-inline: 11px;
}

.hp-weather {
  opacity: 0.72;
}

.hp-weather__temp {
  opacity: 0.82;
}

.hp-planman {
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  justify-items: stretch;
  gap: 10px 14px;
  margin-block: 12px 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 196, 92, 0.7), transparent 34%),
    linear-gradient(120deg, #ff865b 0%, #f35e91 55%, #a64dbb 100%);
  color: #35152b;
  box-shadow: 0 16px 38px -23px var(--shadow);
  text-align: left;
}

[data-time-phase="night"] .hp-planman {
  background:
    radial-gradient(circle at 94% 0%, rgba(255, 152, 98, 0.5), transparent 36%),
    linear-gradient(120deg, #49245f 0%, #742d76 58%, #a43f80 100%);
  color: #fff5fd;
}

.hp-planman__brand {
  grid-row: 1;
  grid-column: 1;
}

.hp-planman__badge {
  width: 58px;
  max-width: 100%;
}

.hp-planman__copy {
  grid-row: 1;
  grid-column: 2;
}

.hp-planman__kicker {
  margin-bottom: 2px;
  color: inherit;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.hp-planman__title {
  font-size: clamp(13px, 3.8vw, 17px);
  line-height: 1.25;
}

.hp-planman__body {
  color: inherit;
}

.hp-planman__cta {
  grid-row: 1;
  grid-column: 3;
  min-height: 44px;
  padding-inline: 14px;
  background: #35152b;
  color: #fff9f5;
  box-shadow: 0 8px 18px -12px rgba(37, 13, 34, 0.65);
  white-space: nowrap;
}

[data-time-phase="night"] .hp-planman__cta {
  background: #fff1f8;
  color: #35152b;
}

.hp-panel {
  border-color: var(--line);
  border-radius: 24px;
  background: linear-gradient(145deg, var(--surface) 8%, var(--surface-2) 150%);
  box-shadow: var(--wh2-shadow-card);
}

[data-time-phase="night"] .hp-panel {
  background: linear-gradient(145deg, rgba(55, 33, 73, 0.96), rgba(31, 21, 52, 0.94));
}

.hp-panel__title {
  letter-spacing: 0;
}

.hp-card,
.hp-spot {
  border-color: var(--line);
  border-radius: var(--wh2-radius-card);
  box-shadow: var(--wh2-shadow-card);
}

.hp-card {
  background: linear-gradient(155deg, var(--surface) 0%, var(--surface-2) 145%);
}

[data-time-phase="night"] .hp-card,
[data-time-phase="night"] .hp-spot {
  background: linear-gradient(155deg, #332144 0%, #241832 100%);
}

.hp-card__media {
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 226, 149, 0.7), transparent 34%),
    linear-gradient(135deg, #ed8d76 0%, #d85e91 54%, #8750aa 100%);
}

.hp-card__badge {
  border: 1px solid rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(8px);
}

.hp-card__body {
  gap: 5px;
  padding: 14px 15px 16px;
}

.hp-card__title {
  line-height: 1.25;
}

.hp-card__when {
  color: var(--accent);
}

.hp-card__venue,
.hp-card__dist {
  color: var(--ink-muted);
}

.hp-spot__cover {
  background: linear-gradient(135deg, #ffc968 0%, #ff987a 50%, #dc6d94 100%);
  color: #47202d;
}

.hp-spot--attractions .hp-spot__cover,
.hp-spot--nightlife .hp-spot__cover {
  background: linear-gradient(135deg, #ffb665, #ef7588 55%, #8b5caf);
  color: #35152b;
}

.hp-place-cover {
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 223, 143, 0.84), transparent 38%),
    linear-gradient(135deg, #f5ad78 0%, #e77b86 56%, #9a68a3 100%);
  color: #46202d;
}

.hp-place-cover--tone-1 {
  background: linear-gradient(135deg, #ffd487 0%, #ff9f76 55%, #dc6c85 100%);
  color: #46202d;
}

.hp-place-cover--tone-2 {
  background: linear-gradient(135deg, #ffc181 0%, #ee7d89 52%, #a3659c 100%);
  color: #421a35;
}

.hp-place-cover--tone-3 {
  background: linear-gradient(135deg, #f7c67e 0%, #ed8a9a 52%, #8869ab 100%);
  color: #38203f;
}

.hp-place-cover--tone-4 {
  background: linear-gradient(135deg, #f5d387 0%, #f2a276 55%, #c86f88 100%);
  color: #462a20;
}

.hp-place-detail .hp-place-cover {
  border-radius: 24px;
  box-shadow: var(--wh2-shadow-card);
}

.hp-place-detail__fact,
.hp-place-detail__status {
  border-color: var(--line);
  border-radius: 16px;
  background: linear-gradient(145deg, var(--surface), var(--surface-2));
}

.hp-quests .hp-panel {
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 182, 98, 0.22), transparent 40%),
    linear-gradient(145deg, var(--surface), var(--surface-2));
}

.hp-quests #side-quest-categories a.hp-saved-place,
.hp-quests #side-quest-options > a.hp-saved-place {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(145deg, var(--surface), var(--surface-2));
  box-shadow: var(--wh2-shadow-card);
  color: var(--ink);
}

.hp-quests #side-quest-categories a.hp-saved-place span:last-child,
.hp-quests #side-quest-options > a.hp-saved-place > span:last-child {
  color: var(--link);
  font-weight: 750;
}

.hp-quests .hp-saved-place {
  border-color: var(--line);
  border-radius: 18px;
  background: linear-gradient(145deg, var(--surface), var(--surface-2));
}

.hp-btn--primary,
.hp-pill,
.hp-quick__btn--on:not(.hp-quick__btn--now) {
  background-image: linear-gradient(125deg, var(--sky) 0%, var(--sky-mid) 52%, var(--sky-2) 100%);
  color: var(--on-sky);
}

.hp-quick__btn--now {
  background: linear-gradient(125deg, var(--accent-2), var(--accent));
  color: var(--on-accent);
}

.hp-menu__panel,
.hp-toolbar__location-panel {
  border-color: var(--line);
  border-radius: 20px;
  background: linear-gradient(145deg, var(--surface), var(--surface-2));
  box-shadow: var(--wh2-shadow-card);
}

.hp-menu__link--quest {
  border-color: rgba(220, 89, 116, 0.28);
  background: linear-gradient(110deg, rgba(255, 164, 92, 0.2), rgba(236, 88, 145, 0.14));
}

.hp-menu__link:hover,
.hp-menu__link:focus-visible {
  background-color: var(--surface-2);
}

.hp-card,
.hp-spot,
.hp-planman__cta,
.hp-menu__link,
.hp-quests .hp-saved-place {
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color var(--phase-ease),
    border-color var(--phase-ease);
}

.hp-card:active,
.hp-spot:active,
.hp-planman__cta:active,
.hp-quests .hp-saved-place:active {
  transform: scale(0.985);
}

@media (hover: hover) and (pointer: fine) {
  .hp-card:hover,
  .hp-spot:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -20px var(--shadow);
  }
}

@media (max-width: 360px) {
  .hp-planman {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 8px 10px;
    padding: 11px;
  }

  .hp-planman__badge {
    width: 48px;
  }

  .hp-planman__cta {
    grid-row: 2;
    grid-column: 2;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-card,
  .hp-spot,
  .hp-planman__cta,
  .hp-menu__link,
  .hp-quests .hp-saved-place {
    transition: none;
  }

  .hp-card:active,
  .hp-spot:active,
  .hp-planman__cta:active,
  .hp-quests .hp-saved-place:active {
    transform: none;
  }
}

.hp-shell:has(#hp-home-hero) > .hp-app-navigation {
  margin-bottom: calc(-56px - env(safe-area-inset-top));
}

.hp-shell:has(#hp-home-hero) > .hp-app-navigation .hp-toolbar__icon,
.hp-shell:has(#hp-home-hero) > .hp-app-navigation .hp-toolbar__location,
.hp-shell:has(#hp-home-hero) > .hp-app-navigation .hp-current-location summary {
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(37, 21, 48, 0.3);
  color: #fffaf6;
  box-shadow: 0 6px 20px rgba(35, 12, 37, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hp-shell:has(#hp-home-hero) > .hp-app-navigation .hp-current-location {
  flex: 0 1 auto;
  max-width: 44%;
}

.hp-shell:has(#hp-home-hero) > .hp-app-navigation .hp-menu__panel,
.hp-shell:has(#hp-home-hero) > .hp-app-navigation .hp-toolbar__location-panel {
  background: var(--surface);
  color: var(--ink);
}

.hp-sunset-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 332px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  overflow: hidden;
  margin: 0 calc(-1 * var(--gutter)) 14px;
  padding: calc(78px + env(safe-area-inset-top)) var(--gutter) 36px;
  border-radius: 0 0 30px 30px;
  background-color: #6a285d;
  background-image:
    linear-gradient(180deg, rgba(32, 18, 43, 0.2) 0%, rgba(45, 20, 48, 0.08) 35%, rgba(22, 15, 35, 0.82) 100%),
    url("/images/phoenix/sunset.webp");
  background-position: center, center 53%;
  background-size: cover;
  color: #fffaf6;
  box-shadow: 0 18px 42px -30px rgba(49, 17, 51, 0.78);
}

[data-time-phase="morning"] .hp-sunset-hero {
  background-image:
    linear-gradient(180deg, rgba(59, 26, 47, 0.12) 0%, rgba(46, 23, 44, 0.06) 34%, rgba(22, 15, 35, 0.76) 100%),
    url("/images/phoenix/morning.webp");
}

[data-time-phase="afternoon"] .hp-sunset-hero,
[data-time-phase="day"] .hp-sunset-hero {
  background-image:
    linear-gradient(180deg, rgba(59, 26, 47, 0.12) 0%, rgba(46, 23, 44, 0.08) 34%, rgba(22, 15, 35, 0.78) 100%),
    url("/images/phoenix/afternoon.webp");
}

[data-time-phase="night"] .hp-sunset-hero {
  background-image:
    linear-gradient(180deg, rgba(28, 16, 48, 0.38) 0%, rgba(33, 17, 48, 0.18) 35%, rgba(17, 12, 32, 0.9) 100%),
    url("/images/phoenix/night.webp");
}

.hp-sunset-hero::before {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 43%;
  background: linear-gradient(180deg, rgba(29, 16, 40, 0.12), #191326 90%);
  clip-path: polygon(0 60%, 12% 38%, 25% 58%, 39% 18%, 53% 52%, 67% 26%, 82% 60%, 100% 34%, 100% 100%, 0 100%);
  content: "";
}

.hp-sunset-hero__top-controls {
  position: absolute;
  z-index: 2;
  top: calc(8px + env(safe-area-inset-top));
  right: var(--gutter);
}

.hp-sunset-hero__brand {
  position: relative;
  z-index: 2;
  width: min(178px, 45vw);
  margin: 0 auto;
}

.hp-sunset-hero .hp-top__logo {
  width: 100%;
  max-height: none;
  filter: drop-shadow(0 5px 12px rgba(22, 13, 30, 0.45));
}

.hp-sunset-hero #hp-weather {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(34, 19, 43, 0.34);
  color: #fffaf6;
  opacity: 1;
  padding: 5px 8px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hp-sunset-hero .hp-weather__reading,
.hp-sunset-hero .hp-weather__temp {
  color: inherit;
}

.hp-sunset-hero .hp-greeting {
  position: relative;
  z-index: 2;
  width: min(100%, 540px);
  margin: 14px 0 0;
  animation: none;
  text-align: center;
}

.hp-sunset-hero .hp-greeting__title {
  color: #fffaf6;
  font-size: clamp(24px, 6.5vw, 34px);
  font-weight: 850;
  line-height: 1.08;
  text-shadow: 0 2px 14px rgba(28, 14, 37, 0.48);
}

.hp-sunset-hero .hp-greeting__sub,
.hp-sunset-hero .hp-greeting__accent {
  margin-top: 6px;
  color: rgba(255, 248, 243, 0.94);
  font-size: 14px;
}

.hp-discovery .hp-planman {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  justify-items: stretch;
  gap: 8px 12px;
  margin: 14px 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 225, 213, 0.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 133, 92, 0.23), transparent 36%),
    linear-gradient(130deg, rgba(43, 25, 44, 0.96), rgba(58, 31, 55, 0.92));
  color: #fff6f0;
  box-shadow: 0 14px 34px rgba(57, 20, 49, 0.2);
  text-align: left;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.hp-discovery .hp-planman__brand {
  grid-column: 1;
  grid-row: 1;
  flex: initial;
}

.hp-discovery .hp-planman__badge {
  width: 52px;
  height: auto;
  max-width: 100%;
}

.hp-discovery .hp-planman__copy {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  flex: initial;
  padding: 0;
  border: 0;
}

.hp-discovery .hp-planman__kicker {
  margin: 0 0 2px;
  color: #ffc39c;
  font-size: 9px;
  letter-spacing: 0.12em;
}

.hp-discovery .hp-planman__title {
  color: #fffaf6;
  font-size: clamp(14px, 3.8vw, 18px);
  line-height: 1.18;
}

.hp-discovery .hp-planman__body {
  margin-top: 3px;
  color: rgba(255, 239, 231, 0.83);
  font-size: 11px;
  line-height: 1.35;
}

.hp-discovery .hp-planman__cta {
  grid-column: 3;
  grid-row: 1;
  min-height: 44px;
  padding: 9px 13px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(110deg, #ff6f79, #ff9c4f);
  color: #32152a;
  font-size: 12px;
  font-weight: 850;
  box-shadow: 0 8px 18px rgba(10, 8, 16, 0.23);
  white-space: nowrap;
}

.hp-search {
  gap: 8px;
  margin-block: 18px 12px;
}

.hp-search__form {
  min-height: 54px;
  border: 1px solid rgba(164, 80, 74, 0.2);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(96, 44, 52, 0.1);
}

.hp-search__input {
  min-width: 0;
  font-size: 14px;
}

.hp-search__filter {
  min-width: 48px;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
}

.hp-home-categories {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin: 4px calc(-1 * var(--gutter)) 16px;
  padding: 3px var(--gutter) 8px;
  scrollbar-width: none;
}

.hp-home-categories::-webkit-scrollbar {
  display: none;
}

.hp-home-categories__pill {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3fa1, #c44583);
  color: #fffaf8;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  box-shadow: 0 7px 16px rgba(87, 35, 92, 0.18);
}

.hp-home-categories__pill:nth-child(2) {
  background: linear-gradient(135deg, #dc614d, #f29a40);
}

.hp-home-categories__pill:nth-child(3) {
  background: linear-gradient(135deg, #d74677, #ee785b);
}

.hp-home-categories__pill:nth-child(4) {
  background: linear-gradient(135deg, #497b71, #72a77d);
}

.hp-home-categories__pill:nth-child(5) {
  background: linear-gradient(135deg, #594e9c, #a34c9c);
}

.hp-home-categories__pill:focus-visible,
.hp-planman-picks__cta:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.hp-panel#hp-results {
  margin-top: 12px;
  padding: 4px 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hp-explore-today {
  margin: 27px 0 6px;
}

.hp-explore-today__eyebrow {
  color: var(--accent);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.15em;
}

.hp-explore-today h2 {
  color: var(--ink);
  font-size: 23px;
  line-height: 1.2;
}

.hp-explore-today p {
  margin-top: 3px;
  color: var(--ink-muted);
  font-size: 13px;
}

.hp-planman-picks {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 24px 0 12px;
  padding: 17px;
  border: 1px solid rgba(182, 73, 109, 0.2);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 190, 169, 0.45), transparent 42%),
    linear-gradient(130deg, #f6d7e3, #f8e0d8 65%, #ffe4bd);
  color: #3c1d36;
  box-shadow: 0 14px 32px rgba(107, 43, 72, 0.15);
}

[data-time-phase="night"] .hp-planman-picks {
  border-color: rgba(247, 165, 202, 0.28);
  background:
    radial-gradient(circle at 100% 0, rgba(190, 81, 142, 0.32), transparent 42%),
    linear-gradient(130deg, #3c274a, #512943 65%, #603446);
  color: #fff4fb;
}

.hp-planman-picks__badge {
  width: 54px;
  height: auto;
  object-fit: contain;
}

.hp-planman-picks__copy {
  min-width: 0;
}

.hp-planman-picks__eyebrow {
  color: #943c68;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.13em;
}

[data-time-phase="night"] .hp-planman-picks__eyebrow {
  color: #ffc0dc;
}

.hp-planman-picks h2 {
  font-size: 18px;
  line-height: 1.25;
}

.hp-planman-picks p {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
}

.hp-planman-picks__interests {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.hp-planman-picks__interests span {
  padding: 3px 8px;
  border: 1px solid rgba(130, 51, 91, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
  font-size: 10px;
  font-weight: 700;
}

.hp-planman-picks__cta {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 44px;
  padding: 10px 17px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(110deg, #d74c78, #ee785b);
  color: #fffaf6;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

@media (min-width: 390px) {
  .hp-planman-picks {
    grid-template-columns: 62px minmax(0, 1fr) auto;
  }

  .hp-planman-picks__badge {
    width: 62px;
  }

  .hp-planman-picks__cta {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
}

@media (max-width: 359px) {
  .hp-sunset-hero {
    min-height: 300px;
    padding-top: calc(70px + env(safe-area-inset-top));
  }

  .hp-sunset-hero__brand {
    width: 142px;
  }

  .hp-discovery .hp-planman {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 10px;
  }

  .hp-discovery .hp-planman__badge {
    width: 40px;
  }

  .hp-discovery .hp-planman__cta {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-sunset-hero .hp-greeting {
    animation: none;
  }
}


/* Immersive visual refinement: scoped, lightweight CSS-only first pass. */
.hp-shell {
  background:
    radial-gradient(ellipse 110% 32rem at 50% 9%, rgba(251, 167, 113, .23), transparent 75%),
    linear-gradient(180deg, #f6c9ac 0%, #f3d2bc 22%, #f7e3d2 57%, #e6c8d7 100%);
  background-attachment: scroll;
}
[data-time-phase="morning"] .hp-shell {
  background: linear-gradient(180deg, #a9d7e5 0%, #f6d8a4 25%, #f5e4ce 67%, #f1d9c8 100%);
}
[data-time-phase="afternoon"] .hp-shell {
  background: linear-gradient(180deg, #9fd9e7 0%, #e7cfa9 28%, #f8e4ce 66%, #ead3c8 100%);
}
[data-time-phase="sunset"] .hp-shell {
  background: linear-gradient(180deg, #dc8eaa 0%, #f3b08d 24%, #f7dac5 60%, #e7c7d9 100%);
}
[data-time-phase="night"] .hp-shell {
  background: linear-gradient(180deg, #231a43 0%, #442956 38%, #302242 100%);
}
.hp-sunset-hero {
  min-height: 250px;
  margin-bottom: 0;
  padding-top: calc(60px + env(safe-area-inset-top));
  padding-bottom: 24px;
  border-radius: 0 0 22px 22px;
}
.hp-sunset-hero__brand { width: min(102px, 29vw); }
.hp-sunset-hero #hp-weather {
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  padding: 4px 6px;
  opacity: .84;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hp-discovery .hp-card,
.hp-discovery .hp-spot { min-width: 0; }
.hp-discovery .hp-card__media img,
.hp-discovery .hp-spot img { object-fit: cover; }
@media (max-width: 359px) {
  .hp-sunset-hero { min-height: 224px; padding-top: calc(56px + env(safe-area-inset-top)); }
  .hp-sunset-hero__brand { width: min(92px, 28vw); }
}


/* Consistent carousel cards without forcing different content types into one height. */
.hp-rail__track { align-items: stretch; }
.hp-rail__track > .hp-card { height: 100%; }
.hp-rail__track .hp-card__body { flex: 1 1 auto; }
.hp-rail__track .hp-card__title {
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hp-rail__track .hp-card__media { aspect-ratio: 16 / 10; }
.hp-rail__track .hp-card__media img { width: 100%; height: 100%; object-fit: cover; }


/* Never re-display the welcome on routine navigation within the same tab. */
html.hp-greeting-seen .hp-sunset-hero .hp-greeting,
html.hp-greeting-seen .hp-discovery .hp-greeting {
  display: none !important;
  animation: none !important;
}


/* Brand is an accent, not the homepage's primary action.
   Keep the original image asset; preserve safe-area room for navigation/weather. */
.hp-discovery .hp-sunset-hero {
  min-height: 212px;
  padding-top: calc(48px + env(safe-area-inset-top));
  padding-bottom: 18px;
  gap: 5px;
}
.hp-discovery .hp-sunset-hero__brand {
  width: min(82px, 24vw);
  flex: 0 0 auto;
}
.hp-discovery .hp-sunset-hero .hp-top__logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.hp-discovery .hp-planman { margin-top: 9px; }
@media (max-width: 359px) {
  .hp-discovery .hp-sunset-hero {
    min-height: 198px;
    padding-top: calc(52px + env(safe-area-inset-top));
  }
  .hp-discovery .hp-sunset-hero__brand { width: min(76px, 23vw); }
}


/* Immersive hero-to-feed transition: no additional downloaded image assets. */
.hp-body {
  background-color: #eacfc5;
}
[data-time-phase="morning"] .hp-body,
[data-time-phase="morning"] .hp-shell:has(#hp-home-hero) {
  background: linear-gradient(180deg, #a8d8e5 0%, #f6d9b5 41rem, #f7e6d5 100%);
}
[data-time-phase="afternoon"] .hp-body,
[data-time-phase="afternoon"] .hp-shell:has(#hp-home-hero),
[data-time-phase="day"] .hp-body,
[data-time-phase="day"] .hp-shell:has(#hp-home-hero) {
  background: linear-gradient(180deg, #93cbd9 0%, #d2d9cf 27rem, #f5d9c8 65rem, #f7e7d7 100%);
}
[data-time-phase="sunset"] .hp-body,
[data-time-phase="sunset"] .hp-shell:has(#hp-home-hero) {
  background: linear-gradient(180deg, #ba7aa8 0%, #e8a69e 30rem, #f5d6bd 68rem, #f4dfe1 100%);
}
[data-time-phase="night"] .hp-body,
[data-time-phase="night"] .hp-shell:has(#hp-home-hero) {
  background: linear-gradient(180deg, #251d43 0%, #422951 30rem, #352849 100%);
}
.hp-discovery .hp-sunset-hero {
  margin-bottom: -8px;
  border-radius: 0 0 16px 16px;
  box-shadow: none;
}
.hp-discovery .hp-sunset-hero::before {
  opacity: .5;
}
.hp-discovery .hp-sunset-hero::after {
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 42%;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(147, 203, 217, .2) 42%, #a8d2d7 100%);
}
[data-time-phase="morning"] .hp-discovery .hp-sunset-hero::after {
  background: linear-gradient(180deg, transparent 0%, rgba(168,216,229,.18) 46%, #b6d9df 100%);
}
[data-time-phase="sunset"] .hp-discovery .hp-sunset-hero::after {
  background: linear-gradient(180deg, transparent 0%, rgba(227,155,166,.2) 44%, #dba3ac 100%);
}
[data-time-phase="night"] .hp-discovery .hp-sunset-hero::after {
  background: linear-gradient(180deg, transparent 0%, rgba(40,27,66,.3) 42%, #302444 100%);
}
/* Hero greeting fades and collapses; session guard in app.js prevents repeat. */
.hp-discovery .hp-sunset-hero .hp-greeting {
  overflow: hidden;
  animation: hp-hero-greeting-out 650ms ease-in 2.45s both;
}
@keyframes hp-hero-greeting-out {
  from { opacity: 1; max-height: 140px; margin-top: 14px; visibility: visible; }
  to { opacity: 0; max-height: 0; margin-top: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-discovery .hp-sunset-hero .hp-greeting {
    animation: hp-hero-greeting-out 1ms steps(1,end) 2.45s both;
  }
}
/* One filter family: active is vivid; inactive retains an intentional tinted surface. */
.hp-discovery .hp-quick__btn {
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(130,65,88,.24);
  background: linear-gradient(135deg, rgba(255,234,222,.87), rgba(252,203,211,.75));
  color: #4d2436;
  box-shadow: 0 5px 12px rgba(73,36,62,.09);
  font-weight: 750;
}
.hp-discovery .hp-quick__btn--on,
.hp-discovery .hp-quick__btn--now.hp-quick__btn--on {
  border-color: transparent;
  background: linear-gradient(115deg, #f46c6a, #ffae58);
  color: #361827;
  box-shadow: 0 6px 16px rgba(160,60,78,.22);
}
.hp-discovery .hp-quick__btn--now:not(.hp-quick__btn--on) {
  background: linear-gradient(135deg, rgba(255,224,206,.9), rgba(249,180,179,.76));
  color: #4d2436;
}
[data-time-phase="night"] .hp-discovery .hp-quick__btn:not(.hp-quick__btn--on) {
  background: linear-gradient(135deg, rgba(87,56,105,.94), rgba(66,43,91,.9));
  border-color: rgba(255,221,242,.23);
  color: #fff3fa;
}
[data-time-phase="night"] .hp-discovery .hp-quick__btn--on {
  background: linear-gradient(115deg, #e56a9b, #ffad73);
  color: #27162e;
}


/* iPhone screenshot repair: enforce visible original logo, preserve real photo,
   and dissolve the dark hero into the page instead of a black hard stop. */
.hp-discovery #hp-home-hero {
  --hero-join: #b5d9dc;
  min-height: 240px;
  padding-top: calc(76px + env(safe-area-inset-top));
  padding-bottom: 30px;
  background-image:
    linear-gradient(180deg, rgba(30,26,53,.12) 0%, rgba(30,26,53,.05) 48%, var(--hero-join) 100%),
    url("/images/phoenix/afternoon.webp");
  background-position: center, center 53%;
  background-size: cover;
  border-radius: 0 0 18px 18px;
}
[data-time-phase="morning"] .hp-discovery #hp-home-hero {
  --hero-join: #b6d9df;
  background-image:
    linear-gradient(180deg, rgba(35,30,52,.12) 0%, rgba(35,30,52,.04) 48%, var(--hero-join) 100%),
    url("/images/phoenix/morning.webp");
}
[data-time-phase="sunset"] .hp-discovery #hp-home-hero {
  --hero-join: #dba3ac;
  background-image:
    linear-gradient(180deg, rgba(35,20,50,.14) 0%, rgba(35,20,50,.04) 48%, var(--hero-join) 100%),
    url("/images/phoenix/sunset.webp");
}
[data-time-phase="night"] .hp-discovery #hp-home-hero {
  --hero-join: #302444;
  background-image:
    linear-gradient(180deg, rgba(20,15,39,.3) 0%, rgba(20,15,39,.16) 48%, var(--hero-join) 100%),
    url("/images/phoenix/night.webp");
}
/* Old jagged black silhouette was creating the hard visual boundary. */
.hp-discovery #hp-home-hero::before { display: none; }
.hp-discovery #hp-home-hero::after {
  height: 22%;
  background: linear-gradient(180deg, transparent, var(--hero-join));
}
.hp-discovery #hp-home-hero .hp-sunset-hero__brand {
  display: block;
  visibility: visible;
  opacity: 1;
  flex: 0 0 auto;
  width: clamp(112px, 32vw, 142px);
  min-height: 84px;
  margin: 0 auto 2px;
  position: relative;
  z-index: 3;
}
.hp-discovery #hp-home-hero .hp-top__logo {
  display: block;
  visibility: visible;
  opacity: 1;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}
.hp-discovery #hp-home-hero .hp-greeting {
  position: relative;
  z-index: 3;
  animation: hp-hero-greeting-out 650ms ease-in 2.45s both;
}
@media (max-width: 359px) {
  .hp-discovery #hp-home-hero {
    min-height: 224px;
    padding-top: calc(70px + env(safe-area-inset-top));
  }
  .hp-discovery #hp-home-hero .hp-sunset-hero__brand { width: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-discovery #hp-home-hero .hp-greeting {
    animation: hp-hero-greeting-out 1ms steps(1,end) 2.45s both;
  }
}

/* Brand placement fix: keep the existing illustrated logo visible in the
   clear sky area, independent of the welcome text's fade/collapse. */
.hp-discovery #hp-home-hero .hp-sunset-hero__brand {
  position: absolute;
  top: calc(82px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: clamp(124px, 34vw, 148px);
  min-height: 92px;
  margin: 0;
  z-index: 5;
  pointer-events: none;
}
.hp-discovery #hp-home-hero .hp-top__logo {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  opacity: 1;
  visibility: visible;
  object-fit: contain;
}
@media (max-width: 359px) {
  .hp-discovery #hp-home-hero .hp-sunset-hero__brand {
    top: calc(78px + env(safe-area-inset-top));
    width: 116px;
  }
}


/* Hero photo polish: keep skyline and mountains clear for longer while
   visually suppressing the unwanted cactus shapes embedded in the lower
   left/right edges of the source artwork. No new image downloads. */
.hp-discovery #hp-home-hero {
  background-image:
    linear-gradient(180deg, rgba(30,26,53,.12) 0%, rgba(30,26,53,.035) 66%, transparent 79%, var(--hero-join) 100%),
    url("/images/phoenix/afternoon.webp");
}
[data-time-phase="morning"] .hp-discovery #hp-home-hero {
  background-image:
    linear-gradient(180deg, rgba(35,30,52,.12) 0%, rgba(35,30,52,.025) 66%, transparent 79%, var(--hero-join) 100%),
    url("/images/phoenix/morning.webp");
}
[data-time-phase="sunset"] .hp-discovery #hp-home-hero {
  background-image:
    linear-gradient(180deg, rgba(35,20,50,.14) 0%, rgba(35,20,50,.03) 66%, transparent 79%, var(--hero-join) 100%),
    url("/images/phoenix/sunset.webp");
}
[data-time-phase="night"] .hp-discovery #hp-home-hero {
  background-image:
    linear-gradient(180deg, rgba(20,15,39,.26) 0%, rgba(20,15,39,.10) 66%, transparent 79%, var(--hero-join) 100%),
    url("/images/phoenix/night.webp");
}
/* Edge-specific masking hides the two source-image cactus poles without
   washing out the middle of the Phoenix skyline. */
.hp-discovery #hp-home-hero::after {
  inset: auto 0 0;
  height: 38%;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--hero-join) 0%, transparent 17%),
    linear-gradient(270deg, var(--hero-join) 0%, transparent 17%),
    linear-gradient(0deg, var(--hero-join) 0%, transparent 47%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 44%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 44%, transparent 100%);
}