/* ============================================================
   LabQor landing — "The Specimen Vitrine" (backlit shelf world)
   ============================================================ */

:root {
  /* Dark is the default LabQor theme — these are the original, unchanged
     values. A first-time visitor with no stored preference gets exactly
     this; [data-theme="light"] below overrides every token for the
     opt-in light theme without touching a single dark-mode value. */
  --ground: #15120F;
  --ground-raised: #1F1B16;
  --ground-deep: #0E0C0A;
  --on-ground: #F2EEE4;
  --on-ground-soft: #A99E8B;
  --edge: rgba(242,238,228,.14);
  --edge-bright: rgba(242,238,228,.32);
  --glow: rgba(217,166,87,.16);
  --glow-strip: #D9A657;
  --action: #D9A657;
  --action-hover: #E8B970;
  --action-ink: #241C0F;
  --stamp-red: #E06B7E;
  --stamp-red-line: #C24259;
  --ok: #6FAE8B;

  --status-success-bg: #1E2B22; --status-success-text: #6FAE8B;
  --status-warning-bg: #33291A; --status-warning-text: #D9A657;
  --status-error-bg: #3A2226;   --status-error-text: #E06B7E;
  --status-info-bg: #1E2B33;    --status-info-text: #6FA8C9;

  --font-head: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius-sm: 5px;
  --radius-md: 8px;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px; --space-9: 112px;

  color-scheme: dark;
}

/* Light theme — an additional coherent LabQor palette, not a redesign.
   Same structure, same components; only these tokens change. Dark is
   led by gold with teal used selectively; light reverses that emphasis
   and is led by teal, with gold kept only as a small secondary detail —
   intentional, so the two themes still read as one brand. */
:root[data-theme="light"] {
  --ground: #FFFFFF;
  --ground-raised: #F7F9F8;
  --ground-deep: #FFFFFF;
  --on-ground: #182422;
  --on-ground-soft: #626A67;
  --edge: #E2E5E3;
  --edge-bright: #D9DEDB;
  --glow: rgba(29,111,106,.08);
  --glow-strip: #1D6F6A;
  --action: #1D6F6A;
  --action-hover: #155954;
  --action-ink: #FFFFFF;
  --stamp-red: #A7443C;
  --stamp-red-line: #8A362F;
  --ok: #34765B;

  --status-success-bg: #E1EFE7; --status-success-text: #34765B;
  --status-warning-bg: #F5E8C8; --status-warning-text: #A66E18;
  --status-error-bg: #F5DEDB;   --status-error-text: #A7443C;
  --status-info-bg: #E2EDF4;    --status-info-text: #416D8E;

  color-scheme: light;
}

*, *::before, *::after {
  box-sizing: border-box;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, fill .22s ease, stroke .22s ease;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  color: var(--on-ground);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ground);
  background-image:
    radial-gradient(ellipse 900px 500px at 20% 0%, rgba(217,166,87,.05), transparent 60%),
    radial-gradient(ellipse 700px 500px at 85% 40%, rgba(217,166,87,.04), transparent 60%);
  background-repeat: no-repeat;
}
/* Light mode is a flat, genuinely white page — no beige/cream tint from
   the dark theme's warm ambient glow. */
:root[data-theme="light"] body { background-image: none; }

h1, h2, h3 { font-family: var(--font-head); margin: 0; line-height: 1.1; letter-spacing: -0.01em; color: inherit; }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 800; text-wrap: balance; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; text-wrap: balance; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input { font: inherit; }

::selection { background: var(--action); color: var(--action-ink); }
:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; border-radius: 3px; }
* { scrollbar-color: var(--edge-bright) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-thumb { background: var(--edge-bright); border-radius: 99px; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.icon { width: 20px; height: 20px; }
.icon-sm { width: 15px; height: 15px; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--action); color: var(--action-ink);
  padding: 10px 16px; z-index: 200; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Shelf slot: the recurring backlit container ---------- */
.slot {
  position: relative;
  background: var(--ground-raised);
  border: 1px solid var(--edge);
  border-radius: var(--radius-md);
  box-shadow: 0 22px 44px -28px rgba(0,0,0,.75), 0 0 36px -14px var(--glow);
}
.slot::after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--glow-strip), transparent);
  opacity: .55;
}

