:root {
  --bg: #ffffff;
  --surface: #f5f5f7;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --line: #e8e8ed;
  --accent: #ec3446;
  --gold: #ffc24a;
  --orange: #ff8a4c;
  --pink: #f23d63;
  --open: #1f8a4c;
  --amber: #b46b00;
  --shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.35), 0 16px 32px -16px rgba(0, 0, 0, 0.2);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #1c1c1e;
    --text: #f5f5f7;
    --muted: #a1a1a6;
    --line: #2c2c2e;
    --accent: #ff5a63;
    --open: #4cc27c;
    --amber: #f0a43a;
    --shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { display: block; max-width: 100%; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 720px; }

/* Header */
header.site { position: relative; z-index: 2; }
header.site .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 19px; letter-spacing: -0.02em;
}
.brand img { width: 30px; height: 30px; border-radius: 22.5%; }
nav.site a { color: var(--muted); text-decoration: none; margin-left: 22px; font-size: 14px; }
nav.site a:hover, nav.site a[aria-current="page"] { color: var(--text); }
/* The beta request lives in the header until there is a TestFlight link */
nav.site a.nav-beta { color: var(--text); background: var(--surface); padding: 6px 14px; border-radius: 999px; font-weight: 500; white-space: nowrap; transition: background .15s; }
nav.site a.nav-beta:hover { background: var(--line); }
.soon-line { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0; font-size: 15px; color: var(--muted); }
.soon-line .ico.sm { width: 16px; height: 16px; color: var(--muted); margin: 0; }

