/* /see-the-app — the guided app tour. Builds on site.css (colours, header,
   buttons). The phone screens are drawn in HTML, not screenshots, so they stay
   sharp and can be edited as plain text. Example data only. */

.tour-hero { background: var(--petrol); color: var(--ivory); padding: 40px 16px 34px; }
.tour-hero .inner { max-width: 820px; margin: 0 auto; }
.tour-hero h1 {
  font-family: Georgia, "Times New Roman", serif; font-size: clamp(30px, 5.6vw, 46px);
  line-height: 1.12; letter-spacing: -0.6px; margin: 0 0 12px;
}
.tour-hero .lede { font-size: clamp(17px, 2.2vw, 20px); color: rgba(244, 241, 234, 0.86); margin: 0; max-width: 640px; }

.tour { padding: 32px 16px 24px; }
.tour-inner { max-width: 960px; margin: 0 auto; }

/* One step = phone + words. Without JS every step shows, stacked. */
.step {
  display: grid; gap: 28px; align-items: center; justify-items: center;
  grid-template-columns: 1fr; padding: 8px 0 36px;
}
.step .copy { max-width: 460px; }
.step .count {
  margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--copper-dark);
}
.step h2 {
  font-family: Georgia, "Times New Roman", serif; color: var(--petrol);
  font-size: clamp(25px, 3.6vw, 32px); line-height: 1.18; margin: 0 0 10px;
}
.step .copy p { color: var(--muted); margin: 0; }
@media (max-width: 759px) {
  .step { gap: 20px; padding-bottom: 24px; }
  .step .copy { order: -1; width: 100%; }
  .tour-hero { padding: 26px 16px 24px; }
  .tour-hero h1 { font-size: 30px; }
  .tour { padding-top: 22px; }
}
@media (min-width: 760px) {
  .step { grid-template-columns: 300px 1fr; justify-items: start; gap: 56px; }
  .step .phone { justify-self: center; }
}

/* With JS: one step at a time, with controls. */
.js .tour .step { display: none; }
.js .tour .step.active { display: grid; animation: tour-in .28s ease-out; }
@keyframes tour-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .tour .step.active { animation: none; } }

.tour-controls {
  display: flex; align-items: center; gap: 14px; margin-top: 22px;
}
.tour-controls[hidden] { display: none; }
.tour-back {
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--line);
  background: var(--white); color: var(--petrol); font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
.tour-back:disabled { visibility: hidden; }
.tour-next { border: 0; cursor: pointer; font-family: inherit; min-width: 120px; }
.dots { display: flex; gap: 8px; margin: 0 auto 0 4px; }
.dots button {
  width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 0;
  background: var(--line); cursor: pointer;
}
.dots button[aria-selected="true"] { background: var(--copper); width: 26px; border-radius: 999px; }

