/* ============================================================
   robees.at landing page
   Design system per robees-landing-blueprint.md
   Vanilla CSS · no framework · WCAG AA
   ============================================================ */

:root {
  /* ---- color (warmer-forest, chosen 2026-05-11) ---------- */
  /* primary / secondary contrast widened slightly so adjacent
     sections read as visually distinct without becoming "stripe-y."
     Wave 4.1 §13: bg-secondary lifted ~5% in lightness (HSL roughly
     120, 12%, 22%) for more visible alternation rhythm; text-body is
     a new token for paragraph copy (purer off-white), while headings
     keep text-primary's warmer cream for stronger hierarchy. */
  --color-bg-primary:    #1a2519;
  --color-bg-secondary:  #324032;
  --color-bg-elevated:   #354531;
  --color-accent:        #e0a838;
  --color-accent-hover:  #ecb648;
  --color-text-primary:  #f0e8d6;
  --color-text-body:     #faf6ec;
  --color-text-secondary:#bfb59f;
  --color-text-muted:    #847a64;
  --color-border:        #3d4738;
  --color-success:       #94b075;
  --color-warning:       #e0a838;
  --color-danger:        #c4654f;

  /* Varroa-pressure tokens (Wave 3.9, hero map). Tuned against the
     warmer-forest palette: low = muted forest green; moderate = warm
     amber; high = burnt orange. The "high" token is unused in the
     current map (no high-pressure regions in May 2026) but defined
     for future AGES-driven coloring. */
  --varroa-low:      #4a5e3a;
  --varroa-moderate: #c89647;
  --varroa-high:     #b06438;

  /* ---- type ---------------------------------------------- */
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- layout -------------------------------------------- */
  --max-w: 1280px;
  --gutter: 2rem;
  --section-pad-y: 8rem;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* ---- motion -------------------------------------------- */
  --ease-out: cubic-bezier(0.21, 0.86, 0.32, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
}

/* ---- reset ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--color-accent); text-decoration: none; transition: color 0.18s var(--ease-out); }
a:hover { color: var(--color-accent-hover); }

/* ---- utility / layout primitives ----------------------- */
.container {
  width: min(100%, var(--max-w));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section {
  padding: var(--section-pad-y) 0;
}
.section.tight { padding: 4rem 0; }
.bg-secondary { background: var(--color-bg-secondary); }
.bg-primary { background: var(--color-bg-primary); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 1.25rem;
  display: inline-block;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 1rem 0;
  color: var(--color-text-primary);
}
h1 { font-size: clamp(2.75rem, 6vw, 4.5rem); font-weight: 600; line-height: 1.05; }
h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin-bottom: 1.5rem; }
h3 { font-size: 1.75rem; line-height: 1.2; }
h4 { font-size: 1rem; font-weight: 700; font-family: var(--font-body); letter-spacing: 0.01em; }
/* Wave 4.1 §13: paragraph copy moved from the warmer cream-tan
   (--color-text-secondary) to the purer off-white --color-text-body
   for a more legible body / heading hierarchy. Captions and small
   muted prose retain --color-text-muted or --color-text-secondary
   via their own explicit overrides. */
p  { margin: 0 0 1rem 0; color: var(--color-text-body); max-width: 64ch; }
.lead { color: var(--color-text-body); font-size: 1.25rem; max-width: 640px; }

.muted    { color: var(--color-text-muted); }
.mono     { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.02em; }
.caption  { color: var(--color-text-muted); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em; }

/* ---- buttons ------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.5rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s var(--ease-out), color 0.18s, border-color 0.18s, transform 0.1s;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--color-accent);
  color: var(--color-bg-primary);
  font-weight: 600;
}
.btn-primary:hover { background: var(--color-accent-hover); color: var(--color-bg-primary); }
.btn-outline {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.btn-outline:hover { background: rgba(212, 160, 23, 0.08); color: var(--color-accent-hover); }
.btn-ghost {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
.btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn-block { width: 100%; }

/* ---- focus -------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   Top nav
   ============================================================ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(26, 42, 31, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  transition: background 0.2s var(--ease-out);
}
.site-nav.scrolled { background: rgba(26, 42, 31, 0.95); }
.site-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem var(--gutter);
  max-width: var(--max-w);
  margin: 0 auto;
}
.nav-brand {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}
.nav-brand:hover { color: var(--color-text-primary); }
.nav-brand .tagline {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
}
.nav-links {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-link {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.18s var(--ease-out);
}
.nav-link:hover, .nav-link.active { color: var(--color-text-primary); }
.nav-actions { display: flex; align-items: center; gap: 1rem; }

.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}
.lang-toggle button {
  padding: 0.4rem 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  background: transparent;
  transition: background 0.18s var(--ease-out), color 0.18s;
}
.lang-toggle button.active {
  background: var(--color-accent);
  color: var(--color-bg-primary);
  font-weight: 600;
}
.lang-toggle button:not(.active):hover { color: var(--color-text-primary); }

/* ---- mobile nav ---- */
.nav-burger {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  align-items: center; justify-content: center;
}
.nav-burger svg { stroke: var(--color-text-primary); stroke-width: 2; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-actions { gap: 0.6rem; }
  .nav-actions .btn { padding: 0.6rem 1rem; font-size: 0.9rem; }
  .nav-burger { display: inline-flex; }
  .nav-brand .tagline { display: none; }

  .site-nav.menu-open .nav-links {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
    padding: 1.5rem var(--gutter);
    gap: 1.25rem;
  }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  /* Wave 4.1: pulled content up ~80px from the original 6rem top pad
     so the pill sits closer to the nav and the empty space above
     stops dominating the fold. */
  padding-top: 1rem;
  padding-bottom: 0;
  min-height: calc(100vh - 70px);
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* Live telemetry background: 5 amber paths driven by the IIFE at the
   bottom of index.html. position:absolute means it does not consume
   flex space inside .hero; pointer-events:none keeps the SVG from
   intercepting clicks meant for buttons / links above it. */
.hero-telemetry {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.hero-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex; flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-bottom: 4rem;
}
/* Accessibility: kill the animation for visitors who request it.
   Hiding the SVG entirely is simpler than pausing the rAF loop and
   produces identical UX (static dark hero). */
@media (prefers-reduced-motion: reduce) {
  .hero-telemetry { display: none; }
}
/* Mobile: halve the SVG opacity so the lines don't fight the stacked
   hero copy on narrow screens. */
@media (max-width: 768px) {
  .hero-telemetry { opacity: 0.5; }
}
/* Quieter eyebrow per Change 2: tighter padding, smaller, lower opacity */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(212, 160, 23, 0.08);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  margin-bottom: 1.75rem;
}
.hero h1 { max-width: 16ch; }
.hero .lead { margin-top: 1.5rem; }
/* Wave 4.1: middle body paragraph is the punch line (semibold cream).
   .hero-body keeps the regular lead weight; .hero-punchline is the
   one that pops. Both reuse .lead sizing so the rhythm stays. */
.hero .lead.hero-body { font-weight: 400; }
.hero .lead.hero-punchline {
  font-weight: 600;
  color: var(--color-text-primary);
  margin-top: 1.1rem;
}
.hero .lead.hero-body + .hero-punchline { margin-top: 1.1rem; }
.hero .lead.hero-punchline + .hero-body { margin-top: 1.1rem; }

.hero-actions {
  display: flex; gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

/* Wave 4.1: caption pill below the CTAs. Mirrors .hero-eyebrow visual
   identity (mono uppercase letter-spaced amber on faint amber bg) but
   sized down slightly so it reads as a secondary timing note. */
.hero-caption {
  display: inline-flex;
  align-items: center;
  margin-top: 1.5rem;
  background: rgba(212, 160, 23, 0.08);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
}

/* Change 2: hero-fineprint switched from mono → Inter (no longer system data) */
.hero-fineprint {
  margin-top: 1rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

/* Change 2: phase eyebrows. Quieter, no background, just letter-spaced mono accent */
.eyebrow.phase-eyebrow {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.8;
  margin-bottom: 1rem;
}

/* v3 Change 8 animation-audit cleanup: the hero waveform was removed
   in round 3; the .live-dot / pulse-dot / hero-waveform-* CSS that
   supported it has been deleted as dead code. */

@media (max-width: 768px) {
  .hero { min-height: auto; padding-top: 3rem; }
}

/* ============================================================
   Section: 1% Threshold. Wave 4.0 + Wave 4.1: heat-map is the
   section's primary visual; the Genersch / Morfin copy + caveat
   collapse into a single readable column. Wave 4.1 inserts a 2x2
   problem/solution grid + community line above the heat map.
   ============================================================ */

/* Wave 4.1 §2: 2x2 problem/solution grid. */
.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  max-width: 920px;
  margin: 0.5rem auto 0;
}
@media (max-width: 720px) {
  .problem-grid { grid-template-columns: 1fr; gap: 1rem; }
}
.problem-card {
  border: 1px solid rgba(224, 168, 56, 0.3);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: transparent;
}
/* Wave 4.3: each panel is a plain div with a focusable .panel-summary
   <button> trigger and a .panel-expansion body. Expansion opens on
   hover (mouse) and on focus-within (keyboard tab, touch tap moves
   focus to the button). The grid-template-rows 0fr -> 1fr trick
   animates the collapse smoothly while still respecting the natural
   content height; .panel-expansion-inner gets overflow: hidden so
   the contained <p> clips cleanly during the transition. */
.problem-panel,
.solution-panel {
  padding: 0;
  background: transparent;
  transition: background-color 0.18s ease;
}
.solution-panel { background: rgba(224, 168, 56, 0.05); }
.problem-panel:hover,
.problem-panel:focus-within { background: rgba(224, 168, 56, 0.04); }
.solution-panel:hover,
.solution-panel:focus-within { background: rgba(224, 168, 56, 0.10); }

.panel-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  width: 100%;
  padding: 1.1rem 1.25rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.55;
  text-align: left;
  color: var(--color-text-primary);
}
.panel-summary:focus { outline: none; }
.panel-summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}
.solution-panel .panel-summary { font-weight: 600; }