/* ---------- Nameplate: a small museum wall-label, precisely set ---------- */
.nameplate {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.02em; color: var(--on-ground-soft);
  padding: 5px 11px; margin: 0 0 16px;
  border: 1px solid var(--edge); border-radius: 2px;
}
.nameplate::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--action);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--radius-sm);
  font-weight: 700; font-size: 0.92rem; white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn-lg { padding: 13px 22px; font-size: 0.98rem; }
.btn-ghost { color: var(--on-ground-soft); }
.btn-ghost:hover { color: var(--on-ground); }
.btn-key {
  border-color: var(--edge-bright); color: var(--on-ground);
  background: var(--ground-raised);
}
.btn-key:hover { border-color: var(--action); }
.btn-key:active { transform: translateY(1px); }
.btn-key--lit {
  background: var(--action); border-color: var(--action); color: var(--action-ink);
  box-shadow: 0 8px 18px -8px rgba(0,0,0,.6), 0 0 28px -6px var(--glow-strip);
}
.btn-key--lit:hover { background: var(--action-hover); border-color: var(--action-hover); }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--ground) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--edge);
}
.header-row { display: flex; align-items: center; gap: var(--space-5); height: 68px; }
.wordmark { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.01em; margin-right: auto; }
.main-nav { display: flex; gap: var(--space-5); }
.main-nav a { font-size: 0.92rem; color: var(--on-ground-soft); }
.main-nav a:hover { color: var(--on-ground); }
.header-actions { display: flex; align-items: center; gap: var(--space-3); position: relative; }

.lang-wrap { position: relative; }
.lang-switch {
  display: flex; align-items: center; gap: 4px; padding: 7px 10px;
  border: 1px solid var(--edge-bright); border-radius: var(--radius-sm);
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em;
}
.lang-switch:hover { border-color: var(--action); color: var(--action); }
.lang-switch .icon-sm { transition: transform .15s ease; }
.lang-switch[aria-expanded="true"] .icon-sm { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: 46px; right: 0; background: var(--ground-raised);
  border: 1px solid var(--edge-bright); border-radius: var(--radius-sm);
  padding: 4px; min-width: 140px; box-shadow: 0 12px 28px -12px rgba(0,0,0,.5);
  z-index: 50;
}
.lang-menu li { padding: 8px 10px; border-radius: 3px; font-size: 0.88rem; cursor: pointer; }
.lang-menu li:hover, .lang-menu li[aria-selected="true"] { background: var(--ground); color: var(--action); }

.nav-toggle { display: none; padding: 6px; }

.mobile-nav { display: none; flex-direction: column; padding: var(--space-3) 24px var(--space-5); border-top: 1px solid var(--edge); }
.mobile-nav a { padding: 10px 0; font-size: 1rem; border-bottom: 1px solid var(--edge); }
.mobile-nav a:last-of-type { border-bottom: none; }
.mobile-nav-langs { display: flex; gap: 8px; padding-top: var(--space-3); }
.mobile-lang-btn {
  flex: 1; padding: 8px 0; border-radius: var(--radius-sm); border: 1px solid var(--edge-bright);
  font-size: 0.85rem; font-weight: 600; color: var(--on-ground-soft);
}
.mobile-lang-btn[aria-current="true"] { background: var(--action); border-color: var(--action); color: var(--action-ink); }

/* ---------------- Theme toggle: one segmented sun/moon pill ---------------- */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 999px;
  background: var(--ground-raised); border: 1px solid var(--edge);
}
.theme-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  color: var(--on-ground-soft);
}
.theme-toggle-btn:hover { color: var(--on-ground); }
.theme-toggle-btn:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

/* The lit slot is the current theme's own icon, in that theme's accent
   hue. Dark mode (also the no-[data-theme] default): moon is lit (warm
   gold), sun sits inactive in a bright cream. */
