/* app/static/site/home.css — what only the landing page has (home page A,
   2026-10-18). The shared page design — type scale, sections, buttons, hero,
   real-screen figures, blog cards, plan cards, FAQ — lives in site-a.css,
   which every public page loads (2026-10-22); main.home-a also carries
   .site-a. Everything here is scoped to the landing page's own class names.

   Contrast: body copy is --ink, secondary copy --ink-2 (AA in both themes:
   about 8:1 on black, 7.8:1 on white). --ink-3 is never used for text here;
   it fails AA at small sizes. Tap targets are at least 44px tall. */

/* The landing page's title is short, so it runs larger and narrower than an
   inner page's (site-a.css sets those). */
.home-a h1 { font-size: clamp(42px, 6.4vw, 80px); line-height: 1.02; max-width: 11ch; }

/* ── What's wired up ── */
.ha-wired { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; margin-top: 32px; }
.ha-wired div { padding: 18px 20px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.ha-wired div:nth-child(3n+1) { border-left: 0; }
.ha-wired div:nth-child(-n+3) { border-top: 0; }
.ha-wired b { display: block; color: var(--ink); margin-bottom: 4px; }
@media (max-width: 760px) {
  .ha-wired { grid-template-columns: 1fr; }
  .ha-wired div { border-left: 0; border-top: 1px solid var(--line); }
  .ha-wired div:nth-child(-n+3) { border-top: 1px solid var(--line); }
  .ha-wired div:first-child { border-top: 0; }
}

/* ── The eight steps ── */
.ha-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ha-steps li { padding: 16px 14px 18px; border-left: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.ha-steps li:first-child { border-left: 0; }
.ha-steps .n { display: block; font: 500 13px/1 "Geist Mono", ui-monospace, monospace; color: var(--accent); margin-bottom: 10px; }
.ha-steps b { display: block; color: var(--ink); font-weight: 600; font-size: 15px; margin-bottom: 4px; letter-spacing: -0.01em; }
@media (max-width: 1000px) {
  .ha-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ha-steps li:nth-child(5) { border-left: 0; }
  .ha-steps li:nth-child(n+5) { border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .ha-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ha-steps li:nth-child(odd) { border-left: 0; }
  .ha-steps li:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ── The questions ── */
.ha-q { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.ha-q + .ha-q { margin-top: clamp(64px, 8vw, 104px); }
.ha-q--flip .ha-q-text { order: 2; }
.ha-q-text h3 { margin-bottom: 14px; }
.ha-q-answer { color: var(--ink); font-size: 18px; margin-bottom: 18px !important; }
.ha-q-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.ha-q-list li { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; color: var(--ink-2); }
.ha-q-list li b { color: var(--ink); font-weight: 600; }
.ha-where { display: block; font-size: 13px; color: var(--ink-2); margin-top: 3px; font-family: "Geist Mono", ui-monospace, monospace; letter-spacing: 0; }
@media (max-width: 860px) {
  .ha-q { grid-template-columns: 1fr; }
  .ha-q--flip .ha-q-text { order: 0; }
}

/* ── Community (VCommunity) keeps its own section chrome. ── */
.home-a #community { padding-left: 0; padding-right: 0; }

/* ── Pricing ── */
.ha-credits { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 18px; }
.ha-credits > div { padding: 22px 24px; border-left: 1px solid var(--line); }
.ha-credits > div:first-child { border-left: 0; }
.ha-credits h4 { margin: 0 0 6px; font-size: 16px; letter-spacing: -0.01em; }
.ha-credits p { margin: 0; font-size: 15px; color: var(--ink-2); }
@media (max-width: 860px) {
  .ha-credits { grid-template-columns: 1fr; }
  .ha-credits > div { border-left: 0; border-top: 1px solid var(--line); }
  .ha-credits > div:first-child { border-top: 0; }
}

/* ── Veterans + final ── */
.ha-vets h2 { font-size: clamp(26px, 3.2vw, 38px); }
.ha-vets { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 6%, transparent), transparent); }

@media (max-width: 600px) {
  .ha-q-answer { font-size: 17px; }
}

/* The four outcomes (admin 10-22): same box as the old eight steps, four
   columns, with the real step names in small mono type under each one. */
.ha-steps--outcomes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ha-steps--outcomes li { padding: 22px 20px 22px; font-size: 15px; line-height: 1.5; }
.ha-steps--outcomes b { font-size: 18px; margin-bottom: 8px; }
.ha-steps-real { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font: 400 12px/1.5 "Geist Mono", ui-monospace, monospace; color: var(--ink-3, var(--ink-2)); }
@media (max-width: 1000px) {
  .ha-steps.ha-steps--outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ha-steps--outcomes li:nth-child(odd) { border-left: 0; }
  .ha-steps--outcomes li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .ha-steps.ha-steps--outcomes { grid-template-columns: 1fr; }
  .ha-steps--outcomes li { border-left: 0 !important; }
  .ha-steps--outcomes li + li { border-top: 1px solid var(--line); }
}

/* ── John's drone loop (10-22) as the hero's full-bleed background (admin
   17:44Z). The band runs edge to edge under the solid pinned header; the
   tag, title, lede, buttons and note sit over it in white. The still (first
   frame) fills the band from the start and the video fades in over it once
   it plays, so there is no jump. The real screen follows on the page ground.

   Contrast: a scrim darkens the frame most where the text is (left on wide
   screens, all over on narrow ones). Measured on new.skysuite.pro (10-22,
   drone-hero.mp4 loop) behind every line of text, at seven points of the
   loop, against the LIGHTEST pixel: title 10.2:1 (1440) / 11.5:1 (390),
   tag 12:1+, note 18:1+, lede 5.8:1 for white, so its 92% white is about
   5.2:1 (AA). tests/site/test_home_page.py pins the scrim stops; a new clip
   or a lighter scrim needs a new measurement. The secondary button is a
   light outline; the primary is the Clean Pro blue (4.72:1). ── */
.site-a .ha-hero--video { padding-top: 0; }
/* Nothing follows the band inside the hero since the project screen moved to
   its own section (admin 19:42Z): the band ends the hero, with no strip under it. */
.site-a .ha-hero--video { padding-bottom: 0; border-bottom: 0; }
/* The band fills the first screen exactly, under the pinned header (admin
   18:04Z: "the header plus the video background take up the full screen").
   --site-header-h is everything above the band on load (the 64px header and
   its hairline); home-hero.js measures it once and the default matches the
   header. 100svh (the viewport with the phone's browser bars showing) does
   not change when those bars slide away, so nothing jumps; 100vh is the
   fallback for browsers without svh. It is a MIN height: a short screen
   (under 560px, or a long lede on a small phone) grows the band instead of
   cutting the text, and the next section still starts below the fold. No
   maximum: the frame is object-fit: cover and the text is centred, so a
   tall screen just shows more sky, and a cap would bring the sliver back.
   With the clear header (below, the home page's default) the band starts at
   the very top instead and is a full 100svh. */
:root { --site-header-h: 65px; }
.ha-hero--video .ha-band {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: max(560px, calc(100vh - var(--site-header-h)));
  min-height: max(560px, calc(100svh - var(--site-header-h)));
  padding: clamp(56px, 8vh, 112px) 0 clamp(72px, 10vh, 120px);
  background: #1d2026; color: #fff;
  /* the theme tokens, re-declared for the dark band (text, outline button) */
  --ink: #ffffff; --ink-2: rgba(255, 255, 255, 0.92); --ink-3: rgba(255, 255, 255, 0.8);
  --line: rgba(255, 255, 255, 0.28); --line-2: rgba(255, 255, 255, 0.62); --bg-2: rgba(255, 255, 255, 0.12);
}
.ha-hero--video .ha-band-text { position: relative; z-index: 2; width: 100%; }
.ha-hero--video .ha-band h1 { color: #fff; text-shadow: 0 1px 24px rgba(6, 8, 12, 0.35); }
.ha-hero--video .ha-band .ha-tag,
.ha-hero--video .ha-band .ha-cta-note,
.ha-hero--video .ha-band .ha-lede { color: rgba(255, 255, 255, 0.92); }
.ha-hero--video .ha-band .btn:not(.btn--accent) { background: rgba(255, 255, 255, 0.06); }
.ha-hero--video .ha-band .btn:not(.btn--accent):hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; }
.ha-hero--video .ha-band .btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.ha-video { position: absolute; inset: 0; z-index: 0; margin: 0; }
.ha-video picture, .ha-video img, .ha-video video {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 70% 45%;
}
.ha-video video { opacity: 0; transition: opacity 0.6s ease; background: transparent; }
.ha-video.is-playing video { opacity: 1; }
.ha-video::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 8, 12, 0.82) 0%, rgba(6, 8, 12, 0.7) 40%, rgba(6, 8, 12, 0.34) 68%, rgba(6, 8, 12, 0.14) 100%),
    linear-gradient(0deg, rgba(6, 8, 12, 0.4) 0%, rgba(6, 8, 12, 0) 38%);
}
@media (max-width: 860px) {
  .ha-video::after { background: rgba(6, 8, 12, 0.68); }
}
.ha-video-toggle {
  position: absolute; right: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); z-index: 3;
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(6, 8, 12, 0.5); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ha-video-toggle[hidden] { display: none; }
.ha-video-toggle svg { fill: currentColor; }
.ha-video-toggle .i-play, .ha-video.is-paused .ha-video-toggle .i-pause { display: none; }
.ha-video.is-paused .ha-video-toggle .i-play { display: block; }
.ha-video-toggle:hover { background: rgba(6, 8, 12, 0.75); }
.ha-video-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ha-video video, .ha-video-toggle { display: none !important; }
}