/* + / x indicator. Rotates 45deg when the panel is hovered / focused. */
.panel-indicator {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  position: relative;
  opacity: 0.6;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.panel-indicator::before,
.panel-indicator::after {
  content: "";
  position: absolute;
  background: var(--color-accent);
  border-radius: 1px;
}
.panel-indicator::before { top: 6px; left: 0;   width: 14px; height: 2px; }
.panel-indicator::after  { top: 0;   left: 6px; width: 2px;  height: 14px; }
.problem-panel:hover         .panel-indicator,
.problem-panel:focus-within  .panel-indicator,
.solution-panel:hover        .panel-indicator,
.solution-panel:focus-within .panel-indicator {
  transform: rotate(45deg);
  opacity: 1;
}

/* Expansion body. Collapsed to 0fr (no visible height), expands to
   1fr (natural content height) on hover / focus-within. Inner div
   handles overflow clipping during the animation. */
.panel-expansion {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.panel-expansion-inner {
  overflow: hidden;
}
.panel-expansion p {
  margin: 0;
  padding: 0 1.25rem 1.1rem 1.25rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  font-weight: 400;
}
.problem-panel:hover .panel-expansion,
.problem-panel:focus-within .panel-expansion,
.solution-panel:hover .panel-expansion,
.solution-panel:focus-within .panel-expansion {
  grid-template-rows: 1fr;
}

/* Wave 4.2 (2026-05-19): community line, varroa-map-caption, and
   threshold-text rules removed alongside the heat-map block. The
   #problem section now ends at the 2x2 grid; the section's bottom
   padding (from .section) handles the transition to #features. */

/* ============================================================
   Section: Features (Phase 1)
   ============================================================ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.feature-card {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem;
  position: relative;
  transition: background 0.22s var(--ease-out), border-color 0.22s, transform 0.22s;
}
.feature-card:hover {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
  border-left: 2px solid var(--color-accent);
  padding-left: calc(2rem - 1px);
  transform: translateY(-2px);
}
/* v3: icon left, title right, on the same baseline. Body wraps below. */
.feature-card { display: flex; flex-direction: column; }
.feature-card-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1rem;
}
.feature-card .icon {
  width: 32px; height: 32px;
  color: var(--color-accent);
  flex-shrink: 0;
  margin: 0;
}
.feature-card h3 {
  font-size: 1.25rem;
  margin: 0;
  line-height: 1.2;
}
.feature-card p { color: var(--color-text-secondary); margin: 0; }

@media (max-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .feature-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Section: Phase 2 (Hardware preview)
   ============================================================ */
/* v3 Change 4d: vertical flow.
   body → visual → pricing → CTA, with generous whitespace between beats. */
.hardware-flow {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  align-items: center;
}
.hardware-flow > * { width: 100%; }
.hardware-body {
  max-width: 640px;
  align-self: center;
}
.hardware-visual-wrap {
  max-width: 720px;
  align-self: center;
}
.hardware-cta-row {
  display: flex;
  justify-content: center;
}

/* Legacy hardware-grid kept (some pages might reference); now superseded
   by .hardware-flow on the home page. */
.hardware-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.hardware-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 0;
  max-width: 720px;
  width: 100%;
  align-self: center;
}
.spec-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
}
.spec-card .label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-accent);
  letter-spacing: 0.1em;
  margin-bottom: 0.4rem;
}
.spec-card .price {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.4rem;
}
.spec-card .meta {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
/* Hardware section 3D model viewer. The conceptual hive-flow SVG (phone
   + radio waves + hive cross-section + animated sensor dots) and its
   .hf-* keyframes were removed; replaced by Google's <model-viewer>
   custom element rendering the Lebenstock GLB. Sized to match the
   prior illustration footprint so the section layout is unchanged.
   --poster-color: transparent + the ::part(default-progress-bar)
   override theme the built-in loading state to the site amber. */
model-viewer {
  display: block;
  width: 100%;
  height: 500px;
  max-width: 600px;
  margin: 0 auto;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  --poster-color: transparent;
}
/* Wave 4.4: poster image covers the GLB load. Hiding the default
   progress bar keeps the transition pure poster -> 3D, no amber bar
   flashing in between. */
model-viewer::part(default-progress-bar) {
  display: none;
}
/* "Unser neuester Prototyp" caption above the model viewer. Small
   mono uppercase amber text matching the eyebrow visual register. */
.hardware-model-caption {
  max-width: 600px;
  margin: 0 auto 0.65rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Wave 4.5: segmented pill toggle that swaps between the interactive
   <model-viewer> and a static <img> render of the same poster. Sits
   centered above the viewer caption. .is-active button is filled
   amber; idle button is transparent with secondary-cream text. */
.hardware-viewer-toggle {
  display: inline-flex;
  margin: 0 auto 0.75rem;
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: rgba(224, 168, 56, 0.06);
  gap: 0;
}
.hardware-visual-wrap > .hardware-viewer-toggle {
  display: flex;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}
.hwv-tab {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background: transparent;
  border: 0;
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.hwv-tab:hover { color: var(--color-text-primary); }
.hwv-tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.hwv-tab.is-active {
  background: var(--color-accent);
  color: var(--color-bg-primary);
}

/* The stack holds the model-viewer and the static <img> on top of
   each other (no positioning needed: only one is display: block at
   a time). data-mode toggles which one shows. */
.hardware-viewer-stack[data-mode="static"] model-viewer { display: none; }
.hardware-viewer-stack[data-mode="3d"]     .hardware-static-render { display: none; }

/* Static render uses the same outer dimensions as the model-viewer so
   the column doesn't reflow when the user toggles. object-fit:
   contain shows the full poster (vs cover, which would crop the top
   and bottom of the 4:3 source). The poster's #1a2519 background
   already matches the container, so any letterboxing is invisible. */
.hardware-static-render {
  display: block;
  width: 100%;
  height: 500px;
  max-width: 600px;
  margin: 0 auto;
  object-fit: contain;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.hardware-visual {
  position: relative;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 3rem;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hardware-visual svg { width: 80%; height: auto; }
/* .hardware-caption rule removed: caption element no longer in the DOM. */
@media (max-width: 900px) {
  .hardware-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hardware-specs { grid-template-columns: 1fr; }
  .hardware-flow { gap: 2.5rem; }
}

/* ============================================================
   v3 Change 3c: per-card animated visuals on feature cards
   ============================================================ */
.feature-visual {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.fv-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 120px;
  margin: 0 auto;
}

/* Card 1: inspection rows appearing one after another. 6s loop. */
.fv1-row { opacity: 0; }
.fv1-row-1 { animation: fv1-show 6s ease-out infinite; animation-delay: 0s;   }
.fv1-row-2 { animation: fv1-show 6s ease-out infinite; animation-delay: 1.5s; }
.fv1-row-3 { animation: fv1-show 6s ease-out infinite; animation-delay: 3s;   }
@keyframes fv1-show {
  0%   { opacity: 0; transform: translateY(-3px); }
  10%  { opacity: 1; transform: translateY(0); }
  75%  { opacity: 1; transform: translateY(0); }
  90%  { opacity: 0; transform: translateY(-3px); }
  100% { opacity: 0; transform: translateY(-3px); }
}

/* Card 2: district risk indicator cycles success → warning → danger. 4s. */
.fv2-indicator {
  animation: fv2-risk 4s ease-in-out infinite;
}
@keyframes fv2-risk {
  0%, 100% { fill: #94b075; }   /* success / green */
  40%      { fill: #e0a838; }   /* warning / amber */
  70%      { fill: #c4654f; }   /* danger / red */
}

/* Card 3: three weather icons cycle attention. 5s. */
.fv3-icon { opacity: 0.20; transition: opacity 0.4s; }
.fv3-sun   { animation: fv3-glow 5s ease-in-out infinite; animation-delay: 0s;   }
.fv3-cloud { animation: fv3-glow 5s ease-in-out infinite; animation-delay: 1.66s; }
.fv3-frost { animation: fv3-glow 5s ease-in-out infinite; animation-delay: 3.33s; }
@keyframes fv3-glow {
  0%, 100% { opacity: 0.20; }
  25%, 50% { opacity: 1; }
  75%      { opacity: 0.20; }
}

/* ============================================================
   Section: Trust strip: partner / funder logos
   ============================================================ */
.partner-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 3rem;
  margin: 1.75rem 0 1.5rem 0;
  padding: 1rem 0;
}
.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
}
.partner-logo img {
  max-height: 56px;
  max-width: 100%;
  object-fit: contain;
  /* Tone the logos to read on the dark background.
     Each individual partner brand stays distinct in colour but
     blends consistently with the page palette. */
  filter: brightness(0.95) saturate(0.85) opacity(0.92);
  transition: filter 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}
.partner-logo:hover img {
  filter: brightness(1) saturate(1) opacity(1);
  transform: translateY(-2px);
}
.partner-caption {
  text-align: center;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: 1rem;
  line-height: 1.6;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px) {
  .partner-strip { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
@media (max-width: 480px) {
  .partner-strip { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ============================================================
   Section: Pricing
   ============================================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.price-card {
  position: relative;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2.25rem 2rem;
  display: flex; flex-direction: column;
}
.price-card.featured {
  border-color: var(--color-accent);
}
.price-card .price-badge {
  position: absolute;
  top: -10px; right: 1.5rem;
  background: var(--color-accent);
  color: var(--color-bg-primary);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}
.price-card h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  color: var(--color-text-secondary);
}
.price-card .price {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.25rem;
}
.price-card .price-cadence {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 1.75rem;
}
.price-card ul {
  list-style: none;
  padding: 0; margin: 0 0 2rem 0;
  display: grid; gap: 0.7rem;
  flex: 1;
}
.price-card li {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  padding-left: 1.4rem;
  position: relative;
}
.price-card li::before {
  content: "·";
  color: var(--color-accent);
  font-weight: 800;
  font-size: 1.2rem;
  position: absolute;
  left: 0; top: -0.15em;
}
.price-card .btn { margin-top: auto; }

.pricing-footnote {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 2.5rem auto 0 auto;
  line-height: 1.7;
  max-width: 560px;
}

@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Section: Pilot
   ============================================================ */
.pilot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.pilot-bullets {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0 0;
  display: grid; gap: 0.8rem;
}
.pilot-bullets li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--color-text-secondary);
}
.pilot-bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55rem;
  width: 8px; height: 8px;
  background: var(--color-accent);
  border-radius: 50%;
}

.pilot-form {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem;
  display: grid; gap: 1rem;
}
.field { display: grid; gap: 0.4rem; }
.field label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.field input, .field textarea {
  font: inherit;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  transition: border-color 0.18s var(--ease-out);
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
.field textarea { min-height: 90px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.consent {
  display: flex; align-items: flex-start; gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}
.consent input[type="checkbox"] { margin-top: 0.25rem; flex-shrink: 0; }
.form-feedback {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  min-height: 1.2em;
}
.form-feedback.success { color: var(--color-success); }
.form-feedback.error   { color: var(--color-danger); }

@media (max-width: 900px) { .pilot-grid { grid-template-columns: 1fr; gap: 2.5rem; } .field-row { grid-template-columns: 1fr; } }

/* ============================================================
   Section: Team
   ============================================================ */
.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
}
.founder-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem;
  display: flex; gap: 1.75rem; align-items: flex-start;
}
.founder-photo {
  width: 120px; height: 120px;
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  border: 2px solid var(--color-accent);
  flex-shrink: 0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  filter: grayscale(0.2);
}
/* Wave 4.1 §8: real headshots replace the placeholder icon-in-frame.
   object-fit: cover fills the square frame without distorting the
   aspect ratio of the 600x600 source; the inherited grayscale(0.2)
   on the parent matches the rest of the site's muted photography. */
.founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.founder-meta h3 { margin-bottom: 0.2rem; font-size: 1.4rem; }
.founder-meta .role {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
  display: block;
}
.founder-meta p { color: var(--color-text-secondary); margin-bottom: 0.5rem; font-size: 0.98rem; }
.founder-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
@media (max-width: 800px) {
  .team-grid { grid-template-columns: 1fr; }
  .founder-card { flex-direction: column; }
  .founder-photo { width: 96px; height: 96px; }
}

/* ============================================================
   FAQ accordion
   ============================================================ */
.faq-list {
  margin-top: 3rem;
  display: grid; gap: 0;
  border-top: 1px solid var(--color-border);
}
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-question {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.5rem 0;
  text-align: left;
  font-size: 1.125rem;
  color: var(--color-text-primary);
  font-weight: 500;
}
.faq-question:hover { color: var(--color-accent); }
.faq-question .chev {
  width: 18px; height: 18px;
  flex-shrink: 0;
  transition: transform 0.22s var(--ease-out);
  color: var(--color-accent);
}
.faq-item.open .faq-question .chev { transform: rotate(180deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease-out);
}
.faq-item.open .faq-answer { max-height: 30em; }
.faq-answer-inner {
  padding: 0 0 1.5rem 0;
  color: var(--color-text-secondary);
  max-width: 70ch;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 4rem 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}
.footer-col h5 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 1rem 0;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.footer-col a {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  transition: color 0.18s var(--ease-out);
}
.footer-col a:hover { color: var(--color-accent); }
.footer-brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-text-primary);
}
.footer-tagline { color: var(--color-text-secondary); font-size: 0.95rem; margin-bottom: 0.4rem; }
.footer-address { color: var(--color-text-muted); font-size: 0.9rem; font-family: var(--font-mono); }
.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-align: center;
  letter-spacing: 0.04em;
  line-height: 1.7;
}
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Scroll-reveal animation
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Bilingual page blocks: show only the block matching <html lang>.
   Used by impressum / agb / privacy / investors which carry both
   language versions inline as data-lang="de" / data-lang="en" blocks.
   ============================================================ */
html[lang="de"] [data-lang="en"],
html[lang="en"] [data-lang="de"] {
  display: none !important;
}

/* ============================================================
   Generic content (legal pages)
   ============================================================ */
.content-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 4rem var(--gutter);
}
.content-page h1 { margin-bottom: 1.5rem; }
.content-page h2 { font-size: 1.5rem; margin-top: 2.5rem; margin-bottom: 0.75rem; }
.content-page p, .content-page li { color: var(--color-text-secondary); }
.content-page ul, .content-page ol { padding-left: 1.5rem; }
.content-page .draft-banner {
  background: rgba(184, 92, 74, 0.15);
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

/* Wave 4.2: .threshold-source / .threshold-caveat rules removed
   alongside the heat-map / Morfin block. */

/* ============================================================
   Change 4: honest disclosure under pricing H2
   ============================================================ */
.pricing-disclosure {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  text-align: center;
  max-width: 600px;
  margin: 0 auto 2rem auto;
  line-height: 1.55;
}

/* ============================================================
   Change 9: annual pricing toggle
   ============================================================ */
.pricing-toggle {
  display: inline-flex;
  margin: 0 auto 3rem auto;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.25rem;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-bg-elevated);
}
.pricing-toggle-btn {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out);
}
.pricing-toggle-btn.active {
  background: var(--color-accent);
  color: var(--color-bg-primary);
  font-weight: 600;
}
.pricing-toggle-btn:not(.active):hover { color: var(--color-text-primary); }

.price-stack { margin-bottom: 1.5rem; }
.price-stack .price,
.price-stack .price-cadence,
.price-stack .price-saving {
  transition: opacity 0.2s var(--ease-out);
}
.price-stack.swapping .price,
.price-stack.swapping .price-cadence,
.price-stack.swapping .price-saving { opacity: 0; }
.price-saving {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-accent);
  letter-spacing: 0.04em;
  margin-top: 0.4rem;
  min-height: 1.2em;
}

