/* All front-page styles.
   Used by the front page (/), frontend/about.html; loaded in the order the page lists it. */

/* Text can be selected and copied everywhere. */
a[href],
a[href] *,
input:not([type]),
input:is([type="text"], [type="search"], [type="email"], [type="url"], [type="tel"], [type="password"], [type="number"]),
textarea,
[contenteditable="true"],
[contenteditable="true"] *,
[contenteditable=""],
[contenteditable=""] *,
[contenteditable="plaintext-only"],
[contenteditable="plaintext-only"] * {
  -webkit-user-select: text;
  user-select: text;
}

/* Same palette as the tools page in light mode. */
:root {
  --bg: #eef3fc;
  --ink: #14203f;
  --muted: #4b5a7a;
  --line: #d2dcf0;
  --card: #fff;
  --soft: #e7eefc;
  --blue: #23408f;
  --blue-2: #2f55b5;
  --navy: #0d1738;
  --green: #254f40;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-head: var(--font-body);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.7 var(--font-body);
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3,
.brand,
.button,
.eyebrow {
  font-family: var(--font-head);
}
a {
  color: inherit;
}
:focus-visible {
  outline: 3px solid #e0a100;
  outline-offset: 4px;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  padding: 10px 16px;
  background: var(--blue);
  color: #fff;
  z-index: 10;
}
.skip-link:focus {
  top: 12px;
}
.container {
  width: min(1120px, calc(100% - 64px));
  margin-inline: auto;
}

.site-header {
  background: var(--navy);
  color: #eef3ff;
}
.header-inner {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 750;
  font-size: 24px;
  letter-spacing: -1px;
}
.brand-mark {
  width: 39px;
  height: 41px;
  display: grid;
  place-items: center;
  background: var(--green);
  border-radius: 12px;
  color: #fff;
}
.brand-dot {
  color: #8d99ad;
  margin-left: -9px;
}
.header-links {
  display: flex;
  gap: 24px;
  align-items: center;
  font-size: 14px;
}
.header-links a {
  text-decoration: none;
  color: #eef3ff;
}
.header-links a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.header-links .emergency-link {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fbf5ec;
  border: 1px solid #eadfce;
  border-radius: 7px;
  padding: 8px 12px;
  color: #765539;
}

.hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 64px 0 56px;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--blue-2);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6f8fd6;
}
h1 {
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.08;
  letter-spacing: -2px;
  font-weight: 800;
  margin-bottom: 20px;
}
h1 span {
  color: var(--blue-2);
}
.hero p {
  font-size: 18px;
  color: var(--muted);
  max-width: 520px;
}
.hero-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 28px;
}
.button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  font-weight: 650;
  font-size: 15px;
  padding: 13px 20px;
  border-radius: 8px;
  box-shadow: 0 6px 18px #23408f2e;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.button:hover {
  background: #1a3170;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px #23408f38;
}
.link {
  font-weight: 600;
  font-size: 15px;
  color: var(--blue);
  text-underline-offset: 4px;
}

.hero-art {
  background: #dfe8fa;
  border: 1px solid #cddaf3;
  border-radius: 18px;
  height: 300px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px #23408f14;
}
.hero-art>svg {
  width: 100%;
  height: 100%;
  filter: hue-rotate(105deg) saturate(.9);
}
.art-note {
  position: absolute;
  bottom: 20px;
  left: 22px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 12px;
  color: var(--muted);
  box-shadow: 0 4px 15px #14203f12;
}
:is(.hero-art, .cl-hero-art) .bird {
  animation: bird-fly 5s linear infinite backwards
}
:is(.hero-art, .cl-hero-art) .b2 {
  animation-duration: 5.6s;
  animation-delay: .35s
}
:is(.hero-art, .cl-hero-art) .b3 {
  animation-duration: 6.2s;
  animation-delay: .7s
}
:is(.hero-art, .cl-hero-art) .bob {
  animation: bird-bob .7s ease-in-out infinite alternate
}
:is(.hero-art, .cl-hero-art) .b2 .bob {
  animation-duration: .85s;
  animation-delay: -.3s
}
:is(.hero-art, .cl-hero-art) .b3 .bob {
  animation-duration: .6s;
  animation-delay: -.5s
}
/* Each wing pivots where it meets the body: a few flaps, then a short glide. */
:is(.hero-art, .cl-hero-art) :is(.wl, .wr) {
  transform-box: fill-box;
  animation: wing-l 1.1s ease-in-out infinite
}
:is(.hero-art, .cl-hero-art) .wl {
  transform-origin: right bottom
}
:is(.hero-art, .cl-hero-art) .wr {
  transform-origin: left bottom;
  animation-name: wing-r
}
:is(.hero-art, .cl-hero-art) .b2 :is(.wl, .wr) {
  animation-duration: 1.3s;
  animation-delay: -.4s
}
:is(.hero-art, .cl-hero-art) .b3 :is(.wl, .wr) {
  animation-duration: .95s;
  animation-delay: -.7s
}
:is(.hero-art, .cl-hero-art) .tree {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: tree-sway 5s ease-in-out infinite alternate
}
:is(.hero-art, .cl-hero-art) .bush {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: bush-sway 3.2s ease-in-out infinite alternate
}
:is(.hero-art, .cl-hero-art) .k2 {
  animation-duration: 3.8s;
  animation-delay: -1.4s
}
:is(.hero-art, .cl-hero-art) .blades {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: grass-sway 1.8s ease-in-out infinite alternate
}
:is(.hero-art, .cl-hero-art) .grass:nth-of-type(even) .blades {
  animation-duration: 2.3s;
  animation-delay: -.9s
}
:is(.hero-art, .cl-hero-art) .t2 {
  animation-duration: 6.5s;
  animation-delay: -2s
}
@keyframes bird-fly {
  0% {
    transform: translate(0, 0);
    opacity: 0
  }
  6% {
    opacity: 1
  }
  25% {
    transform: translate(135px, -18px)
  }
  50% {
    transform: translate(265px, 10px)
  }
  64% {
    opacity: 1
  }
  70%,
  100% {
    transform: translate(530px, -6px);
    opacity: 0
  }
}
@keyframes wing-l {
  0%,
  60%,
  100% {
    transform: rotate(0)
  }
  15%,
  45% {
    transform: rotate(-55deg)
  }
  30% {
    transform: rotate(5deg)
  }
  75%,
  90% {
    transform: rotate(-18deg)
  }
}
@keyframes wing-r {
  0%,
  60%,
  100% {
    transform: rotate(0)
  }
  15%,
  45% {
    transform: rotate(55deg)
  }
  30% {
    transform: rotate(-5deg)
  }
  75%,
  90% {
    transform: rotate(18deg)
  }
}
@keyframes bird-bob {
  from {
    transform: translateY(-6px)
  }
  to {
    transform: translateY(6px)
  }
}
@keyframes bush-sway {
  from {
    transform: skewX(-5deg)
  }
  to {
    transform: skewX(5deg)
  }
}
@keyframes grass-sway {
  from {
    transform: skewX(-14deg)
  }
  to {
    transform: skewX(14deg)
  }
}
@keyframes tree-sway {
  from {
    transform: rotate(-3deg)
  }
  to {
    transform: rotate(3deg)
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

section {
  padding: 56px 0;
}
.section-heading {
  max-width: 680px;
  margin-bottom: 28px;
}
h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  letter-spacing: -1px;
  font-weight: 800;
  margin-bottom: 12px;
}
.lead {
  font-size: 17px;
  color: var(--muted);
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px;
  box-shadow: 0 2px 8px #14203f08;
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px #14203f12;
}
.card h3 {
  font-size: 18px;
  margin: 14px 0 6px;
}
.card p {
  color: var(--muted);
  font-size: 15px;
}
.icon-badge {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #d5e1f8;
  color: var(--blue);
}

.features {
  display: grid;
  gap: 16px;
}
.feature {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 20px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
}
.feature .icon-badge {
  width: 56px;
  height: 56px;
  border-radius: 14px;
}
/* The tool list uses a more formal typeface than the rest of the page. */
.features :is(h3, p) {
  font-family: "IBM Plex Sans", var(--font-body);
}
.feature h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}
.feature p {
  color: var(--muted);
  font-size: 15px;
}
.feature .link {
  white-space: nowrap;
}