[data-theme="dark"] .theme-toggle-btn--moon,
:root:not([data-theme]) .theme-toggle-btn--moon {
  background: var(--action); color: var(--action-ink);
  box-shadow: 0 0 10px -2px var(--glow-strip);
}
[data-theme="dark"] .theme-toggle-btn--sun,
:root:not([data-theme]) .theme-toggle-btn--sun { color: var(--on-ground); }

/* Light mode: sun is lit (teal), moon sits inactive/subtle. */
[data-theme="light"] .theme-toggle-btn--sun {
  background: #1D6F6A; color: #FFFFFF;
}

.theme-toggle--mobile { width: 100%; padding: 4px; margin-top: var(--space-3); border-radius: var(--radius-sm); }
.theme-toggle--mobile .theme-toggle-btn {
  flex: 1; width: auto; height: 38px; border-radius: 4px; gap: 8px;
  font-size: 0.85rem; font-weight: 600;
}

@media (max-width: 900px) {
  .main-nav { display: none; }
  .header-actions .btn-ghost { display: none; }
  .header-actions .lang-wrap { display: none; }
  .header-actions > .theme-toggle { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-nav.is-open { display: flex; }
}

.section { padding: var(--space-9) 0; border-top: 1px solid var(--edge); background: var(--ground); }
/* Shelf-depth rhythm: alternating wall depth instead of one flat wall.
   Cards always use --ground-raised, so they pop against either wall tone. */
#mobile { background: var(--ground-deep); }
.landscape-section { background: var(--ground-deep); }
.section-head { max-width: 640px; margin: 0 0 var(--space-6); }
.lede { color: var(--on-ground-soft); font-size: 1.08rem; }
/* Same hue as --on-ground-soft, ~12% lighter — scoped to the moments
   and comparison sections specifically, where this text sits directly
   under a heading and reads dim on mobile. Not a palette change. */
.moments-section .lede,
#compare .lede,
.landscape-section .lede {
  color: #B3AA99;
}

/* ============================================================
   Hero — the largest, brightest case in the cabinet
   ============================================================ */
.hero { padding: var(--space-8) 0 var(--space-9); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: var(--space-8); align-items: center; }
.hero-copy { max-width: 640px; }
.hero-copy h1 { margin-bottom: var(--space-4); }
.hero-copy .lede { max-width: 46ch; margin-bottom: var(--space-6); }
.accent-text { color: var(--action); }
.hero-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }
.trust-line { margin-top: var(--space-4); font-size: 0.86rem; color: var(--on-ground-soft); }

.trust-badges {
  list-style: none; padding: 0; margin: var(--space-6) 0 0;
  display: flex; justify-content: flex-start; flex-wrap: wrap; gap: var(--space-5);
}
.trust-badges li { display: flex; align-items: center; gap: 10px; max-width: 160px; }
.trust-badges .icon { width: 22px; height: 22px; color: var(--action); flex-shrink: 0; }
.trust-badges span { font-size: 0.85rem; color: var(--on-ground-soft); line-height: 1.3; }
@media (max-width: 560px) {
  .trust-badges { gap: var(--space-4); }
  .trust-badges li { max-width: 130px; }
}

.product-view-section { background: var(--ground-deep); }