/* ============================================================
   Change 5: pilot form selects (consistent with existing inputs)
   ============================================================ */
.pilot-form select {
  width: 100%;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font: inherit;
  padding: 0.7rem 0.85rem;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%237d7969' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='1.5 1.5 6 6.5 10.5 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 12px 8px;
  padding-right: 2.4rem;
}
.pilot-form select:focus { border-color: var(--color-accent); outline: none; }

/* ============================================================
   Change 7: newsletter band
   ============================================================ */
.newsletter-band {
  position: relative;
  overflow: hidden;
  padding: 4rem 0;
  border-top: 1px solid var(--color-border);
}
/* Wave 4.3: same hero-telemetry SVG ported here; needs position: relative
   on the section so the SVG (.hero-telemetry { position: absolute })
   anchors against it. .newsletter-inner gets z-index: 1 so the form
   stays above the wave lines. */
.newsletter-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 0 var(--gutter);
}
.newsletter-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 1rem;
}
.newsletter-h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 0.75rem 0;
}
.newsletter-sub {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text-secondary);
  max-width: 540px;
  margin: 0 auto 1.75rem auto;
  line-height: 1.55;
}
.newsletter-form {
  display: flex;
  gap: 0.75rem;
  max-width: 520px;
  margin: 0 auto 1rem auto;
}
.newsletter-form input[type="email"] {
  flex: 1;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  padding: 0.85rem 1rem;
  font-size: 1rem;
}
.newsletter-form input[type="email"]:focus { border-color: var(--color-accent); outline: none; }
.newsletter-consent {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: 0.6rem 0 0 0;
}
@media (max-width: 600px) {
  .newsletter-form { flex-direction: column; }
  .newsletter-h2 { font-size: 1.5rem; }
  .newsletter-band { padding: 2.5rem 0; }
}

