/* Clovermind site styles. Locked system: Geist + Geist Mono, monochrome UI,
   color only inside artwork, dot-matrix leaflet clover as the signature. */

:root {
  --bg: #0a0a0b;
  --panel: #101013;
  --ink: #ededf0;
  --dim: #85858e;
  --faint: #4a4a52;
  --line: rgba(237, 237, 240, 0.12);
  --line-strong: rgba(237, 237, 240, 0.25);
  --accent: #5e5ce6;
  --paper: #f4f4f2;
  --paper-ink: #111113;
  --paper-dim: #77776f;
  --paper-line: rgba(17, 17, 19, 0.16);
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }

.mono-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ---------- fixed nav shell with hover panels ---------- */
body { padding-top: 78px; }
section[id], .band[id] { scroll-margin-top: 94px; }
.nav-shell {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: var(--nbg, var(--bg));
  transform: translateY(0);
  transition: transform 300ms ease;
}
.nav-shell.nav-hidden { transform: translateY(-100%); }
.nav-shell.scrolled, .nav-shell.open { border-bottom: 1px solid var(--nline, var(--line)); }
.nav-panel {
  overflow: hidden;
  height: 0;
  transition: height 240ms cubic-bezier(0.33, 1, 0.68, 1);
}
.nav-panel .wrap { padding-top: 30px; padding-bottom: 48px; }
.np-group[hidden] { display: none; }
.np-group { animation: npIn 200ms ease; }
@keyframes npIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
.np-eyebrow { margin-bottom: 20px; }
.np-big { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; color: var(--nink, var(--ink)); display: inline-block; transition: opacity 150ms; }
.np-big:hover { opacity: 0.75; }
.np-item { display: inline-flex; align-items: center; gap: 16px; color: var(--nink, var(--ink)); transition: opacity 150ms; }
.np-item:hover { opacity: 0.75; }
.np-art { width: 42px; height: 42px; border-radius: 6px; flex: none; }
.np-t { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; max-width: 520px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-veil {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(10, 10, 11, 0.45);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.nav-veil.show { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .nav-shell, .nav-panel, .nav-veil { transition: none; }
  .np-group { animation: none; }
}

/* ---------- nav ---------- */
.site-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
}
.site-nav .nv-left {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.02em;
}
.site-nav .nv-links { display: flex; gap: 26px; font-size: 13.5px; color: var(--dim); }
.site-nav .nv-links a { transition: color 150ms; }
.site-nav .nv-links a:hover { color: var(--ink); }
.site-nav .nv-cta {
  font-size: 12.5px;
  border: 1px solid var(--line-strong);
  padding: 7px 16px;
  border-radius: 99px;
  color: var(--ink);
  transition: border-color 150ms;
}
.site-nav .nv-cta:hover { border-color: var(--ink); }

/* ---------- buttons ---------- */
.pill-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 99px;
  letter-spacing: -0.01em;
  transition: opacity 150ms;
}
.pill-cta:hover { opacity: 0.85; }
.ghost-cta { font-size: 14px; color: var(--dim); display: inline-flex; align-items: center; gap: 8px; transition: color 150ms; }
.ghost-cta:hover { color: var(--ink); }

/* ---------- sections ---------- */
.section { padding: 96px 0; }
.section-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 40px; }
.section-head .sn { font-family: var(--mono); font-size: 12px; color: var(--faint); letter-spacing: 0.1em; }
.section-head .st { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; }
.rule { height: 1px; background: var(--line); transform-origin: left; }

/* ---------- hero (H4 field test) ---------- */
.hero { padding: 30px 0 90px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 48px;
  align-items: center;
}
.hero-copy { display: grid; gap: 22px; max-width: 470px; }
.hero-state { font-size: 36px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.14; }
.hero-sub { font-size: 15.5px; color: var(--dim); max-width: 380px; }
.hero-ctas { display: flex; gap: 16px 22px; align-items: center; flex-wrap: wrap; }
/* guard against grid min-content blowout on narrow screens */
.hero-grid > *, .prod-grid > *, .company-body > * { min-width: 0; }

.demo-frame {
  position: relative;
  border: 1px solid var(--line-strong);
  background: #0d0d10;
  overflow: hidden;
  height: 460px;
}
.demo-frame video {
  position: absolute; top: 48px; bottom: 16px; left: 50%; transform: translateX(-50%);
  height: calc(100% - 64px); width: auto; max-width: calc(100% - 32px);
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  display: none;
}
.demo-frame.has-video video { display: block; }

