/* Precision layer: source-aligned guidance and restrained device surfaces. */
.walk-focus {
  inset: auto;
  border: 1.5px solid #b6544b;
  border-radius: 8px;
  box-shadow: 0 0 0 1000px #17171b08;
  background: transparent;
  transition: none;
  will-change: auto;
  z-index: 4;
}

.walk-steps {
  border-top: 0;
}
.walk-steps li {
  padding: 18px 0;
  border-color: #cdd2d5;
}
.walk-steps p {
  color: #687176;
  opacity: 1;
}
.walk-steps li.active p {
  color: #30383c;
}
.walk-steps li:not(.active) .step-dot {
  background: #c1c7cb;
}
.active .step-dot {
  box-shadow: none;
}
.device-shell {
  padding: 4px;
  background: linear-gradient(110deg, #656765, #a6a7a3 50%, #565956);
  box-shadow:
    0 0 0 1px #767976,
    0 24px 48px #22272a18,
    0 5px 10px #22272a12;
}
.device-display {
  border-width: 3px;
}
.device-caption .zoom-screen {
  border: 0;
  color: #555d61;
  gap: 12px;
  font-size: 12px;
}
.device-caption small {
  color: #60686c;
}
.walk-copy .eyebrow {
  color: #60686c;
}
.badge {
  cursor: pointer;
  outline-offset: 8px;
  transform-origin: center;
  transition:
    transform 250ms var(--ease-expo),
    box-shadow 250ms var(--ease-expo);
  z-index: 1;
}
.badge.b1 {
  --rest-angle: -9deg;
  transform-origin: 30% 50%;
}
.badge.b2 {
  --rest-angle: 4deg;
}
.badge.b3 {
  --rest-angle: 10deg;
  transform-origin: 70% 50%;
}
.badges:hover .badge {
  transform: rotate(var(--rest-angle));
}
.badges .badge:focus-visible,
.badges .badge.expanded {
  transform: translateY(-18px) rotate(0) scale(1.18);
  box-shadow: 0 28px 60px #22272a35;
  z-index: 8;
}
.badge-detail {
  font-size: 13px;
  line-height: 1.7;
}
.download-device {
  justify-self: center;
  align-self: center;
  padding: 12px 0;
}
.download-device .device-shell {
  width: 210px;
  transform: none;
}
.download-device .walk-focus {
  display: none;
}
.banner .main {
  gap: 48px;
}
.download-device .device-display {
  border-radius: 40px;
}
.download-device .app-viewport {
  min-height: 0;
}
.download-device .device-shell {
  aspect-ratio: 402/900;
}
.cta-km {
  left: 47%;
  bottom: 12%;
}
@media (hover: hover) and (pointer: fine) {
  .badges .badge:hover {
    transform: translateY(-18px) rotate(0) scale(1.18);
    box-shadow: 0 28px 60px #22272a35;
    z-index: 8;
  }
}
@media (max-width: 960px) {
  .walk-connector {
    display: none;
  }
}
@media (max-width: 700px) {
  .walk-steps li {
    padding: 8px 0;
  }
  .walk-steps p {
    color: #30383c;
  }
  .device-caption .zoom-screen {
    font-size: 10px;
  }
  .device-shell {
    padding: 3px;
  }
  .walk-focus {
    border-width: 1.25px;
    border-radius: 5px;
  }
  .walk-steps .active p {
    padding-inline: 2px;
  }
  .badge-detail {
    font-size: 11px;
  }
  .badges .badge:focus-visible,
  .badges .badge.expanded {
    transform: translateY(-12px) rotate(0) scale(1.13);
  }
  .download-device .device-shell {
    width: 185px;
    border-radius: 34px;
    padding: 4px;
  }
  .download-device .device-display {
    border-radius: 29px;
  }
  .banner .main {
    gap: 24px;
  }
  .download-device {
    justify-self: end;
    padding-right: 10px;
  }
  .cta-km {
    left: 25px;
    bottom: 130px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .walk-focus,
  .walk-connector {
    display: none;
  }
  .badge {
    transition: none;
  }
  .badges .badge:focus-visible,
  .badges .badge.expanded {
    transform: rotate(0) scale(1.08);
  }
  .walk-steps p {
    color: var(--text-light);
  }
}

.hero .km-wrap {
  will-change: opacity;
}
.scene-2 .town {
  left: 58%;
  width: min(1000px, 78vw);
}
@media (max-width: 960px) {
  .scene-2 .town {
    left: 56%;
    width: 125vw;
    bottom: 8%;
  }
}

/* Mobile composition: give the real screen more of the available height. */
@media (max-width: 700px) {
  .walk-pin {
    padding: 8px 0;
    gap: 8px;
  }
  .walk-copy h3 {
    font-size: 22px;
    line-height: 1.3;
  }
  .device-shell {
    width: min(220px, calc((100svh - 300px) * 0.447));
  }
  .device-caption small {
    display: none;
  }
  .device-caption .zoom-screen {
    margin-top: 6px;
    line-height: 1.5;
  }
  .walk-steps {
    min-height: 78px;
    padding-bottom: 34px;
    gap: 8px;
  }
  .walk-steps h4 {
    font-size: 10px;
  }
  .walk-steps .active p {
    font-size: 11px;
    line-height: 1.65;
  }
  .walk-device {
    padding: 2px 0;
  }
  .zoom-screen {
    min-height: 32px;
    min-width: 100px;
  }
  .badge {
    touch-action: manipulation;
  }
  .badge:focus-visible {
    outline: 2px solid var(--ink);
  }
}
/* Short landscape screens use an ordinary, complete reading flow. */
@media (max-height: 600px) and (min-width: 600px) {
  .walkthrough {
    height: auto;
  }
  .walk-pin {
    position: relative;
    top: auto;
    height: auto;
    min-height: 420px;
    padding: 32px 0;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .walk-copy {
    display: block;
  }
  .walk-copy h3 {
    font-size: 28px;
    margin: 16px 0;
  }
  .walk-copy .product-lead {
    font-size: 14px;
  }
  .device-shell {
    width: 150px;
  }
  .device-caption small {
    display: none;
  }
  .walk-steps li {
    padding: 10px 0;
  }
  .walk-steps p {
    font-size: 12px;
  }
  .walk-connector {
    display: none;
  }
  .walk-focus {
    display: none;
  }
  .hero {
    height: 200vh;
  }
  .scene-1 .char {
    height: 65vh;
  }
  .hero-tiles {
    top: 80px;
  }
  .hero .tile {
    font-size: 22px;
    padding: 12px 6px;
  }
  .hero-lead {
    display: none;
  }
  .hero-side {
    display: none;
  }
  .hero .km-wrap {
    width: 90px;
    bottom: 6vh;
    right: 20px;
  }
  .hero-scroll {
    display: none;
  }
  .field .display {
    font-size: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .walk-steps p {
    display: block;
    position: static;
    opacity: 1;
  }
  .walk-steps {
    min-height: 0;
  }
}

@media (max-height: 600px) and (min-width: 600px) {
  .walk-steps {
    display: block;
    min-height: 0;
    padding: 0;
  }
  .walk-steps li {
    display: flex;
  }
  .walk-steps p,
  .walk-steps .active p {
    display: block;
    position: static;
    margin: 6px 0 0;
    text-align: left;
  }
  .walk-steps h4 {
    text-align: left;
    font-size: 13px;
  }
  .walk-copy .product-lead {
    display: block;
  }
}

@media (max-width: 700px) {
  .hero .hero-lead {
    bottom: 22px;
    font-size: 12px;
    line-height: 1.7;
    padding: 12px 14px;
    margin: 0;
    max-width: calc(100% - var(--gutter) * 2);
  }
  .hero .tile {
    font-size: clamp(23px, 6.4vw, 28px);
    padding: 12px 6px;
    letter-spacing: 0.04em;
  }
  .hero-tiles {
    top: 84px;
  }
  .hero .km-wrap {
    width: 22vw;
    right: 18px;
  }
  .device-shell {
    width: min(220px, calc((100svh - 320px) * 0.447));
  }
  .device-caption .zoom-screen {
    min-height: 44px;
    min-width: 120px;
    margin-top: 4px;
    font-size: 12px;
  }
  .ft-col ul a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 0;
  }
  .ft-col ul {
    gap: 2px;
  }
  .menu-main li a {
    min-height: 44px;
  }
  .walk-steps h4 {
    font-size: 11px;
  }
  .walk-steps {
    min-height: 82px;
  }
}
@media (max-width: 700px) and (max-height: 640px) {
  .walkthrough {
    height: auto;
  }
  .walk-pin {
    position: relative;
    top: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 44px 0;
  }
  .walk-copy {
    display: contents;
  }
  .walk-copy h3 {
    order: 0;
    font-size: 26px;
  }
  .walk-device {
    order: 1;
  }
  .device-shell {
    width: 220px;
  }
  .walk-steps {
    order: 2;
    display: block;
    width: 100%;
    min-height: 0;
    padding: 0;
  }
  .walk-steps li {
    display: block;
    padding: 16px 0;
  }
  .walk-steps h4 {
    font-size: 14px;
    text-align: left;
  }
  .walk-steps p,
  .walk-steps .active p {
    display: block;
    position: static;
    text-align: left;
    margin: 8px 0 0;
    max-width: none;
    font-size: 13px;
  }
  .walk-focus {
    display: none;
  }
  .device-caption small {
    display: block;
    font-size: 10px;
  }
  .hero .tile {
    font-size: 23px;
  }
  .hero .hero-lead {
    font-size: 11px;
  }
  .hero .scene-1 .char {
    height: 53vh;
  }
  .hero .scene-1 .char-d {
    height: 59vh !important;
  }
}
@media (max-height: 600px) and (min-width: 600px) {
  .hero .hero-lead {
    display: none;
  }
  .hero .tile {
    font-size: 19px;
    padding: 9px 5px;
    letter-spacing: 0;
  }
  .hero .tile:nth-child(2) {
    margin-top: 22px;
  }
  .hero .tile:nth-child(3) {
    margin-top: 8px;
  }
  .hero-tiles {
    top: 78px;
  }
  .hero .km-wrap {
    width: 80px;
  }
  .scene-2 .town {
    width: 72vw;
    bottom: -45%;
  }
  .hd {
    height: 64px;
  }
  .menu {
    padding-top: 80px;
  }
  .menu-main li a {
    font-size: 24px;
    min-height: 40px;
  }
  .menu {
    grid-template-columns: 1fr 1fr;
    overflow: auto;
  }
}

.hd.past-hero {
  background: var(--bg);
}
@media (max-width: 700px) {
  .hero-scroll {
    display: none;
  }
}

.zoom-screen {
  min-height: 44px;
}
.badge[role="button"]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}

/* A bright lifted crop against a dimmed screen: actual screenshot pixels. */
.walk-focus {
  border: 0;
  border-radius: 10px;
  background-repeat: no-repeat;
  background-color: #f7f5fc;
  background-origin: border-box;
  box-shadow:
    0 0 0 1.5px #ffffffed,
    0 8px 22px #11182755,
    0 0 0 1000px #17192366;
  transform-origin: center;
  overflow: hidden;
}
.walk-focus::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #fff9;
  border-radius: inherit;
  pointer-events: none;
}
.app-viewport::before,
.app-viewport::after {
  z-index: 1;
}
@media (min-width: 701px) {
  .walkthrough[data-walk="1"] .walk-copy {
    grid-column: 2;
    grid-row: 1;
  }
  .walkthrough[data-walk="1"] .walk-device {
    grid-column: 1;
    grid-row: 1;
  }
}
@media (max-width: 700px) {
  .walk-focus {
    border-radius: 7px;
    box-shadow:
      0 0 0 1px #fffffff0,
      0 5px 14px #11182755,
      0 0 0 1000px #17192366;
  }
}

/* Keep desktop hero elements within one composition, including ultrawide displays. */
@media (min-width: 1100px) {
  .hero-pin {
    max-width: 1600px;
    margin-inline: auto;
  }
  .hero-tiles {
    left: 5%;
    top: max(100px, 12vh);
  }
  .hero-side {
    right: 5%;
    top: max(112px, 13vh);
  }
  .hero-lead,
  .hero-scroll {
    left: 5%;
  }
  .hero .km-wrap {
    right: 5%;
  }
  .scene-2 .town {
    left: 58%;
    bottom: 5%;
    width: min(64%, 96vh);
  }
  .hero-ghost {
    left: 12%;
    top: 40%;
    font-size: clamp(120px, 17vw, 260px);
  }
  .scene-1 .char-p {
    left: 22%;
  }
  .scene-1 .char-d {
    left: 42%;
  }
  .scene-1 .char-e {
    left: 64%;
  }
}
.walkthrough[data-intro="true"] .walk-focus {
  visibility: hidden;
}
.walkthrough[data-intro="true"] .walk-steps .step-dot {
  background: #c1c7cb;
}

.scene-2 .town {
  mask-image:
    linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
    linear-gradient(to bottom, transparent, #000 3%, #000 93%, transparent);
  mask-composite: intersect;
}