:root {
  --bg: #fdf8f3;
  --surface: #ffffff;
  --surface-warm: #fff2e6;
  --text: #2b2420;
  --muted: #6b5f56;
  --dim: #9a8c7f;
  --line: #ede1d3;
  --accent: #ef6b4d;
  --accent-2: #ffb27a;
  --teal: #2a7f7e;
  --teal-bg: #e6f3f2;
  --radius: 20px;
  --shadow: 0 20px 50px -20px rgba(60, 40, 20, 0.25);
  --shadow-sm: 0 8px 24px -12px rgba(60, 40, 20, 0.22);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; display: block; }

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 0.5em; }
h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; }
h2 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 750; }
h3 { font-size: 20px; font-weight: 700; }
p { margin: 0 0 1em; color: var(--muted); }
.lede { font-size: 20px; color: var(--text); }

/* ---------- layout shell ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 20px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; text-decoration: none; color: var(--text); }
.brand-mark { font-size: 22px; }

.brand { order: 1; }
.main-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; order: 3; flex-basis: 100%; justify-content: center; }
.nav-link { color: var(--muted); text-decoration: none; font-weight: 650; font-size: 15px; padding: 4px 2px; border-bottom: 2px solid transparent; }
.nav-link:hover { color: var(--text); }
.nav-link[aria-current="page"] { color: var(--teal); border-bottom-color: var(--teal); }
.header-right { display: flex; align-items: center; gap: 12px; order: 2; }
.btn-nav-cta { padding: 9px 18px; font-size: 14px; }

@media (min-width: 760px) {
  .main-nav { order: 2; flex-basis: auto; }
  .header-right { order: 3; }
}

.lang-menu { position: relative; }
.lang-summary {
  list-style: none;
  cursor: pointer;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  box-shadow: var(--shadow-sm);
}
.lang-summary::-webkit-details-marker { display: none; }
.lang-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 8px;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  z-index: 40;
}
.lang-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 9px;
  text-decoration: none; color: var(--text); font-size: 15px; font-weight: 600;
}
.lang-link:hover { background: var(--surface-warm); }
.lang-link[aria-current="page"] { background: var(--teal-bg); color: var(--teal); }
.lang-flag { font-size: 17px; }

main { max-width: 1120px; margin: 0 auto; padding: 0 20px 80px; }

.site-footer { border-top: 1px solid var(--line); margin-top: 60px; }
.footer-inner {
  max-width: 1120px; margin: 0 auto; padding: 28px 20px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
}
.footer-brand { font-weight: 700; text-decoration: none; color: var(--muted); font-size: 14px; }
.footer-copy { color: var(--dim); font-size: 13px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px; font-weight: 700; font-size: 16px;
  text-decoration: none; border: none; cursor: pointer;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 14px 30px -10px rgba(239, 107, 77, 0.55);
}
.btn-quiet {
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
}
.btn-teal { background: var(--teal); color: #fff; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 28px 0; }

/* ---------- hero ---------- */
.hero { padding: 48px 0 24px; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.hero-eyebrow {
  display: inline-block; background: var(--teal-bg); color: var(--teal);
  font-weight: 700; font-size: 13px; padding: 6px 14px; border-radius: 999px; margin-bottom: 14px;
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* ---------- device mockups ----------
   The controller app runs in landscape as well as portrait, and every screenshot we have is
   landscape (that's the orientation the automation captured), so both frames are landscape
   device shells rather than forcing a portrait phone shape onto a landscape image. */
.mockup-row { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.mockup-phone, .mockup-tablet {
  position: relative;
  background: #1c1c1e;
  border-radius: 22px;
  padding: 10px 10px 10px 22px;
  box-shadow: var(--shadow);
}
.mockup-phone { width: 300px; }
.mockup-tablet { width: 460px; border-radius: 26px; padding: 14px 14px 14px 28px; }
.mockup-phone::before, .mockup-tablet::before {
  content: '';
  position: absolute; top: 50%; left: 8px; transform: translateY(-50%);
  width: 8px; height: 46px; background: #000; border-radius: 999px;
}
.mockup-tablet::before { height: 60px; }
.mockup-phone img, .mockup-tablet img {
  width: 100%; border-radius: 12px; display: block;
}
.mockup-tablet img { border-radius: 14px; }
.mockup-caption { text-align: center; font-size: 13px; color: var(--dim); margin-top: 10px; }

/* ---------- feature cards ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 36px 0; }
@media (max-width: 860px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm);
}
a.feature-card {
  display: block; text-decoration: none; color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.feature-card .card-link { color: var(--teal); font-weight: 700; font-size: 14px; margin-top: 10px; display: inline-block; }
.feature-icon { font-size: 30px; margin-bottom: 10px; display: block; }

/* ---------- vital pages ---------- */
.vital-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 40px 0; }
@media (max-width: 860px) { .vital-hero { grid-template-columns: 1fr; } }
.vital-detail { margin: 40px 0; }
.vital-detail h2 { margin-top: 40px; }

/* ---------- comparison table ---------- */
.compare-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
.compare-table th, .compare-table td {
  border: 1px solid var(--line); padding: 12px 14px; text-align: left; vertical-align: top;
}
.compare-table th { background: var(--surface-warm); font-weight: 700; }
.compare-table td.yes { color: var(--teal); font-weight: 700; }
.compare-table td.no { color: var(--dim); }
.table-scroll { overflow-x: auto; }

/* ---------- about ---------- */
.about-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px; box-shadow: var(--shadow-sm); margin: 24px 0;
}

/* ---------- article / prose ---------- */
.prose { max-width: 720px; }
.prose h2 { margin-top: 40px; }
.prose ul, .prose ol { color: var(--muted); }
.article-meta { color: var(--dim); font-size: 14px; margin-bottom: 20px; }

/* ---------- photo panel ---------- */
.photo-panel {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  aspect-ratio: 4 / 3; background: var(--surface-warm);
}
.photo-panel img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 480px) {
  .site-header { padding: 14px 16px; }
  main { padding: 0 16px 60px; }
  .btn { padding: 13px 20px; font-size: 15px; }
}