/* ─────────────────────────────────────────────────────────────────────────
   landing-frame.css — subtle white framing system for the dark landing.

   Adds three quiet, premium layers on top of the existing landing (no copy,
   image, or content changes):
     1. Two thin VERTICAL rails at the content-column edges, running from just
        under the header to the top of the footer.
     2. Thin HORIZONTAL dividers at the top of every section (wrapping the hero
        and separating each section), inset to MEET the vertical rails so the
        page reads as a framed grid.
     3. A subtle DOTTED grid behind the hero device composite (the transparent
        WebP lets the dots show through the gaps; devices stay fully on top).

   All lines are low-opacity white via rgba(255,255,255,X) — never a hardcoded
   #fff/white (keeps the color guard green). Positions use calc()/var() (skipped
   by the spacing guard) or 0 (on-ramp). Loaded LAST so it out-cascades earlier
   landing sheets. Frame width is locked to the site container (max-width 1200,
   so the rails sit at 50% ± 600px, clamped to a 24px inset on narrow screens →
   never any horizontal overflow).
   ───────────────────────────────────────────────────────────────────────── */

/* Shared horizontal offset = 712px from centre — i.e. well OUTSIDE the content
   column and clear of the widest real content (the hero grid is width min(1180px,
   92vw), so content reaches ≤±590px from centre; the rails at ±712px sit ~122px
   beyond it). Clamped with max(0px, …) so on viewports with no gutter the rails
   simply pull flush to the viewport edge — still outside the content (which never
   reaches 0px) and never overflowing. */

/* ── 1. Vertical frame rails (left + right, OUTSIDE the content column) ───── */
body.landing-v2.qf-wft main {
  position: relative;
}
body.landing-v2.qf-wft main::before,
body.landing-v2.qf-wft main::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
  z-index: 5;
}
body.landing-v2.qf-wft main::before {
  left: max(0px, calc(50% - 712px));
}
body.landing-v2.qf-wft main::after {
  right: max(0px, calc(50% - 712px));
}

/* ── 2. Horizontal section dividers (at each section's top boundary) ───────
   Uses ::after because .hero and .qf-globe-section already claim ::before; no
   rendered section defines a section-level ::after, so this never collides.
   Inset to the same rail offset → the horizontals meet the verticals.

   H6 (robust mechanism): the divider is anchored at THIS section's own top edge
   (top:0), which lands inside its 72px top padding (`.section { padding:72px 0 }`)
   — always empty space above the heading. It is drawn on the section it belongs
   to, so it can NEVER be pulled up onto the *previous* section's content, no
   matter how that section's bottom is spaced. That removes the old
   `-1×--space-3` pull and the per-section flush-bottom exceptions it needed —
   the mechanism is now self-contained and survives future section edits. */
body.landing-v2.qf-wft main > section {
  position: relative;
}
body.landing-v2.qf-wft main > section::after {
  content: "";
  position: absolute;
  top: 0;
  left: max(0px, calc(50% - 712px));
  right: max(0px, calc(50% - 712px));
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
  z-index: 4;
}
/* The hero is the first section — its "top" divider would sit under the floating
   header. Suppress it; the header already caps the top of the frame. */
body.landing-v2.qf-wft main > section.hero::after {
  display: none;
}

/* ── 3. Dotted grid behind the hero device composite ──────────────────────
   The hero image is a transparent-background WebP, so a dot layer sitting
   BEHIND it shows through the open space around the laptop + phone. A broad,
   centre-weighted mask keeps the dotted field clearly visible beside/behind the
   devices while fading softly at the outer edges — subtle, never loud. */
body.landing-v2.qf-wft .hero .qf-hero-media {
  position: relative;
  isolation: isolate;
}
body.landing-v2.qf-wft .hero .qf-hero-media::before {
  content: "";
  position: absolute;
  /* Extend a little up/down/right beyond the media box so a band of dots reads
     in the open hero space beside/behind the device. The LEFT edge stays at the
     media box (0%) so the dot field never bleeds into the copy column and under
     the H1/lead — the ≥48px column gap keeps a clean margin (A2). */
  inset: -8% -2% -8% 0%;
  background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
  /* Broad, centre-weighted fade so the dotted field is clearly visible across
     the open area around the composite, softening only at the outer edges. */
  -webkit-mask-image: radial-gradient(125% 125% at 55% 42%, rgba(255, 255, 255, 1) 62%, rgba(255, 255, 255, 0) 92%);
  mask-image: radial-gradient(125% 125% at 55% 42%, rgba(255, 255, 255, 1) 62%, rgba(255, 255, 255, 0) 92%);
  pointer-events: none;
  z-index: 0;
}
body.landing-v2.qf-wft .hero .qf-hero-media > .qf-hero-devices {
  position: relative;
  z-index: 1;
}

/* ── Responsive: keep the frame + dot grid clean on mobile ────────────────
   On the single-column mobile layout there is no gutter, so hide the vertical
   rails entirely (the max(0px, …) clamp already guarantees no overflow, but a
   full-height edge line adds clutter here). Horizontal dividers stay — they sit
   in the vertical gaps between stacked sections. Soften the hero dot grid so the
   reflowed hero stays uncluttered. */
@media (max-width: 640px) {
  body.landing-v2.qf-wft main::before,
  body.landing-v2.qf-wft main::after {
    display: none;
  }
  body.landing-v2.qf-wft .hero .qf-hero-media::before {
    inset: 0;
    opacity: 0.5;
    background-size: 20px 20px;
  }
}

/* ── LIGHT-THEME frame (subtle BLACK) ─────────────────────────────────────
   The dark frame above is drawn in low-opacity WHITE, so it vanishes on the
   light canvas (--bg #F6F8FA). Re-draw the SAME three layers in low-opacity
   BLACK, scoped to html[data-theme="light"] so the dark landing is untouched.
   These selectors add one class over the dark ones (higher specificity) and
   only override the paint colour — position, size, mask, and the mobile rules
   (display:none rails, softened dots) all inherit from the base rules above.
   rgba only (never #000/black); tuned a hair above the dark alphas because a
   dark hairline reads fainter on the bright light bg than a white one does on
   near-black. ── */

/* 1. Vertical rails → subtle black */
html[data-theme="light"] body.landing-v2.qf-wft main::before,
html[data-theme="light"] body.landing-v2.qf-wft main::after {
  background: rgba(0, 0, 0, 0.10);
}

/* 2. Horizontal section dividers → subtle black */
html[data-theme="light"] body.landing-v2.qf-wft main > section::after {
  background: rgba(0, 0, 0, 0.09);
}

/* 3. Hero dotted grid → subtle black dots (size / position / mask unchanged) */
html[data-theme="light"] body.landing-v2.qf-wft .hero .qf-hero-media::before {
  background-image: radial-gradient(rgba(0, 0, 0, 0.14) 1px, transparent 1px);
}

/* ── Theme toggle — read as a distinct CONTROL in the top-right cluster ────
   The .qf-theme-btn already ships a 40×40 hairline-bordered icon button
   (style.css). Sitting flush among the text nav links it still read as "just
   another link", so give it clear breathing room from the links on its left
   and the Sign in / View demo actions on its right, and firm the resting
   border up to the strong hairline token so the container reads at rest (not
   only on hover). Theme-aware via tokens; applies in BOTH themes and regresses
   neither (sun in dark, moon in light unchanged). ── */
body.landing-v2.qf-wft .site-actions .qf-theme-btn {
  margin-left: 4px;
  margin-right: 8px;
  border-color: var(--border-strong);
}