/* Thingpath landing pages (thingpath.com and /movers). Design tokens and type follow
   docs/landing/LANDING_SPEC.md §2 (black-and-white brand, docs/brand/BRAND.md); layout §3;
   fragments §6. Light page with one dark section. */

@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f3f3f1;
  --surface: #ffffff;
  --card: #ffffff;
  --line: #e2e2de;
  --card-border: #e5e5e1;
  --row-line: #ededea;
  --placeholder: #e3e3df;
  --ink: #0b0b0b;
  --muted: #5c5c59;
  --soft: #82827e;
  --dark-bg: #0b0b0c;
  --dark-surface: #151516;
  --dark-panel: #19191a;
  --dark-line: #2a2a2b;
  --dark-border: #333335;
  --on-dark: #ffffff;
  --on-dark-muted: #c8c8c4;
  --on-dark-soft: #9b9b97;
  --warn-on-dark: #e8c79a;
  --warn: #b45309; /* the app's warning colour (src/theme/palette.js), on light cards */
  --accent: #2f5d50;

  --font: 'Geist', system-ui, sans-serif;
  --container: 1240px;
  --gutter: 24px;
  --section-y: clamp(88px, 11vw, 160px);
  --shadow-sm: 0 24px 50px rgba(11, 11, 11, 0.12);
  --shadow-lg: 0 30px 60px rgba(11, 11, 11, 0.14);
  --shadow-dark: 0 30px 60px rgba(0, 0, 0, 0.4);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 72px;

  color-scheme: light;
}

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}
ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
}
img,
svg,
video,
picture {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
button {
  font: inherit;
  color: inherit;
}
[hidden] {
  display: none !important;
}

/* ---- Type ---- */
.display,
.display-hero {
  font-size: clamp(40px, 5.6vw, 76px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.02;
  text-wrap: balance;
}
.display-hero {
  font-size: clamp(44px, 7vw, 88px);
}
.statement {
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
  text-wrap: balance;
}
.h2 {
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.15;
  text-wrap: balance;
}
.h3-lg,
.h3,
.h3-sm {
  font-weight: 600;
  line-height: 1.2;
}
.h3-lg {
  font-size: 32px;
  letter-spacing: -0.035em;
}
.h3 {
  font-size: 24px;
  letter-spacing: -0.025em;
}
.h3-sm {
  font-size: 22px;
  letter-spacing: -0.02em;
}
.lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
.body {
  font-size: 16px;
  color: var(--muted);
  text-wrap: pretty;
}
.small {
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
}
.eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--muted);
}
.soft {
  color: var(--soft);
}
.tabular {
  font-variant-numeric: tabular-nums;
}
@media (max-width: 767px) {
  .lead {
    font-size: 17px;
  }
  .body {
    font-size: 15px;
  }
  .h3-lg {
    font-size: 26px;
  }
}

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  padding-block: var(--section-y);
}
.section-surface {
  background: var(--surface);
}
.section-dark {
  background: var(--dark-bg);
  color: var(--on-dark);
}
.section-dark .lead,
.section-dark .body {
  color: var(--on-dark-muted);
}
.section-dark .eyebrow,
.section-dark .soft {
  color: var(--on-dark-soft);
}
.section-head {
  max-width: 760px;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.section-head.center {
  margin-inline: auto;
  text-align: center;
}
.section-head > * + * {
  margin-top: 18px;
}

/* ---- Buttons and links ---- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}
.button-primary {
  background: var(--ink);
  color: var(--surface);
}
.button-primary:hover {
  background: #262626;
}
.button-secondary {
  border-color: rgba(11, 11, 11, 0.22);
  color: var(--ink);
}
.button-secondary:hover {
  border-color: var(--ink);
}
.button-on-dark {
  background: var(--surface);
  color: var(--ink);
}
.button-on-dark:hover {
  background: #ffffff;
}
.button-ghost-on-dark {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--on-dark);
}
.button-ghost-on-dark:hover {
  border-color: var(--on-dark);
}
.button-small {
  min-height: 44px;
  padding: 12px 20px;
  font-size: 15px;
}
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.button-row.center {
  justify-content: center;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.section-dark :focus-visible,
.hero :focus-visible {
  outline-color: var(--on-dark);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  text-decoration: none;
}
.skip-link:focus {
  top: 12px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Header ---- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--on-dark);
  transition:
    background-color 0.25s var(--ease),
    color 0.25s var(--ease);
}
.site-header.is-solid,
.site-header.is-open {
  background: var(--header-bg, var(--bg));
  color: var(--ink);
}
/* Past the hero the header matches the section under it (main.js sets --header-bg and
   .is-dark); over a dark section it turns light-on-dark. The open phone menu stays light. */
.site-header.is-solid.is-dark:not(.is-open) {
  color: var(--on-dark);
}
.site-header.is-open {
  background: var(--bg);
}
.header-row {
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--header-h);
}
/* Horizontal logo (docs/brand/BRAND.md): icon, gap 28 % and wordmark 78 % of its height, Geist
   600 at −0.035em. Over the dark hero the white-tile icon, on light the black one; as a CSS
   background so only the one on screen is downloaded. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  text-decoration: none;
}
.brand-icon {
  display: block;
  flex: none;
  width: 28px;
  height: 28px;
  background: url('/logo.svg') center / contain no-repeat;
}
.site-header:not(.is-solid):not(.is-open) .brand-icon,
.site-header.is-dark:not(.is-open) .brand-icon {
  background-image: url('/logo-inverse.svg');
}
.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-right: auto;
}
.nav a,
.sign-in {
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  opacity: 0.86;
}
.nav a:hover,
.sign-in:hover,
.nav a[aria-current='page'],
.nav a.is-active {
  opacity: 1;
}
/* The section of this page in view (main.js). */
.nav a.is-active {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
/* The three landing pages as a switch (Homes · Business · Movers), the page you're on filled;
   the links after it go to this page's own sections. */
.nav-pages {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(11, 11, 11, 0.16);
  border-radius: 999px;
}
.nav .nav-pages a {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background-color 0.2s var(--ease),
    color 0.2s var(--ease);
}
.nav .nav-pages a[aria-current='page'] {
  background: var(--ink);
  color: var(--surface);
  opacity: 1;
}
.site-header:not(.is-solid):not(.is-open) .nav-pages,
.site-header.is-dark:not(.is-open) .nav-pages {
  border-color: rgba(255, 255, 255, 0.32);
}
.site-header:not(.is-solid):not(.is-open) .nav-pages a[aria-current='page'],
.site-header.is-dark:not(.is-open) .nav-pages a[aria-current='page'] {
  background: var(--surface);
  color: var(--ink);
}
.nav-sign-in {
  display: none;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}
.site-header:not(.is-solid):not(.is-open) .button-primary,
.site-header.is-dark:not(.is-open) .button-primary {
  background: var(--surface);
  color: var(--ink);
}
.menu-button {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.menu-button span,
.menu-button span::before {
  display: block;
  width: 20px;
  height: 1.5px;
  margin-inline: auto;
  background: currentColor;
  transition: transform 0.2s var(--ease);
}
.menu-button span {
  transform: translateY(-3.5px);
}
.menu-button span::before {
  content: '';
  transform: translateY(7px);
}
.menu-button[aria-expanded='true'] span {
  transform: rotate(45deg);
}
.menu-button[aria-expanded='true'] span::before {
  transform: rotate(-90deg);
}

/* Seven links fit from 1024 px; below that the menu button. */
@media (max-width: 1023px) {
  .header-row {
    gap: 12px;
  }
  .brand {
    margin-right: auto;
  }
  .menu-button {
    display: block;
  }
  .sign-in {
    display: none;
  }
  .header-actions {
    gap: 8px;
  }
  .nav {
    display: none;
    position: absolute;
    inset: var(--header-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px var(--gutter) 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .site-header.is-open .nav {
    display: flex;
  }
  .nav a {
    padding: 14px 0;
    font-size: 18px;
    border-bottom: 1px solid var(--row-line);
    opacity: 1;
  }
  .nav .nav-sign-in {
    display: block;
    border-bottom: 0;
  }
  .nav .nav-pages {
    margin: 8px 0;
    padding: 4px;
  }
  .nav .nav-pages a {
    flex: 1;
    padding: 11px 8px;
    border-bottom: 0;
    font-size: 16px;
    text-align: center;
  }
}

/* ---- Hero ---- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 820px;
  overflow: hidden;
  background: var(--dark-panel);
  color: var(--on-dark);
}
.hero-media {
  position: absolute;
  inset: 0;
}
.hero-poster,
.hero-poster img,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-video {
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.hero-video.is-playing {
  opacity: 1;
}
/* The loop point: main.js fades the clip to the poster behind it and back. */
.hero-video.is-playing.is-looping {
  opacity: 0;
}
/* Legibility over the photo (measured against the poster and the video): the bottom fade keeps
   the headline and line at 4.3:1 or more on their brightest pixels, the top fade keeps the
   transparent nav readable over the bright sky. */
.hero-shade {
  position: absolute;
  inset: auto 0 0;
  height: 72%;
  background: linear-gradient(
    rgba(11, 11, 12, 0),
    rgba(11, 11, 12, 0.58) 35%,
    rgba(11, 11, 12, 0.9)
  );
  pointer-events: none;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 200px;
  background: linear-gradient(
    rgba(11, 11, 12, 0.68),
    rgba(11, 11, 12, 0.58) 35%,
    rgba(11, 11, 12, 0)
  );
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(56px, 7vw, 88px);
  text-align: center;
}
.hero-content .display-hero {
  max-width: 14ch;
  margin-inline: auto;
}
.hero-sub {
  max-width: 600px;
  margin: 22px auto 34px;
  color: var(--on-dark-muted);
}
.hero-toggle {
  position: absolute;
  right: var(--gutter);
  bottom: 24px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(11, 11, 12, 0.35);
  color: var(--on-dark);
  cursor: pointer;
}
.hero-toggle svg {
  width: 14px;
  height: 14px;
}
.hero-toggle .icon-play,
.hero-toggle[aria-pressed='true'] .icon-pause {
  display: none;
}
.hero-toggle[aria-pressed='true'] .icon-play {
  display: block;
}
.hero-placeholder {
  position: absolute;
  inset: 0;
  background: var(--dark-panel);
}
.hero-placeholder::after {
  content: attr(data-slot);
  position: absolute;
  top: calc(var(--header-h) + 24px);
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 48px);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--on-dark-soft);
  text-align: center;
  white-space: pre-wrap;
}
@media (max-width: 767px) {
  .hero {
    height: max(640px, 100svh);
    max-height: 820px;
  }
}

/* The join line above the hero headline: overlapping faces and one short sentence. */
.hero-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 22px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--on-dark-muted);
}
.hero-proof > span:last-child {
  text-align: left;
}
.hero-proof strong {
  font-weight: 600;
  color: var(--on-dark);
}
.avatars {
  display: flex;
  flex-shrink: 0;
}
.avatar {
  display: block;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #ffffff;
}
.avatar + .avatar {
  margin-left: -9px;
}
.avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Until the owner's photos exist: warm tints in the page's palette. */
.avatar-placeholder:nth-child(1) {
  background: #dcdcd8;
}
.avatar-placeholder:nth-child(2) {
  background: #c4c4bf;
}
.avatar-placeholder:nth-child(3) {
  background: #a6a6a1;
}
.avatar-placeholder:nth-child(4) {
  background: #d0d0cc;
}
@media (max-width: 767px) {
  .hero-proof {
    gap: 12px;
    font-size: 14px;
  }
}