.promise {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 36px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
}
.promises {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 12px;
}
.promises li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--ink);
}
.promises li svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--blue-2);
}

.cta {
  background: var(--navy);
  color: #eef3ff;
  border-radius: 20px;
  padding: 52px 40px;
  text-align: center;
  margin: 24px 0 56px;
}
.cta h2 {
  color: #fff;
}
.cta p {
  color: #b7c3e6;
  max-width: 560px;
  margin: 0 auto 26px;
}
.cta .button {
  background: #fff;
  color: var(--navy);
  box-shadow: none;
}
.cta .button:hover {
  background: #e7eefc;
}
/* Emergency note inside the dark call-to-action band. */
.cta .emergency {
  max-width: 640px;
  margin: 36px auto 0;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #eef3ff;
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.6;
}
.cta .emergency svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #ffd66b;
}
.cta .emergency strong {
  color: #fff;
}
.cta .emergency a {
  color: #ffd66b;
  font-weight: 700;
  text-underline-offset: 3px;
}

footer {
  border-top: 1px solid var(--line);
  padding: 22px 0 34px;
  color: var(--muted);
  font-size: 13px;
}

/* Scroll animations: sections fade and rise smoothly into place. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}
.reveal.from-left {
  transform: translateX(-32px);
}
.reveal.from-right {
  transform: translateX(32px);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.stagger>.reveal:nth-child(2) {
  transition-delay: .1s;
}
.stagger>.reveal:nth-child(3) {
  transition-delay: .2s;
}
.stagger>.reveal:nth-child(4) {
  transition-delay: .3s;
}

.font-switcher {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 20;
  display: flex;
  gap: 6px;
  align-items: center;
  font: 600 13px/1.4 Inter, system-ui, sans-serif;
}
.font-switcher[hidden] {
  display: none;
}
.font-switcher button {
  font: inherit;
  padding: 9px 12px;
  background: var(--blue);
  color: #fff;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.font-switcher output {
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 40px;
  }
  .cards {
    grid-template-columns: 1fr;
  }
  .promise {
    grid-template-columns: 1fr;
    padding: 26px;
  }
  .header-links>a:not(.emergency-link) {
    display: none;
  }
}
@media (max-width: 560px) {
  .container {
    width: calc(100% - 32px);
  }
  .header-inner {
    height: 70px;
  }
  .brand {
    font-size: 21px;
    gap: 8px;
  }
  .brand-mark {
    width: 33px;
    height: 36px;
    border-radius: 10px;
  }
  .hero-art {
    height: 220px;
  }
  .feature {
    grid-template-columns: 44px 1fr;
    padding: 18px;
    gap: 14px;
  }
  .feature .icon-badge {
    width: 44px;
    height: 44px;
  }
  .feature .link {
    grid-column: 2;
  }
  .cta {
    padding: 38px 22px;
  }
}
:root {
  color-scheme: light;
}


/* Richer scroll animations. Everything uses transform/opacity so it stays smooth; all of it is off with reduced motion. */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 50;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, #2f55b5, #6f8fd6, #ffd66b);
  pointer-events: none
}
.parallax {
  will-change: transform
}
.cl-hero-art.parallax {
  transform-origin: 50% 100%
}
.split .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.55em) rotate(2deg);
  transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i) * 55ms)
}
.split.words-in .word {
  opacity: 1;
  transform: none
}
.cards {
  perspective: 1000px
}
.card.reveal {
  transform: translateY(46px) rotateX(14deg) scale(.94);
  transform-origin: 50% 100%
}
.card.reveal.visible {
  transform: none
}
.card.visible .icon-badge {
  animation: ch-pop .7s .25s both, ch-float 4.5s 1.2s ease-in-out infinite
}
.feature.visible .icon-badge {
  animation: ch-spin-in .8s .15s both
}
.promises li.visible svg {
  animation: ch-pop .55s .1s both
}
.eyebrow.visible::before {
  animation: ch-pulse 2.4s ease-in-out infinite
}
/* Same blue as the Ask Gemma 4 card, with a soft light that sweeps across as you scroll. */
.cta {
  background: radial-gradient(700px circle at calc(var(--sweep, 0) * 100%) 0%, #ffffff24 0%, transparent 60%), linear-gradient(160deg, #0f1a3d, #23408f)
}
/* deep navy to blue */
@keyframes ch-pop {
  0% {
    transform: scale(0) rotate(-20deg);
    opacity: 0
  }
  65% {
    transform: scale(1.18) rotate(4deg);
    opacity: 1
  }
  100% {
    transform: none
  }
}
@keyframes ch-float {
  0%,
  100% {
    transform: translateY(0)
  }
  50% {
    transform: translateY(-5px)
  }
}
@keyframes ch-spin-in {
  from {
    transform: rotate(-120deg) scale(.4);
    opacity: 0
  }
  to {
    transform: none;
    opacity: 1
  }
}
@keyframes ch-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 #6f8fd680
  }
  50% {
    box-shadow: 0 0 0 6px #6f8fd600
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress {
    display: none
  }
  .split .word {
    opacity: 1;
    transform: none
  }
}
/* Nothing on the page can be highlighted (text, icons, images); only form fields can. */
img,
svg {
  -webkit-user-drag: none
}
:is(input, textarea, [contenteditable]) {
  -webkit-user-select: text;
  user-select: text
}
/* Built with Google */
.google-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 28px
}
.google-grid .card h3 {
  margin: 8px 0 6px
}
.google-grid .card p {
  font-size: 14px;
  line-height: 1.6
}
.google-grid code {
  font-size: 12.5px;
  background: #e7edf8;
  padding: 1px 6px;
  border-radius: 6px;
  color: #23408f
}
.g-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: #e7edf8;
  color: #2f55b5
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}
.web-search-btn {
  margin-top: 8px;
  min-height: 38px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px dashed #d9822b;
  background: #fff8ef;
  color: #8a4b0f;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer
}
/* Listings map (shared with the tools page via /listing-map.js) */
.hero-map-wrap {
  min-width: 0
}
.map-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px
}
.map-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--glass-border, #ffffffb3);
  background: var(--glass-bg, #ffffffb8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  transition: background .15s, border-color .15s, color .15s
}
.map-tab:hover {
  border-color: #6f8fd6
}
.map-tab[aria-pressed=true] {
  background: #23408f;
  border-color: #23408f;
  color: #fff
}
.map-tab.near-me {
  margin-left: auto
}
.map-hood {
  min-height: 38px;
  padding: 7px 30px 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--glass-border, #ffffffb3);
  background: var(--glass-bg, #ffffffb8);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  max-width: 180px
}
.map-hood:focus-visible {
  outline: 3px solid #315fbd;
  outline-offset: 2px
}
.map-tab.near-me[aria-busy=true] {
  opacity: .7;
  cursor: wait
}
.hero-map {
  height: 300px;
  border-radius: 18px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--sage)
}
.map-status {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
  min-height: 1.4em
}
.map-status[data-state=loading]::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid var(--line);
  border-top-color: #2f55b5;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: -1px;
  animation: spin .8s linear infinite
}
.web-results {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow: auto
}
.web-results li {
  border: 1px solid var(--line);
  border-left: 4px solid #d9822b;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  background: var(--white)
}
.web-results strong {
  display: block;
  font-size: 14px
}
.web-results a {
  font-weight: 600
}
.leaflet-popup-content {
  margin: 12px 14px
}
.map-popup {
  font: 13px/1.5 Inter, system-ui, sans-serif;
  color: #1d2433
}
.map-popup strong {
  display: block;
  font-size: 14px;
  margin-bottom: 2px
}
.map-popup a {
  font-weight: 600
}
.map-status:not(:empty),
.walk-status:not(:empty) {
  padding: 7px 12px;
  border-radius: 12px;
  width: fit-content;
  max-width: 100%
}
.map-status:empty {
  display: none
}
/* Keep location status compact beneath the map. */
.map-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px
}
.map-meta>.map-status {
  margin: 0
}
.map-meta .map-status {
  flex: 1 1 110px;
  max-width: max-content;
  font-size: 12px;
  line-height: 1.45
}
.house-pin {
  background: none;
  border: 0;
  filter: drop-shadow(0 1px 2px #0006)
}
.house-pin:focus-visible {
  outline: 3px solid #315fbd;
  border-radius: 4px
}
.map-section .hero-map {
  height: 420px
}
.map-section .map-status:not(:empty) {
  background: #ffffffcc;
  border: 1px solid var(--line)
}
@media (min-width: 900px) {
  .hero-art {
    align-self: end;
    margin-top: 72px;
    translate: 40px 28px
  }
}

/* Hero "ping": a perfect circle that glows orange like a notification, sitting just left of the first line. */
@keyframes ch-ping {
  0% {
    box-shadow: 0 0 0 0 #ff8a1fb3
  }
  70% {
    box-shadow: 0 0 0 9px #ff8a1f00
  }
  100% {
    box-shadow: 0 0 0 0 #ff8a1f00
  }
}
.hero .eyebrow {
  gap: 14px;
  margin-left: -22px
}
.hero .eyebrow::before {
  flex: none;
  width: 9px;
  height: 9px;
  aspect-ratio: 1;
  border-radius: 50%;
  align-self: flex-start;
  margin-top: .42em;
  background: #ff8a1f;
  box-shadow: 0 0 6px 1px #ff8a1f99;
  animation: ch-ping 1.8s ease-out infinite
}
.hero .eyebrow.visible::before {
  animation: ch-ping 1.8s ease-out infinite
}
@media (max-width: 900px) {
  .hero .eyebrow {
    margin-left: 0
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow::before {
    animation: none
  }
}

/* A little Google color: each card gets its family's accent stripe and tag. */
.google-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))
}
@media (min-width: 1100px) {
  .google-grid {
    grid-template-columns: repeat(4, 1fr)
  }
}
.google-grid .card {
  position: relative;
  overflow: hidden;
  border-top: 0
}
.google-grid .card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--accent, #4285f4)
}
.g-ai {
  --accent: linear-gradient(90deg, #4285f4, #9b72cb, #d96570)
}
.g-gemini {
  --accent: linear-gradient(90deg, #1c69ff, #9b72cb)
}
.g-maps {
  --accent: linear-gradient(90deg, #34a853 0 25%, #fbbc04 25% 50%, #ea4335 50% 75%, #4285f4 75%)
}
.g-cloud {
  --accent: #4285f4
}
.g-tag.ai {
  background: linear-gradient(90deg, #e8f0fe, #f3e8fd);
  color: #5b3fb5
}
.g-tag.gemini {
  background: #ede7fb;
  color: #5b3fb5
}
.g-tag.maps {
  background: #e6f4ea;
  color: #137333
}
.g-tag.cloud {
  background: #e8f0fe;
  color: #1a56c4
}
/* Pinned scroll scenes (wide screens): the map, How Clear Home Helps and the flip cards each stay on screen while
       scrolling plays them, then the page carries on. Everything moves with the scroll itself, the stage drifts a little,
       and a progress bar fills along the bottom, so the page never looks frozen. The script sets each track's height. */
.pin-track.pinned .pin-stage {
  position: sticky;
  top: 0;
  box-sizing: border-box;
  height: calc(100vh / var(--page-zoom, 1));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}
.pin-track.pinned .pin-fit {
  transform: translateY(calc((.5 - var(--p, 0)) * 28px))
}
.google-track.pinned .google-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}
/* Phones: a pinned scene shows its cards as a sideways deck, one at a time, slid along by the scroll (the script sets
       --deck-x). The stage is the smallest screen height, so the browser's address bar never covers it, and the
       "Keep scrolling" bar sits at the bottom, clear of the header. */
.pin-track.deck .pin-stage {
  height: 100vh;
  height: 100svh
}
#how .how-track.deck .cl-duo,
#google .google-track.deck .google-grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: max-content;
  max-width: none;
  gap: 14px;
  margin-left: 0;
  margin-right: 0;
  transform: translateX(var(--deck-x, 0px));
  will-change: transform
}
#how .how-track.deck .cl-duo {
  align-items: flex-start
}
#how .how-track.deck .cl-card {
  flex: none;
  width: min(84vw, 360px)
}
#google .google-track.deck .card {
  flex: none;
  width: min(74vw, 300px)
}
.pin-track.deck .scene-progress {
  top: auto !important;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px))
}
.pin-track.deck .scene-progress b {
  width: 110px
}
/* Birds crossing each pinned scene in the background (the hero's flock), moved by the same gliding scroll progress
       as the scene: scrolling down sends them across, scrolling up brings them back. Their wings keep flapping. */
