/* JT Sites: Harajuku at 2am, lit with the JT logo's colours. */

:root {
  color-scheme: dark;

  /* Logo colours */
  --yellow: #fdee17;
  --pink: #f9c9dd;
  --teal: #45a8c1;
  --ink: #231f20;

  /* Night */
  --night: #0d0a1f;
  --text: #f3eeff;
  --muted: #aaa0cb;
  --bld-top: #2c2355;
  --bld-left: #201a47;
  --bld-right: #161136;

  /* Neon tubes: pastel core, bright halo */
  --pink-core: #ffd9ea;
  --pink-halo: #ff4fa3;
  --teal-core: #d4f8ff;
  --teal-halo: #22d8ff;
  --yellow-core: #fffbd2;
  --yellow-halo: #ffe414;

  --gutter: clamp(16px, 4vw, 40px);
  --max: 1180px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.55;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Anything marked hidden stays hidden, even if it has its own display style */
[hidden] {
  display: none !important;
}

h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
}

/* Heading font: Bungee shop-sign lettering for the big headings and the JT Sites
   name. Smaller headings (h3) use the body font, Nunito, so longer titles are easy
   to read. To make every heading Bungee instead (option J), add "h3," to this selector. */
h1,
h2,
.brand {
  font-family: "Bungee", "Nunito", sans-serif;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0;
}

h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  line-height: 1.05;
}

p {
  margin: 0;
  max-width: 60ch;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 20;
  padding: 0.6em 1em;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
}

.skip:focus {
  top: 12px;
}

/* Neon text */

.glow-pink {
  color: var(--pink-core);
  text-shadow: 0 0 1px #fff, 0 0 6px var(--pink-halo), 0 0 18px var(--pink-halo), 0 0 42px var(--pink-halo);
}

.glow-teal {
  color: var(--teal-core);
  text-shadow: 0 0 1px #fff, 0 0 6px var(--teal-halo), 0 0 18px var(--teal-halo), 0 0 42px var(--teal-halo);
}

.glow-yellow {
  color: var(--yellow-core);
  text-shadow: 0 0 1px #fff, 0 0 6px var(--yellow-halo), 0 0 18px var(--yellow-halo), 0 0 42px var(--yellow-halo);
}

@keyframes flicker-on {
  0% { opacity: 0; }
  6% { opacity: 0.9; }
  9% { opacity: 0.1; }
  14% { opacity: 1; }
  17% { opacity: 0.25; }
  26% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes buzz {
  0%, 90%, 100% { opacity: 1; }
  91% { opacity: 0.35; }
  93% { opacity: 1; }
  95% { opacity: 0.55; }
  96% { opacity: 1; }
}

/* Header */

.n-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
}

.n-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.35rem;
  text-decoration: none;
}

.brand img {
  width: 38px;
}

.nav {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  display: block;
  padding: 0.35em 0.75em;
  border: 2px solid transparent;
  border-radius: 999px;
  font-weight: 650;
  text-decoration: none;
}

.nav a:hover {
  border-color: rgba(212, 248, 255, 0.5);
}

/* The current page glows: Home pink, About yellow, Contact blue */
.nav a[aria-current="page"] {
  color: var(--pink-core);
  border-color: var(--pink-core);
  box-shadow: 0 0 10px var(--pink-halo), inset 0 0 8px rgba(255, 79, 163, 0.5);
  text-shadow: 0 0 8px var(--pink-halo);
}

.nav a.nav-about[aria-current="page"] {
  color: var(--yellow-core);
  border-color: var(--yellow-core);
  box-shadow: 0 0 10px var(--yellow-halo), inset 0 0 8px rgba(255, 228, 20, 0.45);
  text-shadow: 0 0 8px var(--yellow-halo);
}

.nav a.nav-contact[aria-current="page"] {
  color: var(--teal-core);
  border-color: var(--teal-core);
  box-shadow: 0 0 10px var(--teal-halo), inset 0 0 8px rgba(34, 216, 255, 0.45);
  text-shadow: 0 0 8px var(--teal-halo);
}

/* Buttons */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
}

