/* TabulateNow — marketing site
   Palette mirrors src/constants/theme.ts so the site and the app agree. */

:root {
  --ink: #0d1b2e;
  --ink-secondary: #545c69;
  --ink-tertiary: #8a919c;
  --blue: #2563eb;
  --blue-strong: #1b48c9;
  --blue-tint: #eff4ff;
  --green: #34c759;
  --bg: #ffffff;
  --bg-soft: #f6f7f9;
  --bg-element: #f0f0f3;
  --line: rgba(13, 27, 46, 0.09);
  --line-strong: rgba(13, 27, 46, 0.16);
  --shadow-card: 0 1px 2px rgba(13, 27, 46, 0.04),
    0 12px 32px -12px rgba(13, 27, 46, 0.1);
  --shadow-lift: 0 2px 6px rgba(13, 27, 46, 0.06),
    0 30px 60px -20px rgba(13, 27, 46, 0.22);
  --radius: 18px;
  --radius-sm: 12px;
  --page: 1120px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover {
  color: var(--blue-strong);
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: -0.028em;
  line-height: 1.08;
  font-weight: 700;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: 24px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 12px 18px;
  background: var(--ink);
  color: #fff;
  z-index: 100;
}

.skip-link:focus {
  left: 12px;
  top: 12px;
  color: #fff;
}

/* ---------- Header ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.header[data-scrolled="true"] {
  border-bottom-color: var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
}

.header__logo img {
  height: 26px;
  width: auto;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.header__link {
  color: var(--ink-secondary);
  font-size: 15px;
  font-weight: 500;
}

.header__link:hover {
  color: var(--ink);
}

/* ---------- Buttons ---------- */

.appstore {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 13px 22px 13px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 1px 2px rgba(13, 27, 46, 0.2),
    0 14px 28px -14px rgba(13, 27, 46, 0.6);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.appstore:hover {
  color: #fff;
  background: #000;
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(13, 27, 46, 0.24),
    0 20px 34px -14px rgba(13, 27, 46, 0.55);
}

.appstore:active {
  transform: translateY(0);
}

.appstore svg {
  flex: none;
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.appstore__text {
  display: grid;
  text-align: left;
  line-height: 1.15;
}

.appstore__eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.72;
}

.appstore__label {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.appstore--sm {
  padding: 9px 17px 9px 15px;
}

.appstore--sm svg {
  width: 17px;
  height: 17px;
}

.appstore--sm .appstore__eyebrow {
  display: none;
}

.appstore--sm .appstore__label {
  font-size: 14.5px;
}

.appstore--invert {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 18px 34px -16px rgba(0, 0, 0, 0.7);
}

.appstore--invert:hover {
  background: #fff;
  color: #000;
}

.ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  background: #fff;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.ghost-btn:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--bg-soft);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 84px 0 92px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -320px 0 auto -10%;
  height: 780px;
  background: radial-gradient(
      44% 52% at 22% 40%,
      rgba(37, 99, 235, 0.16),
      transparent 70%
    ),
    radial-gradient(38% 46% at 78% 22%, rgba(37, 99, 235, 0.1), transparent 72%);
  pointer-events: none;
}

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

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 11px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 999px;
  background: var(--blue-tint);
  color: var(--blue-strong);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}

.hero h1 {
  margin-top: 22px;
  font-size: clamp(2.5rem, 5.4vw, 3.9rem);
  font-weight: 700;
}

.hero__sub {
  margin-top: 22px;
  max-width: 33em;
  font-size: 1.16rem;
  color: var(--ink-secondary);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}

.hero__note {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--ink-tertiary);
}

.assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  color: var(--ink-secondary);
}

.assurances li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.assurances svg {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--blue);
}

/* ---------- Phone mock ---------- */

/* Screens are drawn at 0.8× the app's points: a 402pt iPhone is 322px here.
   Colours are the app's light theme (src/constants/theme.ts), not the site's,
   so the phone looks like the app rather than like this page. */

.phone-stage {
  display: flex;
  justify-content: center;
}

