/* crewdocket.com — one stylesheet for every page.
   Dark, like the product. The app's own pieces float on it at the size the
   app draws them, lit from behind in its cobalt. Glass panels with a
   gradient hairline, real device frames, quiet motion. */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../assets/fonts/geist-v5-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../assets/fonts/geist-v5-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../assets/fonts/geist-mono-v6-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #050506;
  --bg-2: #09090b;
  --panel: #0c0c0f;
  --panel-2: #121216;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --ink: #f5f5f7;
  --ink-2: #a3a6ae;
  --ink-3: #80838c;
  --cobalt: #3b82f6;
  --cobalt-hi: #5b9bff;
  --sky: #9cc7ff;
  --glow: rgba(59, 130, 246, 0.5);
  --max: 1200px;
  --gutter: 24px;
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--cobalt-hi); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(59, 130, 246, 0.35); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: #fff; color: #000; padding: 10px 14px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 640px) { :root { --gutter: 20px; } }

/* Headline light: white at the top, falling off toward the bottom. */
.lit {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 48%, rgba(255, 255, 255, 0.58) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* High-contrast modes strip background images, and the headline's colour
   IS a background image — so give it back real text. */
@media (forced-colors: active) {
  .lit { background: none; color: CanvasText; }
  .glass::before, .window::after { display: none; }
}

/* ─── Glass: a panel with a gradient hairline ──────────────────────────── */
.glass { position: relative; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), var(--panel); }
.glass::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05) 36%, rgba(255, 255, 255, 0.025));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ─── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border-radius: 12px;
  font: 600 15.5px/1 var(--sans); letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer; border: 0;
  transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease), color 0.2s var(--ease);
}
.btn svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, #4f8ffa, #2f6ff0); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(59, 130, 246, 0.6), 0 12px 32px -10px rgba(59, 130, 246, 0.75);
}
.btn-primary:hover { background: linear-gradient(180deg, #62a0ff, #3b7cf6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(91, 155, 255, 0.7), 0 16px 40px -10px rgba(59, 130, 246, 0.9); }
.btn-glass { background: rgba(255, 255, 255, 0.05); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.btn-glass:hover { background: rgba(255, 255, 255, 0.09); }
.btn-white { background: #fff; color: #050506; box-shadow: 0 12px 32px -12px rgba(255, 255, 255, 0.45); }
.btn-white:hover { background: #e8eefb; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14.5px; border-radius: 10px; }

/* ─── Header ───────────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5, 5, 6, 0.72);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid var(--line);
}
.js .site-head { border-bottom-color: transparent; transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease); background: rgba(5, 5, 6, 0.4); }
.js .site-head.scrolled { border-bottom-color: var(--line); background: rgba(5, 5, 6, 0.78); }
.site-head .wrap { display: flex; align-items: center; gap: 20px; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 17.5px; letter-spacing: -0.025em; flex-shrink: 0; color: var(--ink); }
.brand svg { width: 25px; height: 25px; }
.mark-sheet { stroke: #f5f5f7; }
.mark-line { stroke: var(--cobalt-hi); }
.nav { display: flex; gap: 2px; margin-left: 24px; }
.nav a { padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--ink-2); font-size: 14.5px; font-weight: 500; transition: color 0.2s, background-color 0.2s; }
.nav a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.head-cta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.signin { padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--ink-2); font-size: 14.5px; font-weight: 500; }
.signin:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.menu { display: none; }
.menu summary { list-style: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; cursor: pointer; color: var(--ink); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: rgba(255, 255, 255, 0.06); }
.menu summary svg { width: 22px; height: 22px; }
.menu .i-close { display: none; }
.menu[open] .i-open { display: none; }
.menu[open] .i-close { display: block; }
.menu-panel {
  position: fixed; left: 0; right: 0; top: 66px;
  padding: 8px var(--gutter) 24px;
  background: rgba(8, 8, 10, 0.97);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  display: grid;
}
.menu-panel a:not(.btn) { padding: 16px 2px; font-size: 18px; font-weight: 550; letter-spacing: -0.015em; text-decoration: none; border-bottom: 1px solid var(--line); }
.menu-panel .btn { margin-top: 18px; }
.menu-panel .btn-glass { margin-top: 10px; }
@media (max-width: 900px) {
  .nav { display: none; }
  .menu { display: block; margin-left: -8px; }
  .head-cta .signin { display: none; }
}
@media (max-width: 350px) { .head-cta .btn { display: none; } }

/* ─── Hero ─────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: 104px 0 0; text-align: center; isolation: isolate; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: -66px 0 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(50% 42% at 50% 0%, rgba(59, 130, 246, 0.32), transparent 72%),
    radial-gradient(30% 30% at 20% 12%, rgba(99, 102, 241, 0.14), transparent 70%),
    radial-gradient(30% 30% at 80% 14%, rgba(56, 189, 248, 0.1), transparent 70%);
}
.hero::after {
  content: ''; position: absolute; inset: -66px 0 30%; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 50% 0 / 80px 80px,
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 50% 0 / 80px 80px;
  -webkit-mask-image: radial-gradient(60% 55% at 50% 10%, #000 20%, transparent 80%);
  mask-image: radial-gradient(60% 55% at 50% 10%, #000 20%, transparent 80%);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  font-size: 13.5px; font-weight: 500; color: var(--ink-2);
}
.eyebrow b { font: 600 11.5px/1 var(--mono); color: #cfe2ff; background: rgba(59, 130, 246, 0.22); padding: 5px 7px; border-radius: 999px; letter-spacing: 0.02em; white-space: nowrap; }
@media (max-width: 440px) { .eyebrow .long { display: none; } }
.hero h1 {
  margin: 28px auto 0; max-width: 13ch;
  font-size: clamp(48px, 8vw, 100px); line-height: 0.95; letter-spacing: -0.055em; font-weight: 600;
  text-wrap: balance;
}
.hero .lede {
  margin: 28px auto 0; max-width: 33em;
  font-size: clamp(17.5px, 2vw, 20.5px); line-height: 1.55; color: var(--ink-2);
  text-wrap: pretty;
}
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }
.hero-note { margin-top: 22px; font-size: 14px; color: var(--ink-3); display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; }
.hero-note span { display: inline-flex; align-items: center; gap: 7px; }
.hero-note svg { width: 14px; height: 14px; color: var(--cobalt-hi); }
@media (max-width: 640px) {
  .hero { padding-top: 64px; }
  .hero-cta .btn { flex: 1 1 100%; max-width: 380px; }
}

/* The scene under the headline: the office's screen tipped back in the
   light, the customer's phone, and the alert that says they said yes. */
.scene { position: relative; max-width: 1200px; margin: 88px auto 0; padding-bottom: 40px; }
.scene::before {
  content: ''; position: absolute; left: 8%; right: 8%; top: -6%; height: 60%; z-index: -1;
  background: radial-gradient(closest-side, rgba(59, 130, 246, 0.45), transparent);
  filter: blur(60px); pointer-events: none;
}
.tilt { perspective: 2400px; }
.tilt .window {
  width: 88%; margin: 0 auto;
  transform: rotateX(16deg) scale(0.985); transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 96%);
}
.scene .device { position: absolute; left: 1%; top: 21%; width: 21%; }
.scene .notif { position: absolute; right: 1%; top: 13%; width: 360px; }
@media (max-width: 1180px) { .scene .notif { width: 322px; } }
/* On a phone the phone is the star: bigger and centred, the office's screen
   dimmed behind it for depth, the alert overlapping its edge. */
@media (max-width: 860px) {
  .scene { margin-top: 52px; padding-bottom: 8px; }
  .tilt .window { width: 100%; transform: rotateX(12deg); opacity: 0.5; -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 85%); mask-image: linear-gradient(to bottom, #000 30%, transparent 85%); }
  .scene .device { position: relative; left: auto; top: auto; width: min(64%, 300px); margin: -44% auto 0; }
  .scene .notif { position: absolute; right: -4px; top: auto; bottom: 3%; width: min(66%, 300px); font-size: 12.5px; padding: 11px 12px; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; border-radius: 18px; }
  .scene .notif .notif-icon { width: 30px; height: 30px; border-radius: 8px; }
  .scene .notif .notif-icon svg { width: 18px; height: 18px; }
  .scene .notif .notif-app { font-size: 11px; }
}

/* ─── Frames ───────────────────────────────────────────────────────────── */
/* An app window: no browser chrome, a lit top edge, a cobalt halo. */
.window {
  position: relative; border-radius: 16px; overflow: hidden; background: #09090b;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 40px 120px -30px rgba(59, 130, 246, 0.35), 0 50px 100px -40px rgba(0, 0, 0, 0.95);
}
.window::after { content: ''; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(156, 199, 255, 0.7), transparent); }
.window img { width: 100%; }
@media (max-width: 640px) { .window { border-radius: 10px; } }

/* A phone: an iPhone 15 at true proportions. The status bar (47pt) and the
   home-indicator strip (34pt) are drawn here; the screenshot is exactly what
   the app gets between them (390 x 763). Sized by its own width. */
.device { container-type: inline-size; }
.device > .frame {
  position: relative; padding: 3.1cqw; border-radius: 17.4cqw;
  background: linear-gradient(145deg, #4a4a52 0%, #1c1c20 20%, #0d0d0f 50%, #1d1d22 80%, #42424a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 0 0 2px rgba(0, 0, 0, 0.6), 0 0 0 1px #000, 0 60px 120px -40px rgba(0, 0, 0, 0.95), 0 30px 80px -30px rgba(59, 130, 246, 0.28);
}
.device .screen { position: relative; overflow: hidden; border-radius: 14.3cqw; background: #09090b; box-shadow: 0 0 0 1px #000; }
.device .status { display: flex; align-items: center; justify-content: space-between; height: 12.05cqw; padding: 1.2cqw 7.6cqw 0 9.4cqw; color: #fff; font: 600 4.35cqw/1 -apple-system, 'SF Pro Text', var(--sans); letter-spacing: -0.01em; }
.device .status svg { height: 3.2cqw; width: auto; display: block; }
.device .status .icons { display: flex; gap: 1.5cqw; align-items: center; }
.device .island { position: absolute; top: 2.8cqw; left: 50%; width: 32.3cqw; height: 9.5cqw; transform: translateX(-50%); border-radius: 99px; background: #000; }
.device .home { display: block; height: 8.7cqw; position: relative; }
.device .home::after { content: ''; position: absolute; left: 50%; bottom: 2.1cqw; width: 34.6cqw; height: 1.28cqw; transform: translateX(-50%); border-radius: 99px; background: rgba(255, 255, 255, 0.92); }
.device img { width: 100%; }

/* A phone alert, drawn in HTML. The words are the ones the app sends. */
.notif {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 13px 15px; border-radius: 22px; text-align: left;
  background: rgba(44, 44, 52, 0.62);
  -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 60px -20px rgba(0, 0, 0, 0.8);
  color: #f5f5f7; font-size: 14.5px; line-height: 1.35;
}
.notif-icon { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(180deg, #26272c, #0c0c0f); display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.notif-icon svg { width: 24px; height: 24px; }
.notif-app { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: #a3a6ae; letter-spacing: 0.01em; }
.notif-title { margin-top: 2px; font-weight: 650; letter-spacing: -0.01em; }
.notif-text { color: #d2d4da; }

/* ─── Trades marquee ───────────────────────────────────────────────────── */
.trades { padding: 64px 0 0; }
.trades-label { text-align: center; font-size: 14px; color: var(--ink-3); }
.marquee { margin-top: 22px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; width: max-content; }
.marquee li { flex: none; padding: 10px 18px; border-radius: 999px; font-size: 15px; color: var(--ink-2); background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); white-space: nowrap; }
.marquee li[aria-hidden] { }
@media (prefers-reduced-motion: no-preference) {
  .marquee ul { animation: slide 48s linear infinite; }
  .marquee:hover ul { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee ul { width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee li[aria-hidden] { display: none; }
}
@keyframes slide { to { transform: translateX(calc(-50% - 5px)); } }

/* ─── Facts ────────────────────────────────────────────────────────────── */
.facts { padding: 120px 0 0; }
.facts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; gap: 12px; }
.facts-grid > div { padding: 30px 28px 32px; }
.facts-grid dt { font-size: clamp(52px, 5.4vw, 68px); font-weight: 600; letter-spacing: -0.06em; line-height: 1; font-variant-numeric: tabular-nums; }
.facts-grid dd { margin: 14px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
@media (max-width: 900px) { .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .facts-grid > div { padding: 24px 20px 26px; } }

/* ─── Sections ─────────────────────────────────────────────────────────── */
.section { position: relative; padding: 150px 0; }
.section.tight-top { padding-top: 0; }
@media (max-width: 760px) { .section { padding: 96px 0; } }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 500 13px/1 var(--mono); color: var(--sky); letter-spacing: 0.02em; text-transform: uppercase; }
.kicker .n { color: var(--ink-3); }
.h2 { margin-top: 18px; font-size: clamp(38px, 5vw, 62px); line-height: 1.02; letter-spacing: -0.05em; font-weight: 600; text-wrap: balance; }
.sub { margin-top: 22px; font-size: clamp(17px, 1.8vw, 19px); line-height: 1.6; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.center { text-align: center; }
.center .sub { margin-left: auto; margin-right: auto; }

/* The journey index. */
.steps { list-style: none; padding: 0; margin: 64px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; position: relative; }
.steps a { display: flex; flex-direction: column; height: 100%; padding: 24px 22px 22px; border-radius: 20px; text-decoration: none; transition: transform 0.3s var(--ease), background-color 0.3s var(--ease); }
.steps a:hover { transform: translateY(-3px); background: linear-gradient(180deg, rgba(59, 130, 246, 0.1), rgba(255, 255, 255, 0.012)), var(--panel); }
.steps .n { font: 500 12.5px/1 var(--mono); color: var(--sky); }
.steps h3 { margin-top: 16px; font-size: 18px; letter-spacing: -0.025em; }
.steps p { margin-top: 8px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.steps .go { margin-top: auto; padding-top: 18px; font-size: 13.5px; font-weight: 500; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s; }
.steps a:hover .go { color: var(--sky); }
.steps .go svg { width: 13px; height: 13px; transform: rotate(90deg); }
@media (max-width: 1020px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps li:last-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* A feature: copy beside a scene. */
.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: center; }
.feature.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature.flip .feature-copy { order: 2; }
.checks { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 16px; }
.checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.checks svg { width: 18px; height: 18px; margin-top: 3px; color: var(--cobalt-hi); }
.checks b { color: var(--ink); font-weight: 600; }
@media (max-width: 1020px) {
  .feature, .feature.flip { grid-template-columns: 1fr; gap: 56px; }
  .feature.flip .feature-copy { order: 0; }
}

/* A scene: the app's pieces, lit from behind. No box — the light is the frame. */
.stage { position: relative; isolation: isolate; }
.stage::before {
  content: ''; position: absolute; inset: 6% 4%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(59, 130, 246, 0.26), transparent 78%);
  filter: blur(34px);
}
.stage img { -webkit-user-drag: none; user-select: none; }
.lift { filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.7)); }
/* A piece cropped mid-card fades out rather than ending on a hard line. */
.fade { -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); }
/* A panel from the app, set in glass. */
.panel { padding: 22px 22px 18px; }
.panel.tight { padding: 20px 18px 14px; }
.panel img { border-radius: 4px; }

.st-requests { min-height: 620px; display: flex; justify-content: center; padding-top: 112px; }
.st-requests .form { width: 372px; max-width: 100%; }
.st-requests .notif { position: absolute; left: 50%; top: 0; width: 350px; transform: translateX(-12%); }

.st-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; padding-top: 76px; }
.st-quotes .card { padding: 20px 20px 4px; }
.st-quotes .accept { margin-top: 110px; }
.st-quotes .notif { position: absolute; right: 0; top: 0; width: 330px; }

.st-schedule { margin-top: 72px; }
.st-schedule .window { width: 100%; }
.st-schedule .zoom { position: absolute; right: -2%; bottom: -8%; width: min(620px, 54%); }

.st-crew { display: grid; grid-template-columns: 300px 300px; justify-content: center; align-items: start; }
.st-crew .device { width: 300px; position: relative; z-index: 1; }
.st-crew .pay { position: relative; z-index: 2; margin: 170px 0 0 -40px; }

.st-paid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.st-paid .pay-card { margin-top: 100px; }

.st-morning { margin-top: 72px; display: flex; justify-content: center; align-items: center; gap: 44px; padding: 20px 0; }
.st-morning .panel { width: 480px; flex-shrink: 0; }
.st-morning .alerts { display: grid; gap: 12px; width: 370px; }

@media (max-width: 1180px) {
  .st-requests .notif { transform: none; left: auto; right: 0; width: 320px; }
  .st-quotes .notif { width: 300px; }
  .st-crew { grid-template-columns: 270px 270px; }
  .st-crew .device { width: 270px; }
}
@media (max-width: 1020px) {
  .st-morning { flex-direction: column; gap: 22px; }
  .st-morning .panel { width: min(480px, 100%); }
  .st-morning .alerts { width: min(420px, 100%); }
  .st-schedule .zoom { right: 2%; bottom: -12%; width: 64%; }
}
@media (max-width: 760px) {
  .st-requests, .st-quotes, .st-paid, .st-crew { min-height: 0; padding-top: 0; display: grid; grid-template-columns: 1fr; justify-items: center; gap: 18px; }
  .st-requests .form, .st-quotes .card, .st-paid .paid-card { width: 100%; max-width: 372px; }
  .st-requests .notif, .st-quotes .notif, .st-crew .pay { position: relative; left: auto; right: auto; top: auto; transform: none; width: 100%; max-width: 372px; order: -1; margin: 0; }
  .st-quotes .accept, .st-paid .pay-card { display: none; }
  .st-crew .device { width: 76%; max-width: 300px; }
  .st-schedule { margin-top: 44px; }
  .st-schedule .zoom { display: none; }
}

.stack-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; align-items: end; }
.stack-head .checks { margin: 0; }
@media (max-width: 1020px) { .stack-head { grid-template-columns: 1fr; gap: 34px; } }

/* A soft divider of light between sections. */
.beam { height: 1px; max-width: var(--max); margin: 0 auto; background: linear-gradient(90deg, transparent, rgba(156, 199, 255, 0.28), transparent); }

/* ─── Bento ────────────────────────────────────────────────────────────── */
.bento { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bento article { padding: 30px 28px; }
.bento .wide { grid-column: span 2; }
.bento .tall { grid-row: span 2; }
.ic-box { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(180deg, rgba(59, 130, 246, 0.28), rgba(59, 130, 246, 0.08)); box-shadow: inset 0 0 0 1px rgba(91, 155, 255, 0.35), 0 8px 24px -8px rgba(59, 130, 246, 0.5); }
.ic-box svg { width: 20px; height: 20px; color: #dbe9ff; }
.bento h3 { margin-top: 20px; font-size: 18.5px; letter-spacing: -0.025em; }
.bento p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.map { margin-top: 24px; border-radius: 14px; overflow: hidden; background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; }
.map > div { display: grid; grid-template-columns: minmax(0, 1.1fr) 20px minmax(0, 0.9fr); align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.map > div:first-child { border-top: 0; font: 500 11.5px/1.2 var(--mono); color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; }
.map code { font: 13px/1.3 var(--mono); color: #dfe1e6; background: rgba(255, 255, 255, 0.06); padding: 3px 8px; border-radius: 6px; justify-self: start; }
.map svg { width: 15px; height: 15px; color: var(--cobalt-hi); }
.map b { font-weight: 600; }
.rates { list-style: none; padding: 0; margin: 22px 0 0; }
.rates li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); }
.rates li b { font: 500 13px/1.45 var(--mono); color: var(--ink); text-align: right; }
.bento p.rates-note { margin-top: 14px; font-size: 13.5px; color: var(--ink-3); }
@media (max-width: 1000px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento .tall { grid-row: auto; } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; } .bento .wide { grid-column: auto; } .bento article { padding: 26px 22px; } }

/* ─── Not live yet ─────────────────────────────────────────────────────── */
.next { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 12px; }
.next-card { padding: 36px; display: flex; flex-direction: column; overflow: hidden; }
.tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 999px; background: rgba(59, 130, 246, 0.14); box-shadow: inset 0 0 0 1px rgba(91, 155, 255, 0.3); color: #cfe2ff; font: 500 11.5px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cobalt-hi); box-shadow: 0 0 10px var(--cobalt-hi); }
.next-card h3 { margin-top: 20px; font-size: 24px; line-height: 1.15; letter-spacing: -0.035em; }
.next-card p { margin-top: 12px; color: var(--ink-2); font-size: 15.5px; }
.next-card .today { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink-3); }
.next-card .today b { color: var(--ink); font-weight: 600; }
.next-card > .today { margin-top: 26px; }
.next-wide { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 36px; align-items: center; }
.next-wide .copy { display: flex; flex-direction: column; height: 100%; }
.next-wide .copy .today { margin-top: 24px; }
@media (max-width: 1000px) { .next { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .next-card { padding: 28px 22px; }
  .next-wide { grid-template-columns: 1fr; gap: 28px; }
  .next-wide .device { width: 70%; max-width: 240px; justify-self: center; }
}

/* ─── Price ────────────────────────────────────────────────────────────── */
.price { max-width: 880px; margin: 60px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); text-align: left; overflow: hidden; border-radius: 26px; }
.price::after { content: ''; position: absolute; left: 20%; right: 20%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(156, 199, 255, 0.8), transparent); }
.price-main { padding: 44px 40px; background: radial-gradient(90% 80% at 0% 0%, rgba(59, 130, 246, 0.2), transparent 70%); }
.price-label { font: 500 12.5px/1 var(--mono); color: var(--sky); letter-spacing: 0.04em; text-transform: uppercase; }
.price-big { margin-top: 16px; font-size: clamp(56px, 7vw, 76px); font-weight: 600; letter-spacing: -0.06em; line-height: 0.95; }
.price-sub { margin-top: 14px; color: var(--ink-2); font-size: 16px; }
.price-main .btn { margin-top: 32px; }
.price-list { padding: 44px 40px; list-style: none; margin: 0; display: grid; gap: 15px; align-content: center; border-left: 1px solid var(--line); }
.price-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.price-list svg { width: 18px; height: 18px; margin-top: 2px; color: var(--cobalt-hi); }
.price-fine { margin: 24px auto 0; max-width: 40em; font-size: 14px; color: var(--ink-3); text-align: center; }
@media (max-width: 720px) { .price { grid-template-columns: 1fr; } .price-main, .price-list { padding: 32px 24px; } .price-list { border-left: 0; border-top: 1px solid var(--line); } .price-main .btn { width: 100%; } }

/* ─── Questions ────────────────────────────────────────────────────────── */
.qa { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 80px; align-items: start; }
.qa-side { position: sticky; top: 110px; }
.qa-side .sub { font-size: 16.5px; }
.qa-side a { color: var(--sky); text-underline-offset: 3px; }
.faq { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 24px 48px 24px 0; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; transition: color 0.2s; }
.faq summary:hover { color: #fff; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ''; position: absolute; right: 8px; top: 50%; width: 13px; height: 1.5px; background: var(--ink-2); transition: transform 0.35s var(--ease); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p { padding: 0 0 26px; margin-top: -6px; color: var(--ink-2); max-width: 60ch; font-size: 16px; line-height: 1.65; }
@media (max-width: 1000px) { .qa { grid-template-columns: 1fr; gap: 36px; } .qa-side { position: static; } }

/* ─── Closing ──────────────────────────────────────────────────────────── */
.final { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: 170px 24px 180px; }
.final::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 60% at 50% 100%, rgba(59, 130, 246, 0.45), transparent 72%), radial-gradient(30% 40% at 30% 100%, rgba(99, 102, 241, 0.22), transparent 70%); }
.final::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 50% 0 / 80px 80px, linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 50% 0 / 80px 80px; -webkit-mask-image: radial-gradient(60% 70% at 50% 100%, #000 10%, transparent 75%); mask-image: radial-gradient(60% 70% at 50% 100%, #000 10%, transparent 75%); }
.final .h2 { margin: 0 auto; font-size: clamp(44px, 7vw, 88px); max-width: 12ch; letter-spacing: -0.055em; }
.final .sub { margin-left: auto; margin-right: auto; text-wrap: balance; }
.final .hero-cta { margin-top: 42px; }
@media (max-width: 640px) { .final { padding: 110px 20px 120px; } }

/* ─── Footer ───────────────────────────────────────────────────────────── */
.site-foot { padding: 80px 0 48px; font-size: 14px; color: var(--ink-3); border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 40px; }
.foot-brand p { margin-top: 16px; max-width: 24em; color: var(--ink-3); font-size: 14.5px; }
.foot-col h4 { margin: 0 0 16px; font-size: 13px; font-weight: 500; color: var(--ink); }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.foot-col a { text-decoration: none; color: var(--ink-3); transition: color 0.2s; }
.foot-col a:hover { color: var(--ink); }
.foot-base { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }

/* ─── Motion ────────────────────────────────────────────────────────────
   The script adds .js and marks sections .in as they arrive; with no
   script nothing is ever hidden, and site.js reveals anything still hidden
   after a moment, so no section can be left blank. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
  .hero .eyebrow, .hero h1, .hero .lede, .hero .hero-cta, .hero .hero-note { animation: rise 1s var(--ease) both; }
  .hero h1 { animation-delay: 0.06s; }
  .hero .lede { animation-delay: 0.14s; }
  .hero .hero-cta { animation-delay: 0.2s; }
  .hero .hero-note { animation-delay: 0.26s; }
  .scene { animation: rise 1.4s var(--ease) 0.35s both; }
  .tilt .window { animation: untilt 1.8s var(--ease) 0.35s both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes untilt { from { transform: rotateX(34deg) scale(0.94); } to { transform: rotateX(16deg) scale(0.985); } }
@media (max-width: 860px) { @keyframes untilt { from { transform: rotateX(26deg); } to { transform: rotateX(12deg); } } }

/* ─── Legal pages ──────────────────────────────────────────────────────── */
.legal { max-width: 760px; margin: 0 auto; padding: 80px var(--gutter) 120px; }
.legal h1 { font-size: clamp(40px, 5vw, 56px); letter-spacing: -0.05em; line-height: 1.02; }
.legal .meta { margin-top: 16px; color: var(--ink-3); font-size: 14.5px; }
.legal .intro { margin-top: 22px; font-size: 19px; color: var(--ink-2); }
.legal .draft { margin-top: 28px; padding: 16px 18px; border-radius: 12px; background: rgba(59, 130, 246, 0.08); box-shadow: inset 0 0 0 1px rgba(91, 155, 255, 0.22); font-size: 14.5px; color: var(--ink-2); }
.legal h2 { margin-top: 56px; font-size: 23px; letter-spacing: -0.03em; line-height: 1.25; }
.legal h3 { margin-top: 28px; font-size: 18px; letter-spacing: -0.02em; }
.legal p, .legal li { color: var(--ink-2); font-size: 16.5px; line-height: 1.7; }
.legal p { margin-top: 14px; }
.legal ul { margin: 14px 0 0; padding-left: 22px; }
.legal li + li { margin-top: 8px; }
.legal b, .legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--sky); text-underline-offset: 3px; }
.legal table { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 15px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.legal th { color: var(--ink); font-weight: 600; }
.legal .toc { margin-top: 32px; padding: 22px 24px; border-radius: 16px; }
.legal .toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.legal .toc li { font-size: 14.5px; margin: 0 0 6px; break-inside: avoid; }
.legal .toc a { color: var(--ink-2); text-decoration: none; }
.legal .toc a:hover { color: var(--ink); }
@media (max-width: 620px) { .legal .toc ol { columns: 1; } .legal table { font-size: 14px; } }

/* 404 */
.lost { min-height: 64vh; display: grid; place-content: center; text-align: center; padding: 80px var(--gutter); }
.lost .n { font: 500 13px/1 var(--mono); color: var(--sky); letter-spacing: 0.04em; }
.lost h1 { margin-top: 18px; font-size: clamp(38px, 5vw, 56px); letter-spacing: -0.05em; }
.lost p { margin: 16px auto 0; max-width: 28em; color: var(--ink-2); }
.lost .hero-cta { margin-top: 32px; }