/* Home hero (owner, 6 Nov 2026): the words never cover the family in the photo. From 1024 px
   they sit on the calm road and trees on the left, with a shade from the left; below that the
   video gets its own block (16:9, phones 4:5) and the words follow on the dark panel. */
@media (min-width: 1024px) {
  /* Centred in the photo below the header (owner, 6 Nov 2026). */
  .hero.hero-left {
    align-items: center;
  }
  .hero-left .hero-content {
    padding-block: var(--header-h) 0;
    text-align: left;
  }
  .hero-left .hero-content .display-hero {
    max-width: 11ch;
    margin-inline: 0;
  }
  .hero-left .hero-sub {
    max-width: 30ch;
    margin-inline: 0;
  }
  .hero-left .button-row.center {
    justify-content: flex-start;
  }
  .hero-left .hero-proof {
    justify-content: flex-start;
    margin-inline: 0;
    color: var(--on-dark);
  }
  /* A soft dark glow behind the words plus a shade from the left: the join line, headline and
     line stay at AA over the trees and sky (measured on the photo). */
  .hero-left .hero-shade {
    inset: 0;
    height: auto;
    background:
      radial-gradient(ellipse 46% 44% at 22% 52%, rgba(11, 11, 12, 0.55), rgba(11, 11, 12, 0)),
      linear-gradient(
        90deg,
        rgba(11, 11, 12, 0.72),
        rgba(11, 11, 12, 0.45) 38%,
        rgba(11, 11, 12, 0) 62%
      ),
      linear-gradient(rgba(11, 11, 12, 0) 55%, rgba(11, 11, 12, 0.55));
  }
}
@media (max-width: 1023px) {
  .hero.hero-left {
    display: block;
    height: auto;
    max-height: none;
  }
  .hero-left .hero-media {
    position: relative;
    aspect-ratio: 16 / 9;
  }
  .hero-left .hero-media::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 28%;
    background: linear-gradient(rgba(25, 25, 26, 0), var(--dark-panel));
    pointer-events: none;
  }
  .hero-left .hero-shade {
    display: none;
  }
  .hero-left .hero-content {
    padding-top: 8px;
  }
}
@media (max-width: 767px) {
  .hero-left .hero-media {
    aspect-ratio: 4 / 5;
  }
}