/* ── The phone ─────────────────────────────────────────────────────────── */
.phone {
  width: 270px; height: 548px; border-radius: 40px; padding: 10px;
  background: #10181d; box-shadow: 0 18px 40px rgba(13, 59, 76, 0.22);
  flex: none;
}
.screen {
  height: 100%; border-radius: 31px; overflow: hidden; background: var(--ivory);
  font: 12.5px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink); padding-bottom: 12px;
}
.app-top {
  background: var(--petrol); color: var(--ivory); padding: 30px 14px 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.app-top.light { background: var(--white); color: var(--petrol); border-bottom: 1px solid var(--line); }
.app-title { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 18px; }
.example {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 999px; padding: 2px 7px; opacity: 0.7;
}
.tabs { display: flex; gap: 4px; padding: 10px 10px 2px; overflow: hidden; }
.tabs span {
  flex: none; padding: 5px 9px; border-radius: 999px; background: var(--white);
  border: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 600;
}
.tabs span.on { background: var(--petrol); border-color: var(--petrol); color: var(--ivory); }
.day { margin: 12px 14px 6px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }

.job, .list-row {
  display: flex; align-items: center; gap: 10px; background: var(--white);
  border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; margin: 0 10px 7px;
}
.job .time { font-weight: 700; color: var(--petrol); width: 38px; flex: none; }
.job-body, .list-row > div { flex: 1; min-width: 0; }
.job-body b, .list-row b { display: block; font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-body span, .list-row span { display: block; color: var(--muted); font-size: 11px; }
.job .amt { font-weight: 700; color: var(--copper-dark); }
.list-row em { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--ivory-deep); color: var(--muted); }
.list-row em.paid { background: #E3F1E6; color: #2E6B3F; }
.sync { margin: 10px 14px 0; font-size: 11px; color: var(--muted); }
.sync::before { content: "↻ "; color: var(--copper); font-weight: 700; }

.invite {
  margin: 14px 10px 10px; padding: 12px; border-radius: 14px;
  background: var(--copper-surface); border: 1px solid rgba(196, 106, 60, 0.35);
}
.invite b { display: block; font-size: 13.5px; color: var(--petrol); }
.invite span { display: block; color: var(--muted); font-size: 11.5px; margin: 2px 0 10px; }
.pill-btn {
  background: var(--copper); color: var(--white); text-align: center; font-weight: 700;
  border-radius: 999px; padding: 9px 12px; font-size: 12px;
}
.pill-btn.wide { margin: 10px 10px 0; }
.pill-btn.ghost { background: var(--white); color: var(--petrol); border: 1px solid var(--line); }
.share-sheet { margin: 4px 10px 10px; background: var(--white); border-radius: 14px; border: 1px solid var(--line); padding: 10px; }
.share-to { margin: 0 0 8px; font-size: 11px; color: var(--muted); font-weight: 700; }
.share-apps { display: flex; justify-content: space-between; gap: 4px; }
.share-apps span {
  flex: 1; text-align: center; font-size: 10px; color: var(--ink); padding-top: 32px; position: relative;
}
.share-apps span::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 28px; margin-left: -14px;
  border-radius: 9px; background: var(--ivory-deep);
}
.share-apps span:nth-child(1)::before { background: #25D366; }
.share-apps span:nth-child(2)::before { background: #34C759; }
.share-apps span:nth-child(3)::before { background: #1877F2; }
.bubble {
  margin: 4px 10px 0 34px; background: #DCF8C6; border-radius: 12px 12px 2px 12px;
  padding: 10px 11px; font-size: 11.5px; color: #1d2b22;
}
.bubble u { color: #0b6b8a; text-decoration: none; font-weight: 600; word-break: break-all; }

.profile { display: flex; gap: 10px; align-items: center; margin: 14px 12px 10px; }
.profile b { display: block; font-size: 14px; color: var(--petrol); }
.profile span { display: block; font-size: 11px; color: var(--muted); }
.avatar {
  width: 42px; height: 42px; border-radius: 50%; background: var(--petrol); color: var(--ivory);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; flex: none;
}
.price-row {
  display: flex; justify-content: space-between; margin: 0 10px 6px; background: var(--white);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px;
}
.price-row b { color: var(--copper-dark); }
.slots { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 10px; }
.slots span { padding: 6px 9px; border-radius: 9px; background: var(--white); border: 1px solid var(--line); font-size: 11px; font-weight: 600; }
.slots span.on { background: var(--petrol); border-color: var(--petrol); color: var(--ivory); }
.small { margin: 10px 14px 0; font-size: 10.5px; color: var(--muted); text-align: center; }

.stats { display: flex; gap: 6px; margin: 12px 10px 0; }
.stats div { flex: 1; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.stats span { display: block; font-size: 10px; color: var(--muted); }
.stats b { display: block; font-size: 14.5px; color: var(--petrol); }
.stats div:last-child b { color: var(--copper-dark); }
.bars {
  display: flex; align-items: flex-end; gap: 8px; height: 96px; margin: 0 14px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line); position: relative;
}
.bars span { flex: 1; height: var(--h); background: rgba(13, 59, 76, 0.22); border-radius: 5px 5px 0 0; position: relative; }
.bars span.now { background: var(--copper); }
.bars i { position: absolute; bottom: -16px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 9.5px; color: var(--muted); }
.tax { margin: 12px 10px 0; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; }
.tax b { display: block; margin-bottom: 4px; color: var(--petrol); }
.tax-row { display: flex; justify-content: space-between; color: var(--muted); }
.tax-row:last-child { color: var(--ink); font-weight: 700; }

/* ── Final call to action ───────────────────────────────────────────────── */
.get-app { background: var(--petrol); color: var(--ivory); padding: 52px 16px 60px; text-align: center; }
.get-app:focus { outline: none; }
.get-app .inner { max-width: 640px; margin: 0 auto; }
.get-app h2 {
  font-family: Georgia, "Times New Roman", serif; font-size: clamp(28px, 4.6vw, 38px);
  line-height: 1.15; margin: 0 0 10px;
}
.get-app .intro { color: rgba(244, 241, 234, 0.84); margin: 0 0 18px; }
.ticks { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.ticks li { color: var(--ivory); font-weight: 600; }
.ticks li::before { content: "✓ "; color: var(--copper); }
.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.store {
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-width: 168px; min-height: 56px; padding: 8px 22px; border-radius: 14px;
  background: var(--ivory); color: var(--petrol); text-decoration: none; text-align: left;
}
.store:hover { background: var(--white); color: var(--petrol); }
.store-small { font-size: 12px; line-height: 1.1; color: var(--muted); }
.store-big { font-size: 20px; line-height: 1.2; font-weight: 700; }
.store.first { background: var(--copper); color: var(--white); order: -1; }
.store.first .store-small { color: rgba(255, 255, 255, 0.82); }
.store.first:hover { background: var(--copper-dark); color: var(--white); }
.web-alt { margin: 22px 0 0; font-size: 15px; color: rgba(244, 241, 234, 0.75); }
.web-alt a { color: var(--ivory); }

/* Leave room for the cookie bar on first visit. */
body { padding-bottom: env(safe-area-inset-bottom); }
@media (max-width: 420px) {
  .phone { width: 248px; height: 504px; border-radius: 36px; }
  .screen { border-radius: 28px; font-size: 12px; }
}