@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand (same values as the app's landing, privacy and station pages) */
  --bg: #fffaf6;
  --surface: #ffffff;
  --text: #232d3b;
  --muted: #5d6673;
  --line: #eadfd6;
  --accent: #f5824a;
  --accent-soft: rgba(245, 130, 74, 0.32);
  --button: #232d3b;
  --button-text: #ffffff;
  --glow: rgba(245, 130, 74, 0.18);

  /* The station screen is a camera feed: dark in both themes */
  --screen: #141a23;
  --screen-2: #1b232f;
  --screen-line: rgba(255, 255, 255, 0.09);
  --screen-text: #f3f4f6;
  --screen-muted: #9aa4b2;
  --ok: #3ccf8e;
  --bad: #ff6b6b;
  --warn: #ffb547;
  --rec: #ff4d4d;

  /* The savings calculator sits on its own dark band in both themes */
  --band: #1f2833;
  --band-text: #f3f4f6;
  --band-muted: #aab3c0;
  --band-line: rgba(255, 255, 255, 0.07);

  /* The setup scene's desk */
  --desk: #ecd8c2;
  --desk-edge: #dcc1a3;
  --gear: #3b4553;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161c25;
    --surface: #1d2531;
    --text: #f3f4f6;
    --muted: #a7b0bd;
    --line: #2e3846;
    --accent-soft: rgba(245, 130, 74, 0.3);
    --button: #f5824a;
    --button-text: #1b140f;
    --glow: rgba(245, 130, 74, 0.12);
    --screen: #10151c;
    --screen-2: #161d27;
    --band: #10151c;
    --desk: #3b342e;
    --desk-edge: #2e2925;
    --gear: #566173;
  }
}

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01";
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: -20vmax -20vmax auto auto;
  width: 70vmax;
  height: 70vmax;
  background: radial-gradient(closest-side, var(--glow), transparent);
  pointer-events: none;
  z-index: 0;
}

a {
  color: inherit;
}

.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 0 8px;
}

.brand {
  display: block;
  line-height: 0;
  border-radius: 8px;
}

.brand img {
  display: block;
  width: 168px;
  height: auto;
}

main {
  flex: 1;
}

/* Hero */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
  padding: 56px 0 64px;
}

.pill {
  display: inline-flex;
  text-decoration: none;
  transition: border-color 0.15s;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  padding: 7px 14px 7px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.pill:hover {
  border-color: var(--muted);
}

.pill-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.pill-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
  0% {
    transform: scale(0.6);
    opacity: 0.8;
  }
  80%,
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

h1 {
  margin: 0;
  font-size: clamp(2.75rem, 6.4vw, 4.75rem);
  line-height: 1.02;
  font-weight: 760;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

h1 .mark {
  white-space: nowrap;
  background: linear-gradient(transparent 62%, var(--accent-soft) 62%, var(--accent-soft) 92%, transparent 92%);
  padding: 0 0.04em;
}

.hero-sub {
  margin: 12px 0 0;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  line-height: 1.15;
  font-weight: 720;
  letter-spacing: -0.025em;
}

.lead {
  margin: 24px 0 0;
  max-width: 34em;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--muted);
  text-wrap: pretty;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 36px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  font-size: 1rem;
  font-weight: 650;
  text-decoration: none;
  color: var(--button-text);
  background: var(--button);
  border-radius: 12px;
  transition: transform 0.15s, filter 0.15s;
}

.button:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.button-ghost {
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line);
}

.button-ghost:hover {
  filter: none;
  border-color: var(--muted);
}

.cta-note {
  margin: 16px 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

.cta-note a {
  color: var(--text);
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
}

.nowrap {
  white-space: nowrap;
}

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

/* Station preview */

.station {
  margin: 0;
  justify-self: end;
  width: 100%;
  max-width: 500px;
}

.station-screen {
  position: relative;
  overflow: hidden;
  color: var(--screen-text);
  background: radial-gradient(120% 90% at 50% 35%, var(--screen-2), var(--screen));
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 30px 60px -20px rgba(20, 26, 35, 0.45),
    0 12px 24px -12px rgba(20, 26, 35, 0.3);
  font-variant-numeric: tabular-nums;
}

.station-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--screen-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--screen-line) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
  opacity: 0.6;
  pointer-events: none;
}

.hud {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.rec {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(255, 77, 77, 0.14);
  color: #ffb3b3;
}

.rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rec);
  animation: blink 1.2s steps(2, jump-none) infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.25;
  }
}

.timer {
  color: var(--screen-muted);
}

.mode {
  margin-left: auto;
  padding: 4px 9px;
  border-radius: 6px;
  color: var(--screen-muted);
  border: 1px solid var(--screen-line);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.6875rem;
}

.mode[data-returns] {
  color: var(--warn);
  border-color: rgba(255, 181, 71, 0.35);
}

.scene {
  position: relative;
  height: 230px;
  margin: 14px 18px 0;
  display: grid;
  place-items: center;
}

.corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0 solid rgba(255, 255, 255, 0.55);
}

.corner.tl {
  top: 0;
  left: 0;
  border-top-width: 2px;
  border-left-width: 2px;
  border-top-left-radius: 6px;
}

.corner.tr {
  top: 0;
  right: 0;
  border-top-width: 2px;
  border-right-width: 2px;
  border-top-right-radius: 6px;
}

.corner.bl {
  bottom: 0;
  left: 0;
  border-bottom-width: 2px;
  border-left-width: 2px;
  border-bottom-left-radius: 6px;
}

.corner.br {
  bottom: 0;
  right: 0;
  border-bottom-width: 2px;
  border-right-width: 2px;
  border-bottom-right-radius: 6px;
}

.box {
  position: relative;
  top: 12px; /* room above for things held up to the camera */
  width: 205px;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.35));
}

