@font-face {
  font-family: Manrope;
  src: url('images/manrope-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('images/ibm-plex-mono-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
/* Values follow packages/design-tokens. One light theme. */
:root {
  --red: #da270f;
  --red-strong: #b01d08;
  --red-deep: rgb(90 6 0 / 38%);
  --ink: #191b1f;
  --ink-2: #4e535b;
  --ink-3: #63686f;
  --ink-soft: #858b93;
  --line: #dfe1e4;
  --line-2: #c3c7cd;
  --paper: #fff;
  --wash: #f4f4f5;
  --ok: #067647;
  --ok-soft: #dcfae6;
  --warn: #b54708;
  --on-ink: #f7f8f8;
  --on-ink-2: #9aa0a8;
  --loc-base: #006c5c;
  --loc-base-soft: #e2f1ee;
  --loc-van: #3448a0;
  --loc-van-soft: #e7eaf6;
  --loc-van2: #a94723;
  --loc-van2-soft: #fbebe3;
  --sans:
    Manrope, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial,
    sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Names still used by the legal and support pages */
  --gray-50: var(--wash);
  --gray-400: var(--ink-3);
  --gray-500: var(--ink-3);
  --gray-600: var(--ink-2);
  --gray-900: var(--ink);
}
@media (prefers-contrast: more) {
  :root {
    --ink-2: #33373d;
    --ink-3: #4e535b;
    --ink-soft: #63686f;
    --line: #a9aeb5;
    --line-2: #6f747b;
    --on-ink-2: #c8ccd2;
  }
}


*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 500 100%/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
p,
figure,
dl,
dd {
  margin: 0;
}
h1,
h2,
h3 {
  font-weight: 800;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.625rem, 6.3vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
}
h2 {
  font-size: clamp(2.125rem, 4.4vw, 3.625rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
h3 {
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
@media (min-width: 641px) {
  h1 {
    letter-spacing: -0.035em;
  }
  h2 {
    letter-spacing: -0.03em;
  }
}
@media (min-width: 1021px) {
  h1 {
    letter-spacing: -0.045em;
  }
  h2 {
    letter-spacing: -0.04em;
  }
}
a {
  color: var(--red-strong);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
button {
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}
[hidden] {
  display: none !important;
}
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.i {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font: 400 0.75rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.label::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--red);
}
.lead {
  max-width: 34em;
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.5;
  color: var(--ink-2);
}
.fine {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-3);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 300;
  padding: 12px 20px;
  border-radius: 8px;
  color: var(--ink);
  background: var(--paper);
  transform: translateY(-150%);
}
.skip-link:focus {
  transform: translateY(0);
}
/* Reduced motion: nothing moves, but colour and opacity still change in a
   short fade. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-property:
      color, background-color, border-color, box-shadow, opacity !important;
    transition-duration: 0.2s !important;
    transition-delay: 0s !important;
  }
}


/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 10px;
  font: 700 0.9375rem/1 var(--sans);
  white-space: nowrap;
  transition:
    background-color 0.2s,
    box-shadow 0.2s,
    transform 0.25s var(--ease);
}
.btn:hover {
  text-decoration: none;
}
.btn:active {
  transform: scale(0.97);
  transition-duration: 0.2s, 0.2s, 0.1s;
}
.btn .i {
  width: 18px;
  height: 18px;
}
.btn-primary {
  color: #fff;
  background: var(--red);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 16%),
    0 1px 2px rgb(176 29 8 / 35%),
    0 10px 24px -12px rgb(218 39 15 / 70%);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    background: var(--red-strong);
  }
  .btn-quiet:hover {
    box-shadow: inset 0 0 0 1px var(--ink-soft);
  }
  .btn-white:hover {
    background: #fff5f3;
  }
}
.btn-primary:active {
  background: var(--red-strong);
}
.btn-quiet {
  color: var(--ink);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.btn-quiet:active {
  box-shadow: inset 0 0 0 1px var(--ink-soft);
}
.btn-white {
  color: var(--red-strong);
  background: #fff;
  box-shadow: 0 12px 30px -12px rgb(60 4 0 / 65%);
}
.btn-white:active {
  background: #fff5f3;
}
.btn-sm {
  height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 0.875rem;
}
/* Small controls keep their size but take a 44px touch area. */
.btn-sm,
.nav-toggle {
  position: relative;
}
.btn-sm::after,
.nav-toggle::after {
  content: '';
  position: absolute;
  inset: -3px;
}
.nav-toggle::after {
  inset: -2px;
}

/* ── Header ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(255 255 255 / 88%);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  transition: background-color 0.2s;
}
.site-header::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 14px;
  background: linear-gradient(rgb(25 27 31 / 7%), rgb(25 27 31 / 0%));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.site-header.scrolled::after {
  opacity: 1;
}
.site-header.menu-open {
  background: var(--paper);
}
.site-header.menu-open::after {
  opacity: 0;
}
@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  .site-header {
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--line);
  }
  .site-header::after {
    display: none;
  }
}
.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 68px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 1.3125rem;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.brand:hover {
  text-decoration: none;
}
.brand img {
  width: 26px;
  flex-shrink: 0;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}
.nav-links a {
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 600;
}
.nav-links a:hover,
.nav-links a:active {
  color: var(--ink);
  text-decoration: none;
}
.nav-links .nav-login {
  margin-left: 8px;
  color: var(--ink);
}
.nav-toggle {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  background: transparent;
  transition: background-color 0.1s;
}
.nav-toggle:active {
  background: rgb(25 27 31 / 7%);
}
.nav-scrim {
  display: none;
}
.nav-toggle .i {
  width: 22px;
  height: 22px;
}

/* ── FAQ (home and support) ── */
.faq-list details {
  border-top: 1px solid var(--line);
}
.faq-list details:last-child {
  border-bottom: 1px solid var(--line);
}
.faq-list summary {
  position: relative;
  padding: 22px 40px 22px 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.45;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background:
    linear-gradient(var(--ink-3), var(--ink-3)) center / 14px 1.75px no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) center / 1.75px 14px no-repeat;
  transition: transform 0.3s var(--ease);
}
.faq-list details[open] summary::after {
  transform: rotate(45deg);
}
.faq-list details > p {
  max-width: 40em;
  padding: 0 40px 24px 0;
  color: var(--ink-2);
}

/* ── Footer ── */
.footer {
  padding-block: 64px 40px;
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.footer-grid > div > p {
  max-width: 22em;
  margin-top: 16px;
  font-size: 0.9375rem;
  color: var(--ink-3);
}
.footer-title {
  margin-bottom: 10px;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0;
}
.footer-grid a:not(.brand) {
  display: block;
  padding: 5px 0;
  color: var(--ink-2);
  font-size: 0.875rem;
}
.footer-grid a:not(.brand):hover,
.footer-grid a:not(.brand):active {
  color: var(--ink);
}
@media (pointer: coarse) {
  .footer-grid a:not(.brand) {
    padding-block: 11px;
  }
}
.footer-bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.footer-bottom p {
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* ── Cookie consent ── */
.consent {
  position: fixed;
  right: 16px;
  bottom: 16px;
  left: 16px;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  max-width: 560px;
  margin-left: auto;
  padding: 16px 18px;
  color: var(--ink-2);
  background: var(--paper);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px var(--line),
    0 16px 40px -16px rgb(25 27 31 / 35%);
  font-size: 0.875rem;
  line-height: 1.5;
}
.consent[hidden] {
  display: none;
}
.consent p {
  flex: 1 1 260px;
  margin: 0;
}
.consent a {
  color: var(--ink);
  text-decoration: underline;
}
.consent-actions {
  display: flex;
  gap: 8px;
}


/* Home page. Layout: one left-aligned column on white; two red brand stages
   open and close the page; quantities are set in mono like bin labels. */

/* ── Hero ── */
.hero {
  padding-top: clamp(48px, 8vw, 112px);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  font: 400 0.78125rem/1.3 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--red);
}
.hero h1 br {
  display: none;
}
.hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 40px;
  margin-top: 36px;
}
.hero-copy {
  display: grid;
  gap: 16px;
}
.audience {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
}
.hero-cta {
  display: grid;
  justify-items: end;
  gap: 12px;
  max-width: 400px;
}
.hero-cta .fine {
  text-align: right;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Brand texture: a faint dot grid that darkens toward the edge, the same
   treatment as the Web onboarding panel. main.js drifts it with the scroll. */
.texture {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--red);
}
.texture::before,
.texture::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.texture::before {
  inset: -44px 0 0 -44px;
  background-image: radial-gradient(
    rgb(255 255 255 / 30%) 1.1px,
    transparent 1.7px
  );
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(
    ellipse at 50% 35%,
    #000 30%,
    transparent 78%
  );
  mask-image: radial-gradient(ellipse at 50% 35%, #000 30%, transparent 78%);
  transform: translate3d(var(--pan, 0px), var(--pan, 0px), 0);
}
.texture::after {
  background: radial-gradient(
    ellipse at 50% 40%,
    transparent 42%,
    var(--red-deep)
  );
}

.stage-wrap {
  margin: clamp(44px, 6vw, 80px) 0 0;
  padding-inline: var(--gutter);
}
.stage {
  max-width: 1320px;
  margin-inline: auto;
  padding: clamp(28px, 5.5vw, 76px) clamp(14px, 5.5vw, 76px) 0;
  border-radius: clamp(20px, 2.4vw, 32px);
}
.shot {
  display: block;
  max-height: clamp(320px, 45vw, 640px);
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  background: #fff;
  box-shadow:
    0 0 0 1px rgb(25 27 31 / 10%),
    0 40px 90px -24px rgb(60 4 0 / 60%);
  transform: perspective(1800px) rotateX(var(--tilt, 0deg));
  transform-origin: 50% 100%;
}
.shot img {
  width: 100%;
}
.ticker {
  position: absolute;
  z-index: 2;
  left: clamp(10px, 2.6vw, 36px);
  bottom: clamp(18px, 4vw, 52px);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 20px);
  padding: 12px 18px 12px 12px;
  border-radius: 14px;
  color: var(--on-ink);
  background: var(--ink);
  box-shadow: 0 22px 44px -14px rgb(0 0 0 / 55%);
  pointer-events: none;
}
.ticker-badge {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  background: rgb(255 255 255 / 14%);
}
.ticker-badge .i {
  width: 16px;
  height: 16px;
  stroke-width: 2.25;
}
.ticker-text {
  display: grid;
  min-width: 0;
}
.ticker-text strong {
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ticker-text span {
  overflow: hidden;
  font: 400 0.75rem/1.4 var(--mono);
  color: var(--on-ink-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ticker.swap .ticker-text,
.ticker.swap .ticker-badge {
  animation: tick-in 0.5s var(--ease);
}
@keyframes tick-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ── Sections ── */
.section {
  padding-block: clamp(80px, 10vw, 144px);
}
.hero + .section {
  margin-top: clamp(64px, 8vw, 112px);
}
.section-ruled {
  border-top: 1px solid var(--line);
}
.section-head {
  display: grid;
  max-width: 820px;
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
}
.split-visual {
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
}
.split-copy h2 {
  margin-bottom: 20px;
}
.wide-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: end;
  gap: clamp(28px, 5vw, 64px);
}
.wide-body {
  display: grid;
  gap: 16px;
  justify-items: start;
}
figure > .fine,
figcaption.fine {
  margin-top: 14px;
}

/* ── Location example ── */
.part {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow:
    0 1px 2px rgb(25 27 31 / 4%),
    0 34px 70px -34px rgb(25 27 31 / 28%);
}
.part-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}
.part-name {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
}
.part-meta {
  margin-top: 2px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.part-col {
  font: 400 0.71875rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.places {
  margin: 0;
  padding: 4px 24px;
  list-style: none;
}
.place {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.place:last-child {
  border-bottom: 0;
}
.place-name {
  font-size: 1rem;
  font-weight: 700;
}
.mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  color: var(--c);
  background: var(--s);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 16%, transparent);
}
.mark .i {
  width: 21px;
  height: 21px;
}
.m-base {
  --c: var(--loc-base);
  --s: var(--loc-base-soft);
}
.m-van {
  --c: var(--loc-van);
  --s: var(--loc-van-soft);
}
.m-van2 {
  --c: var(--loc-van2);
  --s: var(--loc-van2-soft);
}
.qty {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 5px;
  min-width: 96px;
}
.num {
  font: 400 2.125rem/1 var(--mono);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.unit {
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.delta {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  margin-top: -11px;
  white-space: nowrap;
  padding: 2px 7px;
  border-radius: 999px;
  font: 400 0.71875rem/1.4 var(--mono);
}
/* --p runs from 0 (before) to 1 (after) as the chip travels: the source
   pill shows as the chip leaves, the destination pill as it lands. */
.delta.up {
  color: var(--ok);
  background: var(--ok-soft);
  opacity: clamp(0, calc(var(--p, 0) * 4 - 3), 1);
}
.delta.down {
  color: #fff;
  background: var(--ink);
  opacity: clamp(0, calc(var(--p, 0) * 4 - 0.4), 1);
}
.chip {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  padding: 3px 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--ink);
  box-shadow: 0 8px 18px -8px rgb(25 27 31 / 60%);
  font: 400 0.75rem/1.4 var(--mono);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
/* Both status lines share one cell and the button sits under them, so the
   card keeps its height when the example plays. */
.part-foot {
  display: grid;
  justify-items: start;
  gap: 14px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--line);
}
.part-status {
  display: grid;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink-2);
}
.part-status > span {
  grid-area: 1 / 1;
}
.part-status > [hidden] {
  display: block !important;
  visibility: hidden;
}
[data-state='after'] .part-status {
  color: var(--ok);
}
.replay {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px 0 14px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
  transition:
    transform 0.25s var(--ease),
    background-color 0.2s;
}
.replay::after {
  content: '';
  position: absolute;
  inset: -3px;
}
.replay:active {
  background: #2a2d33;
  transform: scale(0.97);
  transition-duration: 0.1s;
}
/* Both labels share one cell, so the button keeps one width. */
.replay-label {
  display: grid;
}
.replay-label > span {
  display: inline-flex;
  grid-area: 1 / 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.replay-label > [hidden] {
  display: inline-flex !important;
  visibility: hidden;
}
.replay .i {
  width: 16px;
  height: 16px;
}

.canvas {
  position: relative;
  isolation: isolate;
  padding: clamp(18px, 3.5vw, 44px);
}
.canvas::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(var(--line-2) 1px, transparent 1.6px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(
    ellipse at center,
    #000 25%,
    transparent 72%
  );
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%);
}
.frame {
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgb(25 27 31 / 9%),
    0 2px 4px rgb(25 27 31 / 4%),
    0 34px 70px -30px rgb(25 27 31 / 32%);
}
.frame img {
  width: 100%;
}
/* ── Restock ── */
.restock-figure {
  margin-top: clamp(40px, 5vw, 64px);
}
.shot-wrap {
  position: relative;
}
.anno {
  position: absolute;
  left: 62.6%;
  top: 76%;
  width: 6.7%;
  height: 9.5%;
  border: 2px solid var(--red);
  border-radius: 8px;
  box-shadow: 0 0 0 5px rgb(218 39 15 / 12%);
  pointer-events: none;
}
.anno span {
  position: absolute;
  right: -2px;
  bottom: calc(100% + 8px);
  padding: 6px 10px;
  border-radius: 8px;
  color: #fff;
  background: var(--red);
  box-shadow: 0 8px 18px -8px rgb(176 29 8 / 60%);
  font-size: 0.78125rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* ── Getting started ── */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}
.step {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(25 27 31 / 4%);
}
.step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.step-num {
  font: 400 0.75rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.step strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1.25rem;
  font-weight: 800;
}
.step p {
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.start-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 20px;
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
}
.start-platforms {
  margin-bottom: 4px;
  font-size: 1.0625rem;
  font-weight: 700;
}

/* ── Pricing ── */
.switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.switch button {
  position: relative;
  z-index: 1;
  height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  color: var(--ink-3);
  background: transparent;
  font-size: 0.875rem;
  font-weight: 700;
  transition:
    color 0.25s,
    transform 0.25s var(--ease);
}
.switch button::before {
  content: '';
  position: absolute;
  inset: -4px 0;
}
.switch button:active {
  transform: scale(0.95);
  transition-duration: 0.25s, 0.1s;
}
.switch button[aria-pressed='true'] {
  color: #fff;
}
.switch-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--ink);
  transition: transform 0.4s var(--ease);
}
[data-billing='yearly'] .switch-thumb {
  transform: translateX(100%);
}
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(40px, 5vw, 56px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow:
    0 1px 2px rgb(25 27 31 / 4%),
    0 40px 80px -48px rgb(25 27 31 / 30%);
}
.plan {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: clamp(28px, 3.4vw, 44px);
}
.plan-dark {
  color: #fff;
  background: var(--ink);
}
.plan h3 {
  font-size: 1.5rem;
  letter-spacing: -0.015em;
}
.plan-for {
  margin-top: 6px;
  font-size: 0.9375rem;
  color: var(--ink-3);
}
.plan-dark .plan-for {
  color: var(--on-ink-2);
}
.cap {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 12px;
}
.cap-label {
  grid-column: 1 / -1;
  margin-bottom: 6px;
  font: 400 0.75rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.plan-dark .cap-label {
  color: var(--on-ink-2);
}
.cap-num {
  font-size: clamp(4rem, 7vw, 6rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.cap-unit {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.fleet {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 36px;
}
.fleet .mark {
  width: 36px;
  height: 36px;
  border-radius: 9px;
}
.fleet .mark .i {
  width: 18px;
  height: 18px;
}
.m-slot {
  --c: var(--ink-2);
  --s: var(--paper);
}
.plan-dark .m-slot {
  --c: #e4e7eb;
  --s: rgb(255 255 255 / 6%);
}
.plan-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.plan-dark .plan-buy {
  border-top-color: rgb(255 255 255 / 12%);
}
.price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.cur {
  align-self: flex-start;
  margin-top: 6px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink-3);
}
.plan-dark .cur,
.plan-dark .per {
  color: var(--on-ink-2);
}
.amount {
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.per {
  margin-left: 4px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-3);
}
.includes-block {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 16px 40px;
  padding: 24px clamp(28px, 3.4vw, 44px);
  border-top: 1px solid var(--line);
}
.includes-title {
  font-size: 0.9375rem;
  letter-spacing: 0;
}
.includes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, max-content));
  gap: 12px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 600;
}
.includes li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.includes .i {
  width: 18px;
  height: 18px;
  color: var(--ok);
  stroke-width: 2.25;
}
.location-note {
  margin-top: 24px;
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.pricing-fine {
  max-width: 62em;
  margin-top: 12px;
}

/* ── FAQ ── */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 88px);
}
.faq-contact {
  margin-top: 20px;
  font-size: 1rem;
}
.faq-contact a {
  font-weight: 700;
}

/* ── Closing ── */
.closing {
  padding-bottom: clamp(64px, 8vw, 104px);
}
.closing-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 40px;
  padding: clamp(40px, 7vw, 100px) clamp(24px, 6vw, 88px);
  border-radius: clamp(22px, 2.6vw, 32px);
  color: #fff;
}
.closing-card h2 {
  max-width: 12ch;
  font-size: clamp(2.375rem, 5.4vw, 4.5rem);
}
.closing-card p {
  max-width: 30em;
  margin-top: 20px;
  font-size: 1.125rem;
  color: #fff;
}
.closing-actions {
  display: grid;
  justify-items: end;
  gap: 14px;
  max-width: 320px;
}
.closing-card .closing-fine {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: right;
  color: #fff;
}

/* ── Motion ──
   Everything below is decoration: content is visible without JavaScript, and
   base.css stops movement for reduced motion. Hover effects are for mouse
   pointers only, and only on things that can be clicked. */
:root {
  interpolate-size: allow-keywords;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}
@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
}
@keyframes settle {
  from {
    transform: perspective(1800px) rotateX(10deg);
  }
}
@keyframes slide-next {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
}
@keyframes slide-prev {
  from {
    opacity: 0;
    transform: translateX(-14px);
  }
}

