/* Reset (matches the Tailwind preflight the original shipped with) */
*,:after,:before {
  box-sizing:border-box;
  border:0 solid;
  margin:0;
  padding:0;
}
html {
  -webkit-text-size-adjust:100%;
  tab-size:4;
  line-height:1.5;
}
h1,h2,h3,h4,h5,h6 {
  font-size:inherit;
  font-weight:inherit;
}
a {
  color:inherit;
  text-decoration:inherit;
}
img,svg {
  vertical-align:middle;
  display:block;
}
img {
  max-width:100%;
  height:auto;
}
button,input {
  font:inherit;
  font-feature-settings:inherit;
  font-variation-settings:inherit;
  letter-spacing:inherit;
  color:inherit;
  opacity:1;
  background-color:#0000;
  border-radius:0;
}
::placeholder {
  opacity:1;
}
button,input:where([type=submit]) {
  -webkit-appearance:button;
  appearance:button;
}

/* Page styles */
@font-face {
  font-family:Geist;
  src:url(/fonts/geist.woff2)format("woff2");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}
@font-face {
  font-family:Caveat;
  src:url(/fonts/caveat.woff2)format("woff2");
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
}
@font-face {
  font-family:Pixelify;
  src:url(/fonts/pixelify.ttf)format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:Silkscreen;
  src:url(/fonts/silkscreen.woff2)format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
:root {
  --background:#243c59;
  --foreground:#f8faff;
  --primary:#254df2;
  --primary-foreground:#fff;
  --border:#ffffff40;
  --radius:12px;
  --font-sans:Geist,Arial,sans-serif;
}
* {
  box-sizing:border-box;
}
html,body {
  background:var(--background);
  min-height:100%;
  color:var(--foreground);
  margin:0;
}
body,button,input {
  font-family:Geist,Arial,sans-serif;
}
button,a,input {
  -webkit-tap-highlight-color:transparent;
}
button {
  cursor:pointer;
}
button:disabled {
  cursor:wait;
  opacity:.65;
}
:is(button:focus-visible,a:focus-visible) {
  outline-offset:5px;
  outline:2px solid #fff;
}
.sr-only {
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  position:absolute;
  overflow:hidden;
}
.landing {
  isolation:isolate;
  height:100svh;
  min-height:600px;
  position:relative;
  overflow:hidden;
}
.world, .water {
  object-fit:cover;
  /* Anchor to the bottom so wide screens crop sky, never the waterfront promenade. */
  object-position:center bottom;
  z-index:-3;
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
}
/* The ripple canvas matches the art's size and is fitted exactly like .world, so it
   lines up pixel for pixel; it draws only the water and stays transparent elsewhere. */
.water {
  pointer-events:none;
}
.reading-light {
  z-index:-2;
  background:linear-gradient(90deg,#11294380,#142f4f38 40%,#0000 68%),linear-gradient(#0000 72%,#0b1d3230);
  position:absolute;
  inset:0;
}
.navigation {
  z-index:4;
  justify-content:space-between;
  align-items:center;
  height:124px;
  margin:0 clamp(24px,4vw,72px);
  display:flex;
  position:relative;
}
.wordmark {
  color:#f4f6fa;
  letter-spacing:2px;
  box-shadow:none;
  background:0 0;
  border:0;
  gap:13px;
  padding:0;
  font-family:Silkscreen,monospace;
  font-size:26px;
  text-decoration:none;
  display:flex;
}
.wordmark span:last-child {
  color:#accbff;
}
.region-card {
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  color:#f2f6ff;
  background:linear-gradient(140deg,#edf6ff30,#c5d6ef0f);
  border:1px solid #fff5;
  border-radius:12px;
  width:278px;
  padding:12px 15px 6px;
  box-shadow:inset 0 1px #fff6,inset 0 -1px #ffffff18,0 6px 20px #0c213625;
}
.region-name {
  letter-spacing:-.02em;
  white-space:nowrap;
  flex:1;
  font-size:16px;
  font-weight:500;
  line-height:1.4;
  animation:.3s ease-out appear;
}
.hero-copy {
  width:min(670px,51vw);
  position:absolute;
  top:clamp(137px,19vh,220px);
  left:clamp(24px,6.2vw,112px);
}
.eyebrow {
  color:#d3e3ff;
  margin:0 0 23px;
  font-family:Pixelify,monospace;
  font-size:21px;
  line-height:1.2;
}
h1 {
  letter-spacing:-.061em;
  color:#fcfcff;
  margin:0;
  font-size:clamp(44px,4.6vw,72px);
  font-weight:440;
  line-height:1.04;
}
h1 span {
  color:#c8dcff;
}
.description {
  letter-spacing:-.015em;
  color:#e0eaff;
  max-width:465px;
  margin:26px 0 31px;
  font-size:18px;
  line-height:1.6;
}
.signup {
  width:min(490px,100%);
}
.email-row {
  -webkit-backdrop-filter:blur(22px);
  backdrop-filter:blur(22px);
  background:linear-gradient(120deg,#ffffff24,#c6dcff10);
  border:1px solid #ffffff64;
  border-radius:13px;
  padding:6px;
  transition:box-shadow .2s;
  display:flex;
  box-shadow:inset 0 1px #ffffff58,inset 0 -1px #03197c2b,0 7px 24px #022b9425;
}
.email-row:focus-within {
  box-shadow:0 0 0 3px #ffffff35,inset 0 1px #ffffff80;
}
.email-row input {
  color:#fff;
  background:0 0;
  border:0;
  outline:0;
  width:100%;
  min-width:0;
  padding:12px;
  font-size:15px;
}
.email-row input::placeholder {
  color:#e2eaff;
}
.email-row button {
  color:#183ca0;
  white-space:nowrap;
  background:linear-gradient(170deg,#fff,#e1eaff);
  border:1px solid #fff;
  border-radius:8px;
  justify-content:center;
  align-items:center;
  gap:16px;
  min-height:47px;
  padding:0 17px;
  font-size:14px;
  font-weight:550;
  transition:background .2s,box-shadow .2s;
  display:flex;
  box-shadow:inset 0 2px 1px #fff,inset 0 -2px 1px #9fb8ea85,0 3px 6px #072d8754;
}
.email-row button:hover {
  background:#fff;
  box-shadow:inset 0 -2px 1px #9fb8ea85,0 4px 15px #00187050;
}
.signup-note {
  color:#c6d9ff;
  margin:13px 0 0;
  font-size:12px;
}
.signup-note.error {
  color:#ffe1bb;
}
.success {
  color:#174781;
  background:#eff7ffe8;
  border:1px solid #fff;
  border-radius:12px;
  align-items:center;
  gap:11px;
  padding:19px 18px;
  font-size:15px;
  display:flex;
}
.success svg {
  color:#217553;
}
@keyframes appear {
  0% {
    opacity:.5;
  }
  to {
    opacity:1;
  }
}
@media (min-width:1800px) {
  .hero-copy {
    top:22vh;
    left:8vw;
    width:760px;
  }
}
@media (max-width:1100px) {
  .hero-copy {
    width:58vw;
    left:4vw;
  }
  h1 {
    font-size:52px;
  }
  .description {
    max-width:425px;
  }
}
@media (max-width:760px) {
  .landing {
    min-height:600px;
  }
  .world, .water {
    object-position:72% bottom;
  }
  .reading-light {
    background:linear-gradient(#20395020,#233c61d9 33%,#233c61b0 57%,#182d3d1a 78%);
  }
  .navigation {
    gap:16px;
    height:106px;
    margin:0 22px;
  }
  .wordmark {
    letter-spacing:1px;
    gap:8px;
    font-size:18px;
  }
  .region-card {
    flex-shrink:0;
    width:186px;
    padding:9px 10px 3px;
  }
  .region-name {
    font-size:13px;
  }
  .hero-copy {
    width:auto;
    max-width:530px;
    top:135px;
    left:24px;
    right:24px;
  }
  .eyebrow {
    margin-bottom:18px;
    font-size:18px;
  }
  h1 {
    font-size:clamp(36px,6.8vw,52px);
    line-height:1.06;
  }
  .description {
    max-width:390px;
    margin:20px 0 23px;
    font-size:16px;
    line-height:1.55;
  }
  .signup {
    max-width:440px;
  }
  .email-row input {
    padding:9px;
    font-size:16px;
  }
  .email-row button {
    gap:8px;
    padding:0 12px;
    font-size:13px;
  }
  .signup-note {
    font-size:11px;
  }
}
@media (max-height:760px) and (min-width:761px) {
  .navigation {
    height:106px;
  }
  .hero-copy {
    top:127px;
  }
  .eyebrow {
    margin-bottom:15px;
    font-size:19px;
  }
  h1 {
    font-size:50px;
  }
  .description {
    margin:19px 0 20px;
    font-size:17px;
  }
}
@media (max-height:750px) and (max-width:760px) {
  .hero-copy {
    top:119px;
  }
  .eyebrow {
    margin-bottom:13px;
  }
  h1 {
    font-size:36px;
  }
  .description {
    margin:14px 0 18px;
    font-size:15px;
  }
}
@media (max-height:650px) and (max-width:760px) {
  .landing {
    min-height:560px;
  }
  .hero-copy {
    top:108px;
  }
  h1 {
    font-size:33px;
  }
  .description {
    font-size:15px;
  }
}
@media (prefers-reduced-motion:reduce) {
  *,:before,:after {
    transition:none!important;
    animation:none!important;
  }
}
@media (max-width:380px) {
  .navigation {
    gap:9px;
    margin:0 18px;
  }
  .wordmark {
    gap:6px;
    font-size:16px;
  }
  .region-card {
    width:177px;
  }
  .hero-copy {
    left:20px;
    right:20px;
  }
  .region-name {
    font-size:12px;
  }
}
:root {
  --content-left:clamp(24px,6.2vw,112px);
}
.navigation {
  margin-left:var(--content-left);
}
.hero-copy {
  left:var(--content-left);
}
.region-card {
  width:254px;
  padding:14px 17px;
}
.region-name {
  font-size:18px;
  display:block;
}
@media (min-width:1800px) {
  :root {
    --content-left:8vw;
  }
}
@media (max-width:1100px) {
  :root {
    --content-left:4vw;
  }
}
@media (max-width:760px) {
  :root {
    --content-left:24px;
  }
  .navigation {
    margin-left:var(--content-left);
  }
  .region-card {
    width:180px;
    padding:11px 12px;
  }
  .region-name {
    font-size:14px;
  }
}
@media (max-width:380px) {
  :root {
    --content-left:20px;
  }
  .navigation {
    margin-left:var(--content-left);
  }
  .region-card {
    width:173px;
  }
}
/* The pin and name slide in together each time the neighborhood changes. */
.region-slide {
  animation:.45s ease-out both rotate-in;
}
@keyframes rotate-in {
  0% {
    opacity:.2;
    transform:translateY(6px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}
@media (prefers-reduced-motion:reduce) {
  .region-slide {
    animation:none;
  }
}


h1 {
  text-wrap: balance;
}
.description {
  text-wrap: pretty;
}

/* Card placement: top center on wide screens, rising into place from the city
   below on load. Narrower screens would collide with the wordmark, so there it
   sits in the bottom-right corner and rises the same way. */
.region-card {
  position:absolute;
  z-index:4;
  top:62px; /* vertical center of the 124px nav bar */
  left:50%;
  transform:translate(-50%,-50%);
  animation:card-rise .9s cubic-bezier(.2,.8,.2,1) .25s both;
}
@keyframes card-rise {
  from {
    opacity:0;
    transform:translate(-50%,calc(-50% + 48px));
  }
  to {
    opacity:1;
    transform:translate(-50%,-50%);
  }
}
@media (max-height:760px) and (min-width:761px) {
  .region-card {
    top:53px; /* nav bar is 106px here */
  }
}
@media (max-width:900px) {
  .region-card {
    top:auto;
    left:auto;
    right:clamp(22px,4vw,72px);
    bottom:24px;
    transform:none;
    animation-name:card-rise-corner;
  }
  @keyframes card-rise-corner {
    from {
      opacity:0;
      transform:translateY(40px);
    }
    to {
      opacity:1;
      transform:none;
    }
  }
}
@media (max-width:760px) {
  .region-card {
    right:22px;
    bottom:16px;
  }
}
/* Neighborhood card: a quieter "First stop: NYC" with a pulsing "live" dot on the
   left, a divider, then the rotating neighborhood (bright, with the pin), centered
   in a slot app.js sizes to the longest name, so the card never changes size. */
.region-card {
  display:flex;
  align-items:center;
  gap:14px;
  width:auto;
  padding:11px 16px;
  border-radius:12px;
}
.region-place {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:var(--region-place-width,0);
  height:24px;
  color:#f5f8ff;
  overflow:hidden;
}
.region-slide {
  display:flex;
  align-items:center;
  gap:8px;
}
.region-slide > svg {
  flex-shrink:0;
  color:#c9dbf2;
}
.region-divider {
  flex-shrink:0;
  width:1px;
  height:18px;
  background:#ffffff38;
}
.region-label {
  display:flex;
  align-items:center;
  gap:7px;
  color:#aebfd9;
  font-size:12px;
  font-weight:500;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.region-name {
  display:block;
  font-size:16px;
  font-weight:500;
  line-height:1;
  text-align:left;
  white-space:nowrap;
}
.live-dot {
  flex-shrink:0;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#9df0a0;
  animation:live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse {
  0% {
    box-shadow:0 0 0 0 #9df0a0b0;
  }
  70% {
    box-shadow:0 0 0 7px #9df0a000;
  }
  100% {
    box-shadow:0 0 0 0 #9df0a000;
  }
}
@media (max-width:760px) {
  .region-card {
    gap:10px;
    padding:9px 12px;
  }
  .region-place {
    height:20px;
  }
  .region-slide {
    gap:6px;
  }
  .region-slide > svg {
    width:13px;
    height:13px;
  }
  .region-divider {
    height:14px;
  }
  .region-label {
    font-size:10px;
    gap:6px;
  }
  .region-name {
    font-size:13px;
  }
}

/* Doti sits inline after "Your city,", sized to the headline so it scales with it,
   paws resting just below the text baseline. */
.doti-inline {
  display:block;
  width:auto;
  height:1.08em;
  filter:drop-shadow(0 .04em .03em #04143e55);
}

/* Meet Doti: hover (or focus / tap) makes Doti hop, and a handwritten sticker
   note pops up introducing who Doti is. */
.doti-wrap {
  position:relative;
  display:inline-block;
}
.doti-btn {
  position:relative;
  display:inline-block;
  margin-left:.3em;
  vertical-align:-.1em;
  padding:0;
  font:inherit;
  line-height:0;
  background:none;
  border:0;
  cursor:pointer;
  border-radius:.12em;
}
.doti-btn:focus-visible {
  outline-offset:.06em;
}
/* Hover swaps in the happy Doti (wagging tail, hearts). Its image is laid out so
   the dog lines up exactly with the resting one: same height, paws and center;
   only the hearts and wag marks reach outside. */
.doti-happy {
  position:absolute;
  left:-.083em;
  bottom:0;
  width:auto;
  max-width:none;
  height:1.139em;
  filter:drop-shadow(0 .04em .03em #04143e55);
  opacity:0;
  transition:opacity .15s ease-out;
}
.doti-btn {
  transform-origin:50% 100%;
  transition:transform .35s cubic-bezier(.34,1.8,.5,1);
}
.doti-wrap:hover .doti-btn,
.doti-btn:focus-visible,
.doti-wrap.open .doti-btn {
  transform:translateY(-.06em);
}
.doti-wrap:hover .doti-happy,
.doti-btn:focus-visible .doti-happy,
.doti-wrap.open .doti-happy {
  opacity:1;
}
.doti-wrap:hover .doti-inline,
.doti-btn:focus-visible .doti-inline,
.doti-wrap.open .doti-inline {
  opacity:0;
}
.doti-note {
  position:absolute;
  z-index:5;
  left:calc(100% + .55em); /* clear of the hearts on the happy Doti */
  bottom:8%;
  width:max-content;
  max-width:210px;
  padding:12px 16px 13px;
  color:#3a2f24;
  background:#fff8e7;
  border-radius:3px 12px 4px 10px;
  box-shadow:0 1px 0 #ffffffa0 inset,0 10px 22px #0a1a3a55,0 2px 4px #0a1a3a33;
  font-family:Caveat,"Bradley Hand","Segoe Print",cursive;
  font-size:21px;
  font-weight:500;
  line-height:1.1;
  letter-spacing:0;
  text-align:left;
  white-space:normal;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px) rotate(-2deg) scale(.7);
  transform-origin:0% 100%;
  transition:opacity .18s ease-out,transform .38s cubic-bezier(.34,1.7,.5,1),visibility 0s linear .38s;
}
.doti-note strong {
  display:block;
  margin-bottom:2px;
  color:#1f3fae;
  font-size:26px;
  font-weight:700;
}
/* a strip of tape holding the note on */
.doti-note::before {
  content:"";
  position:absolute;
  top:-9px;
  left:50%;
  width:54px;
  height:18px;
  background:#e8eefc9a;
  box-shadow:0 1px 2px #0000001f;
  transform:translateX(-50%) rotate(-5deg);
}
.doti-wrap:hover .doti-note,
.doti-btn:focus-visible + .doti-note,
.doti-wrap.open .doti-note {
  opacity:1;
  visibility:visible;
  transform:translateY(0) rotate(-4deg) scale(1);
  transition:opacity .18s ease-out,transform .38s cubic-bezier(.34,1.7,.5,1),visibility 0s;
}
@media (max-width:760px) {
  /* Doti sits mid-screen on phones, so the note opens above it instead. */
  .doti-note {
    left:50%;
    bottom:calc(100% + 10px);
    max-width:180px;
    font-size:19px;
    transform:translate(-50%,8px) rotate(-2deg) scale(.7);
    transform-origin:50% 100%;
  }
  .doti-note strong {
    font-size:23px;
  }
  .doti-wrap:hover .doti-note,
  .doti-btn:focus-visible + .doti-note,
  .doti-wrap.open .doti-note {
    transform:translate(-50%,0) rotate(-3deg) scale(1);
  }
}