.box .flap-back {
  fill: #b97a45;
}

.box .flap-back.alt {
  fill: #a96d3c;
}

.box .inside {
  fill: #5a3d26;
}

.box .inside-wall {
  fill: #6e4b2f;
}

.box .face-left {
  fill: #c98a52;
}

.box .face-right {
  fill: #e2a066;
}

.box .flap-front {
  fill: #d9955b;
}

.box .flap-front.alt {
  fill: #eeb27c;
}

/* Shut, the flaps show their outsides to the light: the top is the palest side of the box */
.box [data-flap].is-shut {
  fill: #efb57e;
}

.box .flap-front[data-flap].is-shut {
  fill: #e7a56b;
}

.box {
  transition: opacity 0.3s;
}

.box.is-leaving {
  opacity: 0;
}

/* Packing tape along the seam and down the front, run out from the back */
.box .tape {
  visibility: hidden;
}

.box .tape.is-set,
.box .tape.is-on,
.box .tape.is-cut {
  visibility: visible;
}

.box .tape-top {
  stroke: rgba(120, 72, 32, 0.4);
  stroke-width: 13;
  stroke-dasharray: 1;
}

.box .tape-side {
  fill: rgba(120, 72, 32, 0.4);
  transform-box: fill-box;
  transform-origin: top;
}

.box .tape.is-on .tape-top {
  animation: tape-run 0.5s ease-in-out both;
}

.box .tape.is-on .tape-side {
  animation: tape-down 0.25s 0.45s ease-out both;
}

.box .tape.is-cut {
  opacity: 0;
  transition: opacity 0.3s;
}

@keyframes tape-run {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes tape-down {
  from {
    transform: scaleY(0);
  }
}

/* The shipping label, slapped on */
.box .ship-label {
  visibility: hidden;
  transform-box: fill-box;
  transform-origin: center;
}

.box .ship-label.is-set,
.box .ship-label.is-on {
  visibility: visible;
}

.box .ship-label.is-on {
  animation: label-slap 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.box .ship-label.is-return .to {
  fill: var(--accent);
}

@keyframes label-slap {
  from {
    opacity: 0;
    transform: translateY(-26px) scale(1.7) rotate(-12deg);
  }
  50% {
    opacity: 1;
  }
}

/* Things going into (and out of) the box. --dx/--dy (set by main.js) reach the spot above the box
   where each is held up to the camera, a little bigger for being closer; with no state a thing
   simply rests in its slot. */

.thing {
  --held: translate(var(--dx), var(--dy)) scale(1.4);
}

.box .tone-sage {
  color: #9bb8a0;
}

.box .tone-blue {
  color: #6f97d8;
}

.thing.is-held {
  transform: var(--held);
  animation: thing-appear 0.3s ease-out;
}

.thing.is-wrong {
  filter: drop-shadow(0 0 3px var(--bad)) drop-shadow(0 0 8px rgba(255, 107, 107, 0.6));
}

.thing.is-in {
  animation: thing-drop 0.55s both;
}

.thing.is-out {
  opacity: 0;
  transform: translate(calc(var(--dx) + 150px), var(--dy)) scale(1.4);
  animation: thing-out 0.5s ease-in;
}

.thing.is-lifted {
  transform: var(--held);
  animation: thing-lift 0.45s ease-out;
}

.thing.is-aside {
  opacity: 0;
  transform: translate(calc(var(--dx) - 150px), var(--dy)) scale(1.4);
  animation: thing-aside 0.45s ease-in;
}

@keyframes thing-appear {
  from {
    opacity: 0;
    transform: translate(var(--dx), calc(var(--dy) - 18px)) scale(1.4);
  }
}

/* Falls in under gravity, then settles */
@keyframes thing-drop {
  from {
    transform: var(--held);
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }
  78% {
    transform: translate(0, 3px);
    animation-timing-function: ease-out;
  }
  to {
    transform: none;
  }
}

/* A shake, then pushed off to the side */
@keyframes thing-out {
  from {
    opacity: 1;
    transform: var(--held);
  }
  12% {
    transform: translate(calc(var(--dx) - 5px), var(--dy)) scale(1.4);
  }
  24% {
    transform: translate(calc(var(--dx) + 5px), var(--dy)) scale(1.4);
  }
  36% {
    opacity: 1;
    transform: var(--held);
  }
}

@keyframes thing-lift {
  from {
    transform: none;
  }
}

@keyframes thing-aside {
  from {
    opacity: 1;
    transform: var(--held);
  }
}

.scanline {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow:
    0 0 12px 2px rgba(245, 130, 74, 0.7),
    0 0 40px 6px rgba(245, 130, 74, 0.25);
  opacity: 0;
}

.scanline.is-scanning {
  animation: scan 0.9s ease-in-out;
}

@keyframes scan {
  0% {
    top: 6%;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    top: 82%;
    opacity: 0;
  }
}

.stamp {
  position: absolute;
  right: 14px;
  top: 16px;
  padding: 6px 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ok);
  border: 1.5px solid currentColor;
  border-radius: 6px;
  transform: rotate(-6deg);
  opacity: 0;
}

.stamp.is-on {
  opacity: 1;
  animation: stamp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes stamp {
  from {
    opacity: 0;
    transform: rotate(-6deg) scale(1.6);
  }
  to {
    opacity: 1;
    transform: rotate(-6deg) scale(1);
  }
}

.panel {
  position: relative;
  margin: 16px;
  padding: 14px 16px 12px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--screen-line);
  border-radius: 14px;
  backdrop-filter: blur(6px);
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.order {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.order [data-order] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.station-name {
  flex: none;
  font-size: 0.75rem;
  color: var(--screen-muted);
}

.items {
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 102px;
}

.item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 0.875rem;
  border-top: 1px solid var(--screen-line);
  animation: rowIn 0.25s ease-out;
}

.item:first-child {
  border-top: 0;
}

@keyframes rowIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.item .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item .qty {
  color: var(--screen-muted);
  font-size: 0.8125rem;
}

.tick {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--screen-muted);
  transition: background 0.2s, border-color 0.2s;
}

.item[data-state="ok"] .tick {
  background: var(--ok);
  border-color: var(--ok);
}

.item[data-state="ok"] .tick::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid #0e1a14;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.item[data-state="bad"] {
  color: var(--bad);
}