/* Hero entrance: the text is there at once; the product panel rises and the
   screenshot settles flat. */
.stage-wrap {
  animation: rise 0.9s var(--ease) 0.1s both;
}
.shot {
  animation: settle 1.2s var(--ease) 0.2s both;
}

/* Scroll reveal (classes added by main.js) */
.reveal {
  transition:
    opacity 0.7s var(--ease),
    transform 0.8s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(22px);
}

/* Buttons and links */
.btn .i {
  transition: transform 0.3s var(--ease);
}
.nav-links a:not(.nav-login),
.footer-grid a:not(.brand) {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px
    no-repeat;
  transition:
    background-size 0.3s var(--ease),
    color 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover .i {
    transform: translateX(3px);
  }
  .btn-primary:hover,
  .btn-white:hover {
    transform: translateY(-1px);
  }
  .btn-primary:hover {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 16%),
      0 2px 4px rgb(176 29 8 / 30%),
      0 16px 30px -12px rgb(218 39 15 / 75%);
  }
  .nav-links a:not(.nav-login):hover,
  .footer-grid a:not(.brand):hover {
    background-size: 100% 1.5px;
    text-decoration: none;
  }
  .replay:hover {
    background: #2a2d33;
  }
}
.btn:active {
  transform: translateY(0) scale(0.97);
}