.scene-birds {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  overflow: hidden;
  pointer-events: none;
  container-type: size
}
.pin-track.pinned .scene-birds {
  display: block
}
.pin-track.pinned .pin-fit {
  position: relative;
  z-index: 1
}
.scene-birds i {
  position: absolute;
  left: 0;
  top: var(--y);
  width: calc(30px * var(--size));
  aspect-ratio: 20/8.5;
  transform: translateX(calc((var(--p, 0) * var(--s) + var(--o)) * 100cqw));
  transform: translate(calc((var(--p, 0) * var(--s) + var(--o)) * 100cqw), calc(sin(var(--p, 0) * var(--s) * 14rad) * 16px))
}
.scene-birds svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible
}
.scene-birds :is(.wl, .wr) {
  transform-box: fill-box;
  animation: wing-l var(--flap) ease-in-out infinite
}
.scene-birds .wl {
  transform-origin: right bottom
}
.scene-birds .wr {
  transform-origin: left bottom;
  animation-name: wing-r
}
.scene-progress {
  position: absolute;
  left: 50%;
  top: 24px;
  z-index: 51;
  display: none;
  align-items: center;
  gap: 12px;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #5b6b85;
  white-space: nowrap;
  transition: opacity .35s
}
.pin-track.pinned .scene-progress {
  display: flex
}
.scene-progress b {
  position: relative;
  width: 160px;
  height: 4px;
  border-radius: 4px;
  background: #d6e0f3;
  overflow: hidden
}
.scene-progress b::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #6f8fd6, #2f55b5);
  transform-origin: left;
  transform: scaleX(var(--p, 0))
}
.scene-progress i {
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: scene-nudge 1.3s ease-in-out infinite
}
.scene-progress.done {
  opacity: 0
}
@keyframes scene-nudge {
  0%,
  100% {
    translate: 0 -2px
  }
  50% {
    translate: 0 3px
  }
}
/* The sample chat and search in How Clear Home Helps: lines appear as the scene plays, and Gemma's answer is typed
       over its own invisible full text, so nothing around it moves. */
