/* Font strategy (P-7): a system-font stack is used deliberately — no web
   fonts are fetched, so there is zero render-blocking font load and no
   FOUT/CLS. Do NOT add Google Fonts <link>s here; if brand fonts are ever
   required, self-host WOFF2 with font-display:swap and preload them. */
/* ============================================================
   Glime — marketing site stylesheet (M1)
   Shares the app's brand gradient; light, airy, Aurora-inspired.
   ============================================================ */

:root {
  --g-green:  #a9e8b9;
  --g-blue:   #9ccbff;
  --g-purple: #8b5cf6;
  --g-red:    #e5484d;
  --g-orange: #f97316;
  --g-black:  #0a0a0a;

  --ink: #1c2330;
  --ink-soft: #4d5665;
  --bg: #f7f9fc;
  --card: #ffffff;
  --border: #e4e8f0;
  --accent: #3d7fd9;
  --accent-ink: #2456a6;
  --purple-ink: #5b32b8;
  --radius: 14px;

  --wordmark-gradient: linear-gradient(
    100deg, #2f9e57 0%, #3d7fd9 40%, #7c4fe0 70%, #d43a3f 100%);

  /* Page column. 1120px is the design width and the floor on purpose: the vw
     term only overtakes it past ~1473px, so every laptop keeps the layout the
     pages were built against and only genuinely large displays widen. Without
     the vw term a 2560px monitor rendered a 1120px strip between 720px of dead
     gutter. Capped at 1440 — past that, line lengths stop being readable. */
  --wrap-max: clamp(1120px, 76vw, 1440px);
  --wrap-gutter: clamp(20px, 1.6vw, 32px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

img, svg { max-width: 100%; }

a { color: var(--accent-ink); }

:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }

kbd {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.85em;
  background: #eef1f7;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
}

code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.9em;
  background: #eef1f7;
  border-radius: 5px;
  padding: 1px 5px;
}

pre {
  background: #0f1117;
  color: #e6e9f0;
  border-radius: 12px;
  padding: 18px 20px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.55;
}

pre code { background: none; color: inherit; padding: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: #fff;
  color: var(--ink);
  padding: 10px 16px;
  font-weight: 650;
  text-decoration: none;
}

.skip-link:focus { left: 0; }

/* ===== Header / nav ===== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

/* Shares the page column so the brand lines up with the h1 below it. */
.nav-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--wrap-gutter);
  height: 64px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-brand {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.4px;
  text-decoration: none;
  background: var(--wordmark-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  flex: 0 0 auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.nav-links a {
  display: block;
  font-size: 14px;
  font-weight: 550;
  color: var(--ink);
  text-decoration: none;
  padding: 7px 11px;
  border-radius: 8px;
}

.nav-links a:hover { background: #eef2f9; }

.nav-links a[aria-current="page"] {
  color: var(--accent-ink);
  font-weight: 700;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-toggle {
  display: none;
  font: inherit;
  background: none;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 7px 11px;
  cursor: pointer;
}

/* ===== Buttons ===== */

.btn {
  display: inline-block;
  font: inherit;
  font-size: 14.5px;
  font-weight: 650;
  text-decoration: none;
  border-radius: 10px;
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.btn:hover { transform: translateY(-1px); }

.btn-dark {
  background: var(--g-black);
  color: #ffffff;
}

.btn-dark:hover { background: #26262b; box-shadow: 0 8px 20px rgba(10,10,10,0.2); }

.btn-outline {
  background: #ffffff;
  color: var(--ink);
  border-color: #c9d2df;
}

.btn-outline:hover { border-color: var(--accent-ink); color: var(--accent-ink); }

.btn-lg { font-size: 16px; padding: 13px 26px; border-radius: 12px; }

/* ===== Layout primitives ===== */

.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--wrap-gutter);
}

/* Reading columns stay fixed — a measure that grows with the monitor is a
   measure nobody can read. Only the wide layout column above is fluid. */
.wrap-narrow { max-width: 780px; }

.section { padding: 72px 0; }

.section-alt { background: #ffffff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.section h2 {
  font-size: clamp(24px, 3.4vw, 34px);
  letter-spacing: -0.5px;
  margin: 0 0 10px;
}

.section .sub {
  color: var(--ink-soft);
  font-size: 16.5px;
  max-width: 62ch;
  margin: 0 0 34px;
}

.center { text-align: center; }
.center .sub { margin-left: auto; margin-right: auto; }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--purple-ink);
  background: #f1ebff;
  border: 1px solid #ddd0f8;
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 14px;
}

/* ===== Hero ===== */

.hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 72px;
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(169, 232, 185, 0.55), transparent 60%),
    radial-gradient(900px 460px at 88% -20%, rgba(156, 203, 255, 0.6), transparent 62%),
    radial-gradient(700px 420px at 60% 120%, rgba(139, 92, 246, 0.18), transparent 60%),
    #ffffff;
  border-bottom: 1px solid var(--border);
}