.phone {
  --app-text: #000;
  --app-text-2: #60646c;
  --app-element: #f0f0f3;
  --app-element-glass: rgba(0, 0, 0, 0.05);
  --app-separator: rgba(0, 0, 0, 0.08);
  --app-primary: #2563eb;
  --app-good: #34c759;
  --app-critical: #ff3b30;
  --app-gain: #1e7a3c;
  --app-series-1: #2a78d6;
  --app-series-2: #eb6834;
  --app-series-3: #1baf7a;
  --app-series-4: #eda100;
  --app-track: rgba(0, 0, 0, 0.08);
  --app-grid: rgba(0, 0, 0, 0.1);
  --app-route: #007aff;

  position: relative;
  width: min(344px, 100%);
  padding: 11px;
  border-radius: 52px;
  background: linear-gradient(160deg, #2b3242, #0d1b2e 55%, #1a2233);
  box-shadow: var(--shadow-lift);
  font-family: -apple-system, BlinkMacSystemFont, var(--font);
  color: var(--app-text);
}

.phone::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 48px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.phone__screen {
  position: relative;
  border-radius: 42px;
  background: #fff;
  overflow: hidden;
  aspect-ratio: 322 / 668;
}

/* Home indicator. It inverts what is under it, so it reads over the camera
   as well as over the app's light screens. */
.phone__screen::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  mix-blend-mode: difference;
  z-index: 4;
}

.phone__island {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 26px;
  border-radius: 999px;
  background: #000;
  z-index: 5;
}

.screen {
  position: absolute;
  inset: 0;
  padding: 0 13px;
  overflow: hidden;
  background: #fff;
}

.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 6px;
  font-size: 12.5px;
  font-weight: 600;
}

.statusbar__icons {
  flex: none;
  width: 59px;
  height: 11px;
}

/* iOS 26 bar buttons: a circle of glass each. */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 36px;
}

.toolbar__title {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13.6px;
  font-weight: 600;
}

.toolbar__title svg {
  width: 10px;
  height: 10px;
}

.glass-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 0.5px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.glass-btn svg {
  width: 15px;
  height: 15px;
}

.screen__title {
  padding: 2px 3px 12px;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.eyebrow-app {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--app-text-2);
}

/* Home: the headline figure sits on the page, not in a card. */
.kpi {
  display: grid;
  gap: 6px;
}

.kpi__label {
  margin-bottom: 2px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--app-text-2);
}

.kpi__value {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.change {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--app-good);
  font-variant-numeric: tabular-nums;
}

.change span {
  font-size: 9.6px;
  font-weight: 400;
  color: var(--app-text-2);
}

.change[data-unfavourable="true"] {
  color: var(--app-critical);
}

.strip {
  display: flex;
  margin-top: 3px;
  border-block: 1px solid var(--app-separator);
}

.strip > div {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 10px 0;
}

.strip > div + div {
  padding-left: 11px;
  border-left: 1px solid var(--app-separator);
}

.strip__label {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--app-text-2);
}

.strip__value {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.section-label {
  margin: 26px 3px 9px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--app-text-2);
}

.card {
  display: grid;
  gap: 11px;
  padding: 13px;
  border-radius: 11px;
  background: var(--app-element);
}

.card + .card {
  margin-top: 13px;
}

.card__title {
  font-size: 13.6px;
  font-weight: 700;
}

.key {
  display: flex;
  gap: 13px;
  font-size: 9.6px;
  font-weight: 500;
  color: var(--app-text-2);
}

.key span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.key i,
.breakdown i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2.4px;
}

.trend {
  display: block;
  width: 100%;
  height: auto;
}

.trend__grid line {
  stroke: var(--app-grid);
  stroke-width: 0.8;
}

.trend__labels text {
  font-size: 8.8px;
  font-weight: 600;
  fill: var(--app-text-2);
}

.trend__line {
  fill: none;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.flow {
  display: flex;
  gap: 2px;
  height: 11px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--app-element);
}

.flow i {
  display: block;
  flex-basis: 0;
}

.breakdown {
  display: grid;
  gap: 6px;
}

.breakdown > div {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.4px;
}

.breakdown span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--app-text-2);
}

.breakdown b {
  margin-left: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.breakdown em {
  width: 30px;
  font-size: 9.6px;
  font-style: normal;
  text-align: right;
  color: var(--app-text-2);
  font-variant-numeric: tabular-nums;
}

.screen--tab::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 112px;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.94) 62%);
  pointer-events: none;
  z-index: 2;
}

/* iOS 26 tab bar: a floating capsule of glass, the selected tab in a lens. */
.tabbar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 18px;
  display: flex;
  height: 50px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(250, 250, 252, 0.74);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 0.5px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 8px 26px -6px rgba(0, 0, 0, 0.18);
  z-index: 3;
}

.tabbar span {
  flex: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 500;
  color: var(--app-text);
}

.tabbar span[data-active="true"] {
  background: rgba(0, 0, 0, 0.065);
  font-weight: 600;
}