/* ---------------- Hero device mockup (laptop + phone, decorative) ---------------- */
.hero-devices { display: flex; align-items: flex-end; justify-content: center; }
.device-laptop { width: clamp(320px, 34vw, 560px); }
.device-laptop-screen {
  background: #17140F; border-radius: 12px 12px 3px 3px; padding: 10px 10px 14px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), 0 0 60px -18px var(--glow);
}
.device-laptop-bar { display: flex; align-items: center; gap: 5px; padding: 0 4px 8px; }
.device-laptop-dot { width: 7px; height: 7px; border-radius: 50%; background: #45403A; }
.device-laptop-brand { margin-left: 8px; font-family: var(--font-head); font-weight: 700; font-size: 0.72rem; color: var(--on-ground-soft); }
.device-laptop-base {
  height: 14px; margin: 0 -10px; background: linear-gradient(180deg, #221D16, #0E0C0A);
  border-radius: 0 0 8px 8px; position: relative;
}
.device-laptop-base::after {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 15%; height: 4px; background: var(--ground-deep); border-radius: 0 0 4px 4px;
}
.device-phone { width: clamp(90px, 9vw, 148px); margin-left: -32px; margin-bottom: -6px; position: relative; z-index: 2; }
/* .panel-frame--phone is shared with the larger phone showcase further
   down the page, where a fixed 180px is correct; inside this much
   smaller hero decoration it must instead track whatever width
   .device-phone is given at each breakpoint, or it spills out past its
   shrunk parent and gets clipped by .hero's overflow: hidden. */
.device-phone .panel-frame--phone { width: 100%; }
.mock-app--static .mock-side-item { cursor: default; pointer-events: none; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-devices { margin-top: var(--space-7); }
}
@media (max-width: 640px) {
  .device-laptop { width: 230px; }
  .device-phone { width: 82px; margin-left: -18px; margin-bottom: -4px; }
}
@media (max-width: 380px) {
  .device-laptop { width: 190px; }
  .device-phone { width: 68px; margin-left: -14px; }
}

.panel-frame {
  padding: 10px;
  background: var(--ground-raised); border: 1px solid var(--edge); border-radius: var(--radius-md);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8), 0 0 60px -18px var(--glow);
  position: relative;
}
.panel-frame::after {
  content: ""; position: absolute; left: 16%; right: 16%; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--glow-strip), transparent);
  opacity: .6;
}