/* ============================================================
   Change 3: hardware dashboard mockup
   ============================================================ */
.hardware-dashboard {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
  padding: 1.5rem 1.5rem 1.25rem 1.5rem;
  font-family: var(--font-body);
  position: relative;
}
.hd-top {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}
.hd-live-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--color-accent);
  box-shadow: 0 0 0 0 rgba(212, 160, 23, 0.55);
  animation: status-pulse 2s var(--ease-in-out) infinite;
}
.hd-chart {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 1.25rem;
}
.hd-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin-bottom: 1rem;
}
.hd-tile {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  background: rgba(212, 160, 23, 0.03);
}
.hd-tile-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.hd-tile-value {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-accent);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 0.4rem;
}
.hd-tile-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.hd-meta-success { color: var(--color-success); }
.hd-mini-wave {
  width: 80px;
  height: 22px;
  display: block;
  margin: 0.3rem 0 0.5rem 0;
}
.hd-bottom {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  text-align: right;
  margin-top: 0.5rem;
}
@media (max-width: 700px) {
  .hd-tiles { grid-template-columns: 1fr; }
  .hd-chart { margin-bottom: 1rem; }
}

/* ============================================================
   Change 10: theme picker indicator (bottom-right floating)
   Only injected by JS when a non-default theme is active.
   ============================================================ */