/* ---- Trust strip and statement ---- */
.trust-strip {
  padding-block: 30px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  font-size: 15px;
  color: var(--muted);
}
.statement-section .statement {
  max-width: 980px;
  margin-inline: auto;
  text-align: center;
}

/* ---- Photos (media slots) ---- */
.scene {
  position: relative;
}
.media {
  position: relative;
  aspect-ratio: var(--ar);
  overflow: hidden;
  border-radius: 26px;
  background: var(--placeholder);
}
.media-dark {
  background: var(--dark-panel);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
.media-placeholder::after {
  content: attr(data-slot);
  position: absolute;
  top: 18px;
  left: 20px;
  right: 20px;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--soft);
}
.media-dark.media-placeholder::after {
  color: var(--on-dark-soft);
}
@media (max-width: 767px) {
  .media {
    aspect-ratio: var(--ar-m);
    border-radius: 24px;
  }
}

/* ---- Fragments (small pieces of the app) ---- */
.frag {
  position: absolute;
  z-index: 1;
  width: 340px;
  max-width: calc(100% - 40px);
  padding: 18px;
  border: 1px solid var(--card-border);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.35;
}
.frag-lg {
  width: 400px;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
}
.frag-dark {
  border-color: var(--dark-border);
  background: var(--dark-surface);
  box-shadow: var(--shadow-dark);
  color: var(--on-dark);
}
.frag-place-bottom {
  left: 20px;
  right: 20px;
  bottom: 20px;
  width: auto;
  max-width: none;
}
.frag-place-bottom-right {
  right: 24px;
  bottom: 24px;
}
.frag-place-bottom-left {
  left: 24px;
  bottom: 24px;
}
.frag-place-center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.frag-place-top-right {
  right: 24px;
  top: 24px;
}
@media (max-width: 767px) {
  .frag.frag-place-bottom-right,
  .frag.frag-place-bottom-left {
    left: 20px;
    right: 20px;
    bottom: 20px;
    width: auto;
    max-width: none;
  }
  .frag-place-top-right {
    right: 20px;
    top: 20px;
  }
  .frag {
    font-size: 14px;
    padding: 16px;
  }
}
.frag-kicker {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.frag-dark .frag-kicker,
.frag-dark .frag-muted {
  color: var(--on-dark-soft);
}
.frag-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.frag-muted {
  color: var(--muted);
}
.frag-rows {
  margin-top: 12px;
}
.frag-rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding-block: 8px;
  border-top: 1px solid var(--row-line);
}
.frag-dark .frag-rows li {
  border-top-color: var(--dark-line);
}
.frag-rows li > :last-child {
  text-align: right;
}