/* Restock: the outline draws in once the screenshot is in view */
.restock-figure .anno {
  transform-origin: 50% 50%;
}
.restock-figure.is-in .anno {
  animation: pop 0.5s var(--ease) 0.5s both;
}
.restock-figure.is-in .anno span {
  animation: rise 0.6s var(--ease) 0.8s both;
}

/* Pricing */
.plans.is-in .fleet .mark {
  animation: pop 0.45s var(--ease) both;
  animation-delay: calc(300ms + var(--i, 0) * 45ms);
}
.amount.slide-next,
.per.slide-next {
  animation: slide-next 0.4s var(--ease);
}
.amount.slide-prev,
.per.slide-prev {
  animation: slide-prev 0.4s var(--ease);
}
.plan-dark {
  background:
    radial-gradient(
      420px circle at var(--mx, 70%) var(--my, 0%),
      rgb(255 255 255 / 7%),
      transparent 70%
    ),
    var(--ink);
}

/* FAQ: smooth open where the browser supports animating details */
.faq-list details::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.4s var(--ease),
    content-visibility 0.4s allow-discrete;
}
.faq-list details[open]::details-content {
  block-size: auto;
}
.faq-list details > p {
  transition: opacity 0.4s;
}
.faq-list details:not([open]) > p {
  opacity: 0;
}
.faq-list summary {
  transition: color 0.2s;
}
.faq-list summary:active {
  color: var(--red-strong);
  transition-duration: 0.1s;
}
@media (hover: hover) and (pointer: fine) {
  .faq-list summary:hover {
    color: var(--red-strong);
  }
  .faq-list summary:hover::after {
    transform: rotate(90deg);
  }
  .faq-list details[open] summary:hover::after {
    transform: rotate(45deg);
  }
}