.cl-chat .demo,
.cl-list .demo {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s, transform .3s
}
.cl-chat .demo.on,
.cl-list .demo.on {
  opacity: 1;
  transform: none
}
.cl-chat .ai {
  position: relative
}
.ghost {
  color: transparent
}
.cl-chat .dots {
  position: absolute;
  left: 16px;
  top: 50%;
  display: none;
  gap: 4px;
  transform: translateY(-50%)
}
.cl-chat .typing .dots {
  display: flex
}
.cl-chat .dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6f8fd6;
  animation: demo-dot 1s ease-in-out infinite
}
.cl-chat .dots i:nth-child(2) {
  animation-delay: .15s
}
.cl-chat .dots i:nth-child(3) {
  animation-delay: .3s
}
@keyframes demo-dot {
  0%,
  100% {
    opacity: .35;
    transform: translateY(0)
  }
  50% {
    opacity: 1;
    transform: translateY(-3px)
  }
}
.cl-query {
  align-self: flex-start;
  margin-top: auto;
  padding: 9px 16px;
  border-radius: 999px;
  background: #f1f5fd;
  border: 1px solid #dbe4f6;
  font-size: 14px;
  font-weight: 600;
  color: #14203f
}
.cl-query+.cl-list {
  margin-top: 12px
}
/* Flip cards: they turn over one by one as you scroll through the section; a tap (or the button) flips one by hand. */
.google-grid .card.flip {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
  perspective: 1000px;
  cursor: pointer
}
.google-grid .card.flip::before {
  content: none
}
.flip-in {
  display: grid;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1)
}
.flip.flipped .flip-in {
  transform: rotateY(180deg)
}
.flip .face {
  grid-area: 1/1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px #14203f08;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden
}
.flip .face::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--accent, #4285f4)
}
.flip .back {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, #f6f9ff, #e8effc)
}
.flip .back p {
  color: #14203f
}
.flip-btn {
  margin-top: auto;
  padding: 14px 0 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #2f55b5;
  cursor: pointer
}
.flip-btn:hover {
  text-decoration: underline
}
/* GitHub repository card */
.repo-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  margin-top: 26px;
  padding: 22px;
  border-radius: 22px;
  background: #0d1117;
  color: #e6edf3;
  box-shadow: 0 24px 60px #0d111733;
  position: relative;
  overflow: hidden
}
.repo-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #34a853, #fbbc04, #ea4335, #4285f4)
}
.repo-tree {
  display: grid;
  gap: 2px;
  padding: 14px 16px 16px;
  border-radius: 14px;
  border: 1px solid #30363d;
  background: #161b22;
  color: #c9d1d9;
  text-decoration: none;
  font: 12.5px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace;
  transition: border-color .15s
}
.repo-tree:hover {
  border-color: #58a6ff
}
.repo-tree span {
  display: flex;
  gap: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #8b949e
}
.repo-tree b {
  color: #58a6ff;
  font-weight: 600;
  min-width: 13.5em
}
.repo-tree-head {
  color: #e6edf3 !important;
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid #30363d;
  align-items: center
}
.repo-tree-head i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ea4335;
  display: inline-block
}
.repo-tree-head i:nth-child(2) {
  background: #fbbc04
}
.repo-tree-head i:nth-child(3) {
  background: #34a853
}
/* File names never shrink under their text. When a row has no room, the description moves under the name and wraps. */
.repo-tree span:not(.repo-tree-head) {
  flex-wrap: wrap;
  row-gap: 0;
  white-space: normal
}
.repo-tree b {
  flex: none
}
/* Phones: each file name sits above its note, so the two never overlap. */
@media (max-width: 560px) {
  .repo-tree span:not(.repo-tree-head) {
    display: block;
    white-space: normal;
    line-height: 1.45;
    margin-bottom: 6px
  }
  .repo-tree b {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere
  }
}
.repo-card img.repo-preview {
  width: 100%;
  aspect-ratio: 2/1;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid #30363d;
  background: #161b22
}
.repo-card h3 {
  font-size: 22px;
  margin: 0 0 6px;
  color: #fff
}
.repo-card h3 a {
  color: inherit;
  text-decoration: none
}
.repo-card p {
  color: #9da7b3;
  margin: 0 0 14px
}
.repo-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none
}
.repo-stats li {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  color: #e6edf3
}
.repo-stats b {
  color: #fff
}
.repo-team {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 16px
}
.repo-team a {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
  color: #e6edf3;
  font-size: 13px;
  text-decoration: none
}
.repo-team img {
  width: 24px;
  height: 24px;
  border-radius: 50%
}
.repo-langs {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  margin: 0 0 6px
}
.repo-langs-key {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: #9da7b3;
  margin-bottom: 16px
}
.repo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}
.repo-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none
}
.repo-actions .primary-gh {
  background: #238636;
  color: #fff
}
.repo-actions .ghost-gh {
  border: 1px solid #30363d;
  color: #e6edf3
}
@media (max-width: 820px) {
  .repo-card {
    grid-template-columns: 1fr
  }
}
/* Hero ping sits halfway between the two lines of the label. */
.hero .eyebrow::before {
  align-self: center;
  margin-top: 0;
  translate: -14px 0
}
/* The hero label stays on one line: the text shrinks to fit its column (up to 18px). On narrow phones,
       where that would get too small, it breaks after "for" and keeps "Northern Virginia & Blacksburg" together. */
.hero>div:first-child {
  container-type: inline-size
}
.hero .eyebrow {
  max-width: none;
  white-space: nowrap;
  letter-spacing: .1em;
  font-size: clamp(11px, calc((100cqi - 30px) / 36), 18px)
}
.hero .eyebrow .keep {
  white-space: nowrap
}
@container (max-width:425px) {
  .hero .eyebrow {
    white-space: normal
  }
}

/* Google Sans everywhere (code and the repo file list stay monospace). */
html body,
body :not(code):not(pre):not(kbd):not(.repo-tree):not(.repo-tree *):not(svg):not(svg *) {
  font-family: 'Google Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important
}