/* Handling flags: drawn like the printed labels (black outline, upper case). */
.flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.flag {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px 4px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.45s var(--ease);
}
.flag.is-off {
  opacity: 0;
}

/* F1 and F8: labels */
.label-frag {
  display: flex;
  align-items: center;
  gap: 16px;
}
.qr {
  flex: none;
  width: 72px;
  height: 72px;
}
.label-code {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.label-name {
  margin-top: 2px;
  color: var(--muted);
}
.label-frag .flags {
  margin-top: 10px;
}
.printed-label {
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  padding: 16px;
}
.printed-label .qr {
  width: 92px;
  height: 92px;
}
/* F8 follows the printed label (docs/landing/media/thingpath-label-box-0012.png): room above,
   the code large, flags, then a footer line. */
.printed-room {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.printed-code {
  margin-top: 2px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.label-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.label-foot strong {
  color: var(--ink);
  font-weight: 700;
}
.printed-code,
.label-foot strong {
  white-space: nowrap;
}
.label-foot span {
  text-align: right;
}
@media (max-width: 479px) {
  .printed-label .qr {
    width: 64px;
    height: 64px;
  }
  .printed-code {
    font-size: 24px;
  }
  .label-foot {
    font-size: 11px;
  }
}
.printed-label .flags {
  margin-top: 10px;
}
.printed-label {
  width: 380px;
}

/* F2: AI found items */
.check-row {
  transition: opacity 0.45s var(--ease);
}
.check-row:not(.is-on) {
  opacity: 0.62;
}
.check-row > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.checkbox {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid #c9c9c5;
  border-radius: 6px;
  transition:
    background-color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.checkbox svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.check-row.is-on .checkbox {
  border-color: var(--accent);
  background: var(--accent);
}
.check-row.is-on .checkbox svg {
  opacity: 1;
}
.ai-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-head svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

/* F3 and F7: search */
.search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--card-border);
  border-radius: 13px;
  background: var(--surface);
  font-size: 16px;
}
.search-field > svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.search-text {
  white-space: pre;
}
.caret {
  display: inline-block;
  width: 2px;
  height: 20px;
  margin-left: 1px;
  border-radius: 1px;
  background: var(--accent);
  vertical-align: -4px;
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--row-line);
  border-radius: 13px;
  transition: opacity 0.45s var(--ease);
}
.search-result.is-off {
  opacity: 0;
}
.result-title {
  font-weight: 600;
}
.result-path {
  margin-top: 2px;
  font-size: 14px;
  color: var(--muted);
}
.found {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
.hint {
  flex: none;
  padding: 5px 9px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.frag-search {
  width: 560px;
}

/* F4: tab card */
.tab-card .frag-title {
  font-size: 18px;
}
.tab-card .frag-rows span:last-child {
  color: var(--muted);
}
/* The audience photos have little calm space (the people fill the frame at 16:10 and 4:5), so
   the card hangs from the photo's bottom edge instead of sitting on it. */
.frag.tab-card {
  position: relative;
  inset: auto;
  width: 340px;
  max-width: calc(100% - 48px);
  margin: -64px 24px 0 auto;
}
@media (max-width: 767px) {
  .frag.tab-card {
    width: auto;
    max-width: none;
    margin: -48px 16px 0;
  }
}

/* F5 and F6: delivery check and toast */
.frag-delivery {
  width: 360px;
}
.delivery-count {
  margin-top: 6px;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.bar {
  height: 6px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--dark-line);
}
.bar span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--accent);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.frag:not(.frag-dark) .bar {
  background: var(--row-line);
}
.missing {
  padding-top: 16px;
}
/* A part of a fragment that opens and closes (the card grows from its anchored edge). */
.collapse {
  display: grid;
  grid-template-rows: 1fr;
  transition:
    grid-template-rows 0.5s var(--ease),
    opacity 0.45s var(--ease);
}
.collapse > * {
  min-height: 0;
  overflow: hidden;
}
.collapse.is-off {
  grid-template-rows: 0fr;
  opacity: 0;
}
.missing-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--warn-on-dark);
}
.missing .frag-rows {
  margin-top: 6px;
}
.toast {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-dark);
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-dark);
  transition:
    opacity 0.4s var(--ease),
    transform 0.4s var(--ease);
}
.toast.is-off {
  opacity: 0;
  transform: translateY(-6px);
}
.toast-tick {
  display: grid;
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  fill: none;
  stroke: var(--on-dark);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- How it works ---- */
.steps-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.step-card > .scene {
  margin-bottom: 28px;
}
.step-number {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.step-card .h3 {
  margin-top: 8px;
}
.step-card .body {
  margin-top: 8px;
}
@media (max-width: 899px) {
  .steps-3 {
    grid-template-columns: minmax(0, 1fr);
    gap: 64px;
    max-width: 520px;
    margin-inline: auto;
  }
}

/* ---- Audiences ---- */
.anchor {
  display: block;
  position: relative;
  top: -24px;
}
.tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto clamp(40px, 5vw, 64px);
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  scrollbar-width: none;
}
.tab {
  min-height: 44px;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.25s var(--ease),
    color 0.25s var(--ease);
}
.tab[aria-selected='true'] {
  background: var(--ink);
  color: var(--surface);
}
.panels {
  display: grid;
}
.panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s var(--ease),
    visibility 0s linear 0.3s;
}
.panel.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--ease);
}
.panel-text .lead {
  margin-top: 16px;
}
.points {
  margin-top: 28px;
}
.points li {
  display: flex;
  gap: 12px;
  padding-block: 12px;
  border-top: 1px solid var(--line);
}
.points li:last-child {
  border-bottom: 1px solid var(--line);
}
.tick {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 899px) {
  .panel {
    grid-template-columns: minmax(0, 1fr);
  }
  .tabs {
    justify-content: flex-start;
  }
}