.item[data-state="bad"] .tick {
  background: var(--bad);
  border-color: var(--bad);
}

.item[data-state="bad"] .tick::before,
.item[data-state="bad"] .tick::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2.5px;
  width: 1.8px;
  height: 8px;
  background: #2a0f0f;
  transform: rotate(45deg);
}

.item[data-state="bad"] .tick::after {
  transform: rotate(-45deg);
}

.item[data-state="bad"] .qty {
  color: var(--bad);
}

.item.is-leaving {
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.3s, transform 0.3s;
}

.grade {
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.grade[data-grade="resellable"] {
  color: var(--ok);
  background: rgba(60, 207, 142, 0.12);
}

.grade[data-grade="damaged"] {
  color: var(--warn);
  background: rgba(255, 181, 71, 0.12);
}

.grade[data-grade="order"] {
  color: var(--accent);
  background: rgba(245, 130, 74, 0.14);
}

.grade[data-grade="stock"] {
  color: var(--screen-muted);
  background: rgba(255, 255, 255, 0.07);
}

.status {
  margin: 8px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--screen-line);
  font-size: 0.8125rem;
  color: var(--screen-muted);
}

.status[data-tone="done"] {
  color: var(--ok);
}

.status[data-tone="bad"] {
  color: var(--bad);
}

/* Features */

.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding: 8px 0 56px;
}

.feature {
  padding: 26px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.icon {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon .fill {
  fill: var(--accent);
  stroke: none;
}

.feature h2 {
  margin: 16px 0 6px;
  font-size: 1.0625rem;
  font-weight: 680;
  letter-spacing: -0.01em;
}

.feature p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* Why it works: labelling every item, recording every box */

.why {
  padding: 40px 0 72px;
}

.why-head {
  max-width: 40em;
  margin: 0 auto 36px;
  text-align: center;
}

.why-head h2 {
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.08;
  font-weight: 760;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.why-head p:last-child {
  margin: 16px auto 0;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--muted);
  text-wrap: pretty;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.why-card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  scroll-margin-top: 24px;
}

.why-card h3 {
  margin: 16px 0 10px;
  font-size: 1.375rem;
  line-height: 1.2;
  font-weight: 720;
  letter-spacing: -0.02em;
}

.why-lead {
  margin: 0;
  font-size: 1rem;
  color: var(--muted);
  text-wrap: pretty;
}

.why-list {
  display: grid;
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.why-list li {
  position: relative;
  padding-left: 30px;
  font-size: 0.9375rem;
  color: var(--muted);
  text-wrap: pretty;
}

.why-list strong {
  color: var(--text);
  font-weight: 650;
}

/* A tick in a soft accent circle */
.why-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--accent-soft);
}

.why-list li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  width: 4px;
  height: 8px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.why-note {
  margin: auto 0 0;
  padding-top: 22px;
  font-size: 0.875rem;
  color: var(--muted);
  font-style: italic;
  text-wrap: pretty;
}

/* Savings calculator */

.savings {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Full width: out of the page column to the edges of the window */
  margin: 8px calc(50% - 50vw) 0;
  padding: 96px 0 104px;
  color: var(--band-text);
  background: var(--band);
}

/* The same camera grid as the station preview, fading out from a warm glow at the top */
.savings::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(245, 130, 74, 0.22), transparent 70%),
    linear-gradient(var(--band-line) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, var(--band-line) 1px, transparent 1px) 0 0 / 40px 40px;
  mask-image: linear-gradient(#000, rgba(0, 0, 0, 0.25) 70%);
  -webkit-mask-image: linear-gradient(#000, rgba(0, 0, 0, 0.25) 70%);
  pointer-events: none;
}

.savings-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

.savings-head {
  max-width: 44em;
  margin: 0 auto 44px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 14px;
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.savings-head h2 {
  margin: 0;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.05;
  font-weight: 760;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.savings-head p:last-child {
  margin: 18px auto 0;
  max-width: 36em;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--band-muted);
  text-wrap: pretty;
}

.savings-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  overflow: hidden;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow:
    0 40px 80px -32px rgba(0, 0, 0, 0.55),
    0 16px 32px -16px rgba(0, 0, 0, 0.35);
}

.savings-inputs {
  display: grid;
  gap: 28px;
  padding: 32px;
}

/* Packing / Returns / With Boxwitness */
.savings-inputs .group {
  margin: 0 0 -12px;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.savings-inputs .group:not(:first-child) {
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.field label {
  font-size: 0.9375rem;
  font-weight: 600;
}

.number {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 4px;
  width: 116px;
  height: 40px;
  padding: 0 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.number:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.number input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 650;
  text-align: right;
  -moz-appearance: textfield;
  appearance: textfield;
}

.number input:focus-visible {
  outline: none; /* the box around it shows focus */
}

.number input::-webkit-inner-spin-button,
.number input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.affix {
  color: var(--muted);
  font-weight: 500;
}

.slider {
  --fill: 50%;
  display: none; /* shown once the calculator runs */
  width: 100%;
  height: 22px;
  margin: 12px 0 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.savings.is-live .slider {
  display: block;
}

.slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--accent) var(--fill), var(--line) var(--fill));
}

.slider::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  box-shadow: 0 2px 6px rgba(20, 26, 35, 0.18);
  -webkit-appearance: none;
  appearance: none;
}

.slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--line);
}

.slider::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}

.slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  box-shadow: 0 2px 6px rgba(20, 26, 35, 0.18);
}

.hint {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
  text-wrap: pretty;
}

.savings-result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px;
  background: linear-gradient(160deg, var(--glow), transparent 70%);
  border-left: 1px solid var(--line);
}

.kicker {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted);
}

.big {
  margin: 6px 0 0;
  font-size: clamp(2.75rem, 5.4vw, 3.75rem);
  line-height: 1.05;
  font-weight: 760;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.big .figure {
  background: linear-gradient(transparent 62%, var(--accent-soft) 62%, var(--accent-soft) 92%, transparent 92%);
  padding: 0 0.04em;
}

.savings[data-losing] .big .figure {
  background: none;
}

.per {
  margin-left: 2px;
  font-size: 0.4em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
}

.sub {
  margin: 8px 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

.plan {
  margin: 16px 0 0;
  font-size: 0.875rem;
  color: var(--muted);
  text-wrap: pretty;
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0 0;
}

.stats > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.stats dt {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--muted);
}

.stats dd {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stats dd .per {
  font-size: 0.65em;
}

.breakeven {
  margin: 20px 0 24px;
  font-size: 0.9375rem;
}

.savings-result .button {
  align-self: flex-start;
}

.savings-how {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: how;
}

.savings-how li {
  position: relative;
  padding: 0 0 0 44px;
  counter-increment: how;
}

.savings-how li::before {
  content: counter(how);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent);
  border: 1.5px solid rgba(245, 130, 74, 0.5);
  border-radius: 50%;
}

.savings-how h3 {
  margin: 4px 0 4px;
  font-size: 1rem;
  font-weight: 680;
}

.savings-how p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--band-muted);
}

.savings-note {
  max-width: 52em;
  margin: 48px auto 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--band-muted);
  text-wrap: pretty;
}

/* Top bar: Made in Canada, and the App Store, on every page */

.topbar {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 18px;
  padding: 9px 16px;
  font-size: 0.8125rem;
  color: var(--band-text);
  background: var(--band);
}

.topbar .made-in {
  margin: 0;
  color: var(--band-text);
}

.topbar .flag {
  box-shadow: none;
}

.topbar-link {
  color: var(--band-muted);
  text-decoration: none;
}

.topbar-link:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Header menu */

.menu {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
}

.menu a,
.top-login {
  font-size: 0.9375rem;
  font-weight: 550;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.menu a:hover,
.top-login:hover {
  color: var(--text);
}

.menu a[aria-current="page"] {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: 28px;
}

.button-small {
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.9375rem;
  border-radius: 10px;
  white-space: nowrap;
}

/* Below desktop width the menu folds into a button (no JavaScript: a details element) */
.menu-mobile {
  display: none;
  position: relative;
}

.menu-mobile summary {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  list-style: none;
  cursor: pointer;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.menu-mobile summary::-webkit-details-marker {
  display: none;
}

.menu-mobile summary svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.menu-mobile[open] summary {
  border-color: var(--muted);
}

.menu-panel {
  position: absolute;
  right: 0;
  top: 52px;
  z-index: 10;
  display: grid;
  width: min(300px, calc(100vw - 32px));
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 48px -20px rgba(20, 26, 35, 0.35);
}

.menu-panel a {
  padding: 11px 12px;
  font-size: 1rem;
  font-weight: 550;
  color: var(--text);
  text-decoration: none;
  border-radius: 10px;
}

.menu-panel a:hover,
.menu-panel a[aria-current="page"] {
  background: var(--bg);
}

.menu-panel a[aria-current="page"] {
  color: var(--accent);
}

/* Inner pages: their own hero */

.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
  padding: 56px 0 56px;
}

.page-hero.solo {
  grid-template-columns: minmax(0, 46em);
}

.page-hero h1 {
  font-size: clamp(2.4rem, 5.2vw, 3.9rem);
}

.page-hero .lead {
  max-width: 36em;
}

.tag-new {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  vertical-align: 2px;
}

/* Section heads */

.block {
  padding: 40px 0 64px;
}

.head {
  max-width: 42em;
  margin: 0 0 32px;
}

.head.center {
  margin: 0 auto 36px;
  text-align: center;
}

.head h2 {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  line-height: 1.08;
  font-weight: 760;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.head p:last-child:not(.eyebrow) {
  margin: 14px 0 0;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--muted);
  text-wrap: pretty;
}

.head.center p:last-child:not(.eyebrow) {
  margin-inline: auto;
}

/* Numbered steps */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.steps > li {
  padding: 24px 24px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  counter-increment: step;
}

.steps > li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 14px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-radius: 50%;
}

.steps h3 {
  margin: 0 0 6px;
  font-size: 1.0625rem;
  font-weight: 680;
  letter-spacing: -0.01em;
}

.steps p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted);
  text-wrap: pretty;
}

/* Cards */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.cards.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cards.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
  padding: 26px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.card h3 {
  margin: 14px 0 6px;
  font-size: 1.0625rem;
  font-weight: 680;
  letter-spacing: -0.01em;
}

.card p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted);
  text-wrap: pretty;
}

.card p + p {
  margin-top: 8px;
}

.card .why-list {
  margin-top: 14px;
  gap: 10px;
}