.mock-app {
  display: grid; grid-template-columns: 148px 1fr; background: #FFFFFF;
  border-radius: 6px; overflow: hidden; height: 320px; font-size: 0.78rem;
  color: #1B1917;
}
.mock-sidebar { background: #F6F5F2; border-right: 1px solid #E3E0D6; padding: var(--space-3) var(--space-2); display: flex; flex-direction: column; gap: 2px; }
.mock-side-item {
  padding: 7px 10px; border-radius: 5px; color: #5B5750;
  background: none; border: none; font: inherit; text-align: left; cursor: pointer;
  width: 100%; transition: background-color .15s ease, color .15s ease;
}
.mock-side-item:hover { background: #EFEDE6; color: #3F3B35; }
.mock-side-item--active { background: #F2E6CF; color: #7A5A1E; font-weight: 600; }
.mock-side-item--active:hover { background: #F2E6CF; }
.mock-side-icon { display: none; width: 17px; height: 17px; flex-shrink: 0; }
.mock-content {
  padding: var(--space-3) var(--space-4); min-width: 0; min-height: 0;
  display: flex; flex-direction: column; overflow-y: auto;
}
.mock-table-scroll { flex: 1; }
.mock-app--full { grid-template-columns: 1fr; }
.mock-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.mock-title { font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; }
/* Hardcoded, not var(--action-ink): this chip lives inside the product
   mockup, which always depicts the app's own light UI regardless of the
   marketing page's theme — it must not flip when the page theme does. */
.mock-add { background: #241C0F; color: #fff; padding: 5px 10px; border-radius: 5px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.mock-table-scroll { overflow-x: auto; }
.mock-table { font-family: var(--font-body); width: 100%; }
.mock-table th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: .06em; color: #78736A; padding: 6px 8px; border-bottom: 1px solid #E3E0D6; white-space: nowrap; }
.mock-table td { padding: 8px 8px; border-bottom: 1px solid #E3E0D6; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mock-status { padding: 3px 8px; border-radius: 99px; font-size: 0.7rem; font-weight: 600; white-space: nowrap; }
.mock-status--ok { background: #3E665022; color: #2C4B39; }
.mock-status--low { background: #C2425922; color: #7A2E37; }
.mock-status--out { background: #C4373722; color: #932B2B; }
.mock-status--info { background: #8A6A2A22; color: #6B4E17; }
.mock-table-scroll[hidden] { display: none; }

@media (max-width: 640px) {
  .mock-app { grid-template-columns: 1fr; height: 320px; }
  .mock-content { padding: var(--space-3) var(--space-2); }
  .mock-table-scroll { overflow-x: visible; }
  .mock-table { min-width: 0; width: 100%; table-layout: fixed; font-size: 0.68rem; }
  .mock-table th, .mock-table td { padding: 6px 4px; white-space: normal; word-break: break-word; }
  .mock-table th:first-child, .mock-table td:first-child { width: 38%; }
  .mock-status { padding: 2px 6px; font-size: 0.64rem; white-space: normal; }

  /* The hero's decorative laptop screenshot (.device-laptop) is only
     ~190-230px wide at this size — nowhere near enough to fit its
     6-item sidebar stacked above a 4-column table within the fixed
     320px height above without the table rows getting clipped off the
     bottom (reported as the mockup content being "cut"). Dropping the
     sidebar and the two middle columns mirrors the same reduced
     name+status view .device-phone already shows, and comfortably
     fits the remaining two columns in the height available. */
  .device-laptop .mock-sidebar { display: none; }
  .device-laptop .mock-table th:nth-child(2),
  .device-laptop .mock-table td:nth-child(2),
  .device-laptop .mock-table th:nth-child(3),
  .device-laptop .mock-table td:nth-child(3) {
    display: none;
  }

  /* Same problem, same fix, on the hero's decorative phone: at 68-82px
     wide (aspect-ratio 9/17.5 keeps it very short too), the title and
     all 5 rows can't fit inside .mock-phone's overflow: hidden box —
     the title itself was getting clipped mid-word. Keeping just the
     first two rows lets everything that IS shown render in full. */
  /* .panel-frame's 10px padding plus .mock-phone's own 12px left/right
     padding (44px combined out of a 68-82px wide frame) was leaving as
     little as ~22px of actual content width — too narrow for a status
     pill to fit at all, regardless of how the row itself is laid out.
     Cutting both paddings down for this specific tiny instance is what
     actually gives the row usable width. */
  .device-phone .panel-frame { padding: 4px; }
  .device-phone .mock-phone { padding: 12px 6px 6px; }
  /* Redundant at this size anyway — the laptop card right next to it
     already shows "Supplies" — and dropping it frees the vertical
     space that was forcing a single-word 3-line wrap. */
  .device-phone .mock-phone-title { display: none; }
  /* Stacking name above pill (below) makes each row noticeably taller
     than the original side-by-side layout; even 2 rows no longer fit
     the available height at 68-82px wide, so only the first is kept. */
  .device-phone .mock-phone-row:nth-of-type(n+2) { display: none; }
  /* Rows are a flex row splitting ~44px between a name and a status
     pill that can't shrink (.mock-status is white-space: nowrap) —
     there's no width left over for the name at all, so it either
     overflowed past the frame's overflow: hidden uncut, or broke
     mid-character once shrinking was allowed. Stacking name above
     pill instead gives the name the full row width to wrap normally
     into, the same as the laptop's table cells already do. */
  .device-phone .mock-phone-row { flex-direction: column; align-items: flex-start; gap: 3px; }
}

.key-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; color: var(--action);
}
.key-badge .icon { width: 22px; height: 22px; }

/* ============================================================
   Live view — sidebar + swappable preview + pager + description
   ============================================================ */
.live-view-layout {
  display: grid; grid-template-columns: 200px minmax(0,1fr) 260px;
  gap: var(--space-6); align-items: start;
}
.live-view-sidebar { display: flex; flex-direction: column; gap: 2px; }
.live-view-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 0.92rem; color: var(--on-ground-soft);
  border: 1px solid transparent; text-align: left; transition: background-color .15s ease, color .15s ease;
}
.live-view-item .icon { width: 18px; height: 18px; flex-shrink: 0; }
.live-view-item:hover { background: color-mix(in srgb, var(--edge) 40%, transparent); color: var(--on-ground); }
.live-view-item--active { background: var(--ground-raised); border-color: var(--edge-bright); color: var(--on-ground); font-weight: 600; }
.live-view-stage { display: flex; flex-direction: column; gap: var(--space-4); }
.live-view-pager {
  display: flex; align-items: center; justify-content: center; gap: var(--space-4);
  font-family: var(--font-mono, monospace); font-size: 0.85rem; color: var(--on-ground-soft);
}
.live-view-pager-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--edge-bright);
  display: flex; align-items: center; justify-content: center; color: var(--on-ground-soft);
}
.live-view-pager-btn:hover { border-color: var(--action); color: var(--action); }
.icon-flip { transform: rotate(180deg); }
.live-view-description h3 { font-family: var(--font-head); font-size: 1.1rem; margin-bottom: var(--space-2); }
.live-view-description p { color: var(--on-ground-soft); font-size: 0.92rem; line-height: 1.55; }

@media (max-width: 980px) {
  .live-view-layout { grid-template-columns: 1fr; }
  .live-view-sidebar { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .live-view-item { flex: 0 0 auto; }
  .live-view-description { order: -1; }
}

/* ============================================================
   A day in the lab — static illustrated timeline
   ============================================================ */
.day-timeline { position: relative; display: flex; flex-direction: column; gap: var(--space-6); margin-bottom: var(--space-7); }
.day-connector { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.day-connector path {
  fill: none; stroke: var(--action); stroke-width: 2; stroke-linecap: round;
  filter: drop-shadow(0 0 5px var(--glow-strip));
}
.day-row { display: flex; align-items: stretch; gap: var(--space-4); }
.day-time {
  flex: 0 0 52px; padding-top: var(--space-4);
  font-family: var(--font-mono, monospace); font-size: 0.82rem; color: var(--on-ground-soft);
  text-align: right;
}
.day-track { flex: 0 0 20px; position: relative; }
.day-dot {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%; background: var(--action);
  box-shadow: 0 0 0 4px var(--ground), 0 0 16px 2px var(--glow); z-index: 1;
}
.day-card {
  flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: var(--space-4);
  background: var(--ground-raised); border: 1px solid var(--edge); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: 0 14px 26px -20px rgba(0,0,0,.7);
}
.day-icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--action); color: var(--action);
  box-shadow: 0 0 18px -6px var(--glow);
}
.day-icon .icon { width: 20px; height: 20px; }
.day-card-body { flex: 1; min-width: 0; }
.day-card-body h3 { font-family: var(--font-head); font-size: 1rem; margin-bottom: 4px; }
.day-card-body p { color: var(--on-ground-soft); font-size: 0.86rem; line-height: 1.5; }
.day-status {
  flex-shrink: 0; align-self: center; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 99px; font-size: 0.78rem; font-weight: 600; white-space: nowrap;
}
.day-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.day-status--low { background: var(--status-error-bg); color: var(--status-error-text); }
.day-status--low .day-status-dot { background: var(--status-error-text); }
.day-status--ok { background: var(--status-success-bg); color: var(--status-success-text); }
.day-status--ok .day-status-dot { background: var(--status-success-text); }
.day-status--info { background: var(--status-warning-bg); color: var(--status-warning-text); }
.day-status--info .day-status-dot { background: var(--status-warning-text); }
.day-status--blue { background: var(--status-info-bg); color: var(--status-info-text); }
.day-status--blue .day-status-dot { background: var(--status-info-text); }

.day-footer { text-align: center; margin-top: var(--space-7); }
.day-footer-tag { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--action); }
.day-footer-sub { color: var(--on-ground-soft); font-size: 0.92rem; margin-top: 6px; }

@media (max-width: 720px) {
  .day-card { flex-wrap: wrap; }
  .day-card-body { flex-basis: 100%; }
  .day-status { margin-left: 60px; }
}
@media (max-width: 560px) {
  .day-time { flex-basis: 40px; font-size: 0.72rem; }
  .day-card { padding: var(--space-3) var(--space-4); }
  .day-icon { width: 36px; height: 36px; }
  .day-icon .icon { width: 17px; height: 17px; }
}

/* ============================================================
   Mobile / Telegram
   ============================================================ */
.mobile-grid { display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); gap: var(--space-8); align-items: center; }
.mobile-copy h2 { margin-bottom: var(--space-3); }
.mobile-copy .lede { margin-bottom: var(--space-5); }
.checklist { display: flex; flex-direction: column; gap: var(--space-3); }
.checklist li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.checklist .icon { color: var(--action); flex-shrink: 0; }

.mobile-visual { display: flex; align-items: flex-end; gap: var(--space-5); flex-wrap: wrap; }
.panel-frame--phone { width: 180px; }
.mock-phone {
  width: 100%; aspect-ratio: 9/17.5; border-radius: 22px; background: #FFFFFF;
  position: relative; overflow: hidden; padding: 34px 12px 12px;
  display: flex; flex-direction: column; gap: 6px; color: #1B1917;
}
.mock-phone-title {
  font-family: var(--font-head); font-weight: 700; font-size: 0.8rem; color: #1B1917;
  margin-bottom: 4px;
}
.mock-phone-row {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 7px 8px; border-radius: 6px; background: #F6F5F2;
  font-size: 0.62rem; color: #1B1917;
}
.mock-phone-row .mock-status { font-size: 0.56rem; padding: 2px 6px; }

.telegram-tile {
  flex: 1; min-width: 220px; padding: var(--space-5); position: relative;
  background: var(--ground-raised); border: 1px solid var(--edge); border-radius: var(--radius-md);
}
.telegram-tile h3 { margin: var(--space-2) 0 var(--space-2); }
.telegram-tile p { color: var(--on-ground-soft); font-size: 0.9rem; margin-top: var(--space-2); }

/* ============================================================
   Compare tables — two different shelf depths, never identical
   ============================================================ */
.table-scroll { overflow-x: auto; border-radius: var(--radius-md); }
.compare-table { min-width: 720px; font-size: 0.92rem; }
.compare-table th, .compare-table td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--edge); vertical-align: top; }
.compare-table thead th { font-family: var(--font-head); font-weight: 700; }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody th { font-weight: 700; white-space: nowrap; }
.col-labqor {
  color: var(--action); display: inline-block; border: 1px solid var(--action);
  padding: 2px 8px; border-radius: 2px;
}
.compare-table td.cell-labqor, .compare-table .col-labqor-cell { color: var(--on-ground); font-weight: 700; }

/* Table 2: on the --ground-deep wall — same card tone, different wall depth */
.compare-table--dark thead th { font-family: var(--font-head); color: var(--action); }
.compare-table--dark td { color: var(--on-ground-soft); }
.compare-table--dark .col-primary {
  color: var(--action); display: inline-block; border: 1px solid var(--action);
  padding: 2px 8px; border-radius: 2px;
}
.compare-table--dark .cell-primary { color: var(--on-ground); font-weight: 600; }
.compare-table--dark + .table-scroll, .table-scroll:has(.compare-table--dark) {
  background: var(--ground-raised); border: 1px solid var(--edge); box-shadow: none;
}
.col-tag { display: block; font-weight: 400; font-size: 0.76rem; color: var(--on-ground-soft); margin-top: 4px; }

/* Two-card checklist comparison (spreadsheet vs LabQor) */
.compare-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
.compare-card {
  background: var(--ground-raised); border: 1px solid var(--edge); border-radius: var(--radius-md);
  padding: var(--space-5);
}
.compare-card-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--on-ground);
  padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--edge);
}
.compare-card-head .icon { width: 20px; height: 20px; color: var(--on-ground-soft); flex-shrink: 0; }
.compare-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.compare-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; color: var(--on-ground-soft); line-height: 1.5; }
.compare-checklist .row-label { color: var(--on-ground); font-weight: 600; }
.compare-bullet {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--edge-bright);
}
.compare-card--labqor .compare-bullet { background: var(--ok); border: none; }
.compare-card--labqor .compare-bullet .icon { width: 11px; height: 11px; color: var(--ground); }