/* ---------- screenshot slider ---------- */
.slider { position: relative; height: 100%; }
.slides {
  height: 100%; display: flex;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.slides::-webkit-scrollbar { display: none; }
.slide {
  min-width: 100%; height: 100%; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; scroll-snap-align: center; padding: 20px 16px 34px;
}
.slide .phone-shot { max-height: calc(100% - 40px); }
.sl-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(10, 10, 11, 0.6);
  color: var(--dim); cursor: pointer; font-size: 14px; z-index: 2;
  transition: color 150ms, border-color 150ms;
}
.sl-btn:hover { color: var(--ink); border-color: var(--ink); }
.sl-btn.prev { left: 12px; }
.sl-btn.next { right: 12px; }
.sl-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; }
.sl-dots button { width: 6px; height: 6px; border-radius: 50%; border: none; background: var(--faint); cursor: pointer; padding: 0; }
.sl-dots button.on { background: var(--ink); }
.demo-frame .db {
  position: absolute; top: 0; left: 0; right: 0; height: 36px;
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 14px;
  background: rgba(10, 10, 11, 0.55);
  backdrop-filter: blur(4px);
  z-index: 2;
}
.demo-frame .db .dn { font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; }
.demo-frame .db .dm { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; color: var(--faint); text-transform: uppercase; }
.demo-frame .dphc {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  color: var(--faint); text-transform: uppercase;
}
.demo-frame .pause {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(10, 10, 11, 0.6);
  color: var(--dim);
  font-size: 11px;
  cursor: pointer;
  display: none;
  align-items: center; justify-content: center;
}
.demo-frame.has-video .pause { display: flex; }
.demo-frame .demo-shotwrap {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 48px 16px 16px;
}
.phone-shot {
  max-height: 100%; max-width: 100%; width: auto;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  display: block;
}
.shot-stage { height: 100%; display: flex; align-items: center; justify-content: center; padding: 22px 16px; }
.shots3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 880px; }
.shots3 figure { margin: 0; display: grid; gap: 12px; justify-items: center; }
.shots3 .phone-shot { max-width: 240px; width: 100%; }
@media (max-width: 900px) { .shots3 { grid-template-columns: 1fr; } }
.ftick { position: absolute; width: 9px; height: 9px; border: 1px solid var(--line-strong); background: var(--bg); z-index: 2; }
.ftick.tl { top: -5px; left: -5px; } .ftick.tr { top: -5px; right: -5px; }
.ftick.bl { bottom: -5px; left: -5px; } .ftick.br { bottom: -5px; right: -5px; }

/* ---------- products (B1) ---------- */
.prod-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
.prod-copy { display: grid; gap: 18px; max-width: 420px; }
.prod-name { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.prod-desc { font-size: 15px; color: var(--dim); }
.prod-frame {
  border: 1px solid var(--line-strong);
  background: #0d0d10;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 340px;
  overflow: hidden;
  min-width: 0;
}
.slider, .slides { min-width: 0; }
.prod-frame .phc { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--faint); text-transform: uppercase; }
.more-products {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  opacity: 0.5;
}