.block-note {
  margin: 18px 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.more {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
}

/* The three flows on the home page */

.flows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.flow {
  display: flex;
  flex-direction: column;
  padding: 28px 26px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
}

.flow h3 {
  margin: 14px 0 4px;
  font-size: 1.375rem;
  font-weight: 720;
  letter-spacing: -0.02em;
}

.flow > p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

.flow ol {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: flow;
}

.flow li {
  position: relative;
  padding-left: 34px;
  font-size: 0.9375rem;
  color: var(--muted);
  counter-increment: flow;
  text-wrap: pretty;
}

.flow li strong {
  color: var(--text);
  font-weight: 650;
}

.flow li::before {
  content: counter(flow);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  border: 1.5px solid var(--accent-soft);
  border-radius: 50%;
}

.flow .more {
  margin-top: auto;
  padding-top: 18px;
}

/* The Android station app: a card under the home setup scene, and a card on the setup page */

.phone-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px 22px;
  margin-top: 28px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.phone-option h3 {
  margin: 0 0 4px;
  font-size: 1.0625rem;
  font-weight: 680;
  letter-spacing: -0.01em;
}

.phone-option p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* Google's badge carries its own transparent padding (keep it, per their guidelines) */
.play-badge {
  display: inline-block;
  line-height: 0;
  margin: -9px;
  border-radius: 10px;
}

.play-badge img {
  display: block;
  width: auto;
  height: 62px;
}

.android-card .play-badge {
  margin-top: 10px;
}

@media (max-width: 760px) {
  .phone-option {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .phone-option .play-badge {
    justify-self: start;
  }
}

/* Text beside a picture */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
}

.split .head {
  margin-bottom: 0;
}

.split .why-list {
  margin-top: 22px;
}

/* A small station screen (packing and returns pages): the preview's panel, standing still */

.station-screen.mini {
  margin: 0;
  max-width: 460px;
  justify-self: end;
  width: 100%;
}

.station-screen.mini .panel {
  margin-top: 14px;
}

/* A Proof PDF, drawn: paper is white in both themes */

.doc {
  justify-self: end;
  width: 100%;
  max-width: 460px;
  padding: 26px 26px 22px;
  font-size: 0.8125rem;
  color: #232d3b;
  background: #fff;
  border-radius: 10px;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.04),
    0 30px 60px -24px rgba(20, 26, 35, 0.35),
    0 12px 24px -12px rgba(20, 26, 35, 0.18);
  font-variant-numeric: tabular-nums;
}

.doc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid #232d3b;
}

.doc-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.verdict {
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #0f7a4d;
  border: 1.5px solid currentColor;
  border-radius: 6px;
}

.doc-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 14px 0;
}

.doc-meta dt {
  font-size: 0.6875rem;
  color: #6b7480;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.doc-meta dd {
  margin: 1px 0 0;
  font-weight: 650;
}

.doc-items {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #e6e2dd;
}

.doc-items li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid #e6e2dd;
}

.doc-photo {
  width: 28px;
  height: 22px;
  border-radius: 4px;
  background: linear-gradient(135deg, #e9d5c0, #c99a6e);
}

.doc-photo.alt {
  background: linear-gradient(135deg, #cfe3dd, #3d8780);
}

.doc-photo.note {
  background: linear-gradient(135deg, #fbf6f0, #f5824a);
}

.doc-ok {
  font-weight: 700;
  color: #0f7a4d;
}

.doc-foot {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  font-size: 0.6875rem;
  color: #6b7480;
  word-break: break-all;
}

.doc-foot b {
  color: #232d3b;
}

/* A supplier email, and what Boxwitness read from it */

.mail {
  justify-self: end;
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 460px;
}

.mail-msg,
.mail-read {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  font-size: 0.875rem;
}

.mail-msg dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  margin: 0 0 12px;
}

.mail-msg dt {
  color: var(--muted);
}

.mail-msg dd {
  margin: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-lines span {
  display: block;
  height: 8px;
  margin-top: 8px;
  border-radius: 4px;
  background: var(--line);
}

.mail-lines span:nth-child(2) {
  width: 82%;
}

.mail-lines span:nth-child(3) {
  width: 64%;
}

.mail-arrow {
  justify-self: center;
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--accent);
}

.mail-read {
  color: var(--screen-text);
  background: radial-gradient(120% 90% at 50% 35%, var(--screen-2), var(--screen));
  border-color: transparent;
}

.mail-read h3 {
  margin: 0 0 10px;
  font-size: 0.9375rem;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.mail-read h3 span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ok);
}

.mail-read ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mail-read li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid var(--screen-line);
}

.mail-read p {
  margin: 10px 0 0;
  padding-top: 10px;
  font-size: 0.8125rem;
  color: var(--screen-muted);
  border-top: 1px solid var(--screen-line);
}

.dest {
  flex: none;
  padding: 2px 8px;
  font-size: 0.6875rem;
  font-weight: 650;
  border-radius: 5px;
  color: var(--accent);
  background: rgba(245, 130, 74, 0.14);
}

.dest.stock {
  color: var(--screen-muted);
  background: rgba(255, 255, 255, 0.07);
}

/* An analytics dashboard, drawn (example figures) */

.dash {
  justify-self: end;
  width: 100%;
  max-width: 500px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 30px 60px -30px rgba(20, 26, 35, 0.3);
  font-variant-numeric: tabular-nums;
}

.dash-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.dash-tabs span {
  padding: 8px 10px;
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.dash-tabs .on {
  color: var(--text);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.dash-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.dash-kpis div {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.dash-kpis dt {
  font-size: 0.75rem;
  color: var(--muted);
}

.dash-kpis dd {
  margin: 2px 0 0;
  font-size: 1.125rem;
  font-weight: 700;
}

.dash-kpis small {
  margin-left: 6px;
  font-size: 0.6875rem;
  font-weight: 650;
  color: #0f7a4d;
}

.dash-chart {
  display: block;
  width: 100%;
  height: auto;
}

.dash-chart .bar {
  fill: var(--accent);
}

.dash-chart .base {
  stroke: var(--line);
  stroke-width: 1;
}

.dash-chart text {
  font-size: 9px;
  fill: var(--muted);
}

.dash-caption {
  margin: 8px 0 0;
  font-size: 0.75rem;
  color: var(--muted);
}

/* Metric lists (analytics page) */

.metric-list {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.metric-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.9375rem;
  color: var(--muted);
}

.metric-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
}

/* Pricing */

.plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 22px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
}

.plan-card.featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.plan-flag {
  position: absolute;
  top: -11px;
  left: 22px;
  padding: 3px 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
}

.plan-card h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}