/* Product sections: a phone frame for real iPhone captures, the scan demo,
   No signal, Tools and the hero phone. */

/* ── Phone frame ──
   The capture itself with a translucent black border, so the background
   shows faintly through the edge, and the Dynamic Island on top. Sized in cqw
   of the frame, so every phone has the same proportions (iPhone 17,
   402 × 874 pt). */
.device {
  container-type: inline-size;
  position: relative;
  border-radius: 16.6% / 7.9%;
  box-shadow:
    0 0 0 1px rgb(12 13 16 / 22%),
    0 26px 48px -22px rgb(25 27 31 / 42%),
    0 70px 110px -50px rgb(25 27 31 / 38%);
}
.device .screen {
  position: relative;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
  border: 3.2cqw solid rgb(12 13 16 / 82%);
  border-radius: 16.6cqw;
  background: #fff padding-box;
}
.device .screen > img {
  display: block;
  width: 100%;
}
.device .screen::after {
  content: '';
  position: absolute;
  z-index: 5;
  top: 2.75cqw;
  left: 50%;
  width: 29.5cqw;
  height: 8.6cqw;
  border-radius: 99px;
  background: #000;
  transform: translateX(-50%);
}

/* ── Hero ── */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 32px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 700;
}
.hero-facts li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.hero-facts .i {
  width: 18px;
  height: 18px;
  color: var(--red);
}
.stage-wrap {
  position: relative;
}
.stage-phone {
  position: absolute;
  z-index: 3;
  right: calc(var(--gutter) + clamp(20px, 5vw, 80px));
  bottom: 0;
  width: clamp(150px, 19vw, 262px);
  animation: phone-in 1.1s var(--ease) 0.35s both;
}
@keyframes phone-in {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
}
.stage-caption {
  max-width: 1320px;
  margin: 14px auto 0;
}