/* Home */
.home section { text-align: center; padding: 0 20px; }
.home h1 {
  font-size: clamp(44px, 8vw, 88px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 700;
  margin: 0 0 20px;
}
.home h1 .grad {
  background: linear-gradient(100deg, var(--gold), var(--orange) 40%, var(--pink) 80%, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.home h2 {
  font-size: clamp(34px, 5.5vw, 60px); line-height: 1.05; letter-spacing: -0.04em; font-weight: 700;
  margin: 0 0 16px;
}
.home section > p { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.45; color: var(--muted); margin: 0 auto; max-width: 30ch; }

.intro { padding-top: 64px !important; }
@keyframes blink { 50% { opacity: 0; } }

/* Query bubbles: things people type into Toque, floating beside the phone. bubbles.js swaps in more queries.
   Outer .bubble is placed and bobs; the inner button is the pill and springs in. Slots are measured from the phone. */
.orbit { position: relative; width: max-content; margin: 0 auto; }
.bubbles { position: absolute; inset: 0; pointer-events: none; }
.bubble {
  position: absolute; top: var(--y); opacity: var(--a, 1); scale: var(--s, 1);
  animation: bob var(--d, 7s) ease-in-out calc(var(--d, 7s) * -.37 * var(--i)) infinite alternate;
}
.bubble:nth-child(odd) { right: calc(100% - var(--o)); transform-origin: 100% 50%; }
.bubble:nth-child(even) { left: calc(100% - var(--o)); transform-origin: 0 50%; }
.bubble > button {
  position: relative; display: flex; align-items: center; gap: 8px; margin: 0; border: 0; padding: 10px 18px 10px 14px; border-radius: 999px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 15px; font-weight: 500; line-height: 1.4; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 20px -12px rgba(0, 0, 0, .18);
  animation: pop .9s cubic-bezier(.34, 1.36, .54, 1) calc(.55s + var(--i) * .12s) both;
  pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: scale .45s cubic-bezier(.34, 1.36, .54, 1), background-color .2s;
}
/* Tappable: a springy lift under the pointer, a press, a focus ring, and a warm tint while its search plays. */
@media (hover: hover) {
  .bubble > button:hover { scale: 1.045; }
}
.bubble > button:active { scale: .95; transition-duration: .12s, .2s; }
.bubble > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bubble > button.on { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
/* Once per visit: a soft tap ripple on one bubble, the same grey touch the phone demo shows. */
.bubble > button::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px rgba(120, 120, 128, .45);
}
.bubble > button.nudge { animation: pop .9s cubic-bezier(.34, 1.36, .54, 1) both, press 1.1s ease-in-out .1s; }
.bubble > button.nudge::after { animation: ripple 1.2s cubic-bezier(.2, .7, .3, 1) .3s; }
@keyframes press { 0%, 100% { scale: 1; } 30% { scale: .94; } 60% { scale: 1.02; } }
@keyframes ripple { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.25, 1.6); } }
.bubble:nth-child(odd) > button { transform-origin: 100% 50%; }
.bubble:nth-child(even) > button { transform-origin: 0 50%; }
.bubble > button::before {
  content: ""; flex: none; width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff9e2c' d='M12 2l1.9 5.6L19.5 9.5l-5.6 1.9L12 17l-1.9-5.6L4.5 9.5l5.6-1.9z'/%3E%3Cpath fill='%23ffc24a' d='M19 14l.9 2.6 2.6.9-2.6.9L19 21l-.9-2.6-2.6-.9 2.6-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (prefers-color-scheme: dark) {
  .bubble > button { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
}
/* Left column odd, right column even; --o is how far a bubble overlaps the phone (negative: a gap). Far ones are fainter. */
.bubble:nth-child(1) { --i: 0; --y: 9%;  --o: -36px; --d: 7.4s; }
.bubble:nth-child(2) { --i: 1; --y: 15%; --o: 8px;   --d: 6.6s; }
.bubble:nth-child(3) { --i: 2; --y: 29%; --o: 6px;   --d: 8s; }
.bubble:nth-child(4) { --i: 3; --y: 37%; --o: -64px; --d: 7s;   --a: .55; --s: .94; }
.bubble:nth-child(5) { --i: 4; --y: 51%; --o: -84px; --d: 7.8s; --a: .55; --s: .94; }
.bubble:nth-child(6) { --i: 5; --y: 57%; --o: 4px;   --d: 6.8s; }
.bubble:nth-child(7) { --i: 6; --y: 73%; --o: 8px;   --d: 7.2s; }
.bubble:nth-child(8) { --i: 7; --y: 81%; --o: -28px; --d: 8.4s; --a: .55; --s: .94; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.84); } to { opacity: 1; transform: none; } }
@keyframes bob { from { transform: translate(-2px, -5px); } to { transform: translate(2px, 5px); } }
.stage.still .bubble, .stage.still .bubble > button { animation-play-state: paused; }

/* Narrower desktops: the five near bubbles only, all touching the phone. */
@media (max-width: 1040px) {
  .bubble:nth-child(4), .bubble:nth-child(5), .bubble:nth-child(8) { display: none; }
  .bubble:nth-child(1) { --o: 6px; }
  .bubble > button { font-size: 14px; padding: 9px 16px 9px 12px; }
}
/* Phones and small tablets: three bubbles in a zigzag above the phone, the last one over its top corner (the status bar). */
@media (max-width: 860px) {
  .home .stage { padding-top: 172px !important; }
  .bubble:nth-child(n+4) { display: none; }
  .bubble:nth-child(1) { --y: -132px; left: -14px; right: auto; }
  .bubble:nth-child(2) { --y: -84px; right: -14px; left: auto; }
  .bubble:nth-child(3) { --y: -34px; left: 6px; right: auto; }
  .bubble > button { font-size: 14px; padding: 8px 15px 8px 11px; gap: 7px; }
  .bubble > button::before { width: 15px; height: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .bubble, .bubble > button { animation: none !important; }
}

/* Quiet pill: one element for "coming soon" and the beta request (mailto until there is a TestFlight link) */
.beta {
  display: flex; width: fit-content; margin: 18px auto 0; align-items: center; gap: 8px; padding: 9px 18px 9px 14px; border-radius: 999px;
  background: var(--surface); color: var(--text); font-size: 15px; line-height: 1.4; text-decoration: none; transition: background .15s;
}
.beta:hover { background: var(--line); }
.beta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.beta .ico { margin: 0; }
.beta .soon { color: var(--muted); }
.beta .sep { color: var(--muted); }
.beta .ask-beta { font-weight: 500; }
.beta .ico.sm { width: 18px; height: 18px; color: var(--muted); }

/* Icons: SF Symbols style, outline, inherit colour */
.ico { display: block; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.chapter > .ico { margin: 0 auto 18px; }

.phone {
  position: relative; margin: 0 auto; width: 300px; aspect-ratio: 1320 / 2868;
  border-radius: 50px; padding: 10px; background: #0d0d0f;
  box-shadow: var(--shadow);
}
.phone img, .phone video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 41px; background: #fff; }
.phone.xl { width: 340px; border-radius: 56px; padding: 11px; }
.phone.xl img, .phone.xl video { border-radius: 46px; }

.stage { position: relative; padding-top: 56px !important; overflow-x: clip; }
.stage .phone { animation: rise 1s .15s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rise { from { transform: translateY(48px); } to { transform: none; } }

.chapter { padding-top: 160px !important; }
.chapter .phone { margin-top: 56px; }

.closing { padding: 128px 20px 120px !important; }
.closing img { width: 88px; height: 88px; border-radius: 22.5%; margin: 0 auto 6px; box-shadow: 0 12px 30px -10px rgba(0,0,0,.25); }
.closing .beta { margin-top: 24px; }
.closing p { font-size: 15px !important; max-width: none !important; margin-top: 22px !important; }

@supports (animation-timeline: view()) {
  .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  @keyframes reveal { from { opacity: 0; transform: translateY(80px) scale(.92); } to { opacity: 1; transform: none; } }
}

@media (max-width: 760px) {
  .intro { padding-top: 56px !important; }
  .phone { width: 260px; border-radius: 44px; padding: 9px; }
  .phone img, .phone video { border-radius: 36px; }
  .phone.xl { width: 280px; border-radius: 47px; padding: 9px; }
  .phone.xl img, .phone.xl video { border-radius: 39px; }
  .stage { padding-top: 48px !important; }
  .chapter { padding-top: 112px !important; }
  .chapter .phone { margin-top: 40px; }
  .closing { padding: 112px 20px 88px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .stage .phone { animation: none !important; }
}

/* Text pages */
.lede { font-size: 20px; line-height: 1.5; color: var(--muted); margin: 0 0 28px; max-width: 34ch; }
main.page { padding: 32px 0 72px; }
main.page h1 { font-size: clamp(34px, 6vw, 48px); line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 12px; }
main.page h2 { font-size: 22px; letter-spacing: -0.01em; margin: 40px 0 8px; }
main.page h3 { font-size: 18px; margin: 0 0 4px; }
main.page p, main.page ul { margin: 0 0 14px; }
main.page ul { padding-left: 22px; }
main.page li { margin-bottom: 6px; }
.meta { color: var(--muted); font-size: 15px; }
.card { background: var(--surface); border-radius: 18px; padding: 20px 22px; margin: 14px 0; }

footer.site { border-top: 1px solid var(--line); padding: 28px 0 44px; color: var(--muted); font-size: 13px; }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
footer.site a { color: var(--muted); }
footer.site .brand { font-size: 14px; margin-right: auto; }
footer.site .brand img { width: 20px; height: 20px; }
@media (max-width: 420px) {
  nav.site a { margin-left: 14px; }
  .beta { font-size: 14px; gap: 6px; padding: 9px 14px 9px 12px; }
}

/* Search demo: real app screenshots, animated in the page */
.phone .demo { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 46px; background: #fff; isolation: isolate; }
.phone .demo img { position: absolute; left: 0; top: 0; width: 100%; height: auto; border-radius: 0; object-fit: fill; background: none; }
.d-home, .d-results { position: absolute; inset: 0; will-change: transform; }
.phone .demo .d-home > img { height: 100%; }
.d-results { transform: translateX(100%); background: #fff; box-shadow: -12px 0 40px rgba(0, 0, 0, .08); }
.d-list { will-change: transform; }
/* The typed query is live text over the screenshot's search field, so any query costs no image bytes. Sizes are in
   cqw (1% of the screen's width) measured from the 840px-wide screenshots: 8.4px there is 1cqw; 17pt text is 3.8636cqw.
   Tops and heights are % of the screen's height instead, because the screenshot is stretched to fill the screen and the
   phone's screen is a little taller than the 840x1825 shot. */
.phone .demo { container-type: inline-size; }
.d-field {
  position: absolute; left: 13.631cqw; top: 21.041%; width: 71.49cqw; height: 5.425%; padding-left: 1.786cqw;
  display: flex; align-items: center; opacity: 0;
  font: 400 3.8636cqw/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.0253em; color: #000; white-space: pre; -webkit-font-smoothing: antialiased;
}
.d-field.on { opacity: 1; }
.d-field.filled { background: #f3f2f8; }
.d-caret { flex: none; width: .476cqw; height: 5cqw; margin-top: .238cqw; border-radius: .25cqw; background: #ec3446; }
.d-field.idle .d-caret { animation: blink 1s steps(1) infinite; }
.d-send {
  position: absolute; left: 86.31cqw; top: 22.641%; width: 4.881cqw; height: 4.881cqw; border-radius: 50%; opacity: 0; scale: .6;
  background: #e8374a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14.8V6.3M6.5 9.8 10 6.3l3.5 3.5'/%3E%3C/svg%3E") center / 100% no-repeat;
  transition: opacity .15s, scale .25s cubic-bezier(.34, 1.36, .54, 1);
}
.d-field.filled + .d-send { opacity: 1; scale: 1; }
@supports not (width: 1cqw) { .d-field, .d-send { display: none; } }
.phone .demo .d-back { left: 2.273%; top: 5.404%; width: 14.545%; }
.phone .demo .d-kb { top: 63.947%; z-index: 4; transform: translateY(100%); will-change: transform; }
.phone .demo .d-status { z-index: 3; -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }
.phone .demo .d-tabbar { top: auto; bottom: 0; z-index: 3; -webkit-mask-image: linear-gradient(transparent, #000 35%); mask-image: linear-gradient(transparent, #000 35%); }
.d-touch { position: absolute; z-index: 5; width: 11%; aspect-ratio: 1; border-radius: 50%; background: rgba(120, 120, 128, .32); border: 2px solid rgba(255, 255, 255, .7); opacity: 0; pointer-events: none; }
.d-island { position: absolute; z-index: 6; left: 35.83%; top: 1.5%; width: 28.26%; height: 3.73%; border-radius: 999px; background: #000; }
@media (max-width: 760px) {
  .phone .demo { border-radius: 39px; }
}

/* Map demo: bare map captures zoomed by the page, with the app's bars, panel and card laid over them */
.phone .mdemo img { position: absolute; }
.phone .mdemo .m-zoom { position: absolute; inset: 0; transform: translate(-.0758%, -2.266%); }
.phone .mdemo .m-zoom img { height: 100%; transform-origin: 50% 51.395%; will-change: transform, opacity; opacity: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect; }
.phone .mdemo .m-zoom img:first-child { opacity: 1; -webkit-mask-image: none; mask-image: none; }
.phone .mdemo .m-top { top: 0; -webkit-mask: url(img/map/mask-top.svg) 0 0 / 100% 100%; mask: url(img/map/mask-top.svg) 0 0 / 100% 100%; }
.phone .mdemo .m-bot { top: 87.169%; -webkit-mask: url(img/map/mask-bot.svg) 0 0 / 100% 100%; mask: url(img/map/mask-bot.svg) 0 0 / 100% 100%; }
.phone .mdemo .m-street { opacity: 0; }
.phone .mdemo .m-full { height: 100%; opacity: 0; }
.phone .mdemo .m-f-city { opacity: 1; }
.phone .mdemo .m-patch { opacity: 0; }
.phone .mdemo .m-locate { left: 86.364%; top: 11.855%; width: 12.121%; }
.phone .mdemo .m-badge { left: 86.667%; top: 6.904%; width: 11.364%; border-radius: 50%; }
.phone .mdemo .m-pin { left: 17.424%; top: 37.657%; width: 21.97%; border-radius: 18%; }
.m-panel { position: absolute; left: 9.091%; top: 12.971%; width: 81.818%; height: 18.131%; border-radius: 7.2% / 15%; overflow: hidden; opacity: 0; transform-origin: 50% 0; box-shadow: 0 10px 30px rgba(0, 0, 0, .08); }
.phone .mdemo .m-panel img { width: 100%; height: 100%; }
.phone .mdemo .m-panel img:not(:first-child) { opacity: 0; }
.phone .mdemo .m-card { left: 2.727%; top: 74.93%; width: 94.545%; border-radius: 6.25% / 17.5%; transform: translateY(175%); box-shadow: 0 10px 30px rgba(0, 0, 0, .1); }
.mdemo .d-touch, .mdemo .d-island { z-index: 6; }

/* Phones: the header keeps the brand and the beta button; Support and Privacy stay in the footer */
@media (max-width: 480px) {
  nav.site a:not(.nav-beta) { display: none; }
}