.btn {
  display: inline-block;
  padding: 0.85em 1.3em;
  border: 2px solid;
  font: inherit;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.btn-sun {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
  box-shadow: 0 0 18px rgba(255, 228, 20, 0.45);
}

.btn-sun:hover {
  box-shadow: 0 0 32px rgba(255, 228, 20, 0.85);
}

.btn-tube {
  background: transparent;
  color: var(--teal-core);
  border-color: var(--teal-core);
  box-shadow: 0 0 10px var(--teal-halo), inset 0 0 10px rgba(34, 216, 255, 0.35);
  text-shadow: 0 0 8px var(--teal-halo);
}

.btn-tube:hover {
  background: var(--teal);
  color: var(--ink);
  text-shadow: none;
}

/* Hero */

.n-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(110px, 13vw, 150px) 0 clamp(48px, 7vw, 88px);
  background:
    radial-gradient(60% 55% at 72% 92%, rgba(255, 79, 163, 0.22), transparent 70%),
    radial-gradient(45% 50% at 92% 35%, rgba(34, 216, 255, 0.12), transparent 70%),
    linear-gradient(180deg, #0a0819 0%, #140d30 60%, #1d1140 100%);
}

/* Pages without the ticker: fade the hero's glow into the page instead of ending on a line */
.n-hero.fade-out {
  background:
    linear-gradient(180deg, transparent 60%, var(--night) 100%),
    radial-gradient(60% 55% at 72% 92%, rgba(255, 79, 163, 0.22), transparent 70%),
    radial-gradient(45% 50% at 92% 35%, rgba(34, 216, 255, 0.12), transparent 70%),
    linear-gradient(180deg, #0a0819 0%, #140d30 60%, #1d1140 100%);
}

.n-hero .wrap {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}

.n-hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.4rem);
  line-height: 1.05;
}

.lede {
  margin-top: 24px;
  font-size: 1.25rem;
  color: var(--muted);
  max-width: 40ch;
}

.city {
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
  overflow: visible;
  will-change: transform;
}

/* Block scenes (city and "How it works") */

.f-top { fill: var(--bld-top); }
.f-left { fill: var(--bld-left); }
.f-right { fill: var(--bld-right); }

.glow polygon,
.core polygon {
  fill: none;
  stroke-linejoin: miter;
}

.glow polygon { stroke-width: 4; }
.core polygon { stroke-width: 1.6; }

.box.pink .glow polygon { stroke: var(--pink-halo); }
.box.pink .core polygon { stroke: var(--pink-core); }
.box.teal .glow polygon { stroke: var(--teal-halo); }
.box.teal .core polygon { stroke: var(--teal-core); }
.box.yellow .glow polygon { stroke: var(--yellow-halo); }
.box.yellow .core polygon { stroke: var(--yellow-core); }

.box .glow {
  opacity: 0;
}

.box.lit .glow {
  animation: flicker-on 0.9s both;
}

.win {
  opacity: 0;
}

.win.warm { fill: #ffe7a3; }
.win.pink { fill: var(--pink); }
.win.teal { fill: #bdf2ff; }

.box.lit .win {
  animation: flicker-on 0.7s var(--d, 0s) both;
}

.box.lit .win.off {
  animation: none;
  opacity: 0.08;
}

.grid line {
  stroke: var(--teal-halo);
  stroke-width: 1;
  opacity: 0.22;
}

.grid .edge {
  fill: rgba(34, 216, 255, 0.04);
  stroke: var(--teal-halo);
  stroke-width: 2;
  opacity: 0.6;
}

.box.still .glow,
.box.still .win {
  animation: none;
  opacity: 1;
}

/* Ticker */

.ticker {
  overflow: hidden;
  padding-block: 14px;
  border-block: 2px solid rgba(34, 216, 255, 0.55);
  background: #0b0820;
  box-shadow: 0 0 18px rgba(34, 216, 255, 0.25), inset 0 0 18px rgba(34, 216, 255, 0.15);
}

/* The text is written out twice, so sliding it left by half loops seamlessly. */
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 30s linear infinite;
}

@keyframes ticker {
  to { transform: translateX(-50%); }
}

/* Each item and its star share a colour: pink, yellow, blue (the menu's order) */
.ticker-copy {
  display: flex;
  font-family: "Tilt Neon", sans-serif;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  white-space: nowrap;
}

.ticker-copy > span {
  padding-right: 1.4em;
}

.ticker-track i {
  font-style: normal;
  margin-right: 0.6em;
}

/* How it works: a screen-high section that plays through its steps on its own */

.how-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  min-height: 100vh;
  min-height: 100svh;
  padding-block: clamp(64px, 8vw, 96px);
}

.how-steps {
  display: grid;
  gap: 22px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.how-steps li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 0 16px;
  opacity: 0.32;
  transition: opacity 0.35s;
}

.how-steps li:hover {
  opacity: 0.65;
}

.how-steps li.is-active {
  opacity: 1;
}

/* Each step's heading is a button: click it to watch that step again */
.how-steps h3 {
  grid-column: 1 / -1;
}