.hero h1 {
  font-size: clamp(34px, 5.6vw, 58px);
  line-height: 1.08;
  letter-spacing: -1.2px;
  margin: 0 0 18px;
  max-width: 21ch;
}

.hero h1 .grad {
  background: var(--wordmark-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p.tag {
  font-size: 18.5px;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 0 0 30px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.hero-note { font-size: 13px; color: var(--ink-soft); }

/* ===== Animated product demo (M9) ===== */

.demo-frame {
  margin-top: 54px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(20, 30, 60, 0.18);
  overflow: hidden;
}

.demo-titlebar {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--g-black);
  padding: 11px 16px;
}

.demo-dot { width: 11px; height: 11px; border-radius: 50%; background: #3a3a40; }

.demo-brand {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.4px;
  background: linear-gradient(100deg, var(--g-green), #ffffff 30%, var(--g-blue) 55%, var(--g-purple) 75%, var(--g-orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.demo-tabs {
  display: flex;
  gap: 9px;
  padding: 14px 16px 4px;
  overflow-x: auto;
}

.demo-key {
  font-size: 12px;
  font-weight: 650;
  color: #2a3140;
  background: #f7f8fa;
  border: 1px solid #d5dae2;
  border-radius: 8px;
  padding: 6px 14px;
  white-space: nowrap;
  box-shadow: 0 3px 0 #b9c0cb;
  animation: keycycle 14s infinite;
}

.demo-key:nth-child(1) { --soft:#dcf3e4; --ink2:#1f6b3d; animation-delay: 0s; }
.demo-key:nth-child(2) { --soft:#d7f3f3; --ink2:#0b6b6b; animation-delay: 2s; }
.demo-key:nth-child(3) { --soft:#fdf3cf; --ink2:#7a5c00; animation-delay: 4s; }
.demo-key:nth-child(4) { --soft:#ddebff; --ink2:#2456a6; animation-delay: 6s; }
.demo-key:nth-child(5) { --soft:#eae1ff; --ink2:#5b32b8; animation-delay: 8s; }
.demo-key:nth-child(6) { --soft:#ffe1e2; --ink2:#a32226; animation-delay: 10s; }
.demo-key:nth-child(7) { --soft:#ffe9d6; --ink2:#9a4a05; animation-delay: 12s; }

@keyframes keycycle {
  0%, 11%, 100% { transform: translateY(0); background: #f7f8fa; box-shadow: 0 3px 0 #b9c0cb; }
  3%, 8% { transform: translateY(3px); background: var(--soft); color: var(--ink2); box-shadow: 0 0 0 #b9c0cb, inset 0 2px 4px rgba(10,10,10,0.15); }
}

.demo-body { padding: 18px 16px 22px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }

.demo-panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  min-height: 130px;
}

.demo-line {
  height: 10px;
  border-radius: 5px;
  background: #edf0f6;
  margin: 9px 0;
}

.demo-line.w60 { width: 60%; }
.demo-line.w80 { width: 80%; }
.demo-line.w40 { width: 40%; }

.demo-ai {
  position: relative;
  padding-left: 16px;
  overflow: hidden;
}

.demo-ai::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--g-green), var(--g-blue), var(--g-purple), var(--g-red), var(--g-orange));
}

.demo-ai-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple-ink);
  border: 1px solid #d8ccf7;
  background: #f4f0ff;
  border-radius: 999px;
  padding: 2px 9px;
  margin-bottom: 8px;
}

.demo-ai .demo-line { background: linear-gradient(90deg, #ece5fb, #f4f0ff); animation: aiwrite 5s infinite; transform-origin: left; }

@keyframes aiwrite {
  0% { transform: scaleX(0); }
  35%, 100% { transform: scaleX(1); }
}

/* ===== Cards & grids ===== */

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20, 30, 60, 0.1); }

.card h3 { margin: 0 0 8px; font-size: 16.5px; }

.card p { margin: 0; font-size: 14px; color: var(--ink-soft); }

.card .card-accent {
  width: 40px; height: 4px; border-radius: 2px;
  background: var(--card-color, var(--g-blue));
  margin-bottom: 14px;
}

a.card { display: block; text-decoration: none; color: var(--ink); }

/* Stat band */

.stat-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  text-align: center;
}

.stat .stat-num {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -1px;
  background: var(--wordmark-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat .stat-label { font-size: 13.5px; color: var(--ink-soft); }

/* Quote / testimonial cards (M5) */

.quote-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  font-size: 15px;
}

.quote-card blockquote { margin: 0 0 14px; font-style: italic; color: var(--ink); }

.quote-card cite {
  font-style: normal;
  font-size: 13px;
  color: var(--ink-soft);
  display: block;
}

.disclaimer {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 18px;
}

/* ===== Pricing (C1/T8) ===== */

.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px;
  margin: 0 auto 36px;
}

.billing-toggle button {
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  border: none;
  background: none;
  border-radius: 999px;
  padding: 7px 18px;
  cursor: pointer;
  color: var(--ink-soft);
}

.billing-toggle button.active {
  background: var(--g-black);
  color: #ffffff;
}

.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }

.price-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}

.price-card.featured {
  border: 2px solid var(--g-purple);
  box-shadow: 0 18px 44px rgba(139, 92, 246, 0.18);
  position: relative;
}

.price-flag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--g-purple);
  color: #ffffff;
  border-radius: 999px;
  padding: 4px 14px;
  white-space: nowrap;
}

.price-card h3 { margin: 0 0 4px; font-size: 18px; }

.price-desc { font-size: 13.5px; color: var(--ink-soft); min-height: 42px; margin: 0 0 14px; }

.price-num {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1.5px;
  font-family: "JetBrains Mono", "Inter", monospace;
}

.price-num .per { font-size: 13px; font-weight: 550; color: var(--ink-soft); letter-spacing: 0; font-family: "Inter", sans-serif; }

.price-card ul {
  list-style: none;
  margin: 18px 0 22px;
  padding: 0;
  font-size: 14px;
  flex: 1;
}

.price-card li { padding: 5px 0 5px 26px; position: relative; }

.price-card li::before {
  content: "✓";
  position: absolute;
  left: 2px;
  font-weight: 800;
  color: #1f6b3d;
}

.price-card li.na { color: #98a1af; }
.price-card li.na::before { content: "—"; color: #c3cad4; }

.price-foot { font-size: 13px; color: var(--ink-soft); text-align: center; margin-top: 26px; }

/* ===== Comparison tables (M3) ===== */

.cmp-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; background: #fff; }

table.cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 640px;
}

table.cmp th, table.cmp td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid #eef1f6;
  vertical-align: top;
}

table.cmp thead th {
  background: #f6f8fb;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #4b5563;
}

table.cmp tbody tr:last-child td { border-bottom: none; }

table.cmp td.yes { color: #1f6b3d; font-weight: 650; }
table.cmp td.no  { color: #a32226; }
table.cmp td.mid { color: #7a5c00; }

/* Comparison tables get containment from .cmp-wrap above; the ~18 bare prose
   tables (legal, developers, status, trust…) have no wrapper, and a table is
   the one element that cannot reflow — its intrinsic min-width stayed wider
   than a phone and pushed the whole document past the viewport, which is what
   made those pages scroll sideways on mobile (privacy.html was 21px over at
   390, developers.html 48px). display:block lets the table scroll inside its
   own box instead. Scoped to narrow widths so desktop layout is untouched, and
   .cmp is excluded so it keeps its wrapper's behavior. */
@media (max-width: 760px) {
  main table:not(.cmp) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== Forms (M6 lead capture) ===== */

.lead-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 520px;
}

.lead-form input[type="email"],
.lead-form input[type="text"] {
  flex: 1 1 240px;
  font: inherit;
  font-size: 14.5px;
  padding: 11px 14px;
  border: 1px solid #c9d2df;
  border-radius: 10px;
  background: #ffffff;
}

.form-note { font-size: 12.5px; color: var(--ink-soft); margin-top: 8px; }

.form-success {
  background: #f2fbf4;
  border: 1px solid #cdeed6;
  color: #1f6b3d;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
}

/* Auth / checkout pages */

.auth-card {
  max-width: 440px;
  margin: 60px auto;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px 30px 26px;
  box-shadow: 0 18px 44px rgba(20, 30, 60, 0.1);
}

.auth-card h1 { font-size: 24px; margin: 0 0 6px; letter-spacing: -0.4px; }

.auth-card .sub { font-size: 14px; color: var(--ink-soft); margin: 0 0 20px; }

.auth-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; font-size: 13px; font-weight: 600; }

.auth-field input, .auth-field select {
  font: inherit;
  font-size: 14.5px;
  padding: 10px 13px;
  border: 1px solid #c9d2df;
  border-radius: 10px;
}

.auth-alt {
  border-top: 1px solid var(--border);
  margin-top: 20px;
  padding-top: 16px;
  font-size: 13.5px;
  color: var(--ink-soft);
  text-align: center;
}

.auth-note {
  font-size: 12px;
  color: var(--ink-soft);
  background: #f6f8fb;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 9px 12px;
  margin-top: 14px;
}

/* ===== FAQ ===== */

details.faq {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px 20px;
  margin-bottom: 10px;
}

details.faq summary {
  font-weight: 650;
  font-size: 15px;
  padding: 13px 0;
  cursor: pointer;
}

details.faq p { margin: 0 0 16px; font-size: 14.5px; color: var(--ink-soft); }

/* ===== Prose pages (legal, blog) ===== */

.prose { font-size: 15.5px; }

.prose h1 { font-size: clamp(28px, 4vw, 38px); letter-spacing: -0.6px; line-height: 1.15; margin: 0 0 8px; }

.prose h2 { font-size: 21px; margin: 34px 0 10px; }

.prose h3 { font-size: 16.5px; margin: 24px 0 8px; }

.prose p, .prose li { color: #333c4a; }

.prose .meta { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 26px; }

.prose table { width: 100%; border-collapse: collapse; font-size: 14px; }

.prose table th, .prose table td {
  text-align: left;
  border: 1px solid var(--border);
  padding: 9px 12px;
}

.prose table th { background: #f6f8fb; }

.notice {
  background: #fdf6e3;
  border: 1px solid #ecd98a;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 13.5px;
  color: #5c4a00;
  margin: 20px 0;
}

.notice-blue {
  background: #eef4ff;
  border-color: #c4d9fb;
  color: #1d4587;
}

/* Status page (T3) */

.status-ok {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  color: #1f6b3d;
  background: #f2fbf4;
  border: 1px solid #cdeed6;
  border-radius: 12px;
  padding: 14px 22px;
}

/* Degraded/outage variant, applied by the live /api/health poll in
   status.html. Same geometry as .status-ok so the banner does not reflow when
   the state changes — a status page that jumps as it updates reads as broken
   even when it is reporting good news. Amber, not red: contrast against the
   page background stays above 4.5:1 for the a11y budget. */
.status-warn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  color: #8a5a00;
  background: #fff8e8;
  border: 1px solid #f0dca8;
  border-radius: 12px;
  padding: 14px 22px;
}

.status-dot { width: 12px; height: 12px; border-radius: 50%; background: #2f9e57; }

.status-warn .status-dot { background: #d99b0a; }

.uptime-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }

.uptime-bars { display: flex; gap: 2px; }

.uptime-bars span { width: 5px; height: 26px; border-radius: 2px; background: #2f9e57; display: inline-block; }

.uptime-bars span.deg { background: #e0a80f; }

.uptime-pct { font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--ink-soft); }

/* Changelog (T9) */

.log-entry { border-left: 2px solid var(--border); padding: 0 0 30px 24px; position: relative; }

.log-entry::before {
  content: "";
  position: absolute;
  left: -7px; top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--g-purple);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--border);
}

.log-date { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }

.log-entry h3 { margin: 4px 0 8px; font-size: 17px; }

.log-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 750;
  border-radius: 999px;
  padding: 2px 10px;
  margin-right: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tag-new { background: #dcf3e4; color: #1f6b3d; }
.tag-improved { background: #ddebff; color: #2456a6; }
.tag-fixed { background: #ffe9d6; color: #9a4a05; }

/* ===== ROI calculator (C5) ===== */

.roi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }

.roi-inputs label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}

.roi-inputs input {
  font: inherit;
  font-size: 15px;
  font-family: "JetBrains Mono", monospace;
  padding: 10px 13px;
  border: 1px solid #c9d2df;
  border-radius: 10px;
}

.roi-results {
  background: var(--g-black);
  color: #f2f2f4;
  border-radius: 16px;
  padding: 26px;
  position: sticky;
  top: 84px;
}

.roi-results h3 { margin: 0 0 18px; font-size: 15px; text-transform: uppercase; letter-spacing: 0.07em; color: #b9bec8; }

.roi-line { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid #2b2b31; font-size: 14.5px; }

.roi-line strong { font-family: "JetBrains Mono", monospace; font-size: 16px; color: #a9e8b9; }

.roi-total { border-bottom: none; padding-top: 16px; font-size: 16px; }

.roi-total strong { font-size: 24px; }

/* ===== Footer ===== */

.site-footer {
  background: var(--g-black);
  color: #b9bec8;
  margin-top: 80px;
  padding: 54px 0 30px;
  font-size: 13.5px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 28px;
}

.footer-brand {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.4px;
  background: linear-gradient(100deg, var(--g-green), #ffffff 30%, var(--g-blue) 55%, var(--g-purple) 75%, var(--g-orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
  display: inline-block;
}

/* Postal address in the footer brand column. Deliberately quieter than the
   nav links — it is there to be found and verified, not to compete for clicks. */
.footer-address {
  font-style: normal;
  color: #8a8f9a;
  line-height: 1.7;
  margin: 14px 0 4px;
}

.footer-address a { color: #b9bec8; text-decoration: none; }
.footer-address a:hover { color: #ffffff; text-decoration: underline; }

.footer-grid h3 {
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a8f9a;
  margin: 0 0 12px;
}

.footer-grid ul { list-style: none; margin: 0; padding: 0; }

.footer-grid li { margin-bottom: 8px; }

.footer-grid a { color: #d3d7de; text-decoration: none; }

.footer-grid a:hover { color: #ffffff; text-decoration: underline; }

.footer-bottom {
  border-top: 1px solid #26262b;
  margin-top: 40px;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: #8a8f9a;
}

/* ===== Consent banner (shared with app) ===== */

#glime-consent {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 120;
  background: #16161a;
  color: #e8e8ec;
  padding: 14px 18px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.3);
}

#glime-consent .consent-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

#glime-consent p { margin: 0; font-size: 13px; line-height: 1.5; }

#glime-consent a { color: #9ccbff; }

.consent-actions { display: flex; gap: 8px; }

.consent-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  border: 1px solid transparent;
}

.consent-accept { background: #ffffff; color: #0a0a0a; }
.consent-decline { background: none; color: #c9cdd5; border-color: #45454c; }

/* ===== Responsive (O4) ===== */

@media (max-width: 920px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .roi-grid { grid-template-columns: 1fr; }
  .roi-results { position: static; }
}

/* ---- nav collapse, in two stages ----
   The desktop nav needs 1121px of content box to lay out at natural size
   (brand 138 + links 517 + all three CTAs 378 + 44 gaps + 44 padding). It used
   to collapse to the hamburger only at 680px, so every width from 681–1119
   rendered the full nav into a box too small for it: `.nav-links` is `flex: 1`
   (basis 0), so it absorbed the shortfall by shrinking, its `li`s spilled over
   `.nav-cta`, and below ~960 the buttons pushed past the viewport and gave the
   whole document a horizontal scrollbar — the page then scrolled sideways.

   Stage one drops the two secondary CTAs, which buys 240px and carries the
   full link list down to tablet width; stage two is the hamburger, at 900px
   because the reduced nav needs 837px and stops fitting just below that. */
@media (max-width: 1180px) {
  .nav-cta .btn-outline { display: none; }
}

@media (max-width: 900px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 64px;
    left: 0; right: 0;
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    padding: 10px 16px 16px;
    gap: 2px;
    box-shadow: 0 18px 30px rgba(20, 30, 60, 0.12);
  }

  .nav-links.open { display: flex; }

  .nav-toggle { display: block; margin-left: auto; }
}

@media (max-width: 680px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  .stat-band { grid-template-columns: 1fr; gap: 26px; }

  .section { padding: 52px 0; }

  .hero { padding: 56px 0 48px; }

  .demo-body { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; }
}

/* ---- pricing controls: currency + calculator (C-2/C-3/C-5) ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pricing-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap; margin: 4px 0 6px;
}
.currency-select select {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; padding: 9px 16px; cursor: pointer;
}
.currency-select select:hover { border-color: var(--accent-ink); }

.calc {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; margin-top: 22px;
  box-shadow: 0 10px 30px rgba(20, 30, 60, 0.06);
}
.calc-controls {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.calc-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.calc-field-wide { grid-column: 1 / -1; }
.calc-field select, .calc-field input[type="number"], .calc-field input[type="text"] {
  font: inherit; font-size: 15px; color: var(--ink); background: #fff;
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
}
.calc-field input[type="range"] { width: 100%; accent-color: var(--accent); }
.calc-field select:focus, .calc-field input:focus { outline: 3px solid var(--accent-ink); outline-offset: 1px; }

.calc-promo-msg { font-size: 13px; margin: 12px 0 0; font-weight: 600; }
.calc-promo-msg.ok { color: #1f6b3d; }
.calc-promo-msg.warn { color: #7a5c00; }
.calc-promo-msg.invalid { color: var(--g-red); }

.calc-result {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border);
  align-items: center;
}
.calc-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 5px 0; color: var(--ink-soft); }
.calc-line.disc span:last-child { color: #1f6b3d; font-weight: 700; }
.calc-line.strong { color: var(--ink); font-weight: 700; border-top: 1px dashed var(--border); margin-top: 4px; padding-top: 10px; }
.calc-total { text-align: center; background: var(--bg); border-radius: 12px; padding: 18px; }
.calc-total-big { font-size: 40px; font-weight: 800; letter-spacing: -1px; font-family: "JetBrains Mono", "Inter", monospace; }
.calc-total-big small { font-size: 15px; font-weight: 600; color: var(--ink-soft); font-family: "Inter", sans-serif; }
.calc-total-sub { font-size: 13px; color: var(--ink-soft); margin: 4px 0 10px; }
.calc-savings { font-size: 13px; font-weight: 700; color: #1f6b3d; margin-bottom: 12px; }
.calc-total .btn { width: 100%; }

@media (max-width: 640px) {
  .calc-controls { grid-template-columns: 1fr 1fr; }
  .calc-result { grid-template-columns: 1fr; }
}

.field-optional { color: var(--ink-soft); font-weight: 500; font-size: 12px; }

/* ---- programmatic SEO pages (M-4) ---- */
.check-list { list-style: none; padding: 0; margin: 16px 0; }
.check-list li { position: relative; padding: 7px 0 7px 28px; }
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: 7px;
  color: #1f6b3d; font-weight: 800;
}
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0 8px; }
.vs-col { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.vs-col h3 { margin: 0 0 8px; font-size: 17px; }
.vs-col p { margin: 0; color: var(--ink-soft); font-size: 14.5px; }
.vs-us { border-color: var(--accent); box-shadow: 0 8px 24px rgba(61, 127, 217, 0.12); }
@media (max-width: 640px) { .vs-grid { grid-template-columns: 1fr; } }

/* ---- social proof band (M-5) ---- */
.proof-band { padding: 30px 0 6px; }
.proof-kicker { font-size: 12.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 14px; }
.logo-wall { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.logo-chip {
  font-size: 14px; font-weight: 650; color: var(--ink);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; padding: 9px 18px;
}
.review-badges { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; }
.review-badge {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  text-decoration: none; color: var(--ink);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 18px; min-width: 120px;
}
.review-badge strong { font-size: 16px; }
.review-badge span { font-size: 12px; color: var(--ink-soft); }
.review-badge.is-soon { opacity: 0.72; }
.proof-note { font-size: 12.5px; color: var(--ink-soft); margin-top: 16px; }

/* ---- demo page (M-2) ---- */
.video-embed { position: relative; max-width: 860px; margin: 30px auto 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: 0 18px 50px rgba(20,30,60,0.14); background: #0b1020; }
.video-poster { display: block; width: 100%; height: auto; opacity: 0.92; }
.video-el { display: block; width: 100%; height: auto; background: #000; }
.video-play {
  position: absolute; top: calc(50% - 40px); left: 50%; transform: translate(-50%, -50%);
  width: 78px; height: 78px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,0.94); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.video-play:hover { background: #fff; transform: translate(-50%, -50%) scale(1.06); }
.video-note {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 14px 18px; font-size: 13px; color: #dfe6fb;
  background: linear-gradient(0deg, rgba(11,16,32,0.92), rgba(11,16,32,0));
}
.video-note a { color: #c4b5fd; }
.demo-form { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-top: 22px; }
.demo-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.demo-form textarea { font: inherit; font-size: 15px; color: var(--ink); background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; width: 100%; resize: vertical; }
.demo-form .btn { margin-top: 14px; }
@media (max-width: 640px) { .demo-form-grid { grid-template-columns: 1fr; } }

/* ---- language switcher (M-7) ---- */
.lang-switch { display: inline-block; margin-top: 14px; }
.lang-switch select {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft);
  background: transparent; border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px; cursor: pointer;
}
.site-footer .lang-switch select { color: #cdd3de; border-color: #333a48; background: transparent; }

.form-error { background: #ffe1e2; color: #8c1c20; border: 1px solid #f5bcbe; border-radius: 10px; padding: 10px 14px; font-size: 13.5px; font-weight: 600; margin-bottom: 14px; }

/* ---- partner deal registration (C-6) ---- */
.deal-portal { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-top: 22px; }
/* auto-fit rather than a fixed 4-up: the column count now follows the space
   available, so the row reflows to 3, 2 and 1 on its own instead of at one
   hand-picked breakpoint. min-width:0 is the load-bearing half — grid items
   default to min-width:auto, so each label refused to shrink below its input's
   intrinsic width (~203px) and the row pushed the document 144px past the
   viewport at 768. width:100% keeps the controls inside their track. */
.deal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.deal-grid > .auth-field { min-width: 0; }
.deal-form input, .deal-form select { font: inherit; font-size: 15px; color: var(--ink); background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; width: 100%; min-width: 0; }
.deal-form .btn { margin-top: 14px; }
.deal-summary { margin: 18px 0 12px; font-size: 14px; color: var(--ink-soft); }
#deal-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
#deal-table th, #deal-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
#deal-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.deal-del { background: transparent; border: 0; color: var(--g-red); font-size: 18px; cursor: pointer; line-height: 1; }
/* (the old max-width:720px override is gone — auto-fit above handles it) */

/* ===== Brand mark in the marketing nav (commercial.md #18) ===== */
.nav-brand { display: inline-flex; align-items: center; gap: 9px; }
.nav-brand .brand-mark { width: 22px; height: 22px; display: block; flex: none; }

/* Brand assets page (#18) */
.brand-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 22px 0; }
.brand-tile { border: 1px solid var(--border, #d9dee8); border-radius: 14px; padding: 22px; text-align: center; }
.brand-tile img { max-width: 100%; height: auto; }
.brand-tile.on-dark { background: #0a0a0a; }
.brand-tile figcaption { margin-top: 12px; font-size: 13px; color: #5f6b7d; }
.brand-tile.on-dark figcaption { color: #9aa3b2; }
.swatch-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.swatch { flex: 1 1 90px; border-radius: 10px; padding: 14px 10px 10px; font-size: 12px; font-weight: 700; border: 1px solid rgba(0,0,0,0.08); }