/* Scroll cue: a small chevron at the foot of the band, a real link to what
   follows (so keyboard and screen-reader users get it too), 44px target. */
.ha-scroll-cue {
  position: absolute; left: 50%; bottom: clamp(12px, 2.5vh, 24px); z-index: 3;
  width: 44px; height: 44px; margin-left: -22px; display: grid; place-items: center;
  border-radius: 999px; color: rgba(255, 255, 255, 0.85); text-decoration: none;
}
.ha-scroll-cue svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: ha-cue 2.4s ease-in-out infinite; }
.ha-scroll-cue:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.ha-scroll-cue:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes ha-cue { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .ha-scroll-cue svg { animation: none; } }

/* ── The clear header (admin 18:05Z candidate; the home page's default since
   19:15Z: "that looks nice with the clear background"). site/home.html puts
   body.hdr-clear on the page whenever the video hero renders; every other
   page keeps the solid header. The pinned header is transparent over the
   video at the top of the page (white wordmark, links
   and "Log in"; the blue "Start trial" stays blue; a soft dark gradient
   behind it keeps them legible), and turns back into the solid white header
   once the band has scrolled up under it (home-hero.js watches the band with
   an IntersectionObserver and sets html.hdr-past-hero). The band then starts
   at the very top, under the header: a full 100svh. The classes live on
   <html>/<body>, not on the header, because React re-renders the header.
   The phone menu open also brings the solid header back. A desktop dropdown
   does NOT (admin 21:31Z: hovering a menu item "flashes to white ... it should
   stay the color"): hover opens the dropdown, so gating on it turned the whole
   header white under the pointer. The header stays clear, the open trigger
   gets the same faint pill as a hovered one, and the panel keeps its card.
   The header's background and border are inline styles, hence !important. */