.plan-price {
  margin: 12px 0 0;
  font-size: 2.5rem;
  line-height: 1;
  font-weight: 760;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.plan-price span {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
}

.plan-year {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

.plan-card .why-list {
  margin: 18px 0 22px;
  gap: 10px;
}

.plan-card .button {
  margin-top: auto;
}

.plan-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.plan-notes p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.plan-notes strong {
  color: var(--text);
}

/* FAQ */

.faq {
  max-width: 50em;
}

.faq h2 {
  margin: 40px 0 6px;
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  position: relative;
  padding: 18px 40px 18px 0;
  font-size: 1.0625rem;
  font-weight: 650;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 14px;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--accent);
}

.faq details[open] summary::after {
  content: "–";
}

.faq details > div {
  padding: 0 0 20px;
  color: var(--muted);
}

.faq details p {
  margin: 0;
  text-wrap: pretty;
}

.faq details p + p,
.faq details ol,
.faq details ul {
  margin-top: 10px;
}

.faq details ol,
.faq details ul {
  padding-left: 1.2em;
}

.faq details li + li {
  margin-top: 4px;
}

.faq a,
.steps p a {
  color: var(--text);
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

/* Closing call to action on inner pages: the same dark band as the calculator */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 24px calc(50% - 50vw) 0;
  padding: 80px 24px 88px;
  text-align: center;
  color: var(--band-text);
  background: var(--band);
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(245, 130, 74, 0.22), transparent 70%),
    linear-gradient(var(--band-line) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, var(--band-line) 1px, transparent 1px) 0 0 / 40px 40px;
  mask-image: linear-gradient(#000, rgba(0, 0, 0, 0.25) 80%);
  -webkit-mask-image: linear-gradient(#000, rgba(0, 0, 0, 0.25) 80%);
}

.cta-band h2 {
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.08;
  font-weight: 760;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.cta-band p {
  margin: 14px auto 0;
  max-width: 34em;
  color: var(--band-muted);
}

.cta-band .cta {
  justify-content: center;
}

.cta-band .button:not(.button-ghost) {
  color: #1b140f;
  background: var(--accent);
}

.cta-band .button-ghost {
  color: var(--band-text);
  border-color: rgba(255, 255, 255, 0.25);
}

/* The setup scene: a computer with Chrome and a webcam over the packing desk. setup.js moves it
   through the steps by setting data-* on the figure; the markup is the finished scene, so it reads
   right without JavaScript or with reduced motion. */

.setup {
  margin: 0;
}

.setup-scene {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transition: opacity 0.35s;
}

.setup.is-resetting .setup-scene {
  opacity: 0;
}

.setup .desk-top {
  fill: var(--desk);
}

.setup .desk-edge {
  fill: var(--desk-edge);
}

.setup .mon-foot,
.setup .mon-neck {
  fill: #9aa4b2;
}

.setup .mon {
  fill: #232d3b;
  stroke: rgba(255, 255, 255, 0.08);
}

.setup .mon-cam {
  fill: #0b0f15;
}

.setup .chrome-tabs {
  fill: #dee1e6;
}

.setup .chrome-tab,
.setup .chrome-bar {
  fill: #fff;
}

.setup .tab-icon {
  fill: var(--accent);
}

.setup .chrome-tabtext {
  font-size: 9.5px;
  fill: #3c4043;
}

.setup .chrome-nav,
.setup .omni-lock {
  fill: none;
  stroke: #80868b;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.setup .omnibox {
  fill: #f1f3f4;
}

.setup .omni-text {
  font-size: 10px;
  fill: #202124;
}

.setup .page {
  fill: var(--screen);
}

.setup .scr {
  opacity: 0;
  transition: opacity 0.35s;
}

.setup[data-screen="pair"] .scr-pair,
.setup[data-screen="connected"] .scr-connected,
.setup[data-screen="live"] .scr-live {
  opacity: 1;
}

.setup .pair-title {
  font-size: 14px;
  font-weight: 650;
  fill: #f3f4f6;
}

.setup .pair-code {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: 4px;
  fill: #fff;
}

.setup .pair-hint {
  font-size: 10.5px;
  fill: #9aa4b2;
}

.setup .ok-dot {
  fill: var(--ok);
}

.setup .ok-tick {
  fill: none;
  stroke: #0e1a14;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.setup .view {
  fill: #0b0f15;
}

.setup .view-corners {
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 2;
}

.setup .mini-box {
  fill: #c98a52;
}

.setup .mini-in {
  fill: #5a3d26;
}

.setup .mini-item,
.setup .mini-label,
.setup .mini-slip,
.setup .rec-chip,
.setup .row,
.setup .side-order {
  opacity: 0;
  transition: opacity 0.3s;
}

.setup .mi1 {
  fill: #efe4d2;
}

.setup .mi2 {
  fill: #3d8780;
}

.setup .mi3 {
  fill: #fbf6f0;
}

.setup .mini-label,
.setup .mini-slip rect {
  fill: #fbf6f0;
}

.setup .mini-slip path {
  fill: none;
  stroke: #232d3b;
  stroke-width: 1.5;
}

.setup .rec-chip rect {
  fill: rgba(255, 77, 77, 0.2);
}

.setup .rec-chip circle {
  fill: var(--rec);
}

.setup .rec-chip text {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  fill: #ffb3b3;
}

.setup .side {
  fill: #1b232f;
}

.setup .side-small {
  font-size: 9.5px;
  fill: #9aa4b2;
}

.setup .side-order {
  font-size: 12.5px;
  font-weight: 700;
  fill: #f3f4f6;
}

.setup .row circle {
  fill: var(--ok);
}

.setup .row path {
  fill: none;
  stroke: #0e1a14;
  stroke-width: 1.6;
}

.setup .row text {
  font-size: 10.5px;
  fill: #f3f4f6;
}

.setup .side-status {
  font-size: 9.5px;
  font-weight: 650;
  fill: #9aa4b2;
}

.setup[data-items="1"] :is(.mi1, .r1),
.setup[data-items="2"] :is(.mi1, .mi2, .r1, .r2),
.setup[data-items="3"] :is(.mi1, .mi2, .mi3, .r1, .r2, .r3),
.setup[data-label="on"] .mini-label,
.setup[data-slip="shown"] .mini-slip,
.setup[data-rec="on"] :is(.rec-chip, .side-order),
.setup[data-saved="on"] .side-order {
  opacity: 1;
}

.setup[data-saved="on"] .side-status {
  fill: var(--ok);
}

.setup .print-body {
  fill: #e3e6ea;
}

.setup .print-slot {
  fill: #232d3b;
}

.setup .print-led {
  fill: var(--ok);
}

.setup .print-paper {
  fill: #fbf6f0;
  stroke: #ddd3c9;
  transform: translateY(30px);
  transition: transform 0.6s ease-out;
}

.setup[data-label="printing"] .print-paper {
  transform: none;
}

.setup .scale-top {
  fill: #d5dae0;
}

.setup .scale-base {
  fill: #b8c0ca;
}

.setup .scale-screen {
  fill: #0b0f15;
}

.setup .scale-read {
  font-size: 6.5px;
  font-weight: 700;
  fill: var(--ok);
}

.setup .flap-l {
  fill: #b97a45;
}

.setup .flap-r {
  fill: #a96d3c;
}

.setup .inside {
  fill: #5a3d26;
}

.setup .face {
  fill: #e2a066;
}

.setup .lid {
  fill: #d8955b;
}

.setup .lid-tape,
.setup .mini-tape {
  fill: rgba(251, 246, 240, 0.55);
}

.setup .mini-lid {
  fill: #d8955b;
}

.setup :is(.lid, .lid-tape, .mini-lid, .mini-tape) {
  opacity: 0;
  transition: opacity 0.35s;
}

.setup :is(.flap-l, .flap-r) {
  transition: opacity 0.35s;
}

.setup[data-sealed="on"] :is(.lid, .lid-tape, .mini-lid, .mini-tape) {
  opacity: 1;
}

.setup[data-sealed="on"] :is(.flap-l, .flap-r) {
  opacity: 0;
}

.setup .face-r {
  fill: #c98a52;
}

.setup .item {
  opacity: 0;
  transform: translateY(-130px);
  transition:
    transform 0.55s cubic-bezier(0.55, 0, 1, 0.45),
    opacity 0.2s;
}

.setup .it1 {
  fill: #efe4d2;
}

.setup .it2 {
  fill: #3d8780;
}

.setup .it3 {
  fill: #fbf6f0;
}

.setup[data-items="1"] .it1,
.setup[data-items="2"] :is(.it1, .it2),
.setup[data-items="3"] :is(.it1, .it2, .it3) {
  opacity: 1;
  transform: none;
}

/* Closed: the lid hides what's inside */
.setup[data-sealed="on"] .item {
  opacity: 0;
}

.setup .box-label rect:first-child {
  fill: #fbf6f0;
}

.setup .bl-to {
  fill: #232d3b;
}

.setup .box-label path {
  stroke: #232d3b;
  stroke-width: 1.1;
}

.setup .box-label {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1.5) rotate(-10deg);
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.2s;
}

.setup[data-label="on"] .box-label {
  opacity: 1;
  transform: none;
}

.setup .slip rect {
  fill: #fff;
  stroke: #e6e2dd;
}

.setup .slip-qr {
  fill: none;
  stroke: #232d3b;
  stroke-width: 2;
}

.setup .slip-lines {
  stroke: #cfd5dc;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.setup .slip {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: translate(-110px, 70px) rotate(-12deg);
  transition:
    transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.4s;
}

.setup[data-slip="shown"] .slip {
  opacity: 1;
  transform: none;
}

.setup .cone {
  fill: url(#setup-cone);
  opacity: 0;
  transition: opacity 0.6s;
}

.setup[data-cam="down"] .cone {
  opacity: 1;
}

.setup .arm-clamp,
.setup .arm-pole,
.setup .arm-bar {
  fill: var(--gear);
}

.setup .arm-joint,
.setup .cam-body {
  fill: #232d3b;
}

.setup .cam {
  transform-box: view-box;
  transform-origin: 628px 64px;
  transform: rotate(-32deg);
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.setup[data-cam="down"] .cam {
  transform: none;
}

.setup .cam-lens-ring {
  fill: #10151c;
  stroke: var(--accent);
  stroke-width: 2;
}

.setup .cam-lens {
  fill: #2c3a4d;
}

.setup .cam-led {
  fill: #6b7480;
}

.setup[data-rec="on"] .cam-led {
  fill: var(--rec);
}

.setup .admin {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.35s,
    transform 0.35s;
}

.setup[data-admin="on"] .admin {
  opacity: 1;
  transform: none;
}

.setup .admin-card {
  fill: var(--surface);
  stroke: var(--line);
  filter: drop-shadow(0 18px 28px rgba(20, 26, 35, 0.28));
}

.setup .admin-title {
  font-size: 12.5px;
  font-weight: 700;
  fill: var(--text);
}

.setup .admin-label {
  font-size: 10.5px;
  fill: var(--muted);
}

.setup .admin-field {
  fill: var(--bg);
  stroke: var(--accent);
  stroke-width: 1.5;
}

.setup .admin-code {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  fill: var(--text);
}

.setup .admin-btn {
  fill: var(--button);
  transition: filter 0.15s;
}

.setup[data-press="on"] .admin-btn {
  filter: brightness(1.35);
}

.setup .admin-btntext {
  font-size: 11.5px;
  font-weight: 650;
  fill: var(--button-text);
}

.setup .tags text {
  font-size: 13px;
  font-weight: 600;
  fill: var(--muted);
}

.setup ~ .block-note {
  text-align: center;
}

/* The five steps under the scene, the current one marked */
.setup-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: setup;
}

.setup-steps li {
  padding: 12px 4px 0;
  font-size: 0.875rem;
  color: var(--muted);
  border-top: 3px solid var(--line);
  counter-increment: setup;
  transition:
    border-color 0.3s,
    color 0.3s;
  text-wrap: pretty;
}

.setup-steps li::before {
  content: counter(setup);
  display: block;
  margin-bottom: 4px;
  font-weight: 800;
  color: var(--accent);
}

.setup-steps strong {
  display: block;
  font-weight: 650;
  color: var(--text);
}

.setup-steps li[aria-current] {
  color: var(--text);
  border-top-color: var(--accent);
}

/* Footer */

.foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 32px 48px;
  padding: 48px 0 28px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--muted);
}

.foot p {
  margin: 0;
}

.foot-brand {
  display: grid;
  justify-items: start;
  gap: 14px;
}

.foot-brand .brand img {
  width: 150px;
}

.foot-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.foot-cols div {
  display: grid;
  align-content: start;
  gap: 10px;
}

.foot-cols h2 {
  margin: 0 0 4px;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}

.foot-cols a {
  color: var(--muted);
  text-decoration: none;
}

.foot-cols a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.foot-base {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
}

/* Google's badge needs its trademark line where there's room */
.foot-legal {
  grid-column: 1 / -1;
  margin: -24px 0 0;
  font-size: 0.75rem;
}

.made-in {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text);
}