/* New logo (drawn by backend/make_logo.py): the image carries its own rounded square. */
.brand-mark {
  width: 40px !important;
  height: 40px !important;
  background: none !important;
  border-radius: 12px;
  box-shadow: 0 4px 14px #23408f40;
  overflow: visible
}
.brand-mark img {
  width: 100%;
  height: 100%;
  display: block
}
@media(max-width:560px) {
  .brand-mark {
    width: 34px !important;
    height: 34px !important
  }
}

/* Default size: the site reads best a bit larger, like 125% browser zoom, on desktop screens. Smaller
       laptops get a gentler step and phones/tablets stay at 100% so layouts never get cramped. */
@media (min-width: 1100px) {
  html {
    zoom: 1.1;
    --page-zoom: 1.1
  }
  #listing-map,
  #walk-map {
    zoom: calc(1/1.1);
    width: auto
  }
  #listing-map {
    height: 462px
  }
}
@media (min-width: 1400px) {
  html {
    zoom: 1.25;
    --page-zoom: 1.25
  }
  #listing-map,
  #walk-map {
    zoom: .8;
    width: auto
  }
  #listing-map {
    height: 525px
  }
}
/* Cards that slide in from the side start just past the edge; clip that so the page never swipes sideways. */
html,
body {
  overflow-x: clip
}
/* Google Maps can't draw inside a zoomed page, so the map boxes undo the zoom. width:auto keeps them exactly as wide as their column
       (a percentage width doesn't shrink with zoom in current Chrome, so 110%/125% hung off the right edge and the page swiped sideways). */

/* ===== Clean redesign: big centered type, lots of space, few words ===== */
.cl-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  padding: 72px 20px 0;
  overflow: hidden;
  background: linear-gradient(180deg, #2a4ea9 0%, #3d64c4 50%, #dbe8fc 80%, var(--bg) 100%)
}
/* deep enough at the top for white text to pass contrast */
.cl-hero-text {
  position: relative;
  z-index: 2;
  max-width: 900px
}
/* The hero plays its entrance once on load and then stays put (no scroll fade). */
.cl-in {
  animation: cl-in .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both
}
@keyframes cl-in {
  from {
    opacity: 0;
    transform: translateY(18px)
  }
  to {
    opacity: 1;
    transform: none
  }
}
.cl-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #ffffff33;
  border: 1px solid #ffffff66;
  color: #fff;
  font-weight: 500;
  font-size: 15px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin: 0 0 22px
}
.cl-ping {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff8a1f;
  box-shadow: 0 0 0 0 #ff8a1fb3;
  animation: ch-ping 1.8s ease-out infinite
}
.cl-hero h1 {
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: #fff;
  margin: 0;
  font-weight: 800;
  text-shadow: 0 10px 40px #1d3f9a40
}
.cl-hero h1 span {
  color: #fff
}
.cl-sub {
  font-size: clamp(18px, 2vw, 22px);
  color: #f4f7ff;
  margin: 22px auto 34px;
  max-width: 560px
}
.cl-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap
}
.cl-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  background: #14203f;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 10px 30px #14203f33;
  transition: transform .15s, box-shadow .15s
}
.cl-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px #14203f40
}
.cl-btn.ghost {
  background: #ffffffcc;
  color: #14203f;
  box-shadow: none;
  border: 1px solid #ffffff
}
/* Hero liquid glass: the region badge is clear glass, and the two buttons are a dark pane (the main action) and a light
       one, each with a light rim and a soft glare; solid fallbacks where blur isn't supported. */