.theme-indicator {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 200;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.45rem 0.85rem 0.45rem 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.theme-indicator .swatch {
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--color-accent);
}
.theme-indicator a {
  color: var(--color-accent);
  text-decoration: none;
  margin-left: 0.4rem;
}
.theme-indicator a:hover { color: var(--color-accent-hover); }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hd-live-dot { animation: none; opacity: 0.7; box-shadow: none; }
  .reveal { opacity: 1; transform: none; }

  /* hive-flow animations removed alongside the SVG that drove them;
     model-viewer's own auto-rotate respects prefers-reduced-motion
     natively (the web component disables auto-rotation when reduced
     motion is requested by the OS / browser). */

  /* v3 Change 3c: feature-card visuals stay static.
     Each card shows the "primed" version: card 1 all 3 rows visible,
     card 2 indicator stays in success-green, card 3 sun is the
     foregrounded weather icon. */
  .fv1-row, .fv1-row-1, .fv1-row-2, .fv1-row-3 { animation: none; opacity: 1; transform: none; }
  .fv2-indicator { animation: none; fill: #94b075; }
  .fv3-sun, .fv3-cloud, .fv3-frost { animation: none; opacity: 0.7; }
  .fv3-sun { opacity: 1; }
}

/* ============================================================
   Live colony health primitives. Wave 4.0 -> Wave 4.2:
   the sensor-card cluster (.lw-cards-panel etc.) lives inside §3
   "What you'll be able to use". The Austria Varroa heat map that
   used to live in §2 is dissolved (Wave 4.2, 2026-05-19); all
   .varroa-map / .austria-internals / .austria-silhouette /
   .klagenfurt-* rules removed alongside it.
   ============================================================ */

