@charset "UTF-8";
:root {
  --paper: #f8f5ed;
  --panel: #fffdf8;
  --ink: #173e30;
  --muted: #57685e;
  --line: #d8ded4;
  --accent: #235940;
  --cream: #fff8e8;
  --orange: #b9572f;
  --header: rgba(248, 245, 237, 0.96);
  --shadow: 0 24px 80px #071b2440;
  color-scheme: light;
}
:root[data-theme="night"] {
  --paper: #101e26;
  --panel: #1a2c34;
  --ink: #f7ebd1;
  --muted: #bdc9c9;
  --line: #38505a;
  --accent: #e7bf79;
  --header: rgba(16, 30, 38, 0.96);
  --shadow: 0 24px 80px #0007;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
button,
input,
select {
  font: inherit;
}
button,
a,
select {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
button:disabled {
  cursor: default;
}
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #c87636;
  outline-offset: 5px;
}
button {
  color: inherit;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}
em {
  font-weight: 400;
}
button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
button[hidden],
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  white-space: nowrap;
}
.skip {
  position: fixed;
  top: -80px;
  left: 20px;
  padding: 16px;
  background: var(--panel);
  z-index: 100;
}
.skip:focus {
  top: 10px;
}
.site-header {
  height: 92px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4.4%;
  background: var(--header);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.brand svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}