.cl-chip {
  background: linear-gradient(140deg, #ffffff40 0%, #ffffff17 60%, #ffffff2e 100%);
  border-color: #ffffff6b;
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 1px 0 #ffffff80, inset 0 -1px 0 #ffffff1f, 0 8px 24px #0b14331f
}
.cl-hero .cl-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #ffffff38;
  background: linear-gradient(140deg, #14203fe6 0%, #14203fb8 60%, #1c2d5ad9 100%);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 1px 0 #ffffff40, inset 0 -1px 0 #ffffff12, 0 12px 30px #14203f40
}
.cl-hero .cl-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 80% at 20% 0%, #ffffff2e 0%, #ffffff00 55%)
}
.cl-hero .cl-btn.ghost {
  color: #14203f;
  border-color: #ffffffe6;
  background: linear-gradient(140deg, #ffffffe0 0%, #ffffffa8 60%, #ffffffcc 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #ffffff59, 0 10px 26px #14203f1f
}
.cl-hero .cl-btn.ghost::before {
  background: radial-gradient(120% 80% at 20% 0%, #ffffffb3 0%, #ffffff00 55%)
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .cl-hero .cl-btn {
    background: #14203f
  }
  .cl-hero .cl-btn.ghost {
    background: #fffffff0
  }
  .cl-chip {
    background: #ffffff38
  }
}
/* A supporting illustration, sized below the hero copy and blended into the page. */
.cl-hero-art {
  position: relative;
  flex: none;
  width: min(560px, 84%);
  aspect-ratio: 470/260;
  max-height: 260px;
  margin: 8px auto 20px;
  z-index: 1;
  opacity: .85;
  -webkit-mask-image: linear-gradient(#000 78%, transparent 100%);
  mask-image: linear-gradient(#000 78%, transparent 100%)
}
.cl-hero-art svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: none
}
@media(max-width:560px) {
  .cl-hero-art {
    width: min(340px, 92%);
    margin-top: 0;
    margin-bottom: 12px
  }
}
.cl-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px 24px 0;
  text-align: center
}
.cl-title {
  font-size: clamp(36px, 5vw, 60px);
  letter-spacing: -.03em;
  line-height: 1.08;
  margin: 0;
  font-weight: 700;
  color: #14203f
}
.cl-lead {
  font-size: 19px;
  color: #5b6b85;
  margin: 16px auto 0;
  max-width: 560px
}
.cl-frame {
  margin: 44px auto 0;
  padding: 22px;
  border-radius: 32px;
  background: linear-gradient(180deg, #e6eefc, #f6f9ff);
  box-shadow: 0 30px 80px #23408f1f;
  text-align: left
}
.cl-frame .hero-map {
  height: 340px
}
.cl-numbers {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 36px auto 0;
  max-width: 940px
}
.cl-numbers li {
  background: #fff;
  border: 1px solid #e3e9f6;
  border-radius: 18px;
  padding: 22px;
  text-align: left
}
.cl-numbers strong {
  display: block;
  font-size: 40px;
  line-height: 1;
  color: #14203f;
  letter-spacing: -.02em
}
.cl-numbers span {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: #4b5a7a
}
@media(max-width:820px) {
  .cl-numbers {
    grid-template-columns: 1fr 1fr
  }
}
.cl-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 48px;
  text-align: left
}
.cl-card {
  border-radius: 30px;
  padding: 36px;
  background: #fff;
  border: 1px solid #e3e9f6;
  box-shadow: 0 20px 60px #23408f14;
  min-height: 360px;
  display: flex;
  flex-direction: column
}
.cl-card.blue {
  background: linear-gradient(160deg, #4f7ff0, #2f55b5);
  color: #fff;
  border: 0
}
.cl-card h3 {
  font-size: 30px;
  letter-spacing: -.02em;
  margin: 0 0 10px;
  font-weight: 700
}
.cl-card h3 em {
  font-style: normal;
  padding: 2px 10px;
  border-radius: 10px;
  background: #ffffff2e;
  border: 1px solid #ffffff55
}
.cl-card:not(.blue) h3 em {
  background: #e8f0fe;
  border-color: #c7d7f8;
  color: #1a73e8
}
.cl-card p {
  margin: 0;
  font-size: 17px;
  opacity: .85
}
.cl-chat {
  margin-top: auto;
  padding-top: 20px;
  display: grid;
  gap: 10px;
  font-size: 15px
}
.cl-chat>span {
  padding: 12px 16px;
  border-radius: 16px;
  max-width: 88%
}
.cl-chat .me {
  justify-self: end;
  background: #14203f;
  color: #fff
}
.cl-chat .ai {
  background: #ffffff;
  color: #14203f
}
.cl-list {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
  display: grid;
  gap: 10px
}
.cl-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 16px;
  background: #f3f6fd;
  font-size: 15px
}
.cl-list span {
  color: #5b6b85
}
.cl-tags {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center
}
.cl-tags li {
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e3e9f6;
  font-weight: 600;
  font-size: 15px;
  color: #14203f
}
#google .google-grid {
  margin-top: 44px;
  text-align: left
}
#google .card p {
  font-size: 15px
}
#github .repo-card {
  margin-top: 44px;
  text-align: left
}
/* The closing box keeps the old dark blue, with the light sweep that follows the scroll. */
.cl-section.cl-end {
  width: min(940px, calc(100% - 32px));
  margin: 40px auto 56px;
  padding: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px 24px;
  text-align: left;
  border-radius: 22px;
  box-shadow: 0 12px 32px #14203f1a
}
.cl-end .cl-title {
  color: #fff;
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -.025em
}
.cl-end .cl-title span {
  background: linear-gradient(90deg, #dbe8fc, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}
/* Headings: the word-by-word animation wraps every word in a span, which gave each word its own faded gradient.
       Words now take the heading's solid color; the highlighted phrase is solid blue (light blue on the dark band). */
.cl-title span.word {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: inherit
}
.cl-title>span:not(.word) {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #2f55b5
}
.cl-end .cl-title>span:not(.word) {
  color: #dbe8fc
}
.cl-end .cl-btn {
  margin: 0;
  padding: 11px 18px;
  min-height: 44px;
  font-size: 14px;
  justify-content: center;
  color: #f7faff;
  background: linear-gradient(135deg, #ffffff30, #ffffff14);
  border: 1px solid #ffffff59;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: inset 0 1px 0 #ffffff66, inset 0 -1px 0 #ffffff0d, 0 4px 14px #050d2526;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s
}
.cl-end .cl-btn:hover {
  background: linear-gradient(135deg, #ffffff40, #ffffff20);
  border-color: #ffffff85;
  box-shadow: inset 0 1px 0 #ffffff80, 0 6px 18px #050d2533;
  transform: translateY(-1px)
}
.cl-end .cl-btn:active {
  transform: translateY(0)
}
.cl-end .cl-btn:focus-visible {
  outline: 3px solid #b5d1ff;
  outline-offset: 4px
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .cl-end .cl-btn {
    background: #3a63c9
  }
  .cl-end .cl-btn:hover {
    background: #4570d6
  }
}
@media(prefers-reduced-motion:reduce) {
  .cl-end .cl-btn {
    transition: none
  }
}
.cl-end .cl-urgent {
  grid-column: 1 / -1;
  max-width: none;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid #ffffff40;
  color: #eef3ff;
  font-size: 13px;
  line-height: 1.65
}
@media(max-width:640px) {
  .cl-section.cl-end {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 16px;
    padding: 24px;
    margin-bottom: 36px
  }
  .cl-end .cl-title {
    font-size: 28px
  }
  .cl-end .cl-urgent {
    padding-top: 14px
  }
}
.cl-end .cl-urgent a {
  color: #fff;
  font-weight: 700
}
.cl-urgent {
  margin-top: 26px;
  color: #5b6b85;
  font-size: 16px
}
.cl-urgent a {
  color: #c5221f;
  font-weight: 700
}
.header-links .cl-nav-btn {
  padding: 9px 18px;
  border-radius: 999px;
  background: #fff;
  color: #14203f !important;
  font-weight: 700
}
@media(max-width:820px) {
  .cl-duo {
    grid-template-columns: 1fr
  }
  .cl-section {
    padding-top: 84px
  }
  .cl-frame {
    padding: 12px
  }
  .cl-frame .hero-map {
    height: 280px
  }
}
/* Get started intro: fades in over the page, a slow dark-blue gradient drifts behind one small chat window. */
.cl-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  font-weight: 700;
  color: #2f55b5;
  text-decoration: none
}
.cl-more:hover {
  text-decoration: underline
}
.start {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 16px;
  border: 0;
  color: #eef3ff;
  background: radial-gradient(60% 50% at 20% 25%, #2f55b566, transparent 70%), radial-gradient(50% 45% at 80% 75%, #6f8fd64d, transparent 70%), linear-gradient(135deg, #081029, #0d1738 45%, #16306f);
  background-size: 160% 160%, 160% 160%, 100% 100%;
  animation: start-in .45s ease both, start-drift 18s ease-in-out infinite alternate
}
.start[open] {
  display: grid;
  place-items: center
}
/* Phones: the window follows the part of the screen the keyboard leaves visible (set below), and the card sits near
       the top, so the reply box is never hidden behind the keyboard. */
.start {
  top: var(--start-top, 0px);
  height: var(--start-h, 100%)
}
@media(max-width:600px) {
  .start[open] {
    place-items: start center;
    padding-top: max(28px, env(safe-area-inset-top))
  }
  .start .start-form input {
    font-size: 16px
  }
}
.start::backdrop {
  background: #0b1535
}
/* the same dark blue under the keyboard and Safari's toolbar, never the page */
/* Off to the tools page: only the card blurs away; the dark blue stays until the page changes, so this page never shows. */
.start.leaving .start-card {
  animation: start-card-out .24s ease both
}
@keyframes start-card-out {
  to {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(-6px)
  }
}
@keyframes start-in {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
@keyframes start-drift {
  from {
    background-position: 0% 0%, 100% 100%, 0 0
  }
  to {
    background-position: 100% 60%, 0% 30%, 0 0
  }
}
.start-card {
  width: min(420px, 100%);
  padding: 18px;
  border-radius: 24px;
  background: #ffffff14;
  border: 1px solid #ffffff2e;
  box-shadow: 0 30px 80px #0006;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: start-rise .5s .1s cubic-bezier(.2, .7, .2, 1) both
}
@keyframes start-rise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.98)
  }
  to {
    opacity: 1;
    transform: none
  }
}
.start-head {
  display: flex;
  align-items: center;
  gap: 12px
}
.start-head img {
  border-radius: 11px;
  box-shadow: 0 4px 14px #0005
}
.start-head strong {
  display: block;
  font-size: 16px
}
.start-head span {
  font-size: 13px;
  color: #b7c3e6
}
.start-skip {
  margin-left: auto;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid #ffffff40;
  color: #eef3ff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600
}
.start-skip:hover,
.start-skip:focus-visible {
  background: #ffffff1f
}
.start-skip.start-x {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%
}
/* opened from the tools page */
.start-msgs {
  min-height: 84px;
  margin: 16px 0 14px
}
.start-msgs p {
  margin: 0;
  padding: 12px 15px;
  border-radius: 16px 16px 16px 6px;
  background: #fff;
  color: #14203f;
  font-size: 15px;
  line-height: 1.5;
  max-width: 92%;
  animation: start-rise .35s ease both
}
.start-typing {
  display: inline-flex !important;
  gap: 5px
}
.start-typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8d99ad;
  animation: start-dot 1s ease-in-out infinite
}
.start-typing i:nth-child(2) {
  animation-delay: .15s
}
.start-typing i:nth-child(3) {
  animation-delay: .3s
}
@keyframes start-dot {
  0%,
  100% {
    opacity: .35;
    transform: none
  }
  50% {
    opacity: 1;
    transform: translateY(-3px)
  }
}
.start-form {
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: #fff
}
.start-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  color: #14203f;
  background: none;
  outline: none
}
.start-form button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: #2f55b5;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer
}
.start-form button:hover {
  background: #23408f
}
.start-form:focus-within {
  box-shadow: 0 0 0 3px #8fb0f0
}
.start-note {
  margin: 12px 4px 0;
  font-size: 12px;
  color: #b7c3e6;
  text-align: center
}
/* "Need a place tonight?": the same dark intro as a short guided chat (safe first, then where), ending on the tools
       page's shelters, intake lines and hotels for that area. */