/* ── Sensor cards panel (Wave 4.0: lives in §3, full-width) ── */
.lw-cards-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 1040px;
  margin: 0 auto;
}
.lw-top-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.lw-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  background: rgba(148, 176, 117, 0.10);
  border: 1px solid rgba(148, 176, 117, 0.35);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--color-text-primary);
  text-transform: uppercase;
}
.lw-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 0 rgba(148, 176, 117, 0.5);
  animation: live-pulse 2.4s ease-in-out infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(148, 176, 117, 0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(148, 176, 117, 0); }
  100% { box-shadow: 0 0 0 0   rgba(148, 176, 117, 0); }
}

.lw-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}
.lw-status-badge .lw-status-text { color: var(--color-text-primary); }
.lw-badge-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent);
}
.lw-status-badge[data-status="watch"]     .lw-badge-dot { background: var(--varroa-moderate); }
.lw-status-badge[data-status="attention"] .lw-badge-dot { background: var(--varroa-high); }
.lw-status-badge[data-status="unknown"] { display: none; }

.lw-update-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  margin-left: auto;
  opacity: 0.5;
}
.lw-update-pulse.flashing {
  animation: lw-update-flash 600ms ease-in-out 1;
}
@keyframes lw-update-flash {
  0%   { opacity: 0.5; transform: scale(1); }
  50%  { opacity: 1;   transform: scale(1.25); }
  100% { opacity: 0.5; transform: scale(1); }
}