.tabbar svg {
  width: 18px;
  height: 18px;
}

/* ---------- Showcase screens ---------- */

/* A sheet over the app: the screen behind is dimmed, the sheet takes the rest. */
.screen--sheet {
  padding: 0;
  background: #c9c9ce;
}

.screen--sheet > .statusbar {
  padding: 0 19px;
}

.sheet {
  position: absolute;
  inset: 40px 0 0;
  padding: 10px 13px 0;
  border-radius: 26px 26px 0 0;
  background: #f6f6f8;
  overflow: hidden;
}

.sheet__bar {
  display: grid;
  grid-template-columns: 30px 1fr 30px;
  align-items: center;
  margin-bottom: 12px;
  font-size: 13.6px;
  font-weight: 600;
  text-align: center;
}

.sheet .card,
.sheet .field,
.sheet .rows {
  background: var(--app-element-glass);
}

/* Values that change while a screen plays sit stacked in one cell. */
.swap {
  display: inline-grid;
}

.swap > * {
  grid-area: 1 / 1;
}

.swap > :first-child {
  visibility: hidden;
}

.rows .swap > * {
  justify-self: end;
}

/* 01 · Inventory, Sold */
.search {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 29px;
  margin: 4px 0 10px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(118, 118, 128, 0.12);
  font-size: 12px;
  color: rgba(60, 60, 67, 0.6);
}

.search svg {
  width: 12px;
  height: 12px;
}

.table {
  margin: 0 -13px;
  font-size: 10.4px;
}

.table__head,
.table__data {
  display: grid;
  grid-template-columns: 1.25fr 0.9fr 1fr 1.05fr;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.table__head {
  padding: 6px 13px 7px;
  font-weight: 600;
  border-bottom: 1px solid var(--app-separator);
}

.table__head span:not(:first-child),
.table__data span:not(:first-child) {
  text-align: right;
}

.table__row {
  display: grid;
  gap: 6px;
  padding: 9px 13px;
}

.table__row:nth-child(even) {
  background: var(--app-element);
}

.table__name {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.table__name b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
}

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 600;
  color: #fff;
}

.table__data span:first-child {
  color: var(--app-text-2);
}

.table__data .profit {
  color: var(--app-good);
}

.table__data .muted {
  color: var(--app-text-2);
}

/* 02 · A listing */
.listing__title {
  padding: 0 3px;
  font-size: 13.6px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.listing__status {
  margin-top: 3px;
  padding: 0 3px;
  font-size: 11px;
  color: var(--app-text-2);
}

.listing__profit {
  display: grid;
  gap: 6px;
  margin-top: 19px;
  padding: 0 3px;
}

.listing__figure {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.provisional {
  color: var(--app-text-2);
}

.gain {
  color: var(--app-gain);
}

.statement {
  margin-top: 20px;
}

.statement .eyebrow-app {
  display: block;
  margin: 0 3px 7px;
}

.rows {
  border-radius: 11px;
  background: var(--app-element);
}

.rows > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 13px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.rows > div + div {
  border-top: 1px solid var(--app-separator);
}

.rows .is-total {
  font-weight: 600;
}

.action {
  color: var(--app-primary);
  font-weight: 600;
}

/* 03 · Scan Receipt. The camera (src/app/camera.tsx), with the receipt drawn
   where its picture would be, and Add Receipt (scan-receipt.tsx) presented
   over it once the shot is taken. The camera has stepped back behind the sheet
   into the dark, as iOS draws a screen a sheet covers. */
.screen--scan {
  /* When the finger lands on the shutter, when it lifts and the picture is
     taken, and when the receipt has been read. The app's tour keeps the same
     gaps (src/features/onboarding/tourScript.ts). */
  --tap: 1.4s;
  --shot: calc(var(--tap) + 0.46s);
  --read: calc(var(--shot) + 0.74s);
  padding: 0;
  background: #000;
}

.screen--scan > .statusbar {
  position: relative;
  padding: 0 19px;
  color: #fff;
}

.camera {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 32px;
  background: #000;
  color: #fff;
  transform: translateY(10px) scale(0.93);
}

/* The shade a sheet puts over what it covers. */
.camera::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #000;
  opacity: 0.22;
}

.camera__bar {
  padding: 50px 0 6px;
  font-size: 13.6px;
  font-weight: 600;
  text-align: center;
}

/* A tabletop under a lamp, around the paper. */
.camera__view {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(80% 60% at 50% 42%, #6b5b4a, #1f1a15);
}

/* Narrower than the app's 72%: the site's phone is a little shorter, and at
   that width the frame ran into the hint. */
.camera__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68%;
  aspect-ratio: 0.55;
  border: 1.6px solid rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  transform: translate(-50%, -50%);
}

.camera__btn {
  position: absolute;
  top: 13px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
}

.camera__btn svg {
  width: 17px;
  height: 17px;
}

.camera__btn--close {
  left: 13px;
}

.camera__btn--flash {
  right: 13px;
}

.camera__hint {
  position: absolute;
  bottom: 13px;
  left: 50%;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  font-size: 10.4px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  transform: translateX(-50%);
}

.camera__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 32px 27px;
}