@media (max-width: 720px) {
  .compare-cards { grid-template-columns: 1fr; }
}

/* Below 640px a wide comparison table can't fit without scrolling sideways,
   so each row becomes its own stacked card instead. */
@media (max-width: 640px) {
  .table-scroll { overflow-x: visible; }
  .compare-table { min-width: 0; width: 100%; }
  .compare-table thead { display: none; }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td {
    display: block; width: 100%;
  }
  .compare-table tbody tr { padding: var(--space-4) var(--space-4); border-bottom: 1px solid var(--edge); }
  .compare-table tbody tr:last-child { border-bottom: none; }
  .compare-table th, .compare-table td { padding: 0; border-bottom: none; }
  .compare-table tbody th { white-space: normal; font-size: 1rem; margin-bottom: var(--space-3); }
  .compare-table td { margin-top: var(--space-3); }
  .compare-table td::before {
    content: attr(data-label); display: block; font-family: var(--font-head);
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--action); margin-bottom: 3px;
  }
}

/* Landscape table: collapsed behind a disclosure by default */
.landscape-section { padding-top: var(--space-6); }
.disclosure-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  width: 100%; padding: var(--space-5) var(--space-6);
  background: var(--ground-raised); border: 1px solid var(--edge); border-radius: var(--radius-md);
  text-align: left;
}
.disclosure-toggle-title {
  font-family: var(--font-head); font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.15;
}
.disclosure-toggle:hover { border-color: var(--edge-bright); }
.disclosure-toggle .icon { width: 26px; height: 26px; }
.disclosure-toggle .icon { transition: transform .2s ease; color: var(--action); flex-shrink: 0; }
.disclosure-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.disclosure-panel { padding-top: var(--space-6); }
.acronym-note { margin-top: var(--space-4); font-size: 0.86rem; color: var(--on-ground-soft); }