.flag {
  flex: none;
  width: 22px;
  height: 11px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--line);
}

/* The flag in the site's own colours: brand orange on its cream */
.flag .flag-bar {
  fill: var(--accent);
}

.flag .flag-field {
  fill: #fffaf6;
}

/* Entrance */

.hero-copy > *,
.station,
.feature {
  animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero-copy > :nth-child(2) {
  animation-delay: 0.06s;
}

.hero-copy > :nth-child(3) {
  animation-delay: 0.12s;
}

.hero-copy > :nth-child(4) {
  animation-delay: 0.18s;
}

.hero-copy > :nth-child(5) {
  animation-delay: 0.22s;
}

.hero-copy > :nth-child(6) {
  animation-delay: 0.26s;
}

.station {
  animation-delay: 0.2s;
}

.feature:nth-child(1) {
  animation-delay: 0.3s;
}

.feature:nth-child(2) {
  animation-delay: 0.36s;
}

.feature:nth-child(3) {
  animation-delay: 0.42s;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* Layout */

@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 44px;
    padding: 40px 0 48px;
  }

  .station {
    justify-self: center;
  }

  .savings-card {
    grid-template-columns: 1fr;
  }

  .savings-result {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 760px) {
  .features {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .why-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .savings {
    padding: 72px 0 80px;
  }

  .savings-how {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 480px) {
  .page {
    padding: 0 16px;
  }

  .top {
    padding-top: 20px;
  }

  .brand img {
    width: 140px;
  }

  .hero {
    padding-top: 28px;
  }

  .pill {
    font-size: 0.75rem;
  }

  .cta {
    flex-direction: column;
    align-items: stretch;
  }

  .scene {
    height: 200px;
  }

  .station-name {
    display: none;
  }

  .box {
    width: 175px;
  }

  .savings-inner {
    padding: 0 16px;
  }

  .why-card {
    padding: 24px 20px;
  }

  .savings-head {
    margin-bottom: 32px;
  }

  .savings-inputs,
  .savings-result {
    padding: 24px 20px;
  }

  .stats {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .stats > div {
    flex-direction: row;
    align-items: baseline;
  }

  .savings-result .button {
    align-self: stretch;
  }
}

/* Pages: narrower screens */

@media (max-width: 1079px) {
  .menu,
  .top-login {
    display: none;
  }

  .menu-mobile {
    display: block;
  }

  .top-actions {
    margin-left: auto;
    gap: 10px;
  }
}

@media (max-width: 960px) {
  .page-hero,
  .split {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .station-screen.mini,
  .doc,
  .mail,
  .dash {
    justify-self: center;
  }

  .flows,
  .cards,
  .cards.four,
  .steps.four,
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .foot {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .setup-steps {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .setup-steps li {
    position: relative;
    padding: 6px 0 6px 36px;
    border-top: 0;
    border-left: 3px solid var(--line);
  }

  .setup-steps li[aria-current] {
    border-left-color: var(--accent);
  }

  .setup-steps li::before {
    position: absolute;
    top: 6px;
    left: 13px;
    margin: 0;
  }

  .setup-steps strong {
    display: inline;
  }

  .steps,
  .flows,
  .cards,
  .cards.two,
  .plan-notes {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  /* The scene shrinks to about half size on a phone: larger captions keep them readable */
  .setup .tags text {
    font-size: 16px;
  }

  .cards.four,
  .steps.four,
  .plans,
  .foot-cols {
    grid-template-columns: 1fr;
  }

  .page-hero {
    padding: 32px 0 40px;
  }

  .button-small {
    padding: 0 12px;
    font-size: 0.875rem;
  }

  .topbar {
    gap: 2px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* 404 */

.missing {
  padding: 18vh 0 64px;
}