.step-btn {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 0 16px;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Step numbers: 1 pink, 2 yellow, 3 blue. The current step's number glows. */
.how-steps li:nth-child(1) { --num: var(--pink-core); --num-halo: var(--pink-halo); }
.how-steps li:nth-child(2) { --num: var(--yellow-core); --num-halo: var(--yellow-halo); }
.how-steps li:nth-child(3) { --num: var(--teal-core); --num-halo: var(--teal-halo); }

.step-num {
  font-family: "Tilt Neon", sans-serif;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--num, var(--muted));
}

.how-steps li.is-active .step-num {
  text-shadow: 0 0 1px #fff, 0 0 6px var(--num-halo), 0 0 18px var(--num-halo);
}

.how-steps h3 {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
}

.how-steps p {
  grid-column: 2;
  margin-top: 6px;
  color: var(--muted);
}

.how-art {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  overflow: visible;
}

/* Step 3 timing (keep both in ms). Each block takes --light-duration to fill with
   colour, and the next block starts --light-stagger after the one before.
   The OPEN sign works out its own delay from these, so it always comes on last. */
.how-art {
  --light-duration: 500ms;
  --light-stagger: 200ms;
}

/* Leaving step 3: colours drain away quickly, all together */
.scene .box .f-top,
.scene .box .f-left,
.scene .box .f-right {
  transition: fill 0.3s ease;
}

/* Entering step 3: blocks light up one after another */
.scene.live .box .f-top,
.scene.live .box .f-left,
.scene.live .box .f-right {
  transition: fill var(--light-duration) ease calc(var(--i, 0) * var(--light-stagger));
}

/* Each block lights up in a different colour from its outline:
   yellow outline → blue, pink outline → yellow, blue outline → pink.
   Top face lighter, right face darker, so the blocks still look 3D. */