.tonight .start-msgs {
  display: grid;
  gap: 8px;
  max-height: min(46vh, 380px);
  overflow-y: auto;
  align-content: start
}
.start-msgs p.me {
  justify-self: end;
  background: #2f55b5;
  color: #fff;
  border-radius: 16px 16px 6px 16px
}
.start-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px
}
.start-choices:empty,
.start-form[hidden] {
  display: none
}
/* the form's own display rule would otherwise beat [hidden] */
.start-choice {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid #ffffff59;
  background: #ffffff1f;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  animation: start-rise .35s ease both
}
.start-choice:hover,
.start-choice:focus-visible {
  background: #ffffff33;
  border-color: #ffffffa6
}
.start-choice:focus-visible {
  outline: 2px solid #315fbd;
  outline-offset: 2px
}
.start-choice.urgent {
  background: #d93025;
  border-color: #d93025
}
.start-choice.urgent:hover {
  background: #b3261e
}
.start-note a {
  color: #fff;
  font-weight: 700
}
/* The header itself lives in /site-header.css; the hero leaves room for it. */
.cl-hero {
  padding-top: 140px
}
@media (max-width: 860px) {
  .cl-hero {
    padding-top: 110px
  }
}
/* Footer: brand and page links on one row, the team credit underneath. */
.cl-footer {
  border-top: 1px solid var(--line);
  padding: 34px 0 40px;
  margin-top: 24px;
  color: var(--muted)
}
.cl-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap
}
.cl-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.4px
}
.cl-footer-brand img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  box-shadow: 0 3px 10px #23408f33
}
.cl-footer-brand span {
  color: #8d99ad;
  margin-left: -8px
}
.cl-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px
}
.cl-footer-links a {
  padding: 7px 12px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background .15s, color .15s
}
.cl-footer-links a:hover {
  color: var(--blue-2);
  background: #e2eafb
}
.cl-footer-credit {
  margin: 18px auto 0;
  padding-top: 18px;
  border-top: 1px solid #d2dcf099;
  font-size: 13.5px;
  line-height: 1.6
}
.cl-footer-credit b {
  color: var(--ink);
  font-weight: 600
}
@media (max-width: 640px) {
  .cl-footer-top {
    flex-direction: column;
    align-items: center;
    text-align: center
  }
  .cl-footer-links {
    justify-content: center
  }
  .cl-footer-credit {
    text-align: center
  }
}
/* Map controls on the front page: one consistent set. Active region is the page's navy pill; the rest are white pills with the site border. */
.cl-frame .map-tabs {
  gap: 8px;
  margin-bottom: 14px;
  align-items: center
}
.cl-frame :is(.map-tab, .map-hood) {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 2px 8px #23408f0f;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background .15s, border-color .15s, color .15s
}
.cl-frame :is(.map-tab, .map-hood):hover {
  border-color: #9db2e3;
  background: #f6f9ff
}
.cl-frame .map-tab[aria-pressed=true] {
  background: #14203f;
  border-color: #14203f;
  color: #fff;
  box-shadow: 0 6px 16px #14203f2e
}
.cl-frame .map-hood {
  height: 40px;
  max-width: 200px;
  padding-right: 38px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2314203f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center
}
.cl-frame .map-tab.near-me svg {
  color: var(--blue-2)
}
/* Keep the home map at the same scale as neighboring content cards. */
#map {
  max-width: 1040px;
  padding-top: 48px
}
#map .pin-fit {
  width: 100%;
  min-width: 0
}
#map .cl-lead {
  font-size: 16px;
  margin-top: 12px
}
#map .cl-frame {
  max-width: 940px;
  margin: 24px auto 0;
  padding: 16px;
  border-radius: 22px;
  box-shadow: 0 12px 32px #23408f10
}
#map #listing-map {
  height: 320px;
  border-radius: 14px
}
/* The map on the front page is a recording of someone using the live one (the real map is on the tools page). */
.map-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border-radius: 14px;
  background: #e6eefc;
  object-fit: cover
}
.map-video-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 4px 0;
  font-size: 14px;
  font-weight: 650;
  color: #2f55b5;
  text-decoration: none
}
.map-video-cta:hover {
  text-decoration: underline
}
/* Video controls over the recording: a pause button, a progress bar and the time, so it reads as a video, not the live map. */
.map-player {
  position: relative;
  border-radius: 14px;
  overflow: hidden
}
.map-player .map-video {
  border-radius: 0
}
.map-player-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 28px 16px 12px;
  background: linear-gradient(to top, #0b1633cc, #0b163300);
  color: #fff
}
.map-player-bar[hidden] {
  display: none
}
.map-player-bar button {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #ffffff55;
  border-radius: 50%;
  background: #ffffff2b;
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px)
}
.map-player-bar button:hover {
  background: #ffffff45
}
.map-player-bar button:focus-visible {
  outline: 2px solid #315fbd;
  outline-offset: 2px
}
.map-player-track {
  flex: 1;
  display: flex;
  align-items: center;
  height: 18px;
  cursor: pointer
}
.map-player-line {
  flex: 1;
  height: 5px;
  border-radius: 99px;
  background: #ffffff4d;
  overflow: hidden
}
.map-player-fill {
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left
}
.map-player-time {
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px #0008
}
#map .map-tabs {
  margin-bottom: 12px;
  gap: 6px
}
@media(max-width:820px) {
  #map {
    padding-top: 40px
  }
  #map #listing-map {
    height: 280px
  }
}
@media(max-width:560px) {
  #map .cl-frame {
    margin-top: 20px;
    padding: 12px;
    border-radius: 18px
  }
  #map #listing-map {
    height: 240px
  }
  #map .map-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
  #map .map-tabs :is(.map-tab, .map-hood) {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 40px;
    font-size: 12.5px;
    justify-content: center;
    margin: 0
  }
  #map .map-tabs .map-tab {
    padding-inline: 8px
  }
}
/* How Clear Home Helps, scaled down: narrower cards, smaller type, compact chat bubbles and rows. */
.cl-title {
  font-size: clamp(30px, 3.6vw, 44px)
}
/* every front page section heading, not just this one */
#how .cl-duo {
  gap: 16px;
  margin: 28px auto 0;
  max-width: 940px
}
#how .cl-card {
  padding: 24px;
  border-radius: 22px;
  min-height: 0;
  box-shadow: 0 14px 40px #23408f12
}
#how .cl-card h3 {
  font-size: 21px;
  margin-bottom: 6px
}
#how .cl-card h3 em {
  padding: 1px 7px;
  border-radius: 7px
}
#how .cl-card p {
  font-size: 15px
}
#how .cl-chat {
  gap: 8px;
  padding-top: 16px;
  font-size: 13.5px
}
#how .cl-chat>span {
  padding: 9px 13px;
  border-radius: 12px
}
#how .cl-query {
  padding: 7px 13px;
  font-size: 13px
}
#how .cl-query+.cl-list {
  margin-top: 10px
}
#how .cl-list {
  gap: 6px
}
#how .cl-list li {
  padding: 9px 14px;
  border-radius: 12px;
  font-size: 13.5px
}
#how .cl-tags {
  margin-top: 20px;
  gap: 8px
}
#how .cl-tags li {
  padding: 7px 14px;
  font-size: 13.5px
}
/* Built with Google Cloud, scaled down the same way: tighter grid, smaller padding and type on both card faces. */
#google .google-grid {
  gap: 12px;
  margin-top: 28px
}
#google .flip .face {
  padding: 18px;
  border-radius: 14px
}
#google .card h3 {
  font-size: 17px;
  margin: 6px 0 4px
}
#google .card p {
  font-size: 13.5px;
  line-height: 1.5
}
#google .g-tag {
  font-size: 12px;
  padding: 2px 8px
}
#google .flip-btn {
  padding-top: 10px;
  font-size: 12.5px
}
/* Open Source on GitHub, scaled down like the sections above: a narrower card with smaller type and buttons. */
#github .repo-card {
  max-width: 940px;
  margin: 28px auto 0;
  padding: 20px;
  gap: 22px;
  border-radius: 20px
}
#github .repo-tree {
  font-size: 11.5px;
  padding: 12px 14px 14px
}
#github .repo-tree b {
  min-width: 12.5em
}
#github .repo-card h3 {
  font-size: 19px;
  margin-bottom: 4px
}
#github .repo-card p {
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 12px
}
#github .repo-stats {
  gap: 6px;
  margin-bottom: 12px
}
#github .repo-stats li {
  padding: 4px 10px;
  font-size: 12px
}
#github .repo-langs-key {
  font-size: 11.5px;
  margin-bottom: 12px
}
#github .repo-team {
  gap: 6px;
  margin-bottom: 14px
}
#github .repo-team a {
  font-size: 12px;
  padding: 3px 9px 3px 3px
}
#github .repo-team img {
  width: 20px;
  height: 20px
}
#github .repo-actions {
  gap: 8px
}
#github .repo-actions a {
  min-height: 38px;
  padding: 8px 14px;
  font-size: 14px;
  border-radius: 9px
}
/* Closing banner and GitHub card, smaller again: narrower boxes, less padding, smaller type. */
.cl-section.cl-end {
  width: min(640px, calc(100% - 32px));
  margin: 28px auto 40px;
  padding: 18px 20px;
  gap: 12px 16px;
  border-radius: 18px
}
.cl-end .cl-title {
  font-size: clamp(21px, 2vw, 24px)
}
.cl-end .cl-btn {
  padding: 9px 15px;
  min-height: 40px;
  font-size: 13.5px
}
.cl-end .cl-urgent {
  padding-top: 12px;
  font-size: 12.5px
}
#github {
  max-width: 1040px;
  padding-top: 64px
}
#github .cl-title {
  font-size: clamp(28px, 3vw, 36px)
}
#github .repo-card {
  max-width: 720px;
  margin-top: 22px;
  padding: 14px;
  gap: 16px;
  border-radius: 16px
}
#github .repo-tree {
  font-size: 12px;
  padding: 10px 12px 12px;
  gap: 1px
}
#github .repo-tree b {
  min-width: 11.5em
}
#github .repo-card h3 {
  font-size: 17px
}
#github .repo-card p {
  font-size: 13px;
  margin-bottom: 10px
}
#github .repo-stats li {
  padding: 3px 9px;
  font-size: 11.5px
}
#github .repo-langs {
  height: 6px
}
#github .repo-langs-key {
  font-size: 12px;
  margin-bottom: 10px
}
#github .repo-team {
  margin-bottom: 12px
}
#github .repo-team a {
  font-size: 11.5px
}
#github .repo-team img {
  width: 18px;
  height: 18px
}
#github .repo-actions a {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 13px
}
/* The "Northern Virginia & Blacksburg" line on the home hero: clear background with white text, like the header logo. */
/* "Northern Virginia & Blacksburg": white text in a very transparent liquid-glass bubble (a faint frost, a thin bright rim). */
.cl-hero .cl-chip.cl-chip {
  background: linear-gradient(140deg, #ffffff1f, #ffffff08 55%, #ffffff14);
  border: 1px solid #ffffff47;
  box-shadow: inset 0 1px 0 #ffffff4d, inset 0 -1px 0 #ffffff14, 0 8px 24px #0b14331a;
  padding: 9px 22px;
  color: #fff;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  letter-spacing: -.02em;
  text-shadow: 0 1px 10px #0b143333;
  opacity: 1;
  backdrop-filter: blur(8px) saturate(1.4);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  margin: 0 0 22px
}
.cl-hero .cl-chip.cl-in {
  animation: none;
  opacity: 1;
  transform: none
}
/* always visible at full strength, like the logo */
/* The hackathon result under the hero buttons: plain white text after a trophy, a soft shadow keeping it readable where
   the hero fades lighter. */
.cl-hero .cl-award {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 22px auto 0;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-shadow: 0 1px 10px #0b143366, 0 0 2px #0b143340;
  max-width: 100%
}
/* The trophy is a picture (Microsoft's Fluent 3D emoji), so it looks the same on every phone and computer. */
.cl-hero .cl-award-cup {
  flex: none;
  width: 1.35em;
  height: 1.35em;
  filter: drop-shadow(0 1px 3px #0b143340)
}
/* The event, in smaller text under the award line. */
.cl-hero .cl-award-event {
  margin: 4px 0 0;
  color: #fff;
  opacity: .92;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  text-shadow: 0 1px 8px #0b143366, 0 0 2px #0b143340
}
.cl-hero .cl-award-date {
  white-space: nowrap
}
@media (max-width: 560px) {
  .cl-hero .cl-award {
    font-size: 14px
  }
  /* On a phone the date gets its own line instead of breaking in the middle. */
  .cl-hero .cl-award-sep {
    display: none
  }
  .cl-hero .cl-award-date {
    display: block
  }
}