/* ---- Smart search and labels ---- */
.search-scene .frag-place-center {
  width: min(560px, calc(100% - 40px));
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}
.split-text .lead {
  margin-top: 20px;
}
@media (max-width: 899px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 767px) {
  .search-scene .frag-place-center {
    top: auto;
    bottom: 20px;
    transform: translateX(-50%);
  }
}

/* ---- Trust tiles ---- */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.tile {
  padding: 32px;
  border-radius: 24px;
  background: var(--bg);
}
.tile-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 28px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.tile-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tile .body {
  margin-top: 10px;
}
@media (max-width: 899px) {
  .tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Pricing ---- */
.period-switch {
  display: flex;
  gap: 4px;
  width: fit-content;
  margin: 28px auto 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
.period-switch button {
  min-height: 40px;
  padding: 8px 20px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
}
.period-switch button[aria-pressed='true'] {
  background: var(--ink);
  color: var(--surface);
}
.plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.plan {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
}
.plan-name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.plan-tagline {
  margin-top: 2px;
  font-size: 15px;
  color: var(--muted);
}
.plan-price {
  margin-top: 28px;
  font-size: 15px;
  color: var(--muted);
}
.plan-amount {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.plan-note {
  min-height: 42px;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
}
.plan .button {
  margin-top: 20px;
}
/* Paid plans before Stripe (plans.json `checkout`): the price stays, the button is inactive. */
.plan .button:disabled {
  border-color: var(--line);
  background: transparent;
  color: var(--muted);
  cursor: default;
}
.plan-dark .button:disabled {
  border-color: var(--dark-line);
  color: var(--on-dark-muted);
}
.plan-features {
  margin-top: 24px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.plan-features li {
  display: flex;
  gap: 10px;
  padding-top: 12px;
  font-size: 15px;
  line-height: 1.4;
}
.plan-features .tick {
  margin-top: 1px;
}
.plan-dark {
  border-color: var(--dark-bg);
  background: var(--dark-bg);
  color: var(--on-dark);
}
.plan-dark .plan-tagline,
.plan-dark .plan-price,
.plan-dark .plan-note {
  color: var(--on-dark-muted);
}
.plan-dark .plan-amount {
  color: var(--on-dark);
}
.plan-dark .plan-features {
  border-top-color: var(--dark-line);
}
.plan-dark .tick {
  stroke: var(--on-dark);
}
.plan-dark :focus-visible {
  outline-color: var(--on-dark);
}
[data-period-root='yearly'] [data-period='monthly'],
[data-period-root='monthly'] [data-period='yearly'] {
  display: none;
}
.pricing-foot {
  margin-top: 32px;
  text-align: center;
}
@media (max-width: 1099px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 639px) {
  .plans {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- FAQ ---- */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.faq-list {
  border-top: 1px solid var(--line);
}
.faq-list details {
  border-bottom: 1px solid var(--line);
}
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
  padding-block: 18px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary::after {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  transition: transform 0.25s var(--ease);
}
.faq-list details[open] summary::after {
  transform: rotate(45deg);
}
.faq-list details p {
  max-width: 640px;
  padding-bottom: 22px;
  color: var(--muted);
}
@media (max-width: 899px) {
  .faq-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Final call to action ---- */
/* IMG-12 (an empty room, one labelled box on the right) with the words in its empty left half;
   below 1100 px the words sit above the photo. */
.get-section {
  text-align: center;
}
.get-scene {
  position: relative;
}
.get-copy {
  margin-bottom: clamp(40px, 6vw, 64px);
}
@media (min-width: 1100px) {
  .get-copy {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: clamp(40px, 5vw, 72px);
    width: 46%;
    margin: 0;
    transform: translateY(-50%);
    text-align: left;
  }
  .get-copy .app-icon {
    margin-left: 0;
  }
  .get-copy .get-buttons {
    justify-content: flex-start;
  }
  /* A light wash from the left under the words, so the line and the outlined button read
     against the wall and the window light (owner, 6 Nov 2026). */
  .get-copy .button-secondary {
    border-color: rgba(11, 11, 11, 0.6);
    background: rgba(255, 255, 255, 0.6);
  }
  .get-copy .button-secondary:hover {
    border-color: var(--ink);
  }
  .get-scene > .media:not(.media-placeholder)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(243, 243, 241, 0.9),
      rgba(243, 243, 241, 0.78) 38%,
      rgba(243, 243, 241, 0) 62%
    );
    pointer-events: none;
  }
}
/* The app icon as the brand draws it: its own rounded tile, no shadow (BRAND.md "Don't"). */
.app-icon {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto 32px;
}
.get-section .lead {
  margin-top: 18px;
}
.get-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}
.store-badge {
  display: inline-block;
  border-radius: 10px;
}
.store-badge img {
  height: 50px;
  width: auto;
}

/* ---- Footer ---- */
.site-footer {
  padding-block: 32px 40px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.site-footer a {
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--ink);
}

/* ---- /movers ---- */
.problem-lines {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(40px, 5vw, 64px);
}
.problem-lines li {
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.flow {
  display: grid;
  gap: clamp(64px, 8vw, 120px);
}
.flow-step {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}
.flow-step:nth-child(even) .flow-text {
  order: 2;
}
.flow-text .body {
  margin-top: 12px;
}
.flow-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-height: 360px;
  padding: 40px 24px;
  border-radius: 26px;
  background: var(--bg);
}
/* A stage for a fragment without a photo: a tint of the page, never the photo placeholder. */
.section:not(.section-surface) .flow-stage:not(.flow-stage-dark) {
  background: var(--surface);
}
.flow-stage .frag,
.flow-stage .toast {
  position: relative;
  inset: auto;
  transform: none;
}
.flow-stage-dark {
  background: var(--dark-panel);
}
.flow-stage-stack {
  display: grid;
  justify-items: center;
  gap: 16px;
}
.brand-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}
.mover-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--row-line);
  font-weight: 600;
}
.mover-logo {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--surface);
  font-size: 13px;
  font-weight: 700;
}
.offer {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: 32px;
  padding: clamp(32px, 5vw, 64px);
  border-radius: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.offer .lead {
  margin-top: 16px;
}
.movers-cta {
  margin-top: 28px;
}
.offer-facts {
  display: grid;
  gap: 12px;
}
.offer-facts li {
  padding: 20px 24px;
  border-radius: 18px;
  background: var(--bg);
  font-size: 15px;
  color: var(--muted);
}
.offer-facts strong {
  display: block;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.plans-movers {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
  margin-inline: auto;
}
.plan-accept {
  justify-content: center;
}
.plan-accept .plan-amount {
  font-size: 40px;
}
@media (max-width: 899px) {
  .problem-lines,
  .flow-step,
  .brand-row,
  .offer {
    grid-template-columns: minmax(0, 1fr);
  }
  .flow-step:nth-child(even) .flow-text {
    order: 0;
  }
}
@media (max-width: 639px) {
  .plans-movers {
    grid-template-columns: minmax(0, 1fr);
  }
  .flow-stage {
    min-height: 0;
    padding: 28px 16px;
  }
}

/* /movers photos (docs/landing/movers/MOVERS_MEDIA_PROMPT.md): a photo fills a card or section
   behind its content; the fragments stay where they were. */
.problem-split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}
.problem-split .problem-lines {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.problem-split .problem-lines li {
  padding-block: 16px;
}
.photo-stage,
.offer-dark,
.get-photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.photo-stage > .media,
.offer-dark > .media,
.get-photo > .media {
  position: absolute;
  inset: 0;
  z-index: -1;
  aspect-ratio: auto;
  border-radius: inherit;
}
.photo-stage > .media picture,
.offer-dark > .media picture,
.get-photo > .media picture {
  display: block;
  height: 100%;
}
/* Step cards: 5:4 (4:5 on phones) with the fragment along the bottom edge, so the person in
   each photo stays in view above it; the crops put the faces in the upper part. */
.flow .photo-stage {
  aspect-ratio: 5 / 4;
  min-height: 0;
  padding: 24px;
  place-items: end center;
  align-content: end;
}
/* Deliver: the photo stays natural, a dark glow under the toast and the delivery check. */
.photo-stage-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse 80% 60% at 50% 85%,
    rgba(11, 11, 12, 0.66),
    rgba(11, 11, 12, 0.1)
  );
}
/* The invitation sits over the calm lower left of the doorway photo. */
.invite-stage {
  place-items: end start;
}
/* Founding partners: a dark card over the crew photo, shaded from the text side. */
.offer-dark {
  border: 0;
  background: var(--dark-bg);
  color: var(--on-dark);
}
.offer-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(11, 11, 12, 0.92),
    rgba(11, 11, 12, 0.8) 45%,
    rgba(11, 11, 12, 0.45)
  );
}
.offer-dark .lead {
  color: var(--on-dark-muted);
}
.offer-dark .eyebrow {
  color: var(--on-dark-soft);
}
.offer-dark .offer-facts li {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(11, 11, 12, 0.62);
  color: var(--on-dark-muted);
}
.offer-dark .offer-facts strong {
  color: var(--on-dark);
}
/* Final call to action: the dusk truck behind the whole section, darkened for white text. */
.get-photo {
  background: var(--dark-bg);
  color: var(--on-dark);
}
.get-photo > .media {
  border-radius: 0;
}
.get-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    rgba(11, 11, 12, 0.74),
    rgba(11, 11, 12, 0.68) 50%,
    rgba(11, 11, 12, 0.82)
  );
}
.get-photo .lead {
  color: var(--on-dark-muted);
}
.get-photo .button-secondary {
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--on-dark);
}
.get-photo .button-secondary:hover {
  border-color: var(--on-dark);
}
@media (max-width: 899px) {
  .problem-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .offer-dark::after {
    background: linear-gradient(
      rgba(11, 11, 12, 0.9),
      rgba(11, 11, 12, 0.78) 55%,
      rgba(11, 11, 12, 0.6)
    );
  }
}
@media (max-width: 767px) {
  /* Phones: the photo cards are 4:5. */
  .flow-stage.photo-stage {
    aspect-ratio: 4 / 5;
    min-height: 0;
    padding: 16px;
  }
}