/* ---------- research band (white, locked) ---------- */
.band { background: var(--paper); color: var(--paper-ink); border-top: 1px solid var(--line-strong); }
.band .section-head .sn { color: #9a9a92; }
.band-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 30px; }
.band-head .bt { display: flex; align-items: baseline; gap: 18px; }
.band-head .bt .sn { font-family: var(--mono); font-size: 12px; color: #9a9a92; letter-spacing: 0.1em; }
.band-head .bt .bh { font-size: 40px; font-weight: 500; letter-spacing: -0.02em; }
.band-head .va { font-family: var(--mono); font-size: 11px; color: var(--paper-dim); letter-spacing: 0.1em; text-transform: uppercase; transition: color 150ms; }
.band-head .va:hover { color: var(--paper-ink); }
.story-row {
  display: grid;
  grid-template-columns: 64px 1fr 30px;
  gap: 22px;
  align-items: center;
  padding: 16px 0;
  transition: transform 150ms;
}
a.story-row:hover { transform: translateX(4px); }
.story-row .art { width: 64px; height: 64px; border-radius: 4px; }
.art.g1 { background: linear-gradient(135deg, #3b2f66, #7a4a8f 55%, #c98a5e); }
.art.g2 { background: linear-gradient(160deg, #16323a, #2e7f6f 60%, #b9d8a0); }
.art.ghosted { background: none; border: 1px solid rgba(17, 17, 19, 0.2); }
.story-row .st2 { font-size: 20px; font-weight: 500; letter-spacing: -0.015em; }
.story-row .sd { font-family: var(--mono); font-size: 11px; color: var(--paper-dim); letter-spacing: 0.06em; margin-top: 4px; }
.story-row .sa { text-align: right; font-size: 17px; color: var(--paper-dim); }
.story-row.ghost { opacity: 0.4; pointer-events: none; }

/* ---------- company ---------- */
.company-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
.company-text { font-size: 17px; color: var(--dim); max-width: 560px; display: grid; gap: 20px; }
.company-img {
  border: 1px solid var(--line);
  height: 300px;
  overflow: hidden;
}
.company-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- footer (D1) ---------- */
.site-footer { position: relative; border-top: 1px solid var(--line); overflow: hidden; }
.site-footer .foot-inner { position: relative; padding: 56px 0 48px; min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; z-index: 1; }
.site-footer canvas { position: absolute; right: 0; top: 0; width: 46%; height: 100%; }
.foot-mark { font-weight: 600; letter-spacing: -0.02em; font-size: 17px; }
.foot-links { display: flex; gap: 26px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-bottom: 18px; }
.foot-links a:hover { color: var(--ink); }

/* ---------- article page ---------- */
.article { background: var(--paper); color: var(--paper-ink); min-height: 100vh; }
.article-head {
  padding: 72px 0 44px;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 20px;
}
.article-head .back-row { justify-self: start; }
.article-head .ad2 { font-family: var(--mono); font-size: 11px; color: var(--paper-dim); letter-spacing: 0.08em; }
.article-head h1 { font-size: 52px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; max-width: 860px; }
article.wrap { max-width: 1560px; }
.article-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 920px) 220px;
  justify-content: center;
  gap: 64px;
  padding: 56px 0 120px;
}
@media (max-width: 1500px) {
  .article-grid { grid-template-columns: 200px minmax(0, 800px); gap: 64px; }
}
.article-toc {
  position: sticky;
  top: 48px;
  align-self: start;
  display: grid;
  gap: 20px;
  padding-top: 6px;
}
.article-toc a { font-size: 14px; color: var(--paper-dim); line-height: 1.5; transition: color 150ms; }
.article-toc a.on, .article-toc a:hover { color: var(--paper-ink); }
.article-body { display: grid; gap: 22px; font-size: 17.5px; color: #3a3a38; }
/* text stays within the hairline width; media gets the wider track */
.article-body > * { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; }
.article-body > figure, .article-body > .a-table, .article-body > .valley { max-width: 920px; }
@media (max-width: 1200px) {
  .article-grid { grid-template-columns: minmax(0, 720px); gap: 0; }
  .article-toc { display: none; }
}
.back-link { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-dim); }
.back-link:hover { color: var(--paper-ink); }
.article-dek { font-size: 18.5px; color: #55554f; max-width: 660px; line-height: 1.65; }
.article-body h2 { font-size: 23px; font-weight: 600; letter-spacing: -0.015em; margin-top: 22px; }
/* Small mono eyebrow above an h2, for an article whose sections are a numbered
   series in the author's own telling. Keeps the number out of the heading,
   which the article guide forbids, without losing the device. The negative
   bottom margin pulls it onto its heading against the body's 22px grid gap. */
.article-body .sec-num { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #9a9a92; margin-top: 26px; margin-bottom: -14px; }
.article-body .sec-num + h2 { margin-top: 0; }
/* Subheading inside a section. Set as a mono eyebrow rather than a smaller
   bold heading, so it reads as clearly subordinate to the h2 and stays inside
   the site's existing type set. */
.article-body h3 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-dim); font-weight: 400; margin-top: 12px; margin-bottom: -12px; }
/* Closing provenance line, mono and dim, the article's own footer. */
.article-body .a-close { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: #9a9a92; line-height: 1.8; margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(17, 17, 19, 0.16); }
.article-body figure { margin: 12px 0 4px; }
.article-body figure img { width: 100%; border: 1px solid rgba(17, 17, 19, 0.16); border-radius: 4px; display: block; background: #fff; }
.article-body figcaption { font-family: var(--mono); font-size: 11px; color: var(--paper-dim); letter-spacing: 0.04em; margin-top: 10px; line-height: 1.7; }
.a-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.a-table th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-dim); text-align: left; font-weight: 400; padding: 8px 12px; border-bottom: 1px solid rgba(17, 17, 19, 0.3); }
.a-table td { padding: 9px 12px; border-bottom: 1px solid rgba(17, 17, 19, 0.12); }
.a-table td.num { font-family: var(--mono); font-size: 13px; }
.a-note { display: grid; gap: 22px; }
.valley { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 4px 0; }
.valley > div { border: 1px solid rgba(17, 17, 19, 0.2); border-radius: 5px; padding: 16px 18px; }
.valley .vk { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.valley .vv { font-size: 13.5px; color: #55554f; margin-top: 8px; line-height: 1.6; }
@media (max-width: 900px) { .valley { grid-template-columns: 1fr; } }

/* ---------- spec rows (products page, B3) ---------- */
.spec-rows { border-top: 1px solid var(--line); }
.spec-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.spec-row .sk { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.spec-row .sv2 { font-size: 15px; color: var(--dim); max-width: 560px; }

/* ---------- reveal motion (restrained, once) ---------- */
.rv { opacity: 0; transform: translateY(6px); transition: opacity 500ms ease, transform 500ms ease; }
.rv.in { opacity: 1; transform: none; }
.rule.rv { opacity: 1; transform: scaleX(0); transition: transform 600ms ease; }
.rule.rv.in { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .rv, .rule.rv { opacity: 1; transform: none; transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .site-nav .nv-links { display: none; }
  .hero-grid, .prod-grid, .company-body { grid-template-columns: 1fr; gap: 32px; }
  .hero-state { font-size: 28px; }
  .demo-frame { height: 340px; }
  .band-head .bt .bh { font-size: 30px; }
  .article-head h1 { font-size: 32px; }
  .spec-row { grid-template-columns: 1fr; gap: 8px; }
  .section { padding: 64px 0; }
}