.brand > span {
  font-family: Georgia, serif;
  font-size: 27px;
  letter-spacing: -1px;
}
.brand small {
  display: block;
  font:
    8px "Segoe UI",
    sans-serif;
  letter-spacing: 3px;
  margin-top: 5px;
}
.header-links {
  display: flex;
  gap: 32px;
  font-size: 13px;
  font-weight: 600;
}
.header-links a {
  padding: 14px 0;
}
.header-actions {
  display: flex;
  gap: 18px;
  align-items: center;
}
.theme-control {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 12px;
}
.theme-icon {
  font-size: 21px;
}
select {
  background: transparent;
  border: 0;
  color: var(--ink);
  padding: 12px 0;
  max-width: 132px;
  cursor: pointer;
}
select option {
  background: var(--panel);
}
.header-cta {
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  padding: 14px 20px;
  border-radius: 4px;
  font-weight: 600;
}
.header-cta span {
  margin-left: 15px;
}
.walk {
  height: 750svh;
  position: relative;
}
.walk-sticky {
  height: 100svh;
  min-height: 650px;
  position: sticky;
  top: 0;
  overflow: hidden;
  background: #233b2a;
  color: var(--cream);
}
.scene,
.camera,
.scene-image,
.scene-shade,
.scene-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scene {
  overflow: hidden;
}
.camera {
  transform-origin: 50% 52%;
  will-change: transform;
  transition: transform 0.15s linear;
}
.scene-image {
  object-fit: cover;
  object-position: 50% 55%;
  transition: opacity 1.2s ease;
  user-select: none;
}
.scene-night {
  opacity: 0;
}
:root[data-theme="night"] .scene-night {
  opacity: 1;
}
:root[data-theme="night"] .scene-day {
  opacity: 0;
}
.scene-shade {
  background:
    linear-gradient(180deg, #081b2440 0%, #11291d0d 35%, #07170f9c 100%),
    linear-gradient(90deg, #102b206e 0%, #16362224 70%, transparent 100%);
  pointer-events: none;
}
.scene-grain {
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' filter='url(%23n)' opacity='.6' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  pointer-events: none;
}
.scene-topline {
  position: absolute;
  top: 126px;
  left: 4.5%;
  right: 4.5%;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #fff8e8;
  text-shadow: 0 1px 4px #000;
}
.scene-topline > span:first-child {
  display: flex;
  gap: 9px;
  align-items: center;
}
.scene-topline i {
  width: 6px;
  height: 6px;
  background: #f6cc7d;
  border-radius: 50%;
}
.intro {
  position: absolute;
  top: 25%;
  left: 7.1%;
  width: 80%;
  will-change: opacity, transform;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 700;
  line-height: 1.6;
}
.intro .eyebrow {
  text-shadow: 0 1px 8px #0009;
}
.intro h1 {
  font-size: clamp(46px, 5.7vw, 88px);
  line-height: 1.08;
  letter-spacing: -3.5px;
  margin: 20px 0 24px;
  text-shadow: 0 3px 30px #10211790;
}
.intro h1 em {
  color: #ffe0a6;
}
.intro-description {
  font-size: 16px;
  line-height: 1.8;
  color: #fffbef;
  text-shadow: 0 2px 9px #102117;
}
.primary {
  background: var(--ink);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 17px 22px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 4px;
  min-height: 48px;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px #0002;
}
.primary.light {
  background: #fff7e6;
  color: #1b402e;
}
.intro .primary {
  margin-top: 26px;
}
.intro-skip {
  font-size: 12px;
  padding: 14px;
  margin-left: 10px;
  border-bottom: 1px solid #f6ead350;
}
.entrance-sign {
  position: absolute;
  right: 7%;
  bottom: 30%;
  display: flex;
  align-items: center;
  gap: 15px;
  text-align: left;
  background: #faf4e9ed;
  color: #244832;
  padding: 18px 20px;
  border: 1px solid #ffffff55;
  border-radius: 5px;
  box-shadow: 0 10px 40px #10211740;
  transform: rotate(-3deg);
  transition: transform 0.3s;
}
.entrance-sign:hover {
  transform: rotate(0) translateY(-4px);
}
.sign-icon {
  font: italic 26px Georgia;
  opacity: 0.7;
}
.entrance-sign small {
  font-size: 8px;
  letter-spacing: 1.2px;
  display: block;
  margin-bottom: 6px;
}
.entrance-sign strong {
  font: 22px Georgia;
}
.sign-arrow {
  margin-left: 20px;
}
.walk-controls {
  position: absolute;
  bottom: 126px;
  left: 4.5%;
  right: 4.5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sound-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sound-controls button {
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: left;
  background: #12271d90;
  border: 1px solid #fff3;
  border-radius: 4px;
  color: #fff5e0;
  padding: 10px 14px;
  min-height: 48px;
  backdrop-filter: blur(10px);
}
.sound-controls button > span {
  font: 16px Georgia;
}
.sound-controls small {
  display: block;
  font:
    7px "Segoe UI",
    sans-serif;
  letter-spacing: 1.4px;
  margin-top: 5px;
}
.volume input {
  width: 80px;
  accent-color: #fff2d0;
}
.walk-hint {
  font-size: 8px;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 15px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.scroll-line {
  height: 33px;
  width: 1px;
  background: #fffbef55;
  position: relative;
  overflow: hidden;
}
.scroll-line:after {
  content: "";
  height: 12px;
  width: 1px;
  background: #fff9e5;
  position: absolute;
  animation: scrollCue 2s infinite;
}
@keyframes scrollCue {
  from {
    transform: translateY(-12px);
  }
  to {
    transform: translateY(36px);
  }
}
.motion-control {
  background: #12271d90;
  color: #fffae9;
  border: 1px solid #ffffff40;
  border-radius: 4px;
  padding: 12px 15px;
  min-height: 44px;
  font-size: 11px;
  backdrop-filter: blur(10px);
}
.motion-control span {
  margin-left: 9px;
  font-weight: 700;
}
.route {
  position: absolute;
  left: 50%;
  bottom: 35px;
  transform: translateX(-50%);
  width: min(610px, 70%);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 7px;
  background: var(--header);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 6px;
  box-shadow: 0 10px 50px #03191040;
  overflow: hidden;
}
.route button {
  position: relative;
  z-index: 1;
  padding: 13px 7px;
  background: transparent;
  border: 0;
  font-size: 12px;
  display: flex;
  justify-content: center;
  gap: 8px;
  align-items: center;
  border-radius: 3px;
}
.route-number {
  font-size: 9px;
  opacity: 0.7;
}
.route button[aria-current="step"] {
  background: var(--ink);
  color: var(--paper);
}
.route button:hover:not([aria-current]) {
  background: var(--line);
}
.route-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--orange);
  width: 0;
}
.preview-badge {
  position: absolute;
  bottom: 18px;
  right: 4.5%;
  font-size: 7px;
  letter-spacing: 1.5px;
  opacity: 0.75;
}
.chapter {
  position: absolute;
  top: 22%;
  left: 7%;
  right: 7%;
  bottom: 26%;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chapter-copy {
  position: relative;
  background: var(--header);
  color: var(--ink);
  width: 420px;
  max-width: 46%;
  padding: 38px;
  border-radius: 5px;
  box-shadow: var(--shadow);
  pointer-events: auto;
  border: 1px solid var(--line);
  animation: chapterIn 0.55s ease both;
}
.chapter-copy h2 {
  font-size: clamp(32px, 3.5vw, 56px);
  letter-spacing: -1.8px;
  line-height: 1.08;
  margin: 17px 0;
}
.chapter-copy > p:not(.eyebrow) {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}
.chapter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 22px 0;
}
.chapter-tags span {
  font-size: 9px;
  border: 1px solid var(--line);
  padding: 6px 8px;
  border-radius: 3px;
}
.chapter-copy .primary {
  width: 100%;
}
.next-link {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  margin-top: 16px;
  font-size: 11px;
  padding: 8px;
}
.chapter-stamp {
  text-align: center;
  align-self: flex-start;
  padding-top: 15px;
  text-shadow: 0 3px 25px #0008;
}
.chapter-stamp > span {
  font: italic 90px Georgia;
  line-height: 1;
}
.chapter-stamp small {
  display: block;
  letter-spacing: 2px;
  font-size: 8px;
  margin-top: 10px;
}
.chapter.right {
  flex-direction: row-reverse;
}
.chapter.right .chapter-copy {
  animation-name: chapterRight;
}
.stall-marker {
  position: absolute;
  left: 66%;
  top: 57%;
  background: #fff8e8ed;
  color: #214530;
  border: 1px solid #fff6;
  border-radius: 4px;
  padding: 10px 16px 10px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 30px #0003;
  transform: translate(-50%, -50%);
  transition:
    top 0.4s,
    left 0.4s;
}
.stall-marker.left {
  left: 30%;
}
.marker-cross {
  display: grid;
  place-items: center;
  font-size: 21px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #245239;
  color: #fff8e8;
}
.stall-marker small {
  font-size: 7px;
  letter-spacing: 1.5px;
  display: block;
  margin-bottom: 5px;
  text-align: left;
}
.stall-marker strong {
  font-family: Georgia;
  font-weight: 400;
  font-size: 18px;
  white-space: nowrap;
}
@keyframes chapterIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes chapterRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.toolkit {
  padding: 100px 6% 70px;
  background: var(--paper);
}
.section-heading {
  text-align: center;
}
.section-heading h2 {
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.07;
  letter-spacing: -2px;
  margin: 18px 0 22px;
}
.section-heading h2 em {
  color: var(--orange);
}
:root[data-theme="night"] .section-heading h2 em {
  color: #e7bf79;
}
.section-heading > p:last-child {
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 54px auto 0;
  max-width: 1400px;
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
}
.feature-tile {
  padding: 28px 24px 0;
  background: var(--panel);
  color: var(--ink);
  border: 0;
  border-right: 1px solid var(--line);
  text-align: left;
  overflow: hidden;
  transition: background 0.2s;
}
.feature-tile:last-child {
  border: 0;
}
.feature-tile:hover {
  background: var(--paper);
}
.tile-top {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.tile-top > span:last-child {
  font-size: 18px;
}
.feature-tile h3 {
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: -1px;
  margin: 28px 0 14px;
}
.feature-tile p {
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
  min-height: 64px;
}
.feature-tile img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  object-position: top left;
  border: 1px solid var(--line);
  border-radius: 5px;
  margin: 20px 0;
  box-shadow: 0 10px 25px #0e261a10;
  transition: transform 0.35s;
}
.feature-tile:hover img {
  transform: translateY(-4px);
}
.tile-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  font-size: 10px;
  padding: 20px 0;
  gap: 8px;
}
.crew-note {
  max-width: 1400px;
  margin: 35px auto 0;
  padding: 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  gap: 20px;
}
.crew-number {
  font-size: 8px;
  letter-spacing: 1px;
  font-weight: 700;
}
.crew-note p {
  font: 24px Georgia;
}
.crew-note button {
  font-size: 11px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 12px 0;
  background: none;
}
.closing {
  background: #163d2f;
  color: #faf4e5;
  text-align: center;
  padding: 90px 20px;
}
.closing h2 {
  font-size: clamp(44px, 5.2vw, 72px);
  line-height: 1.05;
  letter-spacing: -2px;
  margin: 25px 0 35px;
}
.closing h2 em {
  color: #edcf96;
}
.closing > div {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
}
.closing > div > a:last-child {
  font-size: 12px;
  padding: 16px 0;
  border-bottom: 1px solid #fff4;
}
.closing-note {
  font-size: 10px;
  letter-spacing: 1.5px;
  margin-top: 40px;
  color: #d0dbc7;
}
footer {
  padding: 32px 5%;
  display: flex;
  justify-content: space-between;
  gap: 25px;
  align-items: center;
  background: var(--paper);
}
footer > span {
  font: 24px Georgia;
}
footer small {
  font:
    10px "Segoe UI",
    sans-serif;
  margin-left: 8px;
}
footer p,
footer a {
  font-size: 10px;
  color: var(--muted);
}
dialog {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
  width: min(1180px, 91vw);
  max-height: 86svh;
  box-shadow: 0 30px 150px #0008;
  overflow: auto;
}
dialog::backdrop {
  background: #081b2269;
  backdrop-filter: blur(3px);
}
dialog[open] {
  animation: dialogIn 0.45s ease;
}
@keyframes dialogIn {
  from {
    opacity: 0;
    transform: translateY(25px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.dialog-close {
  position: absolute;
  right: 16px;
  top: 16px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  width: 44px;
  height: 44px;
  z-index: 2;
}
.detail-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.3fr;
}
.detail-copy {
  padding: 56px 35px 42px;
}
.detail-copy h2 {
  font-size: 43px;
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin: 22px 0;
}
.detail-copy > p:not(.eyebrow) {
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}
.detail-copy ul {
  padding: 0;
  list-style: none;
  margin: 24px 0 28px;
}
.detail-copy li {
  padding: 10px 0 10px 20px;
  position: relative;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.6;
}
.detail-copy li:before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--accent);
}
.back-to-lane {
  display: block;
  border: 0;
  background: none;
  margin-top: 16px;
  padding: 12px 0;
  font-size: 11px;
}
.detail-demo {
  background: var(--paper);
  padding: 62px 28px 30px;
  border-left: 1px solid var(--line);
  min-width: 0;
}
.screen-label {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font-size: 7px;
  letter-spacing: 1.2px;
  color: var(--muted);
  margin: 7px 0 25px;
}
.screen-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.screen-tabs button {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 11px 14px;
  font-size: 10px;
  min-height: 44px;
}
.screen-tabs button[aria-selected="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
figure {
  margin: 0;
  min-width: 0;
}
figure img {
  display: block;
  width: 100%;
  height: 310px;
  object-fit: contain;
  object-position: top;
  background: #f6f3eb;
  border: 1px solid var(--line);
  border-radius: 4px;
}
figcaption {
  font-size: 12px;
  line-height: 1.6;
  margin-top: 16px;
  color: var(--ink);
}
.capture-note {
  font-size: 9px;
  line-height: 1.7;
  color: var(--muted);
  margin-top: 15px;
}
.noscript {
  position: fixed;
  bottom: 0;
  background: #fff;
  color: #000;
  padding: 16px;
  width: 100%;
  z-index: 30;
}
body.motion-off .camera {
  transition: none !important;
}
body.motion-off .scroll-line:after {
  animation: none;
}
body.motion-off .chapter-copy,
body.motion-off dialog[open] {
  animation: none;
}
body.motion-off .scene-image {
  transition: none;
}
body.motion-off .primary:hover,
body.motion-off .feature-tile:hover img {
  transform: none;
}
@media (min-width: 1700px) {
  .intro {
    top: 27%;
  }
  .intro h1 {
    font-size: 100px;
  }
  .chapter-copy {
    width: 500px;
    padding: 45px;
  }
  .chapter-copy h2 {
    font-size: 64px;
  }
}
@media (max-height: 760px) and (min-width: 761px) {
  .site-header {
    height: 75px;
  }
  .scene-topline {
    top: 101px;
  }
  .intro {
    top: 24%;
  }
  .intro h1 {
    font-size: 60px;
    margin: 15px 0;
  }
  .intro-description {
    font-size: 14px;
  }
  .chapter {
    top: 17%;
    bottom: 24%;
  }
  .chapter-copy {
    padding: 24px;
  }
  .chapter-copy h2 {
    font-size: 41px;
    margin: 12px 0;
  }
  .chapter-tags {
    margin: 14px 0;
  }
  .walk-controls {
    bottom: 109px;
  }
  .route {
    bottom: 24px;
  }
  .intro .primary {
    margin-top: 20px;
  }
}
@media (max-width: 1000px) {
  .header-links {
    gap: 18px;
  }
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .feature-tile:nth-child(2) {
    border-right: 0;
  }
  .feature-tile:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
  .feature-tile img {
    height: 180px;
  }
  .chapter-copy {
    max-width: 54%;
    padding: 27px;
  }
  .entrance-sign {
    right: 5%;
    bottom: 27%;
  }
  .intro h1 {
    font-size: 64px;
  }
  .walk-hint {
    display: none;
  }
  .detail-copy {
    padding: 50px 25px 30px;
  }
  .detail-copy h2 {
    font-size: 36px;
  }
  .detail-demo {
    padding-left: 20px;
    padding-right: 20px;
  }
  .crew-number {
    max-width: 150px;
    line-height: 1.6;
  }
}
@media (max-width: 760px) {
  html {
    scroll-padding-top: 20px;
  }
  .site-header {
    height: 76px;
    padding: 0 5%;
    gap: 10px;
  }
  .brand svg {
    width: 27px;
    height: 27px;
  }
  .brand {
    gap: 7px;
  }
  .brand > span {
    font-size: 21px;
  }
  .brand small {
    font-size: 6px;
    letter-spacing: 2.5px;
  }
  .header-links {
    display: none;
  }
  .header-actions {
    gap: 8px;
  }
  .header-cta {
    font-size: 10px;
    padding: 12px;
  }
  .header-cta span {
    display: none;
  }
  .theme-control {
    font-size: 10px;
    gap: 0;
  }
  .theme-icon {
    display: none;
  }
  .theme-control select {
    max-width: 103px;
  }
  .walk {
    height: 650svh;
  }
  .walk-sticky {
    min-height: 620px;
  }
  .scene-topline {
    top: 98px;
    font-size: 8px;
    left: 6%;
    right: 6%;
    letter-spacing: 1.5px;
  }
  .scene-topline > span:last-child {
    display: none;
  }
  .scene-image {
    object-position: 50% 55%;
  }
  .scene-shade {
    background: linear-gradient(180deg, #102a2869, #12271d18 60%, #081a12af);
  }
  .intro {
    top: 23%;
    left: 7%;
    width: 86%;
  }
  .intro .eyebrow {
    font-size: 8px;
    letter-spacing: 1.7px;
  }
  .intro h1 {
    font-size: clamp(39px, 8.2vw, 60px);
    letter-spacing: -2px;
    margin: 20px 0;
  }
  .intro-description {
    font-size: 12px;
    line-height: 1.8;
  }
  .intro .primary {
    margin-top: 23px;
    gap: 26px;
    padding: 16px 18px;
    font-size: 11px;
  }
  .intro-skip {
    display: block;
    width: max-content;
    font-size: 10px;
    margin: 5px 0 0;
    padding: 12px 0 5px;
  }
  .entrance-sign {
    bottom: 24%;
    right: 7%;
    padding: 12px;
    gap: 9px;
    transform: rotate(-2deg);
  }
  .entrance-sign strong {
    font-size: 16px;
  }
  .entrance-sign small {
    font-size: 6px;
  }
  .sign-icon {
    font-size: 20px;
  }
  .sign-arrow {
    margin-left: 9px;
  }
  .walk-controls {
    left: 5%;
    right: 5%;
    bottom: 98px;
  }
  .sound-controls button {
    padding: 9px 10px;
    gap: 9px;
  }
  .sound-controls button > span {
    font-size: 13px;
  }
  .sound-controls small {
    font-size: 6px;
  }
  .sound-controls button svg {
    width: 18px;
  }
  .volume input {
    width: 45px;
  }
  .sound-controls {
    gap: 7px;
  }
  .motion-control {
    font-size: 10px;
    padding: 10px;
  }
  .route {
    width: 90%;
    bottom: 27px;
    padding: 5px;
  }
  .route button {
    font-size: 10px;
    padding: 12px 4px;
    gap: 6px;
  }
  .route-number {
    font-size: 8px;
  }
  .preview-badge {
    bottom: 10px;
    font-size: 6px;
    right: 5%;
  }
  .chapter,
  .chapter.right {
    top: 23%;
    bottom: auto;
    left: 6%;
    right: 6%;
    display: block;
  }
  .chapter-copy {
    width: 100%;
    max-width: 100%;
    padding: 24px;
    background: var(--header);
  }
  .chapter-copy h2 {
    font-size: 40px;
    letter-spacing: -1.5px;
    margin: 12px 0;
  }
  .chapter-copy > p:not(.eyebrow) {
    font-size: 12px;
  }
  .chapter-tags {
    margin: 15px 0;
    gap: 6px;
  }
  .chapter-tags span {
    font-size: 8px;
  }
  .chapter-copy .primary {
    padding: 14px 16px;
    font-size: 11px;
  }
  .next-link {
    margin-top: 7px;
    padding: 7px;
  }
  .chapter-stamp {
    display: none;
  }
  .stall-marker,
  .stall-marker.left {
    left: auto;
    right: 6%;
    top: 17%;
    transform: none;
    padding: 7px 11px 7px 7px;
    gap: 7px;
  }
  .marker-cross {
    width: 24px;
    height: 24px;
    font-size: 16px;
  }
  .stall-marker strong {
    font-size: 13px;
  }
  .stall-marker small {
    font-size: 6px;
    margin-bottom: 2px;
  }
  .chapter .eyebrow {
    font-size: 8px;
  }
  .toolkit {
    padding: 65px 6% 40px;
  }
  .section-heading .eyebrow {
    font-size: 8px;
    letter-spacing: 1.3px;
  }
  .section-heading h2 {
    font-size: 42px;
    letter-spacing: -1.5px;
  }
  .section-heading > p:last-child {
    font-size: 12px;
  }
  .feature-grid {
    margin-top: 34px;
    grid-template-columns: 1fr;
  }
  .feature-tile {
    border: 0;
    border-bottom: 1px solid var(--line) !important;
    padding: 24px 24px 0;
  }
  .feature-tile h3 {
    font-size: 36px;
    margin-top: 20px;
  }
  .feature-tile h3 br {
    display: none;
  }
  .feature-tile p {
    min-height: 0;
  }
  .feature-tile img {
    height: 180px;
    margin: 20px 0;
  }
  .feature-tile:last-child {
    border-bottom: 0 !important;
  }
  .crew-note {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .crew-number {
    max-width: none;
  }
  .crew-note p {
    font-size: 26px;
  }
  .closing {
    padding: 65px 6%;
  }
  .closing h2 {
    font-size: 47px;
  }
  .closing > div {
    gap: 20px;
  }
  .closing > div > a:last-child {
    font-size: 11px;
  }
  .closing .primary {
    font-size: 11px;
    padding: 16px;
  }
  footer {
    flex-direction: column;
    gap: 14px;
    padding: 30px 6%;
  }
  dialog {
    width: 94vw;
    max-height: 91svh;
  }
  .detail-layout {
    grid-template-columns: 1fr;
  }
  .detail-copy {
    padding: 50px 24px 22px;
  }
  .detail-copy h2 {
    font-size: 37px;
    margin: 15px 0;
  }
  .detail-copy > p:not(.eyebrow) {
    font-size: 13px;
  }
  .detail-copy ul {
    margin: 17px 0;
  }
  .detail-copy li {
    font-size: 12px;
  }
  .detail-demo {
    padding: 23px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .screen-label {
    font-size: 6px;
    letter-spacing: 1px;
  }
  .detail-demo img {
    height: 260px;
  }
  .screen-tabs button {
    font-size: 9px;
    padding: 10px;
  }
  .screen-label {
    margin-top: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .camera,
  .scene-image,
  .primary,
  .feature-tile img {
    transition: none !important;
  }
  .scroll-line:after,
  .chapter-copy,
  dialog[open] {
    animation: none !important;
  }
}
@media (max-width: 760px) and (max-height: 760px) {
  .entrance-sign {
    display: none;
  }
  .intro {
    top: 24%;
  }
  .chapter {
    top: 21%;
  }
  .chapter-copy {
    padding: 20px;
  }
  .chapter-copy h2 {
    font-size: 34px;
  }
  .chapter-copy > p:not(.eyebrow) {
    line-height: 1.6;
  }
  .chapter-tags {
    margin: 12px 0;
  }
  .stall-marker,
  .stall-marker.left {
    top: 14.5%;
  }
}
.site-header {
  position: fixed;
}
.walk-sticky {
  min-height: 0;
}
/* Shared tokens keep the retained pricing, FAQ and signup surfaces in the market theme. */
:root {
  --bg: var(--paper);
  --text: var(--ink);
  --panel-2: #f0eee4;
  --border: var(--line);
  --on-accent: #fff8e8;
  --good: #35734e;
}
:root[data-theme="night"] {
  --panel-2: #152832;
  --on-accent: #102219;
  --good: #a5dab4;
}
.market-walk-page {
  overflow-x: clip;
}
.market-walk-page .mp-skip {
  z-index: 1001;
}
.market-walk-page .rv {
  opacity: 1;
  transform: none;
  /* The legacy reveal observer is not used by the market walk. Clear its
     entire hidden state, including the blur, without waiting for an observer. */
  filter: none;
  transition: none;
}
.market-walk-page footer {
  display: block;
}
.market-walk-page .site-header .mp-hpill {
  padding: 12px 17px;
  color: var(--ink);
  border-color: var(--line);
  font-size: 12px;
  background: transparent;
}
.market-walk-page .site-header .mp-hnav {
  color: var(--ink);
}
.market-walk-page #pricing,
.market-walk-page #faq {
  scroll-margin-top: 95px;
}
.market-walk-page .mp-closer .mp-amb,
.market-walk-page .mp-closer-img {
  display: none;
}
.market-walk-page .mp-closer {
  background: #163d2f;
  color: #fff8e8;
}
.market-walk-page .mp-closer .mp-btn {
  background: #fff7e6;
  color: #1b402e;
}
.market-walk-page .mp-closer .mp-btn-ghost {
  color: #fff7e6;
  border-color: #fff7e680;
}
.market-walk-page .mp-closer input {
  background: var(--panel) !important;
  color: var(--ink) !important;
}
html:not(.walk-ready) .walk {
  height: 100svh;
}
html:not(.walk-ready) .route,
html:not(.walk-ready) .entrance-sign,
html:not(.walk-ready) .walk-controls {
  display: none;
}
.motion-control:disabled {
  opacity: 0.8;
}
@media (max-width: 1000px) {
  .site-header {
    padding-left: 3%;
    padding-right: 3%;
  }
  .header-links {
    gap: 14px;
  }
  .header-actions {
    gap: 9px;
  }
  .toolkit-link {
    display: none;
  }
  .header-links .mp-hpill {
    display: none;
  }
}
@media (max-width: 760px) {
  .header-links {
    display: flex;
    gap: 0;
    font-size: 11px;
  }
  .login-link {
    display: inline;
    padding: 14px 7px;
    font-size: 10px;
  }
  .header-actions .header-cta {
    display: none;
  }
  .site-header {
    gap: 8px;
    padding: 0 5%;
  }
  .site-header .brand {
    margin-right: auto;
  }
  .header-links .mp-navkeep {
    padding: 14px 4px;
  }
  .header-actions {
    margin-left: 6px;
  }
  .route button {
    min-height: 44px;
  }
}
@media (max-width: 360px) {
  .site-header { padding-inline: 4%; }
  .site-header .brand svg { display: none; }
  .site-header .brand > span { font-size: 18px; }
  .site-header .header-actions { margin-left: 0; }
  .site-header .theme-control { font-size: 9px; }
}
@media (max-height: 600px) and (min-width: 761px) {
  .intro {
    top: 25%;
  }
  .intro h1 {
    font-size: 45px;
    margin: 10px 0;
  }
  .intro-description {
    font-size: 12px;
    line-height: 1.6;
  }
  .intro .primary {
    margin-top: 15px;
    padding: 12px 18px;
  }
  .intro .eyebrow {
    font-size: 8px;
  }
  .entrance-sign {
    bottom: 31%;
  }
  .walk-controls {
    bottom: 82px;
  }
  .route {
    bottom: 16px;
  }
  .chapter {
    top: 25%;
    bottom: 26%;
  }
  .chapter-copy {
    padding: 18px;
    width: 430px;
  }
  .chapter-copy h2 {
    font-size: 31px;
    margin: 9px 0;
  }
  .chapter-copy > p:not(.eyebrow) {
    font-size: 12px;
    line-height: 1.5;
  }
  .chapter-tags {
    margin: 10px 0;
  }
  .chapter-copy .primary {
    min-height: 40px;
    padding: 11px 16px;
  }
  .next-link {
    margin-top: 5px;
  }
  .chapter-stamp > span {
    font-size: 65px;
  }
}
/* Tall app captures remain legible and scrollable instead of being shrunk to thumbnails. */
.screen-viewport {
  height: 310px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #f6f3eb;
}
.detail-demo .screen-viewport img {
  width: 100%;
  height: auto;
  display: block;
  border: 0;
  border-radius: 0;
}
#full-screen-image {
  display: inline-block;
  margin-top: 12px;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-height: 600px) {
  .intro {
    top: 115px;
    width: 70%;
  }
  .intro h1 {
    font-size: 34px;
    line-height: 1.04;
    margin: 8px 0;
    letter-spacing: -1px;
  }
  .intro .eyebrow {
    font-size: 8px;
  }
  .intro-description,
  .entrance-sign,
  .intro-skip {
    display: none;
  }
  .intro .primary {
    margin-top: 12px;
    padding: 10px 15px;
    min-height: 40px;
  }
  .walk-controls {
    left: auto;
    right: 4%;
    bottom: 82px;
    gap: 10px;
  }
  .walk-hint {
    display: none;
  }
  .chapter,
  .chapter.right {
    top: 112px;
    bottom: 140px;
  }
  .chapter-copy {
    max-height: calc(100svh - 245px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .chapter-copy h2 {
    font-size: 28px;
  }
  .stall-marker,
  .stall-marker.left {
    top: 90px;
  }
}
@media (max-width: 760px) {
  .screen-viewport {
    height: 260px;
  }
}

/* Product details should read like an app, even inside the market scene. */
#stall-dialog {
  width: min(1600px, 96vw);
  max-width: none;
  max-height: 94svh;
}
.detail-layout {
  grid-template-columns: minmax(260px, 0.3fr) minmax(0, 1fr);
}
.detail-copy {
  padding: 40px 28px;
}
.detail-copy h2 {
  font-size: clamp(34px, 3vw, 46px);
}
.detail-copy > p:not(.eyebrow),
.detail-copy li {
  font-size: 16px;
  line-height: 1.65;
}
.detail-demo {
  padding: 28px;
}
.screen-label {
  padding-right: 44px;
  margin: 0 0 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.7px;
}
.screen-tabs button,
.back-to-lane,
#full-screen-image {
  font-size: 14px;
}
.screen-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: 14px;
}
.screen-tools label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.screen-tools select {
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  min-height: 44px;
  padding: 8px;
}
#screen-help {
  color: var(--muted);
  font-size: 13px;
}
.screen-viewport {
  height: clamp(360px, 57svh, 760px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  scrollbar-gutter: stable;
}
.detail-demo .screen-viewport img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  max-width: none;
  min-width: var(--capture-width, 900px);
}
.screen-viewport[data-size="fit"] img {
  min-width: 0;
}
.screen-viewport[data-size="150"] img {
  width: 150%;
  min-width: calc(var(--capture-width, 900px) * 1.5);
}
.screen-viewport[data-size="200"] img {
  width: 200%;
  min-width: calc(var(--capture-width, 900px) * 2);
}
.detail-demo figcaption {
  font-size: 16px;
}
.capture-note {
  font-size: 13px;
  line-height: 1.6;
}
.eyebrow,
.chapter-tags span {
  font-size: 12px;
}
.intro-description,
.chapter-copy > p:not(.eyebrow),
.overview-heading p,
.feature-tile p {
  font-size: 16px;
  line-height: 1.65;
}
.primary,
.next-link,
.tile-bottom,
.intro-skip {
  font-size: 14px;
}
.route button {
  font-size: 14px;
}
.feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.feature-tile img {
  height: 260px;
}
.tile-top {
  font-size: 12px;
}
@media (max-width: 1000px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }
  .detail-copy {
    padding: 28px 64px 24px 24px;
  }
  .detail-copy h2 {
    margin: 12px 0;
  }
  .detail-copy ul {
    margin: 16px 0;
  }
  .detail-demo {
    padding: 24px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .screen-label {
    padding-right: 0;
  }
  .stall-close-bar {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    justify-content: flex-end;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
  }
  #stall-dialog .dialog-close {
    position: static;
  }
}
@media (max-width: 760px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .site-header .mp-hnav a[href="/app"] {
    font-size: 12px;
  }
  .route button {
    font-size: 12px;
    gap: 4px;
  }
  .route-number {
    display: none;
  }
  #stall-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100svh - 16px);
  }
  .detail-copy,
  .detail-demo {
    padding-left: 18px;
    padding-right: 18px;
  }
  .detail-copy h2,
  .detail-copy .eyebrow {
    padding-right: 38px;
  }
  .screen-label {
    flex-wrap: wrap;
    gap: 6px;
  }
  .screen-viewport {
    height: 60svh;
    min-height: 280px;
  }
  .chapter-copy {
    max-height: calc(100svh - 270px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
@media (max-height: 600px) {
  .chapter-copy {
    max-height: calc(100svh - 245px);
  }
}

/* ===== Works with your Square (2026-09-24) =====
   The section between the walk and the toolkit. Built on the walk's own tokens so the night
   market repaints it: the "at the stall" card uses --ink on --paper, which inverts at night. */
.sq {
  padding: 100px 6% 90px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  scroll-margin-top: 95px;
}
.sq-head {
  max-width: 820px;
  margin: 0 auto;
}
.sq-head .eyebrow {
  color: var(--orange);
}
:root[data-theme="night"] .sq-head .eyebrow {
  color: var(--accent);
}
.sq-head > p:last-child {
  font-size: 16px;
  line-height: 1.7;
}
.sq-head h2 {
  text-wrap: balance;
}
.sq-head > p.sq-plan {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.sq-cta p a {
  color: var(--accent);
  font-weight: 600;
}
.sq-steps {
  list-style: none;
  padding: 0;
  margin: 54px auto 0;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.sq-step {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 26px 24px;
}
.sq-step h3 {
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 18px 0 10px;
}
.sq-step p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}
.sq-step-square {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.sq-step-square p {
  color: var(--paper);
  opacity: 0.82;
}
.sq-step-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.sq-when {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.sq-step-square .sq-when {
  color: #e7bf79;
}
:root[data-theme="night"] .sq-step-square .sq-when {
  /* The night card is cream (#f7ebd1), and var(--orange) #b9572f measured 3.98:1 on it at 11px bold. The same
     orange, darkened, reads 5.23:1 (2026-09-24 review). */
  color: #9c4926;
}
.sq-pair {
  display: inline-flex;
  gap: 6px;
}
.sq-who {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--panel);
  color: var(--accent);
  border: 1px solid var(--line);
}
.sq-step-square .sq-who {
  background: transparent;
  color: var(--paper);
  border-color: currentColor;
}
.sq-step-square .sq-who-square {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.sq-table-wrap {
  max-width: 1200px;
  margin: 40px auto 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
}
.sq-compare {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
}
.sq-compare thead th {
  background: var(--paper);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 15px 24px;
  text-align: center;
}
.sq-compare thead th:first-child {
  text-align: left;
  width: 56%;
}
.sq-compare thead th:last-child {
  color: var(--accent);
}
.sq-compare tbody tr {
  border-top: 1px solid var(--line);
}
.sq-compare tbody th {
  text-align: left;
  font-weight: 400;
  padding: 15px 24px;
}
.sq-compare tbody th strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
}
.sq-compare tbody th span {
  display: block;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 2px;
}
.sq-compare td {
  text-align: center;
  padding: 15px 12px;
  font-size: 13px;
  color: var(--muted);
}
/* Square does part of this, just not per market (2026-09-24 review): say what it does instead of a dash. */
.sq-compare td.sq-part {
  font-size: 12px;
  line-height: 1.35;
}
.sq-yes::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 13px;
  border: solid var(--muted);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
  margin-top: -4px;
}
.sq-ours::before {
  border-color: var(--accent);
  width: 8px;
  height: 15px;
}
.sq-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
  text-align: center;
}
.sq-cta .primary {
  font-size: 15px;
  text-decoration: none;
  justify-content: center;
}
.sq-cta p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: 640px;
}
@media (max-width: 1000px) {
  .sq-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The Sign up pill was hidden below 1000px; on a phone it is the one link that matters. */
  .header-links .mp-hpill {
    display: inline-flex;
  }
}
@media (max-width: 760px) {
  .sq {
    padding: 64px 5% 60px;
  }
  .sq-step h3 {
    font-size: 22px;
  }
  .sq-compare tbody th span {
    display: none;
  }
  .sq-compare thead th,
  .sq-compare tbody th,
  .sq-compare td {
    padding: 12px 10px;
  }
  .sq-compare thead th {
    font-size: 10px;
    letter-spacing: 0.5px;
  }
  .sq-cta .primary {
    width: 100%;
  }
  .header-links .mp-hpill {
    padding: 10px 12px;
    font-size: 11px;
    margin-left: 4px;
  }
  .header-links a {
    white-space: nowrap;
  }
}
/* A phone header now carries Sign up too, so the lighting picker shrinks to its ◐ icon: the
   select sits invisibly over the icon, so a tap still opens the Day / Night / Auto choices. */
@media (max-width: 480px) {
  .header-actions .theme-control {
    position: relative;
    justify-content: center;
    min-width: 32px;
    min-height: 44px;
    /* The ◐ sat flush on the 375px edge and its invisible select ran 8px past it (2026-09-24 review). */
    margin-right: 6px;
    overflow: hidden;
  }
  .header-actions .theme-icon {
    display: inline;
    font-size: 18px;
  }
  .header-actions .theme-control select {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    padding: 0;
    opacity: 0;
  }
}

/* ===== Header row alignment (2026-09-24) =====
   Pricing and Sign up still wore the old landing's Work Sans 500 (.mp-hnav / .mp-hpill in
   landing.html) while The toolkit, Log in and Try the app use the walk's Segoe UI 600, so the
   words sat on different baselines. One family, one size, one line height, centred on one row. */
.market-walk-page .site-header .header-links {
  align-items: center;
}
.market-walk-page .site-header .header-links a {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: normal;
}
.market-walk-page .site-header .header-links .mp-hpill {
  align-items: center;
  padding: 8px 18px;
}
@media (max-width: 760px) {
  .market-walk-page .site-header .header-links a {
    font-size: 11px;
  }
  .market-walk-page .site-header .header-links .mp-hpill {
    padding: 12px 12px;
    margin-left: 4px;
  }
}

/* ===== The Square link and the first stall sign (2026-09-24) =====
   The intro's second link now reads "Already on Square? See what Pro adds", longer than the old
   "Or explore the toolkit", and on a phone the rotated planning-stall sign (bottom: 24%) sat over its
   right half (measured 17px at 375x812; the old text overlapped it too, by less). On phones tall enough
   for it, the sign sits just above the sound controls (98px from the bottom, 48px tall) instead of at a
   percentage, which could not clear both the link and the controls on every height; short phones keep the
   placement above. Measured clear of both at 360x780, 375x812, 390x844 and 430x932. */
@media (max-width: 760px) and (min-height: 780px) {
  .entrance-sign {
    bottom: 152px;
  }
}