/* ============================================================
   CTA
   ============================================================ */
.cta-section { padding-bottom: var(--space-9); }
.cta-panel {
  padding: var(--space-8);
  background: var(--ground-raised); border: 1px solid var(--edge); border-radius: var(--radius-md);
  box-shadow: 0 24px 44px -26px rgba(0,0,0,.75), 0 0 60px -20px var(--glow);
  display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr);
  gap: var(--space-7); align-items: center;
}
.cta-tagline {
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--action);
  margin-bottom: var(--space-3);
}
.cta-copy h2 { margin-bottom: var(--space-3); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-3); }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--on-ground-soft); }
.field input {
  padding: 11px 13px; border: 1px solid var(--edge-bright); border-radius: var(--radius-sm);
  font-size: 0.95rem; color: var(--on-ground); background: var(--ground);
}
.field input:focus { border-color: var(--action); }
.form-row:last-child { align-items: end; }
#ctaSubmit { justify-content: center; }

/* Visually hidden from real users (not display:none — some bots skip
   that), unreachable by tab, invisible to autofill/screen readers. */
.hp-field {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap;
}

.cta-form-error { margin-top: var(--space-3); color: var(--stamp-red-line); font-size: 0.88rem; }

.cta-success[hidden] { display: none; }
.cta-success {
  padding: var(--space-8);
  background: var(--ground-raised); border: 1px solid var(--edge); border-radius: var(--radius-md);
  box-shadow: 0 24px 44px -26px rgba(0,0,0,.75), 0 0 60px -20px var(--glow);
  display: flex; align-items: center; gap: var(--space-4);
}
.cta-success .icon {
  width: 40px; height: 40px; flex-shrink: 0; color: var(--ok);
  border: 1.5px solid var(--ok); border-radius: 50%; padding: 8px;
}
.cta-success p { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; }

@media (max-width: 720px) {
  .cta-panel { grid-template-columns: 1fr; padding: var(--space-6); }
  .form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer { padding: var(--space-7) 0; border-top: 1px solid var(--edge); }
.footer-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-5); flex-wrap: wrap; }
.footer-tagline { margin-top: var(--space-2); font-size: 0.9rem; color: var(--on-ground-soft); }
.footer-nav { display: flex; gap: var(--space-5); }
.footer-nav a { color: var(--on-ground-soft); font-size: 0.9rem; }
.footer-nav a:hover { color: var(--on-ground); }

/* ============================================================
   Large-screen hero/mobile stacking
   ============================================================ */
@media (max-width: 980px) {
  .mobile-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .section { padding: var(--space-7) 0; }
  .wrap { padding: 0 18px; }
}