/* ── Checks list ── */
.checks {
  display: grid;
  gap: 14px;
  margin: 28px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
}
.checks li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
}
.checks .i {
  margin-top: 1px;
  color: var(--red);
}

/* ── Camera screens ──
   The capture's camera area is black; it is blended (screen) over an
   illustrated shelf, so the real card, buttons and status bar stay as
   captured while the camera shows something to scan. */
.screen.camera {
  background: #000;
}
.cam {
  position: absolute;
  inset: 0 0 auto;
  height: 56%;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse 70% 32% at 50% 33%,
      rgb(255 244 226 / 22%),
      transparent 70%
    ),
    linear-gradient(#0f1013 0%, #222327 18%, #1c1d20 70%, #000 100%);
}
.cam::before,
.cam::after {
  content: '';
  position: absolute;
}
/* the shelf rail above and the front of the bin or case */
.cam::before {
  left: -10%;
  right: -10%;
  top: 15%;
  height: 2.6%;
  background: linear-gradient(#d9dce0, #6b6f75);
  opacity: 0.55;
  filter: blur(6px);
}
.cam::after {
  left: 4%;
  right: 4%;
  top: 21%;
  height: 56%;
  border-radius: 6%;
  filter: blur(1.5px);
}
.cam-bin::after {
  background:
    linear-gradient(#5a8edb, #5a8edb) top / 100% 7% no-repeat,
    linear-gradient(
      90deg,
      rgb(0 0 0 / 30%),
      transparent 22%,
      transparent 78%,
      rgb(0 0 0 / 30%)
    ),
    linear-gradient(#3a6fc4, #1d4486);
}
.cam-case::after {
  background:
    linear-gradient(#141414, #141414) 50% 3% / 38% 6% no-repeat,
    linear-gradient(
      90deg,
      rgb(0 0 0 / 32%),
      transparent 22%,
      transparent 78%,
      rgb(0 0 0 / 32%)
    ),
    linear-gradient(#c23a28, #6c150c);
}
/* everything outside the scan frame is dimmed, as in the app */
.cam-dim {
  position: absolute;
  z-index: 1;
  left: 17%;
  right: 17%;
  top: 44.5%;
  height: 34%;
  border-radius: 6%;
  box-shadow: 0 0 0 100vmax rgb(4 5 6 / 52%);
}
.cam-layer {
  position: relative;
  isolation: isolate;
  background: #000;
}
.cam-layer + .cam-layer {
  position: absolute;
  inset: 0;
}
.cam-shot {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  mix-blend-mode: screen;
}
.cam-label {
  position: absolute;
  z-index: 3;
  left: 24%;
  top: 27.6%;
  width: 52%;
  padding: 2.2% 3% 1.6%;
  border-radius: 4px;
  color: #17181a;
  background: linear-gradient(172deg, #fbfaf6, #ebe8e0);
  box-shadow:
    0 3px 10px rgb(0 0 0 / 50%),
    0 0 0 0.5px rgb(0 0 0 / 25%);
  transform: rotate(-1.5deg);
  font-size: 2.6cqw;
  line-height: 1.3;
}
.cam-label b {
  display: block;
  margin-bottom: 1.5%;
  font-weight: 800;
  white-space: nowrap;
}
.cam-label img {
  width: 100%;
}
.cam-label-qr {
  left: 33%;
  top: 25.6%;
  width: 34%;
  text-align: center;
  transform: rotate(2deg);
}
.cam-label-qr b {
  font-size: 2.2cqw;
}
.cam-label-qr img {
  width: 82%;
  margin: 0 auto;
}

/* ── Scan demo ── */
.record-split {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}
.scan-demo {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  padding-bottom: 8px;
}
.scan-demo::before {
  content: '';
  position: absolute;
  inset: 4% 0 10%;
  z-index: -1;
  background-image: radial-gradient(var(--line-2) 1px, transparent 1.6px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(
    ellipse at center,
    #000 25%,
    transparent 70%
  );
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 70%);
}
.scan-device {
  width: min(100%, 330px);
}
.scan-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.cam-after {
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
[data-state='after'] .cam-after {
  opacity: 1;
}
.tap {
  position: absolute;
  z-index: 4;
  left: 20%;
  top: 92%;
  width: 18%;
  aspect-ratio: 1;
  margin: -9% 0 0 -9%;
  border-radius: 50%;
  background: rgb(255 255 255 / 55%);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 85%);
  opacity: 0;
  pointer-events: none;
}
.scan-demo.tapping .tap {
  animation: tap 0.7s var(--ease);
}
@keyframes tap {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  35% {
    opacity: 1;
    transform: scale(0.8);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
.scan-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px 11px 11px;
  border-radius: 14px;
  color: var(--on-ink);
  background: var(--ink);
  box-shadow: 0 22px 44px -14px rgb(0 0 0 / 50%);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.4s var(--ease),
    transform 0.5s var(--ease);
}
[data-state='after'] .scan-chip {
  opacity: 1;
  transform: none;
  transition-delay: 0.25s;
}
.scan-chip-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  background: var(--ok);
}
.scan-chip-icon .i {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}
.scan-chip > span:last-child {
  display: grid;
}
.scan-chip strong {
  font-size: 0.875rem;
}
.scan-chip strong + span {
  font: 400 0.75rem/1.4 var(--mono);
  color: var(--on-ink-2);
}
.scan-replay {
  gap: 8px;
}

/* ── No signal ── */
.offline-split {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}
.offline-phone {
  width: min(100%, 320px);
  margin: 0 auto;
}
.sync-steps {
  display: grid;
  gap: 4px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.sync-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  padding-bottom: 16px;
}
.sync-steps li:not(:last-child)::before,
.sync-steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 48px;
  bottom: 2px;
  left: 21px;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
}
.sync-steps li:not(:last-child)::after {
  background: var(--ok);
  transform-origin: top;
}
.sync-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--c);
  background: var(--s);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent);
}
.sync-steps li:nth-child(1) .sync-icon {
  --c: var(--red-strong);
  --s: #fdecea;
}
.sync-steps li:nth-child(2) .sync-icon {
  --c: var(--warn);
  --s: #fef0c7;
}
.sync-steps li:nth-child(3) .sync-icon {
  --c: var(--ok);
  --s: var(--ok-soft);
}
.sync-icon .i {
  width: 20px;
  height: 20px;
}
.sync-steps strong {
  display: block;
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 800;
}
.sync-steps p {
  margin-top: 2px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ── Tools ── */
.tools-section {
  overflow-x: clip;
}
.tools-note {
  margin-top: 24px;
}
.tools-figure .canvas {
  padding-bottom: clamp(36px, 6vw, 80px);
}
.label-sheet {
  width: 62%;
  margin: 6% 0 0 4%;
  padding: 2.4%;
  border-radius: 6px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgb(25 27 31 / 8%),
    0 1px 2px rgb(25 27 31 / 6%),
    0 30px 60px -28px rgb(25 27 31 / 35%);
  transform: rotate(-2.2deg);
}
.tools-phone {
  position: absolute;
  right: clamp(8px, 3vw, 36px);
  bottom: 0;
  width: 38%;
  max-width: 280px;
}

/* ── Motion ── */
.offline-phone,
.tools-phone {
  transition: transform 0.9s var(--ease);
}
.offline-figure.reveal:not(.is-in) .offline-phone {
  transform: translateY(30px);
}
.tools-figure.reveal:not(.is-in) .tools-phone {
  transform: translate(20px, 28px) rotate(4deg);
}
.sync-steps li::after {
  transition: transform 0.9s var(--ease);
  transition-delay: calc(var(--n, 0) * 450ms + 300ms);
}
.sync-steps.reveal:not(.is-in) li::after {
  transform: scaleY(0);
}
.sync-steps .sync-icon {
  transition:
    transform 0.5s var(--ease),
    opacity 0.5s;
  transition-delay: calc(var(--n, 0) * 450ms);
}
.sync-steps.reveal:not(.is-in) .sync-icon {
  transform: scale(0.8);
  opacity: 0.4;
}

/* ── Responsive ── */
@media (max-width: 1020px) {
  .record-split,
  .offline-split {
    grid-template-columns: 1fr;
  }

  .offline-figure {
    order: 2;
  }
}
@media (max-width: 640px) {
  .stage-phone {
    display: none;
  }
  .hero-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    font-size: 0.875rem;
  }
  .scan-device {
    width: min(78%, 300px);
  }
  .tools-figure .canvas,
  .offline-figure .canvas {
    padding-inline: 0;
  }
  .label-sheet {
    width: 66%;
    margin-left: 0;
  }
  .tools-phone {
    width: 44%;
    right: 0;
  }
}

/* ── Split with the picture first on wide screens ── */
.split-reverse {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.split-reverse > .split-copy {
  order: 2;
}

/* ── AI import ──
   The spreadsheet is an illustration of the visitor's own file; the Check
   step under it is the real capture of importing that file. */
.import-figure .canvas {
  padding-bottom: clamp(18px, 3vw, 36px);
}
.sheet-wrap {
  position: relative;
  z-index: 3;
  width: 82%;
}
.sheet {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgb(25 27 31 / 10%),
    0 2px 4px rgb(25 27 31 / 5%),
    0 30px 60px -30px rgb(25 27 31 / 30%);
}
.sheet-bar {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  padding: 1.6cqw 2.2cqw;
  border-bottom: 1px solid var(--line);
  background: #f7f8f9;
  font: 400 2.1cqw/1.2 var(--mono);
  color: var(--ink-2);
}
.sheet-file {
  display: grid;
  place-items: center;
  width: 3.8cqw;
  height: 3.8cqw;
  border-radius: 0.8cqw;
  color: #fff;
  background: #1f7a45;
}
.sheet-file .i {
  width: 2.6cqw;
  height: 2.6cqw;
}
.sheet-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 2.15cqw;
  line-height: 1.35;
}
.sheet-grid .c-n {
  width: 4.5%;
}
.sheet-grid .c-a {
  width: 13%;
}
.sheet-grid .c-b {
  width: 25%;
}
.sheet-grid .c-c {
  width: 15%;
}
.sheet-grid .c-d {
  width: 13.5%;
}
.sheet-grid .c-e {
  width: 14%;
}
.sheet-grid .c-f {
  width: 15%;
}
.sheet-grid th,
.sheet-grid td {
  overflow: hidden;
  padding: 1cqw 1.2cqw;
  border-right: 1px solid #e6e8eb;
  border-bottom: 1px solid #e6e8eb;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: top;
}
.sheet-grid thead th,
.sheet-grid tbody th {
  background: #f4f5f6;
  font: 400 1.8cqw/1.3 var(--mono);
  color: #8a8f96;
  text-align: center;
}
.sheet-grid tbody td {
  color: var(--ink);
}
.sheet-grid tr:last-child > * {
  border-bottom: 0;
}
.sheet-head td {
  font-weight: 800;
  background: color-mix(in srgb, var(--red) calc(var(--lit, 0) * 7%), #fff);
  transition: background-color 0.4s var(--ease);
  transition-delay: calc(var(--k, 0) * 140ms + 300ms);
}
.sheet-head td:nth-child(2) {
  --k: 0;
}
.sheet-head td:nth-child(3) {
  --k: 1;
}
.sheet-head td:nth-child(4) {
  --k: 2;
}
.sheet-head td:nth-child(5) {
  --k: 3;
}
.sheet-head td:nth-child(6) {
  --k: 4;
}
.sheet-head td:nth-child(7) {
  --k: 5;
}
.sheet-head td {
  --lit: 1;
}
.map {
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  width: max-content;
  max-width: 100%;
  margin-top: 0.8cqw;
  padding: 0.3cqw 1cqw;
  border-radius: 99px;
  color: #fff;
  background: var(--red);
  font-size: 1.75cqw;
  font-weight: 700;
  transition:
    opacity 0.4s var(--ease),
    transform 0.5s var(--ease);
  transition-delay: calc(var(--k, 0) * 140ms + 300ms);
}
.map::before {
  content: '✦';
  font-size: 0.9em;
}
.ai-chip {
  position: absolute;
  z-index: 3;
  left: 5%;
  bottom: 0;
  translate: 0 55%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px 11px 11px;
  border-radius: 14px;
  color: var(--on-ink);
  background: var(--ink);
  box-shadow: 0 22px 44px -14px rgb(0 0 0 / 50%);
  transition:
    opacity 0.5s var(--ease),
    transform 0.6s var(--ease);
  transition-delay: 1.3s;
}
.ai-chip-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  background: var(--red);
}
.ai-chip-icon .i {
  width: 16px;
  height: 16px;
}
.ai-chip > span:last-child {
  display: grid;
}
.ai-chip strong {
  font-size: 0.875rem;
}
.ai-chip strong + span {
  font: 400 0.75rem/1.4 var(--mono);
  color: var(--on-ink-2);
}
.import-shot {
  position: relative;
  z-index: 2;
  width: 76%;
  margin: 58px 0 0 auto;
  aspect-ratio: 1832 / 1150;
}
.import-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.import-figure.reveal:not(.is-in) .sheet-head td {
  --lit: 0;
}
.import-figure.reveal:not(.is-in) .map {
  opacity: 0;
  transform: translateY(4px) scale(0.85);
}
.import-figure.reveal:not(.is-in) .ai-chip {
  opacity: 0;
  transform: translateY(10px);
}
.import-shot {
  transition: transform 0.9s var(--ease) 0.9s;
}
.import-figure.reveal:not(.is-in) .import-shot {
  transform: translateY(26px);
}

/* ── Reports ── */
.report-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 12px 28px;
  margin: 28px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 700;
}
.report-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.report-list .i {
  width: 28px;
  height: 28px;
  padding: 5px;
  border-radius: 8px;
  color: var(--red-strong);
  background: #fdecea;
  stroke-width: 2;
}
.reports-note {
  margin-top: 22px;
}

@media (max-width: 1020px) {
  .split-reverse {
    grid-template-columns: 1fr;
  }
  .split-reverse > .split-copy {
    order: 0;
  }
}
@media (max-width: 640px) {
  .sheet-wrap {
    width: 100%;
  }
  .import-shot {
    width: 88%;
    margin-top: 40px;
  }
  .report-list {
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    font-size: 0.875rem;
  }
}

/* ── Coming soon (comingSoon.html) ── */
.soon-bar {
  display: block;
  padding: 10px var(--gutter);
  color: #fff;
  background: var(--red);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}
.soon-bar span {
  margin-left: 6px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.soon-bar:hover {
  color: #fff;
  background: var(--red-strong);
  text-decoration: none;
}
/* ── Stoccr 2 hero mark (comingSoon.html) ──
   The version number cut from the same red panel as the stages. */
.v2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: clamp(30px, 4.5vw, 52px);
  column-gap: clamp(14px, 2vw, 28px);
  row-gap: 14px;
}
.v2-name {
  font-size: clamp(3rem, 8.4vw, 7.25rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.055em;
}
.v2-two {
  display: block;
  margin: -0.08em 0 -0.09em -0.06em;
  padding: 0.04em 0.05em 0;
  font-size: clamp(6.5rem, 17vw, 15rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.06em;
  color: transparent;
  background:
    radial-gradient(rgb(255 255 255 / 34%) 1.1px, transparent 1.7px)
      var(--pan, 0px) var(--pan, 0px) / 14px 14px,
    linear-gradient(160deg, #ec3a1f, var(--red) 45%, var(--red-strong));
  -webkit-background-clip: text;
  background-clip: text;
  animation: v2-two-in 1.1s var(--ease) 0.15s both;
}
@keyframes v2-two-in {
  from {
    clip-path: inset(100% 0 0 0);
    transform: translateY(18%);
  }
  to {
    clip-path: inset(-10% 0 0 0);
  }
}
.v2-note {
  display: grid;
  gap: 6px;
  padding-bottom: 0.35em;
  font: 400 0.8125rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  animation: rise 0.8s var(--ease) 0.7s both;
}
.v2-note span:first-child {
  color: var(--red-strong);
}

@media (max-width: 640px) {
  .v2 {
    column-gap: 10px;
  }
  .v2-note {
    flex-basis: 100%;
  }
}


/* ── Legal Pages ────────────────────── */

.legal {
  max-width: 680px;
  margin: 0 auto;
  padding: 3rem 2rem 5rem;
}

.legal h1 {
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
}

.legal .last-updated {
  font-size: 0.875rem;
  color: var(--gray-400);
  margin-bottom: 2.5rem;
}

.legal h2 {
  font-size: 1.2rem;
  color: var(--gray-900);
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
  scroll-margin-top: 1rem;
}

.legal p,
.legal li {
  font-size: 0.95rem;
  color: var(--gray-600);
  line-height: 1.8;
  margin-bottom: 0.75rem;
}

.legal ul {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.legal li {
  margin-bottom: 0.375rem;
}

/* ── Support Page ───────────────────── */

.support {
  max-width: 680px;
  margin: 0 auto;
  padding: 3rem 2rem 5rem;
}

.support h1 {
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
}

.support-subtitle {
  color: var(--gray-500);
  font-size: 1.05rem;
  margin-bottom: 3rem;
}

.support-contact {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 3rem;
}

.support-contact h2 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.support-contact p {
  color: var(--gray-600);
  font-size: 0.95rem;
}

.support-contact a {
  font-weight: 600;
}

.support h2.faq-heading {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.support-links {
  margin-top: 3rem;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.support-links a {
  font-weight: 600;
  font-size: 0.95rem;
}


@media (min-width: 1021px) {
  .hero h1 br {
    display: inline;
  }
}

@media (max-width: 1020px) {
  .split,
  .wide-head,
  .faq-grid {
    grid-template-columns: 1fr;
  }
  .wide-head {
    align-items: start;
  }
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .footer-grid > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .nav {
    flex-wrap: wrap;
    gap: 12px 16px;
  }
  .nav-cta {
    margin-left: auto;
  }
  /* Without JavaScript the links stay visible as a second row. */
  .nav-links {
    order: 3;
    width: 100%;
    margin-left: 0;
    padding-bottom: 12px;
    gap: 20px;
    overflow-x: auto;
  }
  .js .nav-toggle {
    display: grid;
  }
  /* The menu drops from the header and goes back up the same way. */
  .js .nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: grid;
    gap: 0;
    width: auto;
    padding: 4px var(--gutter) 16px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 30px -20px rgb(25 27 31 / 20%);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition:
      opacity 0.2s,
      transform 0.25s var(--ease),
      visibility 0s 0.25s;
  }
  .js .nav-links.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition:
      opacity 0.2s,
      transform 0.25s var(--ease),
      visibility 0s;
  }
  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgb(25 27 31 / 24%);
    visibility: hidden;
    opacity: 0;
    transition:
      opacity 0.25s,
      visibility 0s 0.25s;
  }
  .menu-open + .nav-scrim {
    visibility: visible;
    opacity: 1;
    transition:
      opacity 0.25s,
      visibility 0s;
  }
  .js .nav-links a {
    padding: 14px 0;
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-size: 1.0625rem;
    font-weight: 700;
  }
  .js .nav-links a:first-child {
    border-top: 0;
  }
  .js .nav-links .nav-login {
    margin-left: 0;
  }
  .hero-row,
  .closing-card {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .hero-cta,
  .closing-actions {
    justify-items: start;
  }
  .hero-cta .fine,
  .closing-card .closing-fine {
    text-align: left;
  }
  .steps,
  .plans,
  .includes-block {
    grid-template-columns: 1fr;
  }
  .steps {
    gap: 12px;
  }
  .includes {
    grid-template-columns: repeat(2, minmax(0, max-content));
  }
}

@media (max-width: 640px) {
  .stage {
    padding-bottom: 14px;
  }
  .shot {
    max-height: 440px;
    border-radius: 12px;
    transform: none;
    animation: none;
  }
  .ticker {
    position: relative;
    left: auto;
    bottom: auto;
    margin: -30px 8px 0;
    padding: 9px 14px 9px 9px;
  }
  .ticker-badge {
    width: 26px;
    height: 26px;
  }
  .ticker-text strong {
    font-size: 0.8125rem;
  }
  .includes {
    grid-template-columns: 1fr;
  }
  .places,
  .part-head,
  .part-foot {
    padding-inline: 16px;
  }
  .place {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 12px;
  }
  .place .mark {
    width: 36px;
    height: 36px;
    border-radius: 9px;
  }
  .num {
    font-size: 1.75rem;
  }
  .qty {
    min-width: 70px;
  }
  .restock-figure .canvas {
    padding: 0;
  }
  /* The phone capture: the label sits under the table, clear of the rows. */
  .anno {
    left: 77.5%;
    top: 60.5%;
    width: 14%;
    height: 8%;
  }
  .anno span {
    top: calc(170% + 10px);
    bottom: auto;
    font-size: 0.6875rem;
    padding: 4px 7px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}