.camera__side {
  display: grid;
  justify-items: center;
  gap: 3px;
  width: 51px;
  font-size: 8.8px;
  color: rgba(255, 255, 255, 0.8);
}

.camera__thumb {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
}

.camera__thumb svg {
  width: 17px;
  height: 17px;
}

.shutter {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 2.4px solid #fff;
  border-radius: 999px;
}

.shutter i {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #fff;
}

/* A fingertip, as the app's tour draws one. It is only there while it taps. */
.finger {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 37px;
  height: 37px;
  margin: -18.5px 0 0 -18.5px;
  border: 1.6px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  background: rgba(120, 120, 128, 0.42);
  opacity: 0;
}

.camera__flash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #fff;
  opacity: 0;
}

/* The receipt as the till printed it. */
.paper {
  display: grid;
  gap: 2px;
  width: 60%;
  padding: 14px 11px;
  border-radius: 2px;
  background: #f7f5ef;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.45);
  font: 8px/11px ui-monospace, Menlo, Consolas, monospace;
  color: #34312c;
  transform: rotate(-1.5deg);
}

.paper > span,
.paper > b {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  white-space: nowrap;
}

.paper > b {
  font-weight: 700;
}

.paper > .paper__center {
  justify-content: center;
}

.paper__rule {
  overflow: hidden;
  white-space: nowrap;
  color: #8f8a80;
}

.paper__rule::before {
  content: "----------------------------------------";
}

/* Add Receipt. Its form ends scrolled to the bottom, with its foot at the
   sheet's; playing, it starts at its top and scrolls there. */
.screen--scan .sheet {
  display: flex;
  flex-direction: column;
}

.screen--scan .glass-btn--done {
  background: var(--app-primary);
  color: #fff;
}

.sheet__body {
  position: relative;
  flex: 1;
  overflow: hidden;
}

/* The scroll is two transforms that move together: this one, the body's
   height, takes the form's top to the body's foot, and the form rises its own
   height from there. It once animated `top` beside a transform, but Safari
   runs a transform off the page's main thread and `top` on it; on a phone,
   whose main thread lags its screen, the two drifted apart and the form
   bounced as it scrolled. */
.sheet__scroll {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
}

.form {
  padding-bottom: 34px;
  transform: translateY(-100%);
}

.receipt-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px 6px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  font-size: 11px;
  font-weight: 600;
  color: var(--app-primary);
}

.receipt-link svg {
  width: 12px;
  height: 12px;
}

.form-section {
  margin-top: 17px;
}

.form-section .eyebrow-app {
  display: block;
  margin: 0 3px 6px;
}

.form-section .eyebrow-app i,
.field small i {
  font-style: normal;
  color: red;
}

.fields {
  display: grid;
  gap: 6px;
}

.field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 8px;
  padding: 7px 16px 8px;
  border-radius: 13px;
  background: var(--app-element);
}

.field small {
  font-size: 9.6px;
  color: var(--app-text-2);
}

.field b {
  grid-column: 1;
  font-size: 12.8px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.field svg {
  grid-area: 1 / 2 / 3;
  width: 14px;
  height: 14px;
  color: var(--app-text-2);
}

.placeholder {
  color: var(--app-text-2);
}

/* Items open from nothing as the scan finds them. */
.grow {
  display: grid;
  grid-template-rows: 1fr;
}

.grow > div {
  min-height: 0;
  overflow: hidden;
}

.items,
.add-item,
.allocation__card {
  border-radius: 13px;
  background: var(--app-element-glass);
}

.items {
  margin-bottom: 8px;
  overflow: hidden;
}

.item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
}

.item + .item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 13px;
  right: 0;
  height: 1px;
  background: var(--app-separator);
}

