/* Cloud Phoenix: the brand's phoenix blue on deep ink, cool quiet neutrals. System fonts only, so the site makes no third-party requests.
   --brand is the logo's own blue; --accent is a deeper shade of it so text and buttons stay readable. */
:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --ink: #141a21;
  --muted: #56606d;
  --line: #dfe4ea;
  --brand: #1190cb;
  --accent: #0a6c9e;
  --accent-ink: #ffffff;
  --accent-soft: #e2f1f9;
  --night: #0f1720;
  --now: #eaf4fa;
  --coffee: #ffdd00;
  --coffee-ink: #17191f;
  --radius: 14px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "SF Pro Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f141a;
    --surface: #171e26;
    --ink: #e8edf2;
    --muted: #a0abb8;
    --line: #27313c;
    --accent: #4cb3e6;
    --accent-ink: #0b1420;
    --accent-soft: #14303f;
    --now: #13222e;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 var(--font);
}
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-left)); }
.narrow { max-width: 760px; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); background: var(--surface); }
.site-header .wrap { display: flex; align-items: center; gap: 16px; min-height: 68px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; letter-spacing: -0.01em; font-size: 19px; margin-right: auto; }
.brand { margin-right: auto; } .brand img { height: 52px; width: auto; display: block; }
.nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav a { color: var(--ink); text-decoration: none; padding: 8px 12px; border-radius: 999px; font-size: 15px; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--accent-soft); }
/* The switch to the same page in the other language (中文 / English). */
.nav a.lang { color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line); }
.nav a.lang:hover { color: var(--ink); }

/* Mobile menu (assets/nav.js sets .js): below 720px the nav folds behind a menu button and opens as a full-width list
   under the logo. Without JavaScript the nav stays visible and wraps, as before. */
