/* HORIZONTAL OVERFLOW : ZERO, at every width from 320 px up (operator
   2026-09-24, after a phone screenshot came back zoomed out). `clip` and not
   `hidden` : hidden on html/body turns the page into a scroll container and
   kills every `position: sticky` on it. This file is only loaded by the
   landing pages, so the net is scoped to them by construction. */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

/* The oversized stages of the hero bands are absolutely positioned inside a
   band that clips them : keep that clip whatever else changes. */
.lv4-hero-globe { max-width: 100%; }

/* ========================================================================
   landing-v4.css : NEW rules for the monitoring-first landing (v4).
   Everything here is prefixed `lv4-` and LAYERS ON TOP of landing-v3.css,
   home.css and monitoring.css, which stay the base system. Loaded by
   landing_home.html, landing_platform.html, landing_academic.html,
   about.html and contact.html (marketing host), after landing-v3.css.

   Sections :
     1. Home hero, two columns (copy + rotating news globe)
     2. Light background overrides for the monitoring showcase window
     3. Academic page (licence card, steps, FAQ)
     4. About page (light hero, company block, KPI strip)
        4b. Contact page (the about structure around the contact form)
     5. Simple contact CTA band (no trial button)
     6. Responsive : 1024px, 900px, 640px
   ======================================================================== */

/* ========================================================================
   1. HOME HERO : two columns, copy left, globe right
   ======================================================================== */
.lv4-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}

/* The shared .landing-mon-hero-head is centered; inside the grid the copy
   column reads left-aligned instead. */
.lv4-hero-grid .lv4-hero-copy {
  text-align: left;
  max-width: 560px;
  margin: 0;
}
.lv4-hero-grid .lv4-hero-copy .landing-ai-title {
  text-align: left;
}
.lv4-hero-grid .lv4-hero-copy .landing-ai-sub {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

.lv4-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
  margin-top: var(--space-6, 28px);
}

/* Small trust row under the hero CTAs : official sources, alerts, coverage. */
.lv4-trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin: var(--space-6, 28px) 0 0;
  padding: 0;
  list-style: none;
}
.lv4-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: var(--font-weight-medium, 500);
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}
.lv4-trust-item i {
  font-size: 11px;
  color: #7db1f2;
}

/* The hero content box is the HEADER content box : same max width, same
   horizontal padding (the section already pads with --space-5, like
   .ma-header-inner), so the badge starts right under the logo and the globe
   column ends right under the header CTA. The measure of the text itself does
   not change, .lv4-hero-copy keeps its own max-width. */
.lv4-hero-clean .landing-mon-hero-inner {
  max-width: var(--content-max-width, 1320px);
  width: 100%;
}
.lv4-hero-clean .lv4-hero-grid { max-width: none; }

/* Globe column. The component sizes itself from its container width, so we
   only cap it and center it. */
.lv4-hero-globe {
  max-width: 680px;
  margin-inline: auto;
  width: 100%;
}
.lv4-hero-globe .ob-globe {
  width: 100%;
}

/* ========================================================================
   2. MONITORING SHOWCASE WINDOW on a LIGHT section
   landing-v3.css only styles the window for the dark hero
   (.landing-mon-hero .landing-mon-window). On a light background the drop
   shadow disappears, so give it a visible edge of its own.
   ======================================================================== */
