/* Toanoa — landing v4 ("Real world"). Graded street footage, soft focus, with the real product in front.
   Footage sections are always dark; the bands between them follow the visitor's light or dark setting. */

/* Geist, self-hosted (SIL Open Font License, media/fonts/OFL.txt): no third-party font requests. */
@font-face { font-family: "Geist"; src: url("media/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("media/fonts/GeistMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bg: #FFFFFF;
  --panel: #F4F5F7;
  --ink: #0E1525;
  --ink-2: #5B6474;
  --ink-3: #667085;
  --line: #E6E8EC;
  --blue: #2463EB;
  --night: #0B0F17;

  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 32px);
  --space-band: clamp(72px, 10vw, 128px);
  --h1: clamp(52px, 7.4vw, 104px);
  --h2: clamp(34px, 4.6vw, 60px);
  --h3: clamp(26px, 2.6vw, 34px);
  --lede: clamp(18px, 1.6vw, 21px);
  --body: clamp(17px, 1.35vw, 19px);
  --radius: clamp(14px, 1.8vw, 22px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B0F17;
    --panel: #141A25;
    --ink: #F1F3F6;
    --ink-2: #A3ADBD;
    --ink-3: #8A94A6;
    --line: #1F2633;
    --blue: #4C86F7;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 68px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.5 'Geist', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; font-synthesis: none;
}
img, video { display: block; max-width: 100%; }
p, figcaption { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.center { text-align: center; }

h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: var(--h1); line-height: .98; letter-spacing: -0.045em; }
h2 { font-size: var(--h2); line-height: 1.04; letter-spacing: -0.035em; }
h3 { font-size: var(--h3); line-height: 1.1; letter-spacing: -0.03em; }
.body { margin: 18px 0 0; max-width: 44ch; font-size: var(--body); line-height: 1.5; color: var(--ink-2); }
.center .body { margin-left: auto; margin-right: auto; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: 999px; border: 0; font: 500 16px/1 inherit; font-family: inherit; cursor: pointer; transition: background .15s; }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.btn-light { background: #FFFFFF; color: #0E1525; }
.btn-light:hover { background: #E6EBF5; }
.btn-glass { background: rgba(255, 255, 255, .16); color: #FFFFFF; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.btn-glass:hover { background: rgba(255, 255, 255, .26); }
.btn-ink { background: var(--ink); color: var(--bg); }
.btn-ink:hover { background: #2463EB; color: #FFFFFF; }

/* Footage scenes: a looping graded clip behind, a scrim for legibility, content on top */
.scene { position: relative; overflow: hidden; background: var(--night) center / cover no-repeat; color: #FFFFFF; isolation: isolate; }
.scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.scene::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 11, 17, .78) 0%, rgba(8, 11, 17, .35) 55%, rgba(8, 11, 17, .2) 100%); }
.scene .body { color: rgba(255, 255, 255, .82); }

/* Shorter than the screen on purpose: the numbers row peeks in below, so the page reads as continuing. */
.hero { min-height: min(860px, calc(100svh - 96px)); display: flex; flex-direction: column; padding-top: 68px; }
/* Fixed nav: clear over the hero, a dark frosted bar once the page scrolls (main.js adds .solid). */
.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; color: #FFFFFF; transition: background-color .25s, box-shadow .25s; }
.site-nav.solid { background: rgba(11, 15, 23, .9); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.nav { width: 100%; display: flex; align-items: center; gap: 28px; height: 68px; }
.logo img { height: 20px; width: auto; }
.nav-links { margin-left: auto; display: flex; gap: 28px; font-size: 14px; }
.nav-links a { color: rgba(255, 255, 255, .78); }
.nav-links a:hover { color: #FFFFFF; }
.hero-in { width: 100%; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; padding-top: 24px; padding-bottom: 72px; }
.lede { margin: 22px 0 0; max-width: 30ch; font-size: var(--lede); line-height: 1.45; color: rgba(255, 255, 255, .84); }
.actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }

/* Phones: one frame for every real app capture */
.phone { margin: 0; width: 300px; padding: 10px; border-radius: 46px; background: #0B0E14; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 50px 100px -30px rgba(0, 0, 0, .7); }
/* Screens keep their captured proportions (status bar to tab bar), never cropped to fit the frame */
.phone img, .phone video { width: 100%; height: auto; border-radius: 36px; background: #FFFFFF; }
.phone video { aspect-ratio: 600 / 1274; }
.phone figcaption { margin-top: 16px; text-align: center; font-size: 14px; color: rgba(255, 255, 255, .72); }
/* Hero: the dispatch moment from the live dashboard, as a floating window over the street */
.hero-card { margin: 0; width: min(640px, 46vw); }
.hero-card video { width: 100%; height: auto; aspect-ratio: 1280 / 718; border-radius: var(--radius); background: #FFFFFF; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 60px 120px -30px rgba(0, 0, 0, .75); }
.phone-sm { width: 220px; border-radius: 36px; padding: 8px; }
.phone-sm img { border-radius: 28px; }

.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 56px; padding-bottom: 8px; text-align: center; }
.specs b { display: block; font-size: clamp(28px, 2.8vw, 36px); font-weight: 600; letter-spacing: -0.03em; }
.specs span { font-size: 15px; color: var(--ink-2); }

.band { padding-top: var(--space-band); padding-bottom: var(--space-band); }
.band + .band { padding-top: 0; }

.film { position: relative; margin-top: clamp(32px, 4vw, 48px); border-radius: var(--radius); overflow: hidden; background: var(--panel); aspect-ratio: 16 / 9; }
/* contain, not cover: inline the box is 16:9 like the film, and full screen on a wider phone the whole
   frame stays visible (letterboxed) instead of losing its top and bottom. */
.film video { width: 100%; height: 100%; object-fit: contain; }
.film video:fullscreen { background: #000000; }
.film-play, .film-full { position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(14, 21, 37, .72); color: #FFFFFF; display: grid; place-items: center; }
.film-full { right: 66px; }
.film-full[hidden] { display: none; }
.film-play svg { grid-area: 1 / 1; }
.film-play .i-pause, .film.playing .film-play .i-play { display: none; }
.film.playing .film-play .i-pause { display: block; }

.scene-tall { min-height: clamp(560px, 62vw, 800px); display: flex; align-items: center; }
.scene-in { width: 100%; padding-top: 72px; padding-bottom: 72px; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.split-rev { grid-template-columns: auto minmax(0, 1fr); }
.split-phone { grid-template-columns: minmax(0, 1fr) auto; }

.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; }
.tile { min-height: clamp(560px, 52vw, 720px); border-radius: 6px; display: flex; }
.tile::after { background: linear-gradient(0deg, rgba(8, 11, 17, .85) 0%, rgba(8, 11, 17, .25) 60%, rgba(8, 11, 17, .15) 100%); }
.tile-in { width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 32px; padding: clamp(32px, 4vw, 48px); }
.tile-text { align-self: stretch; }
.tile-text p { margin: 10px 0 0; max-width: 34ch; font-size: 17px; color: rgba(255, 255, 255, .82); }

.features { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.features div { border-top: 1px solid var(--line); padding-top: 20px; }
.features h3 { font-size: 20px; letter-spacing: -0.015em; }
.features p { margin: 8px 0 0; color: var(--ink-2); font-size: 16px; }

.compare { position: relative; margin-top: clamp(32px, 4vw, 48px); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); user-select: none; }
.compare img { width: 100%; height: auto; }
.compare .after { position: absolute; inset: 0; height: 100%; object-fit: cover; clip-path: inset(0 0 0 var(--pos)); }
.compare .handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: rgba(14, 21, 37, .45); box-shadow: 2px 0 6px rgba(14, 21, 37, .16); pointer-events: none; }
.compare .handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1525' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 18px no-repeat;
  border: 1px solid rgba(14, 21, 37, .4);
  box-shadow: 0 4px 14px rgba(14, 21, 37, .22);
}
.compare:has(input:focus-visible) .handle::after { outline: 3px solid var(--blue); outline-offset: 2px; }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.tag { position: absolute; top: 14px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: #FFFFFF; background: rgba(14, 21, 37, .8); pointer-events: none; }
.tag-l { left: 14px; }
.tag-r { right: 14px; background: #2463EB; }

.split-api { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.points { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--line); }
.points li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--ink-2); }
.points b { font-weight: 500; color: var(--ink); }
.code {
  margin: 0; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--radius); background: #0E1525; color: #C9D1DE;
  font: 13.5px/1.75 'Geist Mono', ui-monospace, monospace; overflow-x: auto; white-space: pre;
  box-shadow: 0 0 0 1px #1E2635, 0 40px 80px -40px rgba(14, 21, 37, .45);
}
.code .c { color: #6EE7A8; }
.code .s { color: #8CB4FF; }
.code .n { color: #F5C26B; }
.code .d { color: #8A94A6; }

.demo { background: var(--panel); padding: clamp(56px, 7vw, 88px) 0; }
.demo-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(40px, 6vw, 96px); align-items: center; }
.steps { list-style: none; counter-reset: step; margin: 32px 0 0; padding: 0; display: grid; gap: 18px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: center; font-size: var(--body); color: var(--ink-2); }
.steps li::before { content: counter(step); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 500; color: var(--ink); background: var(--bg); border: 1px solid var(--line); }
/* One column of labelled fields; the button sits apart from them as its own group. */
.demo-form { display: grid; gap: 14px; padding: clamp(22px, 2.6vw, 30px); border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(14, 21, 37, .25); }
.field { display: grid; gap: 6px; }
.field span { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.field em { font-style: normal; font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.demo-form textarea { width: 100%; min-height: 92px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 16px/1.45 inherit; font-family: inherit; resize: vertical; }
.demo-form textarea::placeholder { color: var(--ink-3); }
.demo-form input, .demo-form select { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 16px/1 inherit; font-family: inherit; appearance: none; }
.demo-form select { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E97A6' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.demo-form select:invalid { color: var(--ink-3); }
.demo-form input:focus, .demo-form select:focus, .demo-form textarea:focus { outline: 2px solid var(--blue); outline-offset: -1px; }
/* Red only once the visitor has interacted with the field, not on page load. */
.demo-form :user-invalid { border-color: #DC2626; }
.demo-form .btn { margin-top: 12px; width: 100%; }
/* Honeypot: off-screen for people; bots that fill it are dropped by the function. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin: -4px 0 0; text-align: center; font-size: 14px; color: var(--ink-2); }
.form-note:empty { display: none; }
.form-note.error { color: #DC2626; }
/* Sent: the fields, button and note give way to a confirmation; the calendar link stays. */
.demo-form.sent > :not(.form-done, .cal-link) { display: none; }
.demo-form.sent { align-content: center; }
.form-done { display: grid; justify-items: center; gap: 10px; padding: 24px 0 8px; text-align: center; }
.cal-pick, .demo-form.sent .cal-or { display: none; }
.demo-form.sent .cal-pick { display: inline; }
.form-done[hidden] { display: none; }
.done-icon { fill: #16A34A; margin-bottom: 6px; }
.form-done h3 { font-size: 24px; letter-spacing: -0.02em; outline: none; }
.form-done p { margin: 0; font-size: 16px; color: var(--ink-2); }
.form-done b { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.cal-link { justify-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--blue); }
.cal-link:hover { background: var(--panel); }
.form-note a { color: var(--blue); }
.form-note.ok { color: var(--ink); }

/* 404 page */
.missing { min-height: 100svh; display: grid; align-content: center; justify-items: start; gap: 20px; }
.missing h1 { font-size: var(--h2); }
.missing .body { margin: 0; }
.missing-logo img { height: 20px; width: auto; margin-bottom: 24px; }

.foot { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; padding-bottom: 28px; font-size: 13px; color: var(--ink-3); }
.foot img { height: 16px; width: auto; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav .btn { margin-left: auto; }
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-bottom: 48px; }
  .hero-card { display: none; } /* the film follows right after; main.js never loads its video here */
  .scene::after { background: linear-gradient(180deg, rgba(8, 11, 17, .72) 0%, rgba(8, 11, 17, .4) 50%, rgba(8, 11, 17, .78) 100%); }
  .specs, .features { grid-template-columns: minmax(0, 1fr); }
  .split, .split-rev, .split-api { grid-template-columns: minmax(0, 1fr); }
  .code { font-size: 11.5px; padding: 20px 18px; }
  .split-rev .phone { order: 2; justify-self: center; width: 240px; }
  .split-phone { grid-template-columns: minmax(0, 1fr); }
  .split-phone .phone { justify-self: center; width: 240px; }
  .pair { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
  .tile { border-radius: 0; }
  .phone-sm { width: 180px; }
  .demo-in { grid-template-columns: minmax(0, 1fr); }
}

/* Reduced motion: main.js never starts the loops, so each scene shows its poster frame. */