.pack-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}
.pack-row .qr {
  width: 56px;
  height: 56px;
}
.pack-status {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.3s var(--ease);
}
.pack-status.is-on {
  color: var(--accent);
}
.room-chip {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--card-border);
  font-size: 14px;
  font-weight: 500;
  transition: opacity 0.45s var(--ease);
}
.room-chip.is-off {
  opacity: 0;
}
.frag .flags {
  margin-top: 12px;
}
.sent {
  font-weight: 500;
  color: var(--accent);
}
.mini-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.mini-button {
  padding: 9px 18px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
}
.mini-button-primary {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surface);
}

/* ---- /business (docs/landing/business/BUSINESS_PAGE_SPEC.md) ---- */
/* Hero: a longer headline than the home page's, on the calm wall left of the office manager. */
.hero-business .display-hero {
  font-size: clamp(42px, 5.8vw, 76px);
}
@media (min-width: 1024px) {
  .hero-business .hero-content .display-hero {
    max-width: 12ch;
  }
  .hero-business .hero-sub {
    max-width: 34ch;
  }
}
.hero-note {
  margin-top: 18px;
  font-size: 14px;
  color: var(--on-dark-muted);
}

/* Trust strip as four short points: one row, 2 × 2 on phones. */
.trust-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 36px;
}
.trust-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.trust-list .tick {
  width: 16px;
  height: 16px;
  margin-top: 0;
}
@media (max-width: 767px) {
  .trust-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    text-align: left;
  }
  .trust-list li {
    align-items: flex-start;
  }
  .trust-list .tick {
    margin-top: 3px;
  }
}