.scene.live .box.yellow:not(.slab) .f-top { fill: #8fd0e0; }
.scene.live .box.yellow:not(.slab) .f-left { fill: var(--teal); }
.scene.live .box.yellow:not(.slab) .f-right { fill: #2f8aa3; }

.scene.live .box.pink:not(.slab) .f-top { fill: #fff588; }
.scene.live .box.pink:not(.slab) .f-left { fill: var(--yellow); }
.scene.live .box.pink:not(.slab) .f-right { fill: #d9c900; }

.scene.live .box.teal:not(.slab) .f-top { fill: #fde6f0; }
.scene.live .box.teal:not(.slab) .f-left { fill: var(--pink); }
.scene.live .box.teal:not(.slab) .f-right { fill: #eaa6c3; }

/* Step 1: blocks wait above the site until the script drops them in.
   With reduced motion they're simply shown in place. */
.scene .drop {
  opacity: 0;
  transform: translateY(-170px);
}

.scene.static .drop {
  opacity: 1;
  transform: none;
}

/* Step 2: neon cursor, click ripples and a heart */
.cursor {
  opacity: 0;
}

.cursor-shape {
  fill: var(--night);
  stroke: var(--teal-core);
  stroke-width: 2;
  stroke-linejoin: round;
}

.ripple {
  fill: none;
  stroke: var(--teal-halo);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: ripple 0.7s ease-out forwards;
}

/* The ripple takes the colour of the block being clicked */
.ripple.pink { stroke: var(--pink-halo); }
.ripple.yellow { stroke: var(--yellow-halo); }

@keyframes ripple {
  from { transform: scale(0.3); opacity: 1; }
  to { transform: scale(2.6); opacity: 0; }
}

.heart path {
  fill: var(--pink-core);
  stroke: var(--pink-halo);
  stroke-width: 1.5;
}

.scene-sign {
  opacity: 0;
}

.scene-sign.on {
  animation: flicker-on 1s both, buzz 6s 2s infinite;
}

.scene-sign text {
  font-family: "Tilt Neon", sans-serif;
}

.sign-box {
  fill: rgba(13, 10, 31, 0.75);
  stroke-width: 2.5;
}

.sign-open .sign-box { stroke: var(--pink-halo); }
.sign-open text { fill: var(--pink-core); }

/* LOADING (step 1) and PREVIEW (step 2): steady, no flicker, and they change colour.
   PREVIEW matches the block being clicked; LOADING goes pink, yellow, blue each loop. */
.sign-loading.on,
.sign-preview.on {
  animation: none;
  opacity: 1;
}

.sign-loading .sign-box,
.sign-loading text,
.sign-preview .sign-box,
.sign-preview text {
  transition: stroke 0.25s ease, fill 0.25s ease;
}

.scene-sign[data-tone="white"] .sign-box { stroke: #c9b8ff; }
.scene-sign[data-tone="white"] text { fill: #f6f2ff; }
.scene-sign[data-tone="teal"] .sign-box { stroke: var(--teal-halo); }
.scene-sign[data-tone="teal"] text { fill: var(--teal-core); }
.scene-sign[data-tone="pink"] .sign-box { stroke: var(--pink-halo); }
.scene-sign[data-tone="pink"] text { fill: var(--pink-core); }
.scene-sign[data-tone="yellow"] .sign-box { stroke: var(--yellow-halo); }
.scene-sign[data-tone="yellow"] text { fill: var(--yellow-core); }

/* Letters of Loading... that haven't appeared yet keep their place, invisibly */
.sign-loading tspan.off {
  fill-opacity: 0;
}

/* Pricing signs */

.n-pricing {
  padding-block: clamp(80px, 10vw, 128px);
}

.section-sub {
  margin-top: 16px;
  color: var(--muted);
}

.signs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 44px;
}

.sign {
  padding: clamp(24px, 4vw, 40px);
  border: 2px solid var(--tube);
  border-radius: 18px;
  background: #110c29;
  box-shadow: 0 0 14px var(--halo), inset 0 0 14px var(--halo-soft);
}

/* Each sign's tube colour: the bright line, its glow, and the softer inner glow */
.sign-pink {
  --tube: var(--pink-core);
  --halo: var(--pink-halo);
  --halo-soft: rgba(255, 79, 163, 0.35);
}

.sign-teal {
  --tube: var(--teal-core);
  --halo: var(--teal-halo);
  --halo-soft: rgba(34, 216, 255, 0.35);
}

.sign-yellow {
  --tube: var(--yellow-core);
  --halo: var(--yellow-halo);
  --halo-soft: rgba(255, 228, 20, 0.3);
}

/* A quick stutter in the tube (outline and glow only, so the writing stays readable) */
@keyframes tube-buzz {
  0%, 86%, 100% {
    border-color: var(--tube);
    box-shadow: 0 0 14px var(--halo), inset 0 0 14px var(--halo-soft);
  }
  88%, 93% {
    border-color: rgba(243, 238, 255, 0.18);
    box-shadow: none;
  }
  90%, 96% {
    border-color: var(--tube);
    box-shadow: 0 0 14px var(--halo), inset 0 0 14px var(--halo-soft);
  }
}

.js .sign {
  opacity: 0;
}

.js .sign.on {
  animation: flicker-on 1.1s both;
}

/* The second price sign flickers on just after the first */
.n-pricing .sign:nth-child(2).on {
  animation-delay: 0.25s;
}

.amount {
  font-family: "Tilt Neon", sans-serif;
  font-size: clamp(3.2rem, 8vw, 5.5rem);
  line-height: 1;
}

.term {
  margin-top: 10px;
  font-weight: 700;
  font-size: 1.2rem;
}

/* Paragraphs in the price and About signs (not the contact form's sign) */
.signs .sign p {
  margin-top: 14px;
  color: var(--muted);
}

.price-note {
  margin-top: 28px;
  font-weight: 600;
}

/* Closing call to action */

.n-end {
  padding-block: clamp(72px, 9vw, 112px);
  text-align: center;
  background: radial-gradient(60% 80% at 50% 100%, rgba(255, 79, 163, 0.18), transparent 70%);
}

.n-end p {
  margin: 14px auto 0;
  color: var(--muted);
}

.n-end .actions {
  justify-content: center;
}

/* Footer */

.n-footer {
  padding-block: 28px;
  border-top: 1px solid rgba(212, 248, 255, 0.18);
  font-size: 1rem;
}

.n-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}

.n-footer .brand {
  font-size: 1.1rem;
}

.n-footer .brand img {
  width: 30px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* About and Contact pages */

.n-section {
  padding-block: clamp(72px, 9vw, 112px);
}

.prose {
  margin-top: 24px;
}

.prose p + p {
  margin-top: 1.1em;
}

/* The logo as a lit sign: a blurred copy behind it glows in the logo's own colours */
.logo-sign {
  position: relative;
  width: min(100%, 300px);
  margin-inline: auto;
}

.logo-glow {
  position: absolute;
  inset: 0;
  filter: blur(24px) saturate(1.8) brightness(1.2);
  opacity: 0.9;
}

.logo-main {
  position: relative;
}

.js .logo-sign {
  animation: flicker-on 1.2s 0.3s both, float 6s 1.6s ease-in-out infinite;
}

.js .logo-glow {
  animation: buzz 7s 3s infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.signs-3 {
  grid-template-columns: repeat(3, 1fr);
  padding: 0;
  list-style: none;
}

.signs-3 h3 {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
}

/* The script switches these on one after another. Once lit, each tube buzzes
   every few seconds, on its own rhythm so they don't flicker in unison. */
.signs-3 .sign.on {
  animation: flicker-on 1.1s both, tube-buzz 2.8s 1.4s infinite;
}

.signs-3 .sign:nth-child(2).on {
  animation-duration: 1.1s, 3.4s;
}

.signs-3 .sign:nth-child(3).on {
  animation-duration: 1.1s, 3.1s;
}


/* Contact */

/* Contact layout: intro and next steps on the left, form on the right.
   On phones it stacks intro, form, then next steps, so the form comes first. */
.contact-hero .wrap {
  grid-template-areas:
    "intro form"
    "next form";
  grid-template-rows: auto 1fr; /* keep the steps snug under the intro, however tall the form is */
  align-items: start;
}

.contact-intro { grid-area: intro; }
.contact-next { grid-area: next; }
.form-sign { grid-area: form; }

/* The form sits in a pink neon sign that flickers on when the page opens */
.js .form-sign {
  animation: flicker-on 1.1s 0.3s both;
}

.form-sign h2 {
  font-size: 1.5rem;
}

.contact-form {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}

.field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 650;
  font-size: 1rem;
}

.optional {
  color: var(--muted);
  font-weight: 400;
}

.hint {
  margin: -2px 0 8px;
  font-size: 0.9rem;
  color: var(--muted);
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.7em 0.85em;
  border: 2px solid rgba(212, 248, 255, 0.25);
  border-radius: 10px;
  background: rgba(13, 10, 31, 0.85);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

/* The box you're typing in glows blue */
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--teal-core);
  box-shadow: 0 0 0 1px var(--teal-core), 0 0 14px var(--teal-halo);
}

/* An email that isn't complete gets a pink outline and a note underneath */
.field input[aria-invalid="true"] {
  border-color: var(--pink-halo);
}

.field-error {
  margin-top: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffb3cf;
}

/* Hidden spam trap: off screen, so people never see it */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  margin-top: 4px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.form-status {
  min-height: 1.55em;
  font-weight: 600;
}

.form-status.error {
  color: #ffb3cf;
}

.form-thanks {
  margin-top: 20px;
}

.form-thanks:focus {
  outline: none;
}

/* Styled like the form's "Get your free preview" heading it replaces:
   pink neon Bungee (the colour comes from .glow-pink) */
.thanks-title {
  font-family: "Bungee", sans-serif;
  font-size: 1.5rem;
  line-height: 1.05;
  margin-bottom: 12px;
}

.email-alt {
  margin-top: 18px;
  font-size: 0.95rem;
  color: var(--muted);
}

.next-title {
  margin-top: 40px;
  font-size: 1.5rem;
}

.next-steps {
  display: grid;
  gap: 14px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
}

.next-steps li {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: baseline;
}

.next-num {
  font-family: "Tilt Neon", sans-serif;
  font-size: 2rem;
  line-height: 1;
}

/* Smaller screens */

@media (max-width: 860px) {
  .n-hero .wrap {
    grid-template-columns: 1fr;
  }

  .city {
    max-width: 460px;
  }

  /* Phones: heading, then the picture, then all three steps */
  .how-inner {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 18px;
  }

  .how-text {
    display: contents;
  }

  .how-text h2 { order: 1; }
  .how-art { order: 2; }
  .how-steps { order: 3; }

  .how-art {
    max-width: 420px;
    max-height: 42svh;
  }

  .how-steps {
    gap: 16px;
    margin: 0;
  }

  .signs,
  .signs-3 {
    grid-template-columns: 1fr;
  }

  .contact-hero .wrap {
    grid-template-areas:
      "intro"
      "form"
      "next";
    grid-template-rows: none;
  }

  .next-title {
    margin-top: 8px;
  }

  .logo-sign {
    width: 200px;
  }
}

/* The menu wraps onto a second line here, so leave room for it. */
@media (max-width: 560px) {
  .n-hero {
    padding-top: 150px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .how-steps li {
    opacity: 1;
  }

  .ticker-track,
  .js .logo-sign,
  .js .logo-glow {
    animation: none;
  }

  .js .form-sign,
  .js .sign,
  .js .sign.on,
  .scene-sign.on,
  .box.lit .glow,
  .box.lit .win {
    animation: none;
    opacity: 1;
  }
}