.hdr-clear .home-a > .ha-hero--video { margin-top: calc(-1 * var(--site-header-h)); }
.hdr-clear .ha-hero--video .ha-band {
  min-height: max(560px, 100vh);
  min-height: max(560px, 100svh);
  padding-top: calc(var(--site-header-h) + clamp(40px, 6vh, 96px));
}
.hdr-clear .site-header {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.hdr-clear .site-header::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 140%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 8, 12, 0.55) 0%, rgba(6, 8, 12, 0.22) 60%, rgba(6, 8, 12, 0) 100%);
  transition: opacity 0.2s ease;
}
.hdr-clear .site-header .site-logo-name,
.hdr-clear .site-header .nav-dd__trigger,
.hdr-clear .site-header .nav-top,
.hdr-clear .site-header .nav-login,
.hdr-clear .site-header .nav-burger,
.hdr-clear .site-header .nav-theme,
.hdr-clear .site-header .site-logo::after { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
html:not(.hdr-past-hero) .hdr-clear .site-header:not(:has(.nav-burger[aria-expanded="true"])) {
  background: transparent !important; border-bottom-color: transparent !important;
}
/* A slight blur behind the clear header (admin 19:38Z: "a slight blur so when
   it's over text you can see the menu items"): a frosted, faintly tinted strip
   that keeps the white links readable over bright video frames and over the
   hero text as it scrolls under, while still reading as clear, not a bar.
   Where backdrop-filter is unsupported, a slightly stronger flat tint does the
   same job. Dropped (with the rest) once the header turns solid, and while a
   menu is open, so a fixed-position phone menu is never inside a filter. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html:not(.hdr-past-hero) .hdr-clear .site-header:not(:has(.nav-burger[aria-expanded="true"])) {
    background: rgba(6, 8, 12, 0.16) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html:not(.hdr-past-hero) .hdr-clear .site-header:not(:has(.nav-burger[aria-expanded="true"])) {
    background: rgba(6, 8, 12, 0.42) !important;
  }
}
html:not(.hdr-past-hero) .hdr-clear .site-header:not(:has(.nav-burger[aria-expanded="true"])) :is(.site-logo-name, .nav-dd__trigger, .nav-top, .nav-login, .nav-burger, .nav-theme) {
  color: #fff !important;
}
/* The wordmark is a mask painted in --ink (styles.css); the mark stays orange. */
html:not(.hdr-past-hero) .hdr-clear .site-header:not(:has(.nav-burger[aria-expanded="true"])) .site-logo::after { background: #fff; }
html:not(.hdr-past-hero) .hdr-clear .site-header:not(:has(.nav-burger[aria-expanded="true"])) .nav-burger { border-color: rgba(255, 255, 255, 0.45); }
html:not(.hdr-past-hero) .hdr-clear .site-header:not(:has(.nav-burger[aria-expanded="true"])) :is(.nav-dd__trigger, .nav-top, .nav-burger, .nav-theme):hover,
html:not(.hdr-past-hero) .hdr-clear .site-header:not(:has(.nav-burger[aria-expanded="true"])) .nav-dd.is-open .nav-dd__trigger {
  background: rgba(255, 255, 255, 0.14);
}
html:not(.hdr-past-hero) .hdr-clear .site-header:not(:has(.nav-burger[aria-expanded="true"])) :is(.nav-dd__trigger, .nav-top, .nav-login, .nav-burger, .nav-theme):focus-visible {
  outline-color: #fff;
}
html.hdr-past-hero .hdr-clear .site-header::before,
.hdr-clear .site-header:has(.nav-burger[aria-expanded="true"])::before { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .hdr-clear .site-header, .hdr-clear .site-header::before,
  .hdr-clear .site-header :is(.site-logo-name, .nav-dd__trigger, .nav-top, .nav-login, .nav-burger, .nav-theme),
  .hdr-clear .site-header .site-logo::after { transition: none; }
}

/* ── Sign-up rows down the page (admin 18:06Z: "there should be buttons
   throughout"): one compact row after each major section and after the
   maps, delivery and getting-paid answers. The blue trial button, and a
   quiet secondary link to the page that says more, where there is one. */
.ha-cta-row { margin-top: clamp(32px, 4vw, 48px); }
.ha-cta-row--center { justify-content: center; }
.ha-cta-row + .ha-q { margin-top: clamp(64px, 8vw, 104px); }

/* The Free card's trial line, shown only while the reverse trial is on. */
.ha-plan-note { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }

/* Every job on one page (admin 19:42Z): the project screen, now with a title. */
.ha-project .ha-shot { margin-top: clamp(24px, 3vw, 40px); }

/* ── Powered by SkyPLX-9 (John 10-23, DRAFT behind HOME_SKYPLX_SECTION).
   The same bordered grids as "What you get on day one" and the four
   outcomes, the step numbers in the one accent, and real screens: the
   processing screen full width (its words stay readable), the two results
   side by side under it, one column on a phone. ── */
/* The name never breaks at its hyphen. */
.ha-plx-name { white-space: nowrap; }
.ha-plx-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; }
.ha-plx-how li { padding: 20px 22px; border-left: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.ha-plx-how li:first-child { border-left: 0; }
.ha-plx-how b { display: block; color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
.home-a .ha-plx-why-t { margin: clamp(48px, 6vw, 64px) 0 10px; }
.ha-plx-why { max-width: 68ch; color: var(--ink-2); margin: 0 0 20px !important; }
.ha-plx-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ha-plx-stages li { display: flex; align-items: baseline; gap: 12px; padding: 14px 18px; font-size: 15px; color: var(--ink); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.ha-plx-stages li:nth-child(3n+1) { border-left: 0; }
.ha-plx-stages li:nth-child(-n+3) { border-top: 0; }
.ha-plx-stages .n { flex: none; font: 500 13px/1 "Geist Mono", ui-monospace, monospace; color: var(--accent); }
.ha-plx-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); margin-top: clamp(32px, 4vw, 48px); }
.ha-plx-proof .ha-shot:first-child { grid-column: 1 / -1; }
@media (max-width: 860px) {
  .ha-plx-how { grid-template-columns: 1fr; }
  .ha-plx-how li { border-left: 0; border-top: 1px solid var(--line); }
  .ha-plx-how li:first-child { border-top: 0; }
  .ha-plx-stages { grid-template-columns: 1fr; }
  .ha-plx-stages li { border-left: 0; }
  .ha-plx-stages li:nth-child(n) { border-top: 1px solid var(--line); }
  .ha-plx-stages li:first-child { border-top: 0; }
  .ha-plx-stages li { padding: 11px 16px; }
  .ha-plx-proof { grid-template-columns: 1fr; }
}