@layer theme, base, components, utilities;
@layer theme {
  :root, :host { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace; --spacing: 0.25rem; --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0px; padding: 0px; border: 0px solid; }
  html, :host { line-height: 1.5; text-size-adjust: 100%; tab-size: 4; font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; }
  hr { height: 0px; color: inherit; border-top-width: 1px; }
  abbr:where([title]) { text-decoration: underline dotted; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
  a { color: inherit; text-decoration: inherit; }
  b, strong { font-weight: bolder; }
  code, kbd, samp, pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; }
  small { font-size: 80%; }
  sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
  sub { bottom: -0.25em; }
  sup { top: -0.5em; }
  table { text-indent: 0px; border-color: inherit; border-collapse: collapse; }
  progress { vertical-align: baseline; }
  summary { display: list-item; }
  ol, ul, menu { list-style: none; }
  img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
  img, video { max-width: 100%; height: auto; }
  button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; letter-spacing: inherit; color: inherit; border-radius: 0px; background-color: transparent; opacity: 1; }
  :where(select:is([multiple], [size])) optgroup { font-weight: bolder; }
  :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; }
  ::file-selector-button { margin-inline-end: 4px; }
  ::placeholder { opacity: 1; }
  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
  ::placeholder {
  color: currentcolor;
  @supports (color: color-mix(in lab, red, red)) {
  color: color-mix(currentcolor, transparent);
}
}
}
  textarea { resize: vertical; }
  ::-webkit-search-decoration { appearance: none; }
  ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; }
  ::-webkit-datetime-edit { display: inline-flex; }
  ::-webkit-datetime-edit-fields-wrapper { padding: 0px; }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0px; }
  ::-webkit-calendar-picker-indicator { line-height: 1; }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { appearance: button; }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
  [hidden]:where(:not([hidden="until-found"])) { display: none !important; }
}
@layer utilities {
  .relative { position: relative; }
  .start { inset-inline-start: var(--spacing); }
  .block { display: block; }
  .table { display: table; }
}
:root { --ink: #062f45; --ink-soft: #315666; --orange: #f04b23; --orange-dark: #d93b18; --cream: #fffaf0; --paper: #fffdf8; --line: #dce5e6; --mint: #dff6ed; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0px; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { width: 1.25rem; fill: none; stroke: currentcolor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.site-header { align-items: center; display: flex; justify-content: space-between; margin: 0px auto; max-width: 1240px; padding: 22px 32px; position: relative; z-index: 10; }
.brand { display: block; width: 186px; }
.brand img { display: block; height: auto; mix-blend-mode: multiply; width: 100%; }
nav { align-items: center; display: flex; font-size: 0.86rem; font-weight: 700; gap: 32px; }
nav a { transition: color 160ms; }
nav a:hover { color: var(--orange); }
.nav-cta { border: 1px solid var(--ink); border-radius: 999px; padding: 12px 18px; }
.hero { align-items: center; display: grid; gap: 48px; grid-template-columns: 1.02fr 0.98fr; margin: 0px auto; max-width: 1240px; min-height: 720px; overflow: hidden; padding: 54px 32px 84px; }
.hero-copy { padding-bottom: 28px; }
.eyebrow { align-items: center; color: var(--orange); display: flex; font-size: 0.72rem; font-weight: 800; gap: 10px; letter-spacing: 0.13em; margin: 0px 0px 22px; text-transform: uppercase; }
.eyebrow > span { background: var(--orange); border-radius: 50%; box-shadow: rgba(240, 75, 35, 0.12) 0px 0px 0px 5px; height: 7px; width: 7px; }
h1, h2, h3, p { margin-top: 0px; }
h1 { font-size: clamp(3.4rem, 6vw, 6.4rem); letter-spacing: -0.07em; line-height: 0.93; margin-bottom: 30px; }
h1 em { color: var(--orange); font-style: normal; }
.hero-lead { color: var(--ink-soft); font-size: 1.08rem; line-height: 1.75; margin-bottom: 34px; max-width: 610px; }
.hero-actions { align-items: center; display: flex; gap: 28px; }
.button { align-items: center; border-radius: 999px; display: inline-flex; font-size: 0.88rem; font-weight: 800; gap: 12px; justify-content: center; padding: 16px 23px; transition: transform 160ms, box-shadow 160ms, background 160ms; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--orange); box-shadow: rgba(240, 75, 35, 0.24) 0px 13px 30px; color: white; }
.button-primary:hover { background: var(--orange-dark); box-shadow: rgba(240, 75, 35, 0.28) 0px 16px 36px; }
.text-link { border-bottom: 1px solid; font-size: 0.85rem; font-weight: 800; padding-bottom: 3px; }
.launch-note { align-items: center; display: flex; gap: 14px; margin-top: 48px; }
.launch-note p { color: var(--ink-soft); font-size: 0.72rem; line-height: 1.6; margin: 0px; }
.avatar-stack { display: flex; }
.avatar-stack span { align-items: center; background: var(--ink); border: 3px solid var(--paper); border-radius: 50%; color: white; display: flex; font-size: 0.52rem; font-weight: 800; height: 34px; justify-content: center; margin-left: -9px; width: 34px; }
.avatar-stack span:first-child { background: var(--orange); margin-left: 0px; }
.avatar-stack span:last-child { background: rgb(141, 217, 189); color: var(--ink); }
.hero-visual { align-items: center; display: flex; justify-content: center; min-height: 620px; position: relative; }
.hero-visual::before { background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.96) 0px, rgba(255, 255, 255, 0.96) 24%, transparent 25%), linear-gradient(145deg, rgb(249, 216, 200), rgb(246, 234, 215) 48%, rgb(215, 236, 230)); border-radius: 50%; content: ""; height: 520px; position: absolute; width: 520px; }
.orbit { border: 1px solid rgba(6, 47, 69, 0.14); border-radius: 50%; height: 580px; position: absolute; width: 580px; }
.orbit-two { height: 660px; opacity: 0.6; width: 660px; }
.phone { background: rgb(248, 250, 248); border: 8px solid var(--ink); border-radius: 42px; box-shadow: rgba(6, 47, 69, 0.25) 0px 35px 70px; height: 590px; overflow: hidden; position: relative; transform: rotate(2deg); width: 298px; z-index: 2; }
.phone-top { align-items: center; display: flex; font-size: 0.55rem; font-weight: 800; justify-content: space-between; padding: 9px 17px 4px; }
.island { background: var(--ink); border-radius: 999px; height: 16px; width: 74px; }
.app-header { display: flex; flex-direction: column; gap: 3px; padding: 16px 19px; }
.app-header span { color: rgb(113, 133, 140); font-size: 0.56rem; font-weight: 700; }
.app-header strong { font-size: 1.18rem; letter-spacing: -0.04em; }
.map { background: linear-gradient(34deg, transparent 30%, rgba(255, 255, 255, 0.7) 30%, rgba(255, 255, 255, 0.7) 35%, transparent 35%), linear-gradient(122deg, rgb(231, 238, 232) 25%, rgb(242, 232, 216) 25%, rgb(242, 232, 216) 50%, rgb(223, 234, 228) 50%, rgb(223, 234, 228) 72%, rgb(237, 233, 217) 72%); height: 283px; overflow: hidden; position: relative; }
.road { background: white; box-shadow: rgb(213, 221, 218) 0px 0px 0px 1px; height: 9px; left: -10%; position: absolute; width: 120%; }
.road-a { top: 33%; transform: rotate(-18deg); }
.road-b { top: 65%; transform: rotate(10deg); }
.road-c { left: 7%; top: 48%; transform: rotate(76deg); }
.road-d { left: 46%; top: 45%; transform: rotate(95deg); }
.street { color: rgb(116, 137, 137); font-size: 0.39rem; font-weight: 700; position: absolute; z-index: 1; }
.street-one { left: 15%; top: 18%; transform: rotate(-18deg); }
.street-two { bottom: 16%; left: 43%; transform: rotate(9deg); }
.street-three { right: 3%; top: 47%; transform: rotate(83deg); }
.map-pin { align-items: center; background: var(--orange); border: 3px solid white; border-radius: 50% 50% 50% 0px; box-shadow: rgba(6, 47, 69, 0.2) 0px 5px 14px; color: white; display: flex; height: 37px; justify-content: center; position: absolute; transform: rotate(-45deg); width: 37px; z-index: 2; }
.map-pin b { font-size: 0.73rem; transform: rotate(45deg); }
.pin-a { left: 20%; top: 30%; }
.pin-b { right: 19%; top: 21%; }
.pin-c { bottom: 16%; left: 48%; }
.location-dot { background: rgb(42, 128, 224); border: 3px solid white; border-radius: 50%; bottom: 36%; box-shadow: rgba(42, 128, 224, 0.17) 0px 0px 0px 9px; height: 16px; left: 29%; position: absolute; width: 16px; }
.app-panel { background: rgb(255, 255, 255); border-radius: 22px 22px 0px 0px; margin-top: -14px; padding: 18px; position: relative; }
.app-panel > div { display: flex; flex-direction: column; }
.tiny-label { color: var(--orange); font-size: 0.45rem; font-weight: 900; letter-spacing: 0.1em; }
.app-panel strong { font-size: 0.92rem; margin: 4px 0px 2px; }
.app-panel small { color: rgb(114, 134, 141); font-size: 0.55rem; }
.app-panel button { background: var(--orange); border: 0px; border-radius: 10px; color: white; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 0.65rem; font-weight: 800; margin-top: 12px; padding: 10px; width: 100%; }
.app-panel .share-button { background: rgb(237, 243, 241); color: var(--ink); margin-top: 7px; }
.floating-card { align-items: center; backdrop-filter: blur(8px); background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 14px; box-shadow: rgba(6, 47, 69, 0.16) 0px 14px 35px; display: flex; gap: 11px; padding: 12px 15px; position: absolute; z-index: 4; }
.floating-card div { display: flex; flex-direction: column; }
.floating-card small { color: rgb(120, 139, 145); font-size: 0.55rem; font-weight: 700; }
.floating-card strong { font-size: 0.7rem; margin-top: 2px; }
.available-card { left: 1%; top: 21%; }
.relay-card { bottom: 18%; right: -1%; }
.icon-chip { align-items: center; background: rgb(253, 233, 226); border-radius: 10px; color: var(--orange); display: flex; height: 38px; justify-content: center; width: 38px; }
.pulse-dot { background: rgb(50, 191, 136); border: 5px solid rgb(216, 246, 234); border-radius: 50%; height: 23px; width: 23px; }
.trust-strip { align-items: center; background: var(--ink); color: white; display: flex; font-size: 0.67rem; font-weight: 800; justify-content: center; letter-spacing: 0.13em; padding: 20px 24px; text-transform: uppercase; }
.trust-strip p { margin: 0px; }
.trust-strip span { background: var(--orange); border-radius: 50%; height: 5px; margin: 0px 28px; width: 5px; }
.section { margin: 0px auto; max-width: 1240px; padding: 112px 32px; }
.section-heading { margin: 0px auto 58px; max-width: 760px; text-align: center; }
.section-heading .eyebrow { justify-content: center; }
h2 { font-size: clamp(2.25rem, 4.5vw, 4.35rem); letter-spacing: -0.055em; line-height: 1.04; margin-bottom: 22px; }
.section-heading > p:last-child, .feature-copy > p { color: var(--ink-soft); line-height: 1.75; }
.step-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.step-grid article { background: white; border: 1px solid var(--line); border-radius: 22px; min-height: 310px; padding: 28px; position: relative; transition: transform 180ms, box-shadow 180ms; }
.step-grid article:hover { box-shadow: rgba(6, 47, 69, 0.08) 0px 22px 50px; transform: translateY(-5px); }
.step-number { color: rgb(156, 175, 180); font-size: 0.64rem; font-weight: 900; letter-spacing: 0.12em; position: absolute; right: 24px; top: 22px; }
.feature-icon { align-items: center; background: rgb(253, 233, 226); border-radius: 14px; color: var(--orange); display: flex; height: 50px; justify-content: center; width: 50px; }
.step-grid .feature-icon { margin-bottom: 52px; }
.step-grid h3, .feature-list h3 { font-size: 1.07rem; letter-spacing: -0.025em; margin-bottom: 10px; }
.step-grid p, .feature-list p { color: var(--ink-soft); font-size: 0.87rem; line-height: 1.7; margin: 0px; }
.features { align-items: stretch; display: grid; gap: 72px; grid-template-columns: 1fr 0.87fr; }
.feature-copy { padding: 34px 0px; }
.feature-copy > p { max-width: 600px; }
.feature-list { border-top: 1px solid var(--line); margin-top: 40px; }
.feature-list > div { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 18px; grid-template-columns: 50px 1fr; padding: 22px 0px; }
.feature-list h3 { margin-bottom: 3px; }
.city-card { background: linear-gradient(rgb(6 47 69 / 87%), rgb(6 47 69 / 94%)),
    radial-gradient(circle at 75% 16%, #f04b23, transparent 36%),
    var(--ink); border-radius: 28px; color: white; display: flex; flex-direction: column; justify-content: space-between; min-height: 580px; overflow: hidden; padding: 34px; position: relative; }
.city-card::after { border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; content: ""; height: 440px; position: absolute; right: -180px; top: -130px; width: 440px; }
.city-top { align-items: center; display: flex; justify-content: space-between; position: relative; z-index: 1; }
.feature-icon.light { background: rgba(255, 255, 255, 0.11); color: white; }
.city-tag { border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; font-size: 0.58rem; font-weight: 900; letter-spacing: 0.12em; padding: 9px 12px; }
.city-card > div:nth-child(2) { position: relative; z-index: 1; }
.city-card > div:nth-child(2) p { color: rgb(168, 215, 198); font-size: 0.8rem; font-weight: 800; margin-bottom: 10px; }
.city-card h3 { font-size: clamp(2rem, 3vw, 3rem); letter-spacing: -0.05em; line-height: 1.08; margin: 0px; }
.neighbourhoods { display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 1; }
.neighbourhoods span { background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 999px; font-size: 0.65rem; font-weight: 700; padding: 8px 11px; }
.city-footnote { color: rgba(255, 255, 255, 0.6); font-size: 0.65rem; margin: 0px; position: relative; z-index: 1; }
.waitlist { padding-top: 60px; }
.waitlist-card { align-items: center; background: var(--orange); border-radius: 28px; color: white; display: grid; gap: 24px 42px; grid-template-columns: 1fr auto; overflow: hidden; padding: 64px; position: relative; }
.waitlist-card::after { border: 90px solid rgba(255, 255, 255, 0.07); border-radius: 50%; content: ""; height: 370px; position: absolute; right: -220px; top: -230px; width: 370px; }
.waitlist-card > * { position: relative; z-index: 1; }
.waitlist-card .eyebrow { color: white; margin-bottom: 14px; }
.waitlist-card h2 { font-size: clamp(2.35rem, 4vw, 4rem); margin-bottom: 16px; max-width: 780px; }
.waitlist-card > div > p:last-child { line-height: 1.7; margin: 0px; max-width: 680px; opacity: 0.82; }
.button-light { background: white; box-shadow: rgba(93, 23, 6, 0.2) 0px 14px 30px; color: var(--ink); white-space: nowrap; }
.email-note { font-size: 0.7rem; grid-column: 1 / -1; margin: 4px 0px 0px; opacity: 0.85; }
.email-note a { border-bottom: 1px solid; }
footer { align-items: center; border-top: 1px solid var(--line); display: grid; gap: 22px; grid-template-columns: 180px 1fr auto; margin: 34px auto 0px; max-width: 1176px; padding: 38px 0px 54px; }
.footer-brand { width: 150px; }
footer > p { color: var(--ink-soft); font-size: 0.72rem; margin: 0px; }
.footer-links { display: flex; font-size: 0.72rem; font-weight: 700; gap: 24px; }
.copyright { grid-column: 1 / -1; }
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 70px; text-align: center; }
  .hero-copy { margin: 0px auto; max-width: 760px; }
  .hero-copy .eyebrow, .hero-actions, .launch-note { justify-content: center; }
  .hero-visual { margin: 0px auto; width: min(100%, 630px); }
  .step-grid { grid-template-columns: 1fr; }
  .step-grid article { min-height: 0px; }
  .step-grid .feature-icon { margin-bottom: 35px; }
  .features { gap: 40px; grid-template-columns: 1fr; }
  .waitlist-card { grid-template-columns: 1fr; text-align: center; }
  .button-light { justify-self: center; }
  footer { grid-template-columns: 1fr; margin-inline: 32px; text-align: center; }
  .footer-brand { margin: 0px auto; }
  .footer-links { justify-content: center; }
}
@media (max-width: 680px) {
  .site-header { padding: 16px 20px; }
  .brand { width: 142px; }
  nav > a:not(.nav-cta) { display: none; }
  .nav-cta { font-size: 0.67rem; padding: 10px 13px; }
  .hero { gap: 4px; padding: 54px 20px 68px; }
  h1 { font-size: clamp(3.15rem, 15vw, 5rem); }
  .hero-lead { font-size: 0.96rem; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 18px; }
  .button-primary { width: 100%; }
  .text-link { align-self: center; }
  .launch-note { margin-top: 36px; }
  .hero-visual { min-height: 530px; transform: scale(0.84); width: 119%; }
  .hero-visual::before { height: 440px; width: 440px; }
  .orbit { height: 490px; width: 490px; }
  .orbit-two { height: 550px; width: 550px; }
  .available-card { left: 5%; }
  .relay-card { right: 4%; }
  .trust-strip { font-size: 0.5rem; }
  .trust-strip span { margin: 0px 12px; }
  .section { padding: 82px 20px; }
  .section-heading { text-align: left; }
  .section-heading .eyebrow { justify-content: flex-start; }
  h2 { font-size: 2.45rem; }
  .step-grid article { padding: 24px; }
  .features { padding-top: 40px; }
  .feature-copy { padding-top: 0px; }
  .city-card { min-height: 520px; padding: 26px; }
  .waitlist { padding-top: 28px; }
  .waitlist-card { padding: 42px 24px; text-align: left; }
  .button-light { justify-self: stretch; }
  .email-note { line-height: 1.7; overflow-wrap: anywhere; }
  footer { margin-inline: 20px; }
  .footer-links { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { transition-duration: 0.01ms !important; }
}