.lv4-mon-showcase {
  background: var(--color-bg, #f5f6f8);
}
/* The news strip sits on the same light background right above. Collapse the
   doubled vertical padding so the two sections read as one light block. */
#ob-news-strip + .lv4-mon-showcase {
  padding-top: var(--space-6, 28px);
}
.lv4-mon-showcase .landing-mon-window {
  border: 1px solid var(--color-border-strong, rgba(15, 23, 42, 0.12));
  box-shadow:
    0 18px 40px -18px rgba(15, 23, 42, 0.22),
    0 44px 90px -46px rgba(15, 23, 42, 0.28);
}
.lv4-mon-showcase .landing-mon-winbar {
  background: var(--color-surface-hover, #f9fafb);
}

/* ========================================================================
   3. ACADEMIC PAGE
   ======================================================================== */
/* Highlighted licence card : one wide card, checklist inside. */
.lv4-licence-card {
  max-width: 860px;
  margin: 0 auto;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-accent, #2b7ae4);
  border-radius: 18px;
  padding: var(--space-8, 48px) var(--space-7, 36px);
  box-shadow: 0 20px 48px -28px rgba(43, 122, 228, 0.45);
}
.lv4-licence-head {
  text-align: center;
  margin-bottom: var(--space-6, 28px);
}
.lv4-licence-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: var(--radius-full, 999px);
  background: var(--color-accent-bg, rgba(43, 122, 228, 0.1));
  color: var(--color-accent, #2b7ae4);
  font-size: 12px;
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.lv4-licence-title {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-primary, #0f172a);
  margin: 0 0 10px;
  line-height: 1.2;
}
.lv4-licence-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary, #475569);
  margin: 0;
}
.lv4-licence-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lv4-licence-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--color-text-secondary, #475569);
}
.lv4-licence-list li i {
  flex: 0 0 auto;
  margin-top: 3px;
  font-size: 13px;
  color: var(--color-accent, #2b7ae4);
}
.lv4-licence-note {
  margin: var(--space-6, 28px) 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-faint, #9ca3af);
}

/* Three numbered steps. */
.lv4-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5, 24px);
  counter-reset: lv4step;
}
.lv4-step {
  position: relative;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, rgba(15, 23, 42, 0.08));
  border-radius: 16px;
  padding: var(--space-6, 28px);
}
.lv4-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-accent, #2b7ae4);
  color: #fff;
  font-size: 15px;
  font-weight: var(--font-weight-bold, 700);
  margin-bottom: 14px;
}
.lv4-step-title {
  font-size: 17px;
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-primary, #0f172a);
  margin: 0 0 8px;
}
.lv4-step-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary, #475569);
  margin: 0;
}