.lw-stale-pill {
  display: inline-block;
  align-self: flex-start;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}
.lw-stale-pill[data-state="stale"] {
  background: rgba(224, 168, 56, 0.10);
  border: 1px solid rgba(224, 168, 56, 0.4);
  color: var(--color-text-primary);
}
.lw-stale-pill[data-state="pending"] {
  background: rgba(196, 101, 79, 0.12);
  border: 1px solid rgba(196, 101, 79, 0.45);
  color: var(--color-text-primary);
}

/* Wave 4.0: 4 cards in a single horizontal row on desktop
   (no map competing for width); 2×2 on tablet; 2 cols on phone
   (≤640px override below keeps it readable). */
.lw-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-top: 0.25rem;
}
@media (max-width: 959px) {
  .lw-cards { grid-template-columns: 1fr 1fr; }
}
.lw-metric {
  text-align: center;
  padding: 1.1rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
}
.lw-num {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.2vw, 2.2rem);
  font-weight: 600;
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.01em;
}
.lw-unit {
  font-size: 0.5em;
  margin-left: 0.18em;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.lw-label {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin-top: 0.5rem;
}

/* Wave 4.1 follow-up: Licht / Schall strip lifted a half-step out of
   Wave 4.3: light + sound moved out of the inline secondary strip into
   their own pair of small mini-cards, centered below the main 4. Same
   amber border + lifted bg as the main cards, but smaller padding /
   font so they still read as secondary information. */
.lw-mini-row {
  display: flex;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 0.65rem;
  flex-wrap: wrap;
}
.lw-mini-metric {
  text-align: center;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  min-width: 110px;
}
.lw-mini-num {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  font-weight: 600;
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.01em;
}
.lw-mini-num .lw-unit {
  font-size: 0.55em;
  margin-left: 0.16em;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.lw-mini-label {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin-top: 0.4rem;
}

/* Weight-sensor honesty footnote. Same centering pattern as the
   Licht/Schall strip: the <p> element is width-constrained and
   margin-auto'd so it visibly sits in the middle of the column even
   when the line wraps, rather than just being text-aligned center
   inside a full-width block. Type lifted a notch (0.74rem -> 0.82rem)
   but kept italic + muted so it still reads as a footnote, not a
   peer of the four metric cards above. */
.lw-weight-footnote {
  max-width: 500px;
  margin: 0.5rem auto 0;
  text-align: center;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--color-text-muted);
}

/* Honesty line below both panels */
.lw-honesty {
  max-width: 700px;
  margin: 2rem auto 0;
  text-align: center;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  /* Phone-narrow tweaks */
  .lw-cards { grid-template-columns: 1fr 1fr; gap: 0.55rem; }
  .lw-top-row { gap: 0.55rem; }
  .lw-update-pulse { margin-left: 0; }
}
@media (max-width: 400px) {
  /* Very narrow (iPhone SE etc.): 1-col fallback per spec §3c */
  .lw-cards { grid-template-columns: 1fr; }
}


/* ============================================================
   pricing-honest: landing rebrand Wave 2 (2026-05-15)
   Per 7robees-landing-rebrand.md §8. The three-tier-card pricing
   UI is gone; this is its honest replacement: three plain-text
   paragraphs, lead paragraph slightly emphasised via CSS (NOT
   via inline <strong>, because home.js's applyLang uses
   textContent and would render literal tags).
   ============================================================ */

.pricing-honest {
  max-width: 720px;
  margin: 2.5rem auto 0;
  display: grid;
  gap: 1.4rem;
}
.pricing-honest p {
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0;
  max-width: none;
  color: var(--color-text-secondary);
}
.pricing-honest-lead {
  font-size: 1.18rem !important;
  font-weight: 500;
  color: var(--color-text-primary) !important;
}


/* ============================================================
   institutional partners / LOI block: landing-rebrand Wave 3
   (2026-05-15). Reuses the existing .pilot-grid + .pilot-form
   layout primitives (same two-column copy/form split) so no new
   design tokens are introduced. Only this one alignment override
   for the textarea, and a visual separator from the #faq section
   that follows (both bg-secondary, so a subtle divider helps).
   ============================================================ */

#institutional .pilot-form textarea {
  resize: vertical;
  min-height: 110px;
  font-family: var(--font-body);
}

#institutional + section#faq {
  border-top: 1px solid var(--color-border);
}