/* What teams track: four photo cards; 2 × 2 on tablets, a sideways row on phones. */
.track-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.track-card .media {
  border-radius: 22px;
}
.track-card .h3 {
  margin-top: 20px;
  font-size: 22px;
}
.track-card .body {
  margin-top: 8px;
}
@media (max-width: 1099px) {
  .track-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 24px;
  }
}
@media (max-width: 767px) {
  .track-scroll {
    margin-inline: calc(-1 * var(--gutter));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .track-scroll::-webkit-scrollbar {
    display: none;
  }
  .track-scroll .track-cards {
    display: flex;
    gap: 16px;
    width: max-content;
    padding-inline: var(--gutter);
  }
  .track-card {
    flex: none;
    width: min(78vw, 320px);
    scroll-snap-align: start;
  }
}

/* How it works: three fragment cards on the light surface, no photos. */
.step-card > .how-stage {
  margin-bottom: 28px;
}
.how-steps .how-stage {
  min-height: 380px;
  padding: 28px 18px;
}
.how-stage .frag {
  width: 100%;
  max-width: 352px;
}
.how-search .search-result {
  min-height: 74px;
}
@media (max-width: 1099px) {
  .steps-3.how-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 64px;
    max-width: 520px;
    margin-inline: auto;
  }
}
@media (max-width: 639px) {
  .how-steps .how-stage {
    min-height: 0;
    padding: 28px 16px;
  }
}
/* F-B6: two states in one place (AI photo, then CSV import); the card keeps the taller one's size. */
.add-frag {
  display: grid;
}
.add-state {
  grid-area: 1 / 1;
  transition: opacity 0.45s var(--ease);
}
.add-state.is-off {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.45s var(--ease),
    visibility 0s linear 0.45s;
}

/* Title with a status pill (check-out, running low). */
.frag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}
.status-pill {
  flex: none;
  padding: 5px 10px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  transition:
    opacity 0.45s var(--ease),
    color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.status-pill.is-on {
  border-color: var(--ink);
  color: var(--ink);
}
.status-pill.pill-low {
  border-color: var(--warn);
  color: var(--warn);
}
.status-pill.is-off {
  opacity: 0;
}
.frag-line {
  padding-top: 10px;
  font-size: 14px;
}
.frag:not(.frag-dark) .missing-title {
  color: var(--warn);
}
.reminder {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  font-size: 14px;
  color: var(--muted);
}
.reminder svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.7;
  stroke-linejoin: round;
}

