/* meersh marketing site.
   The landing styles are the meercal site's, which are the meerail site's, which are in
   turn the meerkat landing page's: the sites are one family and should read as one.
   Anything specific to this site is grouped at the bottom under "meersh additions". The
   shared part above it is a verbatim copy, so a fix to one site can be copied to the
   others without a diff to read. */

html, body {
  margin: 0;
  background: #fff;
  scroll-behavior: smooth;
}

.landing {
  color: #1f2328;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
    Helvetica, Arial, sans-serif;
  line-height: 1.55;
}

.landing a { color: #2185d0; text-decoration: none; }
.landing a:hover { text-decoration: underline; }

/* ---- Top nav ---- */
.landing-nav {
  border-bottom: 1px solid #e6e8eb;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}
.landing-nav-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: .85rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.landing-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: 1.2rem;
  color: #1f2328 !important;
}
.landing-brand img { height: 1.9em; width: auto; }
.landing-brand:hover { text-decoration: none; }
.landing-nav-links { display: flex; align-items: center; gap: 1.4rem; }
.landing-nav-links a { color: #57606a; font-weight: 500; }
.landing-nav-links a:hover { color: #1f2328; text-decoration: none; }
.landing-nav-links .button { color: #fff !important; }

/* ---- Hero ---- */
.landing-hero {
  max-width: 1000px;
  margin: 0 auto;
  padding: 4rem 1.25rem 2rem;
  display: flex;
  align-items: center;
  gap: 3rem;
}
.landing-hero-copy {
  flex: 1 1 0;
  min-width: 0;
}
.landing-logo {
  flex: 0 0 auto;
  width: 320px;
  max-width: 45%;
  height: auto;
  margin: 0;
  display: block;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.14));
}
.landing-title {
  font-size: 2.7rem;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: .25rem 0 .9rem;
}
.landing-subtitle {
  font-size: 1.2rem;
  color: #57606a;
  margin: 0;
}

/* ---- Boxed section (used for the AI / skill block) ---- */
.landing-login-section {
  max-width: 1000px;
  margin: 3.5rem auto 0;
  padding: 3.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #cfe3f6;
  border-radius: 18px;
  background: linear-gradient(180deg, #f1f8ff 0%, #ffffff 70%);
  box-shadow: 0 10px 34px rgba(33,133,208,.12);
}
.landing-login-title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 .5rem;
  text-align: center;
}
.landing-login-lede {
  color: #57606a;
  font-size: 1.12rem;
  max-width: 620px;
  margin: 0 auto 1.75rem;
  text-align: center;
}

/* ---- Features sections ---- */
.landing-features {
  max-width: 1000px;
  margin: 0 auto;
  padding: 4.5rem 1.25rem 1rem;
  text-align: center;
}
.landing-section-title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 .5rem;
}
.landing-section-lede {
  font-size: 1.12rem;
  color: #57606a;
  max-width: 620px;
  margin: 0 auto 2.75rem;
}
.landing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  text-align: left;
}
.landing-card {
  border: 1px solid #e6e8eb;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.landing-card:hover {
  border-color: #d0d7de;
  box-shadow: 0 6px 20px rgba(27,31,36,.08);
  transform: translateY(-2px);
}
.landing-card-body { padding: 1.5rem; }
.landing-card-icon {
  font-size: 2rem;
  line-height: 1;
  color: #2185d0;
  margin-bottom: .85rem;
}
.landing-card-icon i.icon { margin: 0; }
.landing-card h3 {
  font-size: 1.18rem;
  font-weight: 700;
  margin: 0 0 .5rem;
}
.landing-card p { color: #57606a; margin: 0; }
/* Every card was one paragraph until the sync card needed two, and margin:0
   ran them together into a single block of text. Only the gap between them. */
.landing-card p + p { margin-top: .85rem; }

/* ---- Footer ---- */
.landing-footer {
  margin-top: 4rem;
  border-top: 1px solid #e6e8eb;
  background: #f6f8fa;
  text-align: center;
  padding: 1.75rem 1.25rem;
}
.landing-footer p {
  max-width: 640px;
  margin: 0 auto;
  color: #6e7781;
  font-size: .9rem;
}


/* ===== meersh additions ===== */

/* Taken from the meercal additions: hero buttons, code snippets and wide cards. */
.landing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.5rem;
}
.landing-code {
  margin: .9rem 0 0;
  padding: .8rem .9rem;
  border: 1px solid #e6e8eb;
  border-radius: 8px;
  background: #f6f8fa;
  color: #1f2328;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
}
.landing code {
  background: #f6f8fa;
  border-radius: 4px;
  padding: .1em .35em;
  font-size: .9em;
}
.landing-card-wide { grid-column: 1 / -1; }
.landing-card-wide .landing-card-body { padding: 2rem; }
.landing-card-wide-inner {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.landing-card-wide-copy { flex: 1 1 0; min-width: 0; }
.landing-card-wide h3 { font-size: 1.35rem; }
.landing-card-wide-aside {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.landing-card-wide-aside .landing-code { margin-top: 0; }

/* The package links under the install command. */
.landing-downloads {
  margin-top: 1.1rem;
  border-collapse: collapse;
  font-size: .92rem;
}
.landing-downloads th {
  padding: .3rem 1.5rem .3rem 0;
  color: #57606a;
  font-weight: 600;
  text-align: left;
}
.landing-downloads td { padding: .3rem 1.25rem .3rem 0; white-space: nowrap; }
.landing-card .landing-downloads-note {
  margin-top: 1rem;
  color: #6e7781;
  font-size: .92rem;
}

/* A shell has no screenshots worth the name, so the sections show terminal windows with
   real output instead. terminal/capture.py fills them from an actual meersh run. */
.landing-term {
  margin: 2.5rem auto 0;
  max-width: 900px;
  border: 1px solid #1b2230;
  border-radius: 12px;
  background: #1e2430;
  box-shadow: 0 14px 40px rgba(27,31,36,.22);
  overflow: hidden;
  text-align: left;
}
.landing-term-bar {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem .9rem;
  background: #323a4b;
}
.landing-term-bar span {
  width: .72rem;
  height: .72rem;
  border-radius: 50%;
  background: #ff5f57;
}
.landing-term-bar span:nth-child(2) { background: #febc2e; }
.landing-term-bar span:nth-child(3) { background: #28c840; }
.landing-term-bar em {
  margin-left: .6rem;
  color: #aeb7c4;
  font-style: normal;
  font-size: .8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.landing-term pre {
  margin: 0;
  padding: 1rem 1.1rem 1.15rem;
  color: #e6edf3;
  /* Fonts that carry the box drawing characters of meersh tables. Without them the browser
     falls back per glyph and the table frames get gaps. */
  font-family: "JetBrains Mono", "DejaVu Sans Mono", "Noto Sans Mono", "Liberation Mono", "Cascadia Mono",
    Menlo, Consolas, monospace;
  font-variant-ligatures: none;
  font-size: .8rem;
  line-height: 1.25;
  white-space: pre;
  overflow-x: auto;
}
.landing-term .prompt { color: #3fb950; }
.landing-term .cmd { color: #ffffff; font-weight: 600; }
.landing-term .note { color: #8b949e; }
.landing-term-caption {
  max-width: 760px;
  margin: .9rem auto 0;
  color: #6e7781;
  font-size: .92rem;
}

/* The roles. You and your scripts fill the first row, the three model roles the second,
   in purple, so the two groups of the rights table below can be told apart. */
.landing-roles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
  text-align: left;
}
.landing-role-person { grid-column: span 3; }
.landing-role-model { grid-column: span 2; }
.landing-role-name {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
  color: #2185d0;
  font-size: 1.35rem;
  line-height: 1;
}
.landing-role-model .landing-role-name { color: #8250df; }
.landing-role-name i.icon { margin: 0; }
.landing-role-name code { color: #1f2328; font-size: .72rem; }
.landing-roles p code { white-space: nowrap; }
.landing-subhead {
  margin: 3.5rem 0 1.25rem;
  font-size: 1.35rem;
  font-weight: 700;
}

/* What each role may do by default, as decided by the policy defaults. */
.landing-rights-wrap { max-width: 900px; margin: 0 auto; overflow-x: auto; }
.landing-rights {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: .95rem;
}
.landing-rights th {
  padding: .6rem .9rem;
  border-bottom: 2px solid #d0d7de;
  color: #57606a;
  font-size: .85rem;
  font-weight: 600;
}
.landing-rights td {
  padding: .7rem .9rem;
  border-bottom: 1px solid #e6e8eb;
  vertical-align: top;
}
.landing-rights th:not(:first-child), .landing-rights td:not(:first-child) { width: 27%; }
.landing-rights th:last-child { color: #8250df; }
.landing-rights small {
  display: block;
  margin-top: .3rem;
  color: #6e7781;
  font-size: .82rem;
  line-height: 1.4;
}
.landing-right {
  display: inline-block;
  min-width: 3.6rem;
  padding: .1rem .55rem;
  border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
}
.landing-right.allow { background: #dafbe1; color: #116329; }
.landing-right.ask { background: #fff8c5; color: #7d4e00; }
.landing-right.deny { background: #ffebe9; color: #a40e26; }

/* The agents block reuses the boxed section and needs its snippets left aligned. */
.landing-login-section .landing-code { align-self: stretch; text-align: left; }

/* The tour video with a big play button over its poster, as on meertex.com. */
.landing-player {
  position: relative;
  max-width: 1000px;
  margin: 2.5rem auto 0;
  overflow: hidden;
  border: 1px solid #d0d7de;
  border-radius: 14px;
  background: #f6f8fa;
  box-shadow: 0 14px 40px rgba(27,31,36,.18);
  aspect-ratio: 16 / 9;
}
.landing-player video { display: block; width: 100%; height: 100%; object-fit: cover; }
.landing-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: rgba(31,35,40,.07);
  color: #1f2328;
  font: inherit;
  cursor: pointer;
}
.landing-play[hidden] { display: none; }
.landing-play:focus-visible { outline: none; }
.landing-play-pill {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 26px 10px 10px;
  border: 1px solid #d0d7de;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 40px -12px rgba(37,41,46,.4);
  text-align: left;
  transition: transform .15s ease, box-shadow .15s ease;
}
.landing-play:hover .landing-play-pill,
.landing-play:focus-visible .landing-play-pill { transform: translateY(-2px); box-shadow: 0 20px 44px -12px rgba(37,41,46,.5); }
.landing-play:focus-visible .landing-play-pill { outline: 2px solid #2185d0; outline-offset: 3px; }
.landing-play-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #2185d0;
  color: #fff;
}
.landing-play-disc svg { margin-left: 3px; }
.landing-play-text { display: flex; flex-direction: column; line-height: 1.35; }
.landing-play-title { font-size: 17px; font-weight: 600; }
.landing-play-meta { color: #57606a; font-size: 14px; }

/* ---- Responsive ---- */
@media (max-width: 820px) {
  .landing-grid { grid-template-columns: 1fr; }
  .landing-roles { grid-template-columns: 1fr; }
  .landing-role-person, .landing-role-model { grid-column: auto; }
  .landing-rights { font-size: .88rem; }
  .landing-rights th, .landing-rights td { padding: .55rem .5rem; }
  .landing-card-wide .landing-card-body { padding: 1.5rem; }
  .landing-card-wide-inner { flex-direction: column; align-items: stretch; gap: 1.5rem; }
  .landing-login-section { margin: 2.5rem 1.25rem 0; padding: 2.5rem 1.5rem; }
  .landing-title { font-size: 2.05rem; }
  .landing-subtitle { font-size: 1.08rem; max-width: 560px; margin-left: auto; margin-right: auto; }
  .landing-hero { flex-direction: column; gap: 2rem; padding-top: 2.5rem; text-align: center; }
  .landing-hero-copy { flex: 0 1 auto; }
  .landing-hero-actions { justify-content: center; }
  .landing-logo { width: 180px; max-width: 60%; margin-left: auto; margin-right: auto; }
  .landing-term pre { font-size: .72rem; }
  .landing-player { border-radius: 10px; }
  .landing-play-pill { gap: 10px; padding: 6px 16px 6px 6px; }
  .landing-play-disc { width: 38px; height: 38px; }
  .landing-play-disc svg { width: 18px; height: 18px; }
  .landing-play-title { font-size: 15px; }
  .landing-play-meta { font-size: 12px; }
}
@media (max-width: 480px) {
  /* The nav links duplicate the in-page sections on small screens. */
  .landing-nav-links a:not(.button) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-play-pill { transition: none; }
  .landing-play:hover .landing-play-pill, .landing-play:focus-visible .landing-play-pill { transform: none; }
}