/* ── JLCS V6 site-wide layer ─────────────────────────────────────────
   Sits on top of the FieldOps design system (Assets/ds/). Carries only
   what every page shares: the EN/ES span switch, the three hover
   utilities the design used, the tour modal seam, and focus visibility.
   Page-specific styles live in each page's own <style> block. */

/* Language: the html[data-lang] attribute is the single switch.
   Pages author copy as paired .l-en/.l-es spans. */
.l-es { display: none !important; }
html[data-lang="es"] .l-es { display: revert !important; }
html[data-lang="es"] .l-en { display: none !important; }

/* Hover utilities — the design system's three hover treatments,
   converted from the prototype's style-hover attributes. !important
   because they must win over the inline base styles they modify. */
.hov-nav, .hov-lift, .hov-glow {
  transition: color .18s ease, background .18s ease,
              box-shadow .22s ease, transform .22s ease;
}
.hov-nav:hover { color: var(--fo-ink) !important; background: rgba(255, 255, 255, 0.6) !important; }
.hov-lift:hover { box-shadow: var(--fo-shadow-2) !important; transform: translateY(-2px); }
.hov-glow:hover { box-shadow: var(--fo-glass-shadow) !important; }

/* Tour modal: markup ships in the page, hidden until opened. */
[data-tour-modal][hidden] { display: none !important; }
html.tour-open, html.tour-open body { overflow: hidden; }

/* Demo modal + questionnaire (shared by every page). */
[data-demo-modal][hidden] { display: none !important; }
html.demo-open, html.demo-open body { overflow: hidden; }
@keyframes foRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.demo-input {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid var(--fo-line); border-radius: 10px;
  background: var(--fo-surface); font: inherit; font-size: 14px; color: var(--fo-ink);
}
.demo-input:focus { outline: 2px solid var(--fo-accent); outline-offset: 1px; border-color: var(--fo-accent); }
.demo-chip { position: relative; cursor: pointer; }
.demo-chip input { position: absolute; opacity: 0; pointer-events: none; }
.demo-chip span {
  display: inline-block; padding: 7px 12px; border: 1px solid var(--fo-line);
  border-radius: 999px; font-size: 12.5px; font-weight: 650;
  color: var(--fo-ink-2); background: var(--fo-surface);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.demo-chip input:checked + span { border-color: var(--fo-accent); color: var(--fo-accent); background: rgba(11, 63, 158, 0.06); }
.demo-chip input:focus-visible + span { outline: 2px solid var(--fo-accent); outline-offset: 2px; }

/* Keyboard focus is always visible. */
:focus-visible { outline: 2px solid var(--fo-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .hov-nav, .hov-lift, .hov-glow { transition: none; }
  .hov-lift:hover { transform: none; }
}

/* ── Header collapse (≤1080px) ──────────────────────────────────────
   The nav outgrew tablet widths (Pricing + Sign in) — phones AND
   tablets get the burger; page-layout rules stay phone-only below. */
@media (max-width: 1080px) {
  /* header: brand left — language + burger cluster at the right edge */
  .v6-burger { display: grid !important; }
  header .v6-head-tour { display: none !important; }
  header > div > .fo-seg { margin-left: auto; }
  header nav {
    display: none !important;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    gap: 2px !important; padding: 10px 14px 16px;
    font-size: 15px !important;
    /* near-solid: the open menu sits over busy hero art, so glass stays legible */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.88));
    backdrop-filter: blur(22px) saturate(210%);
    -webkit-backdrop-filter: blur(22px) saturate(210%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 18px 30px -18px rgba(15, 35, 70, 0.28);
  }
  html.nav-open header nav { display: flex !important; }
  header nav a { padding: 12px 14px !important; }
  header nav a:not(.v6-nav-tour):not(.v6-nav-demo) { color: var(--fo-ink) !important; }
  .v6-nav-tour { display: block !important; margin-top: 6px; }

  /* the menu carries Book-a-demo; the tour-modal title row stays one line */
  .v6-tour-demo { display: none !important; }
}

/* ── Desktop tour modal: never taller than the window ───────────────
   The follow-up panel adds height; without this clamp it clips off
   768px-tall laptops (backdrop has no scroll). */
@media (min-width: 761px) {
  [data-tour-frame] { height: min(660px, calc(100dvh - 240px)) !important; }
}

/* ── Mobile (≤760px) ────────────────────────────────────────────────
   The pages are inline-styled, so these overrides carry !important
   where they must beat an inline declaration. */
@media (max-width: 760px) {
  /* two-column layouts stack; media never forces sideways scroll */
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  img { max-width: 100%; height: auto; }
  /* 21:9 banner cards: min-height × ratio would force ~800px width */
  [style*="aspect-ratio:21/9"] {
    width: 100% !important;
    aspect-ratio: auto !important;
    min-height: 320px !important;
  }

  /* tour modal: the frame hugs the phone's stage + two control rows */
  [data-tour-frame] { height: calc((94vw - 28px) * 0.5625 + 104px) !important; }
  html.is-embedded body { overflow-y: auto; }

  /* the standalone tour header wraps politely */
  .tp-head { flex-wrap: wrap; row-gap: 4px; }
}