.nav-toggle { display: none; }
@media (max-width: 719px) {
  .js .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer;
  }
  .js .nav-toggle:hover { background: var(--accent-soft); }
  .js .nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 4px 0 8px; }
  .js .nav.open { display: flex; }
  .js .nav a { padding: 12px 14px; border-radius: 10px; font-size: 16px; }
  .js .nav a.coffee { margin-top: 6px; text-align: center; }
}
/* The icon: three bars that turn into a cross while the menu is open. */
.bars, .bars::before, .bars::after { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, background-color .2s, top .2s; }
.bars { position: relative; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -7px; }
.bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .bars { background-color: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { top: 0; transform: rotate(-45deg); }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px; border: 0;
  font: 600 15px/1.2 var(--font); text-decoration: none; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
}
.btn:hover { filter: brightness(1.07); }
.btn.secondary { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.coffee, .nav a.coffee { background: var(--coffee); color: var(--coffee-ink); font-weight: 600; }
.nav a.coffee:hover { background: var(--coffee); filter: brightness(1.05); }

/* Hero */
.hero { background: var(--night); color: #f3f1ee; position: relative; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; right: -120px; bottom: -220px; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(17,144,203,0.55), rgba(17,144,203,0) 65%);
  pointer-events: none;
}
.hero .wrap { padding-top: 72px; padding-bottom: 72px; position: relative; z-index: 1; }
.hero h1 { font: 700 clamp(34px, 5vw, 54px)/1.08 var(--font-display); letter-spacing: -0.025em; margin: 0 0 18px; max-width: 16ch; text-wrap: balance; }
.hero p { font-size: 19px; color: #c9ccd4; max-width: 56ch; margin: 0 0 28px; text-wrap: pretty; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .btn.secondary { color: #f3f1ee; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.3); }

/* Hero diagram: an example Azure setup beside the intro on wide screens. Narrower, it would only push the
   services down, so it's hidden. The hero is dark in both themes, so the diagram has one set of colours. */
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
@media (min-width: 900px) { .hero .wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.hero-diagram { width: 100%; max-width: 440px; justify-self: center; overflow: visible; }
@media (max-width: 899px) { .hero-diagram { display: none; } }
.hero-diagram .icon * { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-diagram .icon .o { stroke: #e3e9ef; }
.hero-diagram .icon .a { stroke: #4cb3e6; }
.hero-diagram .icon .halo { fill: #121c27; stroke: rgba(76,179,230,0.22); stroke-width: 1; }
.hero-diagram .boundary { fill: rgba(17,144,203,0.06); stroke: rgba(76,179,230,0.45); stroke-width: 1; stroke-dasharray: 5 5; }
.hero-diagram .flows path { fill: none; stroke: #4cb3e6; stroke-width: 1.75; stroke-dasharray: 5 7; marker-end: url(#arrow); animation: flow 1.4s linear infinite; }
.hero-diagram .arrowhead { fill: #4cb3e6; }
.hero-diagram .links path { fill: none; stroke: rgba(160,190,215,0.45); stroke-width: 1.25; stroke-dasharray: 1.5 4; stroke-linecap: round; }
.hero-diagram .links .deploy { marker-end: url(#arrow); }
@keyframes flow { to { stroke-dashoffset: -12; } }
@media (prefers-reduced-motion: reduce) { .hero-diagram .flows path { animation: none; } }

/* Sections */
section { padding: 56px 0; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.015em; line-height: 1.2; text-wrap: balance; }
h2 { font-size: 30px; margin: 0 0 8px; }
h3 { font-size: 20px; margin: 0 0 6px; }
.lead { color: var(--muted); max-width: 62ch; margin: 0 0 28px; text-wrap: pretty; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 6px; }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.card p { margin: 0; color: var(--muted); }
.card ul { margin: 8px 0 0; padding-left: 20px; color: var(--muted); }

.app-card { display: flex; gap: 18px; align-items: flex-start; text-decoration: none; color: inherit; transition: border-color .15s; }
.app-card:hover { border-color: var(--accent); }
.app-card img { width: 72px; height: 72px; border-radius: 18px; flex: none; }
.app-card .more { display: inline-block; margin-top: 10px; color: var(--accent); font-weight: 600; font-size: 15px; }

/* App pages */
.app-hero { padding: 48px 0 24px; }
.app-hero .wrap { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.app-hero img { width: 112px; height: 112px; border-radius: 26px; }
.app-hero h1 { font-size: clamp(32px, 4.5vw, 44px); margin: 0 0 4px; }
.app-hero p { margin: 0; color: var(--muted); font-size: 19px; }
.status { display: inline-block; margin-top: 10px; padding: 4px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--ink); font-size: 14px; font-weight: 600; }
.links { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.link-card { display: block; text-decoration: none; color: inherit; }
.link-card strong { display: block; color: var(--ink); }
.link-card span { color: var(--muted); font-size: 15px; }
.link-card:hover { border-color: var(--accent); }
.note { border-left: 4px solid var(--accent); }

/* Roadmap (Drone Zones app page): themes as rows and loose seasons as columns on wide screens, a list on phones.
   Status is shown by the box's form: ready = solid, in testing = tinted, planned = outlined, exploring = dashed. */
/* A wide section on an app page (such as the roadmap): its heading, text and key stay in the centred reading column
   (the same 760px as .narrow) so they line up with the rest of the page; only the chart uses the full width. */
.breakout > .wrap > :not(.roadmap), .breakout .rm-key { max-width: 720px; margin-left: auto; margin-right: auto; }
.roadmap { --label: 150px; }
.rm-key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 20px; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
.rm-key li { display: flex; align-items: center; gap: 8px; }
.rm-key .swatch { width: 26px; height: 14px; border-radius: 4px; flex: none; }
.rm-head { display: none; }
.lane { border-top: 1px solid var(--line); padding: 14px 0; }
.lane-name { font-size: 16px; margin: 0 0 10px; }
.lane-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.item { border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; min-width: 0; }
.item .when { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.item strong { font-size: 15px; line-height: 1.3; }
.item .what { font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.item .rm-status { justify-self: start; margin-top: 4px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.roadmap .ready { background: var(--accent); color: var(--accent-ink); }
.roadmap .ready .when, .roadmap .ready .what { color: var(--accent-ink); opacity: 0.85; }
.roadmap .ready .rm-status { background: var(--accent-ink); color: var(--accent); }
.roadmap .testing { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.roadmap .testing .rm-status { background: var(--accent); color: var(--accent-ink); }
.roadmap .planned { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); }
.roadmap .planned .rm-status { background: var(--accent-soft); color: var(--ink); }
.roadmap .exploring { background: transparent; border: 1.5px dashed var(--muted); }
.roadmap .exploring .rm-status { box-shadow: inset 0 0 0 1px var(--muted); color: var(--muted); }
@media (min-width: 860px) {
  .rm-head { display: grid; grid-template-columns: var(--label) repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 4px; }
  .rm-head span { font-size: 13px; font-weight: 700; color: var(--muted); padding: 6px 4px; border-radius: 8px; text-align: center; }
  .rm-head .is-now { background: var(--now); color: var(--accent); }
  .lane { display: grid; grid-template-columns: var(--label) repeat(5, minmax(0, 1fr)); gap: 10px; align-items: start;
          background: linear-gradient(90deg, transparent var(--label), var(--now) var(--label)) no-repeat;
          background-size: calc(var(--label) + (100% - var(--label) - 50px) / 5 + 10px) 100%; }
  .lane-name { grid-column: 1; margin: 12px 0 0; }
  .lane-items { display: contents; }
  .item { grid-column: calc(var(--col) + 1) / span var(--span, 1); grid-row: 1; }
  .item .when { display: none; }
}

/* Prose pages (privacy) */
.prose { padding: 40px 0 56px; }
.prose h1 { font-size: 36px; margin: 0 0 4px; }
.prose .meta { color: var(--muted); margin: 0 0 24px; }
.prose h2 { font-size: 22px; margin: 32px 0 8px; }
.prose li { margin: 4px 0; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { font-weight: 600; }

/* Form */
form { display: grid; gap: 16px; }
label { font-weight: 600; font-size: 15px; display: grid; gap: 6px; }
label .hint { font-weight: 400; color: var(--muted); }
input, select, textarea {
  font: 16px/1.4 var(--font); color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 12px; width: 100%;
}
textarea { min-height: 160px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
.row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.message { padding: 14px 16px; border-radius: 10px; background: var(--accent-soft); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 32px 0 40px; color: var(--muted); font-size: 14px; }
.site-footer p { margin: 0 0 6px; }
.site-footer a { color: var(--muted); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Opened from inside an app (?from=app): no outside payment links, as Google Play's payments policy requires. */
.from-app .coffee { display: none !important; }

/* Simplified Chinese pages (/zh/). Latin text keeps the system font; Chinese uses the system's Simplified Chinese font
   rather than whatever the browser picks (which can be a Japanese font). No negative letter-spacing for Chinese, a
   little more line height, and a hero width measured in characters rather than "ch". */
html:lang(zh-Hans) {
  --font: -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  --font-display: "Segoe UI Variable Display", "SF Pro Display", -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
}
html:lang(zh-Hans) body { line-height: 1.75; }
html:lang(zh-Hans) h1, html:lang(zh-Hans) h2, html:lang(zh-Hans) h3 { letter-spacing: 0; }
html:lang(zh-Hans) .hero h1 { letter-spacing: 0; max-width: 11em; line-height: 1.2; }
html:lang(zh-Hans) .eyebrow { letter-spacing: 0.2em; }
/* Chinese has no true italics (browsers slant the glyphs), so emphasis in Chinese text stays upright. English phrases
   marked lang="en-GB", such as the apps' button names, keep their italics. */
html:lang(zh-Hans) em:lang(zh-Hans) { font-style: normal; }

/* Feature cards that open their details in a dialog (Drone Zones UK page; assets/dialogs.js). Each card shows a
   line-style icon, a heading and one line; the full list opens as a modal. */
/* Icon and heading share the top line; the summary and "See all features" run full width beneath, with the link
   kept at the bottom so side-by-side cards line up. */
.feature-card {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; column-gap: 14px; row-gap: 10px;
  align-items: center; text-decoration: none; color: inherit; transition: border-color .15s;
}
.feature-card:hover { border-color: var(--accent); }
.feature-card h3 { margin: 0; }
.feature-card p, .feature-card .more { grid-column: 1 / -1; }
.feature-card p { align-self: start; }
.feature-card .more { color: var(--accent); font-weight: 600; font-size: 15px; }
.feature-icon { width: 48px; height: 48px; flex: none; display: block; }
.feature-icon * { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.feature-icon .o { stroke: var(--ink); }
.feature-icon .a { stroke: var(--accent); }
.feature-icon .dot { fill: var(--accent); stroke: none; }
.feature-dialog {
  width: min(860px, calc(100% - 32px)); max-height: min(88vh, 820px); overflow: auto; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.feature-dialog:focus { outline: none; } /* focused itself on opening (assets/dialogs.js) */
.feature-dialog::backdrop { background: rgba(10, 15, 22, 0.55); }
.feature-dialog .dialog-body { padding: 20px 24px 26px; }
.dialog-head { display: flex; align-items: center; gap: 14px; }
.dialog-head h3 { margin: 0; flex: 1; }
.dialog-head form { display: block; }
.dialog-close {
  width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent;
  color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer;
}
.dialog-close:hover { background: var(--accent-soft); color: var(--ink); }
/* Each feature: an icon tile, a short title and one line of detail; two columns when there's room, one on phones. */
.features { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px 24px; }
.features li { display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; align-items: start; }
.feature-tile { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); display: grid; place-items: center; }
.feature-tile svg { width: 22px; height: 22px; display: block; }
.feature-tile svg * { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feature-tile svg .fill { fill: var(--accent); stroke: none; }
.features strong { display: block; font-size: 16px; line-height: 1.3; margin-top: 1px; }
.features p { margin: 3px 0 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
/* Without JavaScript the card's link jumps to its dialog, which then shows in place on the page. */
.feature-dialog:target:not([open]) { display: block; position: static; width: auto; max-height: none; margin: 16px 0 0; box-shadow: none; }