/* Always know who has it: the card hangs from the photo's bottom edge, clear of the faces. */
.problem-lines.stack-lines {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 32px;
}
.stack-lines li {
  padding-block: 16px;
}
.frag.frag-hang {
  position: relative;
  inset: auto;
  width: 380px;
  max-width: calc(100% - 48px);
  margin: -72px auto 0 24px;
}
@media (max-width: 767px) {
  .frag.frag-hang {
    width: auto;
    max-width: none;
    margin: -48px 16px 0;
  }
}

/* Every site: a dark section over the storeroom photo, four facts and the members card. */
.photo-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.photo-section > .media {
  position: absolute;
  inset: 0;
  z-index: -1;
  aspect-ratio: auto;
  border-radius: 0;
}
.photo-section > .media picture {
  display: block;
  height: 100%;
}
.photo-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(11, 11, 12, 0.92),
    rgba(11, 11, 12, 0.8) 50%,
    rgba(11, 11, 12, 0.62)
  );
}
.sites-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
}
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-top: clamp(40px, 5vw, 56px);
}
.facts li {
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.facts .body {
  margin-top: 8px;
}
.sites-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
}
.sites-stage .frag {
  position: relative;
  inset: auto;
  max-width: 100%;
}
.person {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}
.initial {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--dark-line);
  font-size: 12px;
  font-weight: 600;
}
.fade-row {
  transition:
    opacity 0.45s var(--ease),
    transform 0.45s var(--ease);
}
.fade-row.is-off {
  opacity: 0;
  transform: translateY(6px);
}
@media (max-width: 899px) {
  .sites-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .photo-section::after {
    background: linear-gradient(
      rgba(11, 11, 12, 0.9),
      rgba(11, 11, 12, 0.82) 55%,
      rgba(11, 11, 12, 0.72)
    );
  }
}
@media (max-width: 639px) {
  .facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

/* No surprises on the shelf: two fragments side by side, a short text under each. */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.duo-item .flow-stage {
  min-height: 400px;
}
.duo-item .h3 {
  margin-top: 28px;
}
.duo-item .body {
  max-width: 46ch;
  margin-top: 8px;
}
@media (max-width: 899px) {
  .duo {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }
}
@media (max-width: 639px) {
  .duo-item .flow-stage {
    min-height: 0;
  }
}

/* F-B8: the top of a printed list, with the team's logo and no Thingpath badge. */
.printed-list .frag-title {
  margin-top: 12px;
  font-size: 16px;
}
.list-date {
  margin-top: 2px;
  font-size: 13px;
}
.list-rows li:first-child {
  min-height: 0;
  padding-block: 6px;
  border-top-color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Pricing: Business and Free side by side, a line for movers under them. */
.plans.plans-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
  margin-inline: auto;
}
.pricing-movers {
  margin-top: 10px;
  text-align: center;
}
.pricing-movers a {
  color: var(--ink);
  font-weight: 500;
  text-underline-offset: 4px;
  white-space: nowrap;
}
@media (max-width: 639px) {
  .plans.plans-two {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Final call to action: the start button above the store badges. */
.get-start {
  margin-top: 32px;
}
.get-start + .get-buttons {
  margin-top: 16px;
}

/* ---- The three pages (landing/audiences.json) ---- */
/* Audience tabs: a button to each of the other pages. */
.panel-button {
  margin-top: 28px;
}
/* Under pricing, as part of it: the other two pages, half and half. The whole card is the link
   (its button's ::after covers the card). */
.others-section {
  padding-top: 0;
}
.section:has(+ .others-section) {
  padding-bottom: clamp(64px, 7vw, 104px);
}
.others {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.other-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 460px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 26px;
  background: var(--dark-panel);
  color: var(--on-dark);
}
.other-card > .media {
  position: absolute;
  inset: 0;
  z-index: -1;
  aspect-ratio: auto;
  border-radius: 0;
}
.other-card > .media picture {
  display: block;
  height: 100%;
}
.other-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    rgba(11, 11, 12, 0.12),
    rgba(11, 11, 12, 0.72) 42%,
    rgba(11, 11, 12, 0.9)
  );
}
.other-text {
  padding: clamp(24px, 3vw, 36px);
}
.other-text .eyebrow {
  color: var(--on-dark-muted);
}
.other-text .h3-lg {
  max-width: 18ch;
  margin-top: 8px;
  text-wrap: balance;
}
.other-text .body {
  max-width: 44ch;
  margin-top: 10px;
  color: var(--on-dark-muted);
}
.other-link {
  margin-top: 22px;
}
.other-link::after {
  content: '';
  position: absolute;
  inset: 0;
}
@media (max-width: 767px) {
  .others {
    grid-template-columns: minmax(0, 1fr);
  }
  .other-card {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }
}

/* ---- /get and 404 ---- */
.plain-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--header-h) + 40px) var(--gutter) 64px;
  text-align: center;
}
.plain-page .lead {
  margin-top: 14px;
}

/* ---- Less motion ---- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .caret {
    animation: none;
  }
}