/* FAQ accordion. Native <details>, no help cursor anywhere. */
.lv4-faq {
  max-width: 760px;
  margin: 0 auto;
}
.lv4-faq details {
  border: 1px solid var(--color-border, rgba(15, 23, 42, 0.08));
  border-radius: 14px;
  background: var(--color-surface, #fff);
  margin-bottom: 12px;
  overflow: hidden;
}
.lv4-faq details[open] {
  border-color: var(--color-accent, #2b7ae4);
}
.lv4-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-size: 15.5px;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #0f172a);
  cursor: pointer;
  list-style: none;
}
.lv4-faq summary::-webkit-details-marker { display: none; }
.lv4-faq summary::after {
  content: "\002b";
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  color: var(--color-accent, #2b7ae4);
  transition: transform 150ms ease;
}
.lv4-faq details[open] summary::after {
  transform: rotate(45deg);
}
.lv4-faq-answer {
  padding: 0 22px 20px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-text-secondary, #475569);
  margin: 0;
}

/* ========================================================================
   4. ABOUT PAGE (light, header sits on white)
   ======================================================================== */
.lv4-about-hero {
  max-width: var(--content-max-width, 1320px);
  margin: 0 auto;
  padding: var(--space-9, 56px) var(--space-5, 24px) var(--space-6, 28px);
}
.lv4-about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--color-accent, #2b7ae4);
  margin: 0 0 var(--space-3, 12px);
}
.lv4-about-eyebrow i { font-size: 10px; }
.lv4-about-title {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-primary, #0f172a);
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 0 0 var(--space-3, 12px);
}
.lv4-about-title em {
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: var(--color-accent, #2b7ae4);
  text-underline-offset: 5px;
  text-decoration-thickness: 2.5px;
}
/* Two column body : the founder text on the left (about 65%), a sticky column
   of compact info cards on the right (about 35%). No card, no left rule on the
   text : it is a plain reading column. */
.lv4-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
  gap: var(--space-8, 44px);
  align-items: start;
}
.lv4-about-letter {
  min-width: 0;
  text-align: left;
}
.lv4-about-letter p {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--color-text-secondary, #475569);
  margin: 0 0 var(--space-5, 24px);
}
.lv4-about-letter p:last-of-type { margin-bottom: var(--space-6, 28px); }
.lv4-about-sign {
  padding-top: var(--space-5, 24px);
  border-top: 1px solid var(--color-border, rgba(15, 23, 42, 0.08));
}
.lv4-about-sign-name {
  font-size: 19px;
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-primary, #0f172a);
  letter-spacing: -0.2px;
  margin: 0 0 4px;
}
.lv4-about-sign-role {
  font-size: 14px;
  color: var(--color-accent, #2b7ae4);
  font-weight: var(--font-weight-semibold, 600);
  margin: 0 0 8px;
}
.lv4-about-sign-org {
  font-size: 13.5px;
  color: var(--color-text-faint, #9ca3af);
  margin: 0;
}
.lv4-about-letter-cta { margin: var(--space-6, 28px) 0 0; }
.lv4-about-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 22px;
  border-radius: var(--radius-full, 999px);
  background: var(--color-accent, #2b7ae4);
  color: #fff;
  font-size: 14.5px;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 10px 24px -12px rgba(43, 122, 228, 0.7);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.lv4-about-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -12px rgba(43, 122, 228, 0.8);
}
.lv4-about-btn i { font-size: 11px; transition: transform 150ms ease; }
.lv4-about-btn:hover i { transform: translateX(3px); }

/* Right sidebar : compact info cards, sticky on desktop. */
.lv4-about-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 18px);
  position: sticky;
  top: 96px;
}
.lv4-about-card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, rgba(15, 23, 42, 0.08));
  border-radius: 14px;
  padding: var(--space-5, 24px);
  box-shadow: 0 14px 34px -30px rgba(15, 23, 42, 0.45);
}
.lv4-about-card-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--color-text-primary, #0f172a);
  margin: 0 0 12px;
}
.lv4-about-card-title i {
  font-size: 12px;
  color: var(--color-accent, #2b7ae4);
}
.lv4-about-card-line {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--color-text-secondary, #475569);
  margin: 0 0 4px;
}
.lv4-about-card-line:last-child { margin-bottom: 0; }
.lv4-about-card-line--faint {
  font-size: 13px;
  color: var(--color-text-faint, #9ca3af);
}
.lv4-about-card-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lv4-about-card-links li + li { margin-top: 2px; }
.lv4-about-card-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  font-size: 14.5px;
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-secondary, #475569);
  text-decoration: none;
  transition: color 150ms ease;
}
.lv4-about-card-links a i {
  font-size: 10px;
  color: var(--color-text-faint, #9ca3af);
  transition: transform 150ms ease, color 150ms ease;
}
.lv4-about-card-links a:hover { color: var(--color-accent, #2b7ae4); }
.lv4-about-card-links a:hover i {
  color: var(--color-accent, #2b7ae4);
  transform: translateX(3px);
}

/* swiss made software +AI card : the official colour artwork, never stretched
   (width fixed, height auto), linked to our own /ai-statement page. */
.lv4-about-side-label { text-align: center; }
.lv4-about-side-label-tile {
  display: inline-block;
  line-height: 0;
  transition: transform 150ms ease;
}
.lv4-about-side-label-tile:hover { transform: translateY(-2px); }
.lv4-about-side-label-tile img {
  display: block;
  width: 150px;
  height: auto;
  margin: 0 auto;
}
.lv4-about-side-label-caption {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-secondary, #475569);
  margin: 14px 0 0;
}
.lv4-about-side-label-caption a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-border, rgba(15, 23, 42, 0.25));
  transition: color 150ms ease, text-decoration-color 150ms ease;
}
.lv4-about-side-label-caption a:hover {
  color: var(--color-accent, #2b7ae4);
  text-decoration-color: var(--color-accent, #2b7ae4);
}

/* ========================================================================
   4b. CONTACT PAGE (/contact, marketing host) : the about page structure
   (hero, grid, sidebar cards) with the contact form on an about card. The
   form keeps the shared auth classes (.login-*); only their radius and the
   button shape follow landing v4 here.
   ======================================================================== */
.lv4-contact-lede {
  font-size: var(--font-size-md, 16px);
  line-height: var(--line-height-relaxed, 1.65);
  color: var(--color-text-secondary, #475569);
  max-width: 680px;
  margin: 0;
}
.lv4-contact-main { min-width: 0; }
.lv4-contact-form { padding: var(--space-6, 28px); }
.lv4-contact-form .login-input { border-radius: 10px; }
.lv4-contact-form .login-msg { border-radius: 10px; }
/* The primary action : the about page pill (.lv4-about-btn). */
.lv4-contact-form .login-btn-primary {
  border-radius: var(--radius-full, 999px);
  padding: 13px 22px;
  font-size: 14.5px;
  box-shadow: 0 10px 24px -12px rgba(43, 122, 228, 0.7);
}
.lv4-contact-mail {
  color: var(--color-accent, #2b7ae4);
  font-weight: var(--font-weight-semibold, 600);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.lv4-contact-mail:hover { text-decoration: underline; }

/* ========================================================================
   5. SIMPLE CONTACT CTA BAND
   Same dark band as .landing-cta, but the action is a plain link to the
   contact page instead of the self-serve trial button.
   ======================================================================== */
.lv4-cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--radius-full, 999px);
  background: linear-gradient(135deg, var(--color-accent, #2b7ae4) 0%, #4d8eea 50%, #6aa3f0 100%);
  color: #fff;
  font-size: var(--font-size-md, 15px);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1;
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 10px 26px -8px rgba(43, 122, 228, 0.6);
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.lv4-cta-link:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 14px 32px -8px rgba(43, 122, 228, 0.7);
}
.lv4-cta-link i { font-size: 11px; transition: transform 150ms ease; }
.lv4-cta-link:hover i { transform: translateX(3px); }
.lv4-cta-link--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: none;
  color: #fff;
}
.lv4-cta-link--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

/* ========================================================================
   6. AI STATEMENT PAGE (/ai-statement)
   The dedicated area required by the swiss made software +AI placement rules
   (variant 2) : the label shown again next to what AI concretely means here,
   with the mandatory backlink to swissmadesoftware.org on the logo itself.
   ======================================================================== */
.lv4-ais-hero {
  max-width: var(--content-max-width, 1320px);
  margin: 0 auto;
  padding: var(--space-9, 56px) var(--space-5, 24px) var(--space-6, 28px);
}
.lv4-ais-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--color-accent, #2b7ae4);
  margin: 0 0 var(--space-3, 12px);
}
.lv4-ais-eyebrow i { font-size: 10px; }
.lv4-ais-title {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-primary, #0f172a);
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 0 0 var(--space-3, 12px);
}
.lv4-ais-lead {
  max-width: 720px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--color-text-secondary, #475569);
  margin: 0;
}

/* Two columns : label left, statement right. */
.lv4-ais-grid {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: var(--space-8, 44px);
  align-items: start;
}
.lv4-ais-label {
  min-width: 0;
  position: sticky;
  top: 96px;
  text-align: center;
}
.lv4-ais-label-tile {
  display: inline-block;
  line-height: 0;
  transition: transform 150ms ease;
}
.lv4-ais-label-tile:hover { transform: translateY(-2px); }
/* Width fixed, height auto : the official artwork keeps its 1.29:1 ratio and
   never falls under the legibility floor. */
.lv4-ais-label-tile img {
  display: block;
  width: 180px;
  height: auto;
  margin: 0 auto;
}
.lv4-ais-label-caption {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text-secondary, #475569);
  margin: 18px 0 8px;
}
.lv4-ais-label-link { margin: 0; }
.lv4-ais-label-link a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-accent, #2b7ae4);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lv4-ais-label-link a i { font-size: 10px; }

.lv4-ais-body { min-width: 0; }
.lv4-ais-item {
  padding-bottom: var(--space-5, 24px);
  margin-bottom: var(--space-5, 24px);
  border-bottom: 1px solid var(--color-border, rgba(15, 23, 42, 0.08));
}
.lv4-ais-item:last-of-type {
  border-bottom: none;
  margin-bottom: var(--space-4, 18px);
}
.lv4-ais-item-title {
  font-size: 12px;
  font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--color-accent, #2b7ae4);
  margin: 0 0 10px;
}
.lv4-ais-item p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-secondary, #475569);
  margin: 0;
}
.lv4-ais-questions {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-text-faint, #9ca3af);
  margin: 0;
}
.lv4-ais-questions a {
  color: var(--color-accent, #2b7ae4);
  font-weight: var(--font-weight-semibold, 600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ========================================================================
   7. RESPONSIVE
   ======================================================================== */

/* Desktop. The hero keeps its height ; what changes is that the globe and the
   map are no longer a column but a BACKGROUND SCALE layer pinned to the whole
   section : anchored right, free to run over the top and bottom edges and to
   slide left under the text, which simply paints on top of it with no
   background of its own. The section keeps overflow hidden, so nothing of the
   visual ever leaves the hero. The grid holds the text column alone. */
@media (min-width: 901px) {
  .lv4-hero-clean {
    display: flex;
    align-items: center;
    min-height: clamp(760px, 88vh, 960px);
  }
  .lv4-hero-clean .landing-mon-hero-inner { position: relative; z-index: 2; }
  .lv4-hero-clean .lv4-hero-grid {
    grid-template-columns: 0.95fr 1.05fr;
    pointer-events: none;              /* the visual under it stays draggable */
  }
  .lv4-hero-clean .lv4-hero-copy { pointer-events: auto; }
  /* The flat map hero is now the ONE hero (operator 2026-09-24) : it sits
     under the overlaid header and keeps the clearance .has-dark-hero adds
     (landing-v3.css). The override that cancelled it, back when this was the
     SECOND hero on the page, is gone. */

  .lv4-hero-globe {
    position: absolute;
    inset: 0;                          /* the layer IS the section box */
    z-index: 1;
    width: auto;
    max-width: none;
    margin: 0;
    overflow: visible;
    pointer-events: none;
  }
  .lv4-hero-globe .ob-globe {
    position: static;                  /* the card resolves against the layer */
    width: 100%;
    height: 100%;
    max-width: none;
  }
  /* Sphere : taller than the hero on purpose, centred at 70 % of the width.
     It runs past the top and the bottom edges and slides left under the text ;
     the section crops it, the component draws only what is inside. */
  .lv4-hero-globe .ob-globe-stage {
    position: absolute;
    top: 50%;
    left: 70%;
    width: clamp(560px, min(95vh, 59vw), 960px);
    transform: translate(-50%, -50%);
    pointer-events: auto;
  }
  .lv4-hero-globe .ob-globe-card {
    left: auto;
    right: 5%;
    bottom: 9%;
    pointer-events: auto;
  }
  /* Flat map : wider than the hero is tall, right edge just off the viewport,
     left third sliding under the text. */
  .lv4-hero--flat .lv4-hero-globe .ob-globe-stage {
    left: auto;
    right: -2vw;
    width: clamp(880px, min(128vh, 94vw), 1300px);
    transform: translateY(-50%);
  }
  .lv4-hero--flat .lv4-hero-globe .ob-globe-card {
    left: 52%;                         /* clear of the text column, always */
    right: auto;
    bottom: 9%;
    width: 280px;
  }
}

/* Tablet landscape : same composition, one size down. */
@media (min-width: 901px) and (max-width: 1200px) {
  .lv4-hero-clean { min-height: clamp(620px, 78vh, 840px); }
  .lv4-hero-clean .lv4-hero-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .lv4-hero-globe .ob-globe-stage {
    left: 72%;
    width: clamp(480px, min(88vh, 64vw), 780px);
  }
  .lv4-hero--flat .lv4-hero-globe .ob-globe-stage {
    width: clamp(740px, min(106vh, 104vw), 1050px);
  }
  .lv4-hero--flat .lv4-hero-globe .ob-globe-card { left: 50%; width: 260px; }
}

@media (max-width: 1024px) {
  .lv4-hero-grid { gap: 32px; }
  .lv4-steps { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* About : the info sidebar stops being sticky and stacks under the text. */
  .lv4-about-grid { grid-template-columns: 1fr; gap: var(--space-6, 28px); }
  .lv4-about-side { position: static; top: auto; }
  /* AI statement : the label stacks above the statement. */
  .lv4-ais-grid { grid-template-columns: 1fr; gap: var(--space-6, 28px); }
  .lv4-ais-label { position: static; top: auto; text-align: left; }
  .lv4-ais-label-tile img { margin: 0; }
  /* Single column : copy first, globe second. */
  .lv4-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .lv4-hero-grid .lv4-hero-copy { max-width: 640px; margin: 0 auto; text-align: center; }
  .lv4-hero-grid .lv4-hero-copy .landing-ai-title,
  .lv4-hero-grid .lv4-hero-copy .landing-ai-sub { text-align: center; }
  .lv4-hero-ctas { justify-content: center; }
  .lv4-trust-row { justify-content: center; }
  .lv4-hero-globe { max-width: 460px; }
  .lv4-licence-list { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .lv4-hero-globe { max-width: 340px; }
  .lv4-trust-row { gap: 8px 14px; }
  .lv4-trust-item { font-size: 12.5px; }
  .lv4-licence-card { padding: var(--space-6, 28px) var(--space-5, 24px); }
  .lv4-about-hero { padding: var(--space-7, 36px) var(--space-5, 24px) var(--space-5, 24px); }
  .lv4-about-letter p { font-size: 15.5px; line-height: 1.8; }
  .lv4-contact-form { padding: var(--space-5, 24px) var(--space-4, 16px); }
  .lv4-ais-hero { padding: var(--space-7, 36px) var(--space-5, 24px) var(--space-5, 24px); }
  .lv4-ais-item p { font-size: 15px; line-height: 1.75; }
  .lv4-faq summary { padding: 15px 18px; font-size: 14.5px; }
  .lv4-faq-answer { padding: 0 18px 18px; }
}

/* PORTRAIT HERO (operator sketch 2026-09-23). Under 900px in portrait the
   hero is one column : copy at the top, then the globe as a full bleed band at
   the very bottom of the section, pushed past the right edge so only its left
   third is on screen. The news card floats over the bottom left of that band
   and keeps its callout line. The cropping is done by .lv4-hero-globe and by
   .dark-section, both overflow hidden : this is the ONE layout where the
   sphere is meant to be cut. Desktop and landscape keep the whole sphere. */
@media (max-width: 900px) and (orientation: portrait) {
  .lv4-hero-clean { padding-bottom: 0; }
  .lv4-hero-grid { gap: 22px; }

  .lv4-hero-clean:not(.lv4-hero--flat) .lv4-hero-globe {
    position: relative;
    /* FULL BLEED WITHOUT 100vw : 100vw ignores the scrollbar and, added to a
       margin, is exactly how a page ends up one notch wider than the screen
       on a phone. Cancelling the section's own padding does the same job and
       can never overshoot (operator 2026-09-24). */
    width: auto;
    max-width: none;
    height: 440px;
    margin-inline: calc(-1 * var(--space-5, 20px));
    overflow: hidden;
  }

  /* Static on purpose : the card then resolves against the band, not against
     the stage that runs off to the right. */
  .lv4-hero-globe .ob-globe {
    position: static;
    width: 100%;
    height: 100%;
    max-width: none;
  }

  .lv4-hero-clean:not(.lv4-hero--flat) .lv4-hero-globe .ob-globe-stage {
    position: absolute;
    top: 50%;
    left: 46vw;
    width: 158vw;
    transform: translateY(-50%);
  }

  .lv4-hero-globe .ob-globe-card {
    left: 16px;
    right: auto;
    bottom: 16px;
    width: min(300px, 70vw);
    max-width: none;
  }

  /* Flat map : twice the viewport wide, right anchored, so the band shows
     Europe, Africa, Asia and Oceania at a readable size. The card floats over
     its bottom left corner. */
  .lv4-hero--flat .lv4-hero-globe {
    position: relative;
    width: auto;
    max-width: none;
    height: 340px;
    margin-inline: calc(-1 * var(--space-5, 20px));
    overflow: hidden;
  }
  .lv4-hero--flat .lv4-hero-globe .ob-globe-stage {
    position: absolute;
    top: 50%;
    left: auto;
    right: -10vw;
    width: 200vw;
    transform: translateY(-50%);
  }
}

/* Home hero: no decorative pattern image behind the globe (operator
   2026-09-23). The shared .dark-section::after pattern stays on every other
   dark section. */
.lv4-hero-clean.dark-section::after { display: none; }