.item > svg {
  flex: none;
  width: 11px;
  height: 11px;
  color: var(--app-text-2);
  opacity: 0.5;
}

.item__name {
  flex: 1;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.item__name b {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.4px;
  font-weight: 500;
}

.badge::before {
  content: "";
  width: 5.6px;
  height: 5.6px;
  border-radius: 999px;
  background: currentColor;
}

.badge--inventory {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.badge--expense {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.item__price {
  display: grid;
  justify-items: end;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}

.item__price b {
  font-size: 12px;
  font-weight: 700;
}

.item__price small {
  font-size: 10.4px;
  color: var(--app-text-2);
}

.add-item {
  padding: 13px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  color: var(--app-primary);
}

/* The empty state and the card share a cell, so the form keeps its height
   as one replaces the other. */
.allocation {
  display: grid;
}

.allocation > * {
  grid-area: 1 / 1;
}

.allocation__empty {
  align-self: start;
  margin: 0;
  padding: 13px 0;
  font-size: 11px;
  text-align: center;
  color: var(--app-text-2);
  visibility: hidden;
}

.allocation__card {
  padding-bottom: 13px;
}

.allocation__cost {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 13px 13px 0;
  text-align: center;
}

.allocation__cost span {
  font-size: 11px;
  font-weight: 600;
  color: var(--app-text-2);
}

.allocation__cost b {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.allocation__cost small {
  font-size: 9.6px;
  color: var(--app-text-2);
}

.allocation__split {
  display: grid;
  gap: 6px;
  margin: 7px 13px 0;
  padding-top: 7px;
  border-top: 1px solid var(--app-separator);
  font-size: 11px;
}

.allocation__split div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.allocation__split span:first-child {
  color: var(--app-text-2);
}

.allocation__split span:last-child {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* 04 · Track Drive */
.drive {
  position: absolute;
  inset: 52px 13px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.drive__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0 3px;
}

.drive__stats small {
  display: block;
  font-size: 10.4px;
  color: var(--app-text-2);
}

.drive__stats b {
  font-size: 22.4px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.chips {
  display: flex;
  gap: 6px;
}

.chip {
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--app-element-glass);
  font-size: 11px;
  font-weight: 500;
}

.chip[data-active="true"] {
  background: var(--app-text);
  color: #fff;
}

.map {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 13px;
  overflow: hidden;
  background: #f2efe9;
}

.map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.map__recenter {
  position: absolute;
  right: 9px;
  bottom: 9px;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}

.map__recenter svg {
  position: static;
  width: 15px;
  height: 15px;
}

.purpose {
  display: grid;
  gap: 6px;
}

.purpose small {
  padding: 0 3px;
  font-size: 10.4px;
  color: var(--app-text-2);
}

.pill-btn {
  display: grid;
  place-items: center;
  height: 40px;
  border-radius: 999px;
  background: var(--app-text);
  color: #fff;
  font-size: 12.8px;
  font-weight: 600;
}

/* ---------- Hero motion ---------- */

/* The hero's phone rises in, its figures count up (the script does that), the
   changes under them appear, and its chart draws. It rests finished, so
   without scripts, with reduced motion, and on the share card it is simply
   the Home screen. Until it is in view, each animation holds its first frame. */
@media (prefers-reduced-motion: no-preference) {
  .js .phone-stage .phone {
    animation: arrive 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .js .phone-stage .kpi > .change {
    animation: swap-in 0.4s ease 1.5s both;
  }

  .js .phone-stage .strip .change {
    animation: swap-in 0.4s ease 1.62s both;
  }

  /* The lines have a pathLength of 1, so one dash is the whole line. */
  .js .phone-stage .trend__line {
    stroke-dasharray: 1;
    animation: draw 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.55s both;
  }

  .js .phone-stage .trend__line + .trend__line {
    animation-delay: 0.7s;
  }

  .js .phone-stage:not([data-play]) .phone,
  .js .phone-stage:not([data-play]) .change,
  .js .phone-stage:not([data-play]) .trend__line {
    animation-play-state: paused;
  }
}

@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
}

@keyframes draw {
  from {
    stroke-dashoffset: 1;
  }
}

/* ---------- Showcase motion ---------- */

/* Every screen's resting state is its finished one, so without scripts, or
   with reduced motion, each shows the end of its story. Playing a screen runs
   it from the start; `both` holds the first frame through each delay. */
@media (prefers-reduced-motion: no-preference) {
  .screen[data-play] .rise {
    animation: rise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: calc(0.25s + var(--i, 0) * 0.22s);
  }

  .screen[data-play] .swap > :first-child {
    animation: swap-out 0.35s ease var(--at, 1.6s) both;
  }

  .screen[data-play] .swap > :last-child {
    animation: swap-in 0.35s ease var(--at, 1.6s) both;
  }

  .screen[data-play] .tap {
    animation: tap 0.6s ease calc(var(--at, 1.6s) - 0.45s) both;
  }

  /* A field read off the receipt at --at: its value lands, outlined for a
     moment. */
  .screen[data-play] .read {
    animation: read 0.92s ease var(--at, 0s) both;
  }

  .screen[data-play] .read > b:not(.swap) {
    animation: fade-in 0.32s ease var(--at, 0s) both;
  }

  /* 03 · The finger taps the shutter, the screen flashes, and Add Receipt
     rises over the camera. Then the receipt is read into it: each field in
     turn (--read-at, after the read, as TourReceiptSheet.tsx's READ_AT), the
     items, the allocation they add up to, and a scroll down to show it. */
  .screen--scan .read {
    --at: calc(var(--read) + var(--read-at, 0s));
  }

  .screen--scan[data-play] .finger {
    animation: finger 0.9s ease-out var(--tap) both;
  }

  .screen--scan[data-play] .shutter i {
    animation: shutter 0.9s ease var(--tap) both;
  }

  .screen--scan[data-play] .camera__flash {
    animation: flash 0.45s linear var(--shot) both;
  }

  .screen--scan[data-play] .sheet {
    animation: sheet-up 0.52s cubic-bezier(0.22, 0.61, 0.36, 1)
      calc(var(--shot) + 0.2s) both;
  }

  .screen--scan[data-play] .camera {
    animation: step-back 0.52s cubic-bezier(0.22, 0.61, 0.36, 1)
      calc(var(--shot) + 0.2s) both;
  }

  .screen--scan[data-play] .camera::after {
    animation: fade-in 0.52s cubic-bezier(0.22, 0.61, 0.36, 1)
      calc(var(--shot) + 0.2s) both;
  }

  /* Add Receipt can be saved once there is something to save. */
  .screen--scan[data-play] .glass-btn--done {
    animation: undone 0.3s ease var(--read) both;
  }

  .screen--scan[data-play] .grow {
    animation: grow 0.3s ease var(--read) both;
  }

  .screen--scan[data-play] .items {
    animation: fade-in 0.2s ease calc(var(--read) + 0.62s) both;
  }

  .screen--scan[data-play] .item {
    animation: rise 0.36s cubic-bezier(0.22, 0.61, 0.36, 1)
      calc(var(--read) + 0.62s + var(--n, 0) * 0.16s) both;
  }

  .screen--scan[data-play] .allocation__empty {
    animation: shown var(--read);
  }

  .screen--scan[data-play] .allocation__card {
    animation: fade-in 0.4s ease calc(var(--read) + 1.18s) both;
  }

  .screen--scan[data-play] .sheet__scroll,
  .screen--scan[data-play] .form {
    animation: from-top 0.75s cubic-bezier(0.65, 0, 0.35, 1)
      calc(var(--read) + 1.9s) both;
  }
}

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

@keyframes swap-out {
  from {
    visibility: visible;
    opacity: 1;
  }
  to {
    visibility: visible;
    opacity: 0;
  }
}

@keyframes swap-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}

@keyframes tap {
  0%,
  100% {
    background: transparent;
  }
  40% {
    background: rgba(37, 99, 235, 0.12);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes shown {
  from,
  to {
    visibility: visible;
  }
}

@keyframes read {
  0%,
  100% {
    box-shadow: inset 0 0 0 1.5px rgba(37, 99, 235, 0);
  }
  13% {
    box-shadow: inset 0 0 0 1.5px var(--app-primary);
  }
}

/* The app tour's TapIndicator: it arrives, presses, lifts and fades. */
@keyframes finger {
  0% {
    opacity: 0;
    transform: scale(1.4);
  }
  20% {
    opacity: 1;
  }
  22%,
  31% {
    transform: scale(1);
  }
  44% {
    transform: scale(0.78);
  }
  62% {
    transform: scale(1);
  }
  71% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes shutter {
  31%,
  62% {
    transform: none;
  }
  44% {
    transform: scale(0.9);
  }
}

@keyframes flash {
  15% {
    opacity: 0.9;
  }
}

@keyframes sheet-up {
  from {
    transform: translateY(100%);
  }
}

@keyframes step-back {
  from {
    border-radius: 0;
    transform: none;
  }
}

@keyframes undone {
  from {
    background-color: rgba(255, 255, 255, 0.78);
    color: var(--app-text-2);
  }
}

@keyframes grow {
  from {
    grid-template-rows: 0fr;
  }
}

@keyframes from-top {
  from {
    transform: none;
  }
}

/* ---------- Showcase ---------- */

.showcase {
  --phone-scale: 1;
  padding: 92px 0 24px;
  background: var(--bg-soft);
  border-block: 1px solid var(--line);
  scroll-margin-top: 64px;
}

.showcase__head {
  max-width: 44rem;
}

.showcase__head h2 {
  margin-top: 16px;
  font-size: clamp(1.95rem, 3.6vw, 2.7rem);
}

.showcase__head p {
  margin-top: 18px;
  font-size: 1.08rem;
  color: var(--ink-secondary);
}

.showcase__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  margin-top: 24px;
}

.showcase__pin {
  display: contents;
}

.showcase__track {
  display: none;
}

.showcase__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.js .showcase__stage {
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  height: calc(100svh - 64px);
}

/* Without scripts the phone stays on its first screen. */
:root:not(.js) .showcase [data-screen]:not([data-screen="0"]) {
  display: none;
}

.showcase .phone {
  zoom: var(--phone-scale);
}

.showcase .phone__screen .screen {
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.js .showcase .phone__screen .screen:not([data-on]) {
  opacity: 0;
}

.dots {
  display: flex;
  gap: 7px;
}

.dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: rgba(37, 99, 235, 0.22);
  cursor: pointer;
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s;
}

.dots button[aria-current="true"] {
  width: 26px;
  background: var(--blue);
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.steps::after {
  content: "";
  display: block;
  height: 18vh;
}

.step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 72vh;
  padding: 48px 0;
}

.js .step {
  opacity: 0.3;
  transition: opacity 0.45s ease;
}

.js .step[data-on] {
  opacity: 1;
}

.step__num {
  margin: 0 0 14px -4px;
  font-size: 88px;
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: rgba(37, 99, 235, 0.13);
  user-select: none;
}

.step__tag {
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  transition: background 0.45s ease, color 0.45s ease, border-color 0.45s ease;
}

.js .step[data-on] .step__tag {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.step h3 {
  font-size: clamp(1.75rem, 2.7vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.step p {
  max-width: 30rem;
  margin-top: 16px;
  font-size: 1.06rem;
  color: var(--ink-secondary);
}

/* Scrolled through fast, the steps change faster than they fade; quick fades
   let each be seen on the way by rather than all blurring into one. */
.showcase[data-fast] .phone__screen .screen,
.js .showcase[data-fast] .step,
.js .showcase[data-fast] .step__tag,
.showcase[data-fast] .dots button {
  transition-duration: 0.12s;
}

/* ---------- FAQ ---------- */

.faq {
  padding: 92px 0 96px;
  scroll-margin-top: 64px;
}

.faq__inner {
  max-width: 720px;
}

.faq h2 {
  margin-top: 16px;
  font-size: clamp(1.95rem, 3.6vw, 2.7rem);
}

.faq h2 + .faq__item {
  margin-top: 32px;
}

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

.faq__item:first-of-type {
  border-top: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
}

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

/* A plus that turns into a cross when the answer is open. */
.faq summary::after {
  content: "+";
  flex: none;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ink-tertiary);
  transition: transform 0.2s ease;
}

.faq__item[open] summary::after {
  transform: rotate(45deg);
}

.faq summary:hover h3 {
  color: var(--blue);
}

.faq summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
  border-radius: 4px;
}

.faq h3 {
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.faq p {
  padding-bottom: 22px;
  color: var(--ink-secondary);
  font-size: 16.4px;
}

@media (prefers-reduced-motion: reduce) {
  .faq summary::after {
    transition: none;
  }
}

/* ---------- Closing CTA ---------- */

.cta {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background: var(--ink);
  color: #fff;
  text-align: center;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0 -10%;
  background: radial-gradient(
      54% 66% at 50% 40%,
      rgba(59, 130, 246, 0.36),
      transparent 74%
    ),
    radial-gradient(30% 42% at 12% 4%, rgba(37, 99, 235, 0.22), transparent 70%);
  pointer-events: none;
}

.cta__inner {
  position: relative;
}

.cta img {
  width: 62px;
  height: 62px;
  margin: 0 auto 26px;
  border-radius: 15px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
}

.cta h2 {
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  max-width: 22em;
  margin-inline: auto;
}

.cta p {
  margin: 20px auto 0;
  max-width: 34em;
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.72);
}

.cta__actions {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

/* ---------- Footer ---------- */

.footer {
  padding: 44px 0 52px;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.footer__brand img {
  height: 22px;
  width: auto;
}

.footer__meta {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--ink-tertiary);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.footer__links .ghost-btn {
  padding: 9px 18px;
  font-size: 14.5px;
}

/* ---------- Legal pages ---------- */

.legal {
  padding: 64px 0 96px;
}

.legal__inner {
  max-width: 720px;
  margin-inline: auto;
}

.legal h1 {
  font-size: clamp(2.1rem, 4.4vw, 2.9rem);
}

.legal__updated {
  margin-top: 16px;
  font-size: 14.5px;
  color: var(--ink-tertiary);
}

.legal__lead {
  margin-top: 24px;
  font-size: 1.1rem;
  color: var(--ink-secondary);
}

.legal h2 {
  margin-top: 52px;
  font-size: 1.42rem;
  letter-spacing: -0.02em;
}

.legal h3 {
  margin-top: 32px;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.legal p,
.legal ul {
  margin-top: 14px;
  color: var(--ink-secondary);
  font-size: 16.4px;
}

.legal ul {
  padding-left: 22px;
}

.legal li + li {
  margin-top: 8px;
}

.legal strong {
  color: var(--ink);
  font-weight: 600;
}

.legal hr {
  margin: 56px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.callout {
  margin-top: 28px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius-sm);
  background: var(--blue-tint);
}

.callout p {
  margin-top: 0;
  color: var(--ink);
  font-size: 15.5px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-secondary);
}

.back-link:hover {
  color: var(--ink);
}

/* ---------- Motion ---------- */

/* Gated on .js so the page is fully legible when scripts do not run. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .appstore:hover {
    transform: none;
  }

  .showcase .phone__screen .screen,
  .js .step,
  .step__tag,
  .dots button {
    transition: none;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .hero {
    padding: 56px 0 72px;
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }

  .hero__sub,
  .assurances {
    max-width: none;
  }

  .header__link {
    display: none;
  }

  .section,
  .showcase,
  .faq {
    padding-top: 72px;
  }

  .section {
    padding-bottom: 72px;
  }

}

/* ---------- Showcase, stacked ---------- */

@media (max-width: 960px) and (orientation: portrait) {
  .showcase__grid {
    display: block;
  }

  .step {
    min-height: 0;
    padding: 28px 0;
  }

  .steps::after {
    display: none;
  }

  /* One panel the height of the screen: the step, then the phone and its
     dots, so a step is read before it plays, as it is beside the phone. The
     phone takes what the longest step leaves (the script sizes it), so the
     words always fit and nothing scrolls beneath anything. */
  .js .showcase__pin {
    position: sticky;
    top: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    height: calc(100vh - 64px);
    height: calc(100svh - 64px);
    padding: 10px 0 18px;
  }

  .js .showcase__stage {
    position: static;
    height: auto;
    gap: 14px;
  }

  .js .showcase__track {
    display: block;
    height: 260vh;
    height: 260svh;
  }

  .js .steps {
    display: grid;
    order: -1;
  }

  /* Every step is as tall as the longest; each starts at its top, so the
     headline doesn't shift from one to the next. */
  .js .step {
    grid-area: 1 / 1;
    justify-content: flex-start;
    padding: 0;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .js .step[data-on] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* The dots already count the steps. */
  .js .step__num {
    display: none;
  }

  .js .step__tag {
    margin-bottom: 12px;
  }

  .js .step h3 {
    font-size: clamp(1.45rem, 6.6vw, 1.9rem);
  }

  .js .step p {
    margin-top: 10px;
    font-size: 1rem;
  }
}

@media (max-width: 960px) and (orientation: portrait) and (prefers-reduced-motion: reduce) {
  .js .step {
    transform: none;
    transition: none;
  }
}

@media (max-width: 620px) {
  body {
    font-size: 16.5px;
  }

  .wrap {
    padding-inline: 20px;
  }

  .hero h1 {
    font-size: clamp(2.1rem, 8.6vw, 2.7rem);
  }

  .hero__cta .appstore,
  .hero__cta .ghost-btn {
    width: 100%;
    justify-content: center;
  }

  .cta {
    padding: 76px 0;
  }

  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .legal h2 {
    margin-top: 42px;
  }
}