/* Eirin home + games pages. Shared by index.html and games/index.html.
   Tokens match the use-case pages (uc.css) so the site reads as one. The
   nav, mobile menu, booking modal and footer blocks at the bottom are moved
   over from the old inline stylesheet unchanged. */

:root {
  --white: #1c1c1a;          /* primary ink, the historical token name */
  --ink: #1c1c1a;
  --body-intense: #1c1c1a;
  --body-moderate: #55554f;
  --body-subtle: #8d8d85;
  --muted: #8d8d85;
  --purple: #0e8f62;         /* brand accent (emerald), historical token name */
  --accent: #0e8f62;
  --accent-deep: #0a6b4a;
  --accent-wash: #eaf4ef;
  --accent-line: #bfdfd2;
  --ground: #f7f7f5;
  --paper: #ffffff;
  --line: #e6e6e1;
  --line-strong: #d4d4cd;
  --tag-border: rgba(28, 28, 26, 0.18);
  --neg: #c4564a;
  --neg-wash: #fbeeec;
  --amber: #b07a1e;
  --amber-wash: #fbf3e4;
  --maxw: 1200px;
  --gutter: 40px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Fira Sans', sans-serif;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Type helpers ---------- */
.lbl { font-family: 'Fira Mono', monospace; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent-deep); }
.h2 { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 44px; line-height: 1.12; letter-spacing: -0.025em; color: var(--ink); }
.h2 em { font-style: normal; color: var(--body-subtle); font-weight: 600; }
.sec-head { max-width: 820px; display: flex; flex-direction: column; gap: 16px; }
.sec-head.center { margin: 0 auto; text-align: center; align-items: center; }
.sec-head p:not(.lbl) { font-size: 18px; line-height: 28px; color: var(--body-moderate); }
.cite { font-size: 12.5px; line-height: 18px; color: var(--body-subtle); }
.cite a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Buttons (the old .btn block is kept at the bottom; these refine it) ---------- */
.btn-lg { height: 52px; padding: 0 26px; font-size: 17px; }
.cta-note { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--body-moderate); }
.cta-note b { font-weight: 600; color: var(--accent-deep); }
.cta-alt { margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--body-moderate); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { opacity: .8; }

/* ---------- Hero ---------- */
.hero { padding: 72px 0 56px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 26px; max-width: 580px; }
.hero h1 { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: clamp(38px, 4.1vw, 60px); line-height: 1.04; letter-spacing: -0.035em; color: var(--ink); }
.hero h1 b { display: block; font-weight: 800; color: var(--accent); }
.hero h1 small { display: block; margin-top: 10px; font-size: .5em; font-weight: 600; letter-spacing: -0.02em; color: var(--body-moderate); }
.hero .sub { font-size: 18px; line-height: 28px; color: var(--body-moderate); }
.hero .sub b { font-weight: 600; color: var(--ink); }
.hero-ctas { display: flex; flex-direction: column; align-items: flex-start; }
/* The hero's paste box: a store link in, the free audit out (site.js). It always wears the highlighted look
   (green border and ring), red when the text is not a link. A soft green sheen drifts across its face every
   few seconds (still when it is red, and under reduced motion). The arrow stays dim until the text is a link.
   The hint under it is one line that sits in the gap below the box and takes no room of its own (the
   negative margin), so an error never moves the page. */
.audit-box { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 520px; padding: 6px; background: linear-gradient(100deg, rgba(14, 143, 98, 0) 38%, rgba(14, 143, 98, .09) 50%, rgba(14, 143, 98, 0) 62%) 100% 50% / 300% 100% no-repeat, var(--paper); border: 1.5px solid var(--accent); border-radius: 16px; box-shadow: 0 0 0 4px rgba(14, 143, 98, .12); transition: border-color .2s ease, box-shadow .2s ease; animation: audit-sheen 7s ease-in-out infinite; }
@keyframes audit-sheen { 0% { background-position: 100% 50%; } 70%, 100% { background-position: 0% 50%; } }
.audit-box.invalid { background: var(--paper); border-color: var(--neg); box-shadow: 0 0 0 4px rgba(196, 86, 74, .1); animation: none; }
.audit-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.audit-input { flex: 1; min-width: 0; height: 46px; padding: 0 8px 0 14px; border: 0; outline: 0; background: transparent; font-family: 'Fira Sans', sans-serif; font-size: 17px; color: var(--ink); text-overflow: ellipsis; }
.audit-input::placeholder { color: var(--body-subtle); }
.audit-go { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 11px; background: #a4a4a3; color: #fff; cursor: pointer; transition: background-color .15s ease, opacity .15s ease, transform .15s ease; }
.audit-go svg { width: 18px; height: 18px; }
.audit-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.audit-box.ready .audit-go { background: var(--ink); }
.audit-box.ready .audit-go:hover { transform: translateY(-1px); }
.audit-box.busy .audit-go { opacity: .6; pointer-events: none; }
@media (max-width: 340px) { .audit-input { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .audit-box { animation: none; } }
.audit-hint { height: 20px; max-width: 100%; margin: 6px 0 -20px; font-size: 14px; line-height: 20px; color: var(--body-moderate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audit-hint.err { color: var(--neg); }
.hero-checks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; line-height: 20px; color: var(--body-moderate); }
.hero-checks li { display: inline-flex; align-items: center; gap: 8px; }
.hero-checks li::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1px solid var(--accent-line); background: var(--accent-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%230a6b4a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.hero-chans { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 28px; }
/* a label and its icons are one group: when the row is too narrow the groups wrap as wholes, so a label is never left behind its icons */
.chan-group { display: flex; align-items: center; gap: 14px; }
.hero-chans span { font-family: 'Fira Mono', monospace; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--body-subtle); }
.hero-chans ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-chans li { width: 34px; height: 34px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); display: grid; place-items: center; }
.hero-chans img { width: 18px; height: 18px; }

/* ---------- Product demo (hero visual) ----------
   Built from the product's own components: the store pill with stars, the
   grey review box and the green draft box. It is an example and says so. */
.demo { position: relative; width: 100%; max-width: 560px; justify-self: end; }
.demo-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-family: 'Fira Mono', monospace; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--body-subtle); }
.demo-tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.demo-tab { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--body-subtle); background: none; border: 0; padding: 5px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.demo-tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.demo-stage { position: relative; }
.demo-item { display: none; }
.demo-item.on { display: block; }

.rv { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 22px 22px 20px; box-shadow: 0 30px 60px -40px rgba(28, 28, 26, .35); }
.rv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rv-store { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.rv-store .stars { letter-spacing: 1px; font-size: 13px; }
.rv-store.s1, .rv-store.s2 { background: var(--neg-wash); color: var(--neg); }
.rv-store.s3 { background: var(--amber-wash); color: var(--amber); }
.rv-store.s4, .rv-store.s5 { background: var(--accent-wash); color: var(--accent-deep); }
.rv-store img { width: 14px; height: 14px; }
.rv-who { font-size: 13px; color: var(--body-subtle); }
.rv-quote { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--ground); border: 1px solid var(--line); font-size: 15px; line-height: 23px; color: var(--ink); }
.rv-draft { margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: #eef8f2; border: 1px solid #cfe9da; font-size: 15px; line-height: 23px; color: #11392a; }
.rv-draft-label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-family: 'Fira Mono', monospace; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-deep); }
.rv-draft-label i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.rv-src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rv-src span { font-size: 12px; line-height: 18px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--body-moderate); }
.rv-src span::before { content: "⌕ "; color: var(--body-subtle); }
.rv-actions { display: flex; gap: 8px; margin-top: 14px; }
.rv-actions span { font-size: 13.5px; font-weight: 600; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); color: var(--body-moderate); background: var(--paper); }
.rv-actions .go { background: var(--accent); border-color: var(--accent); color: #fff; }
.demo-posted { position: absolute; left: -28px; bottom: -34px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 13px; line-height: 18px; box-shadow: 0 18px 40px -16px rgba(28, 28, 26, .6); }
.demo-posted img { width: 16px; height: 16px; }
.demo-posted b { font-weight: 600; }
.demo-posted small { color: rgba(255, 255, 255, .6); }

/* ---------- Proof band ---------- */
.proof { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proof-item { padding: 34px 28px 30px; border-left: 1px solid var(--line); }
.proof-item:first-child { border-left: 0; padding-left: 0; }
.proof-item b { display: block; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 42px; line-height: 44px; letter-spacing: -0.03em; color: var(--accent-deep); }
.proof-item > div > span { display: block; margin-top: 10px; font-size: 15px; line-height: 22px; color: var(--body-moderate); }
.proof-item small { display: block; margin-top: 8px; font-family: 'Fira Mono', monospace; font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--body-subtle); }

/* ---------- Investors (the previous site's look, restored) ---------- */
.fold2 {
  background: var(--paper);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 60px 80px;
  width: 100%;
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.fold2 h2 {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  text-align: center;
  color: var(--white);
}
.logos {
  display: flex;
  flex-wrap: wrap;
  gap: 46px;
  align-items: center;
  justify-content: center;
  max-width: 1280px;
}
.logos img.lg { height: 64px; width: auto; object-fit: contain; opacity: 0.9; }
.logos img.lg.dg { height: 64px; }
/* the proof band above already draws this line */
.proof + .fold2 { border-top: 0; }
@media (max-width: 900px) { .fold2 { padding: 48px 32px; } }
@media (max-width: 600px) {
  .logos { gap: 28px; }
  .logos img.lg, .logos img.lg.dg { height: 44px; }
}
@media (max-width: 400px) {
  .fold2 { padding: 40px 16px; }
  .logos { gap: 20px; }
  .logos img.lg, .logos img.lg.dg { height: 36px; }
}

/* ---------- Problem: chart + three facts ---------- */
.problem { padding: 112px 0; }
.problem .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.problem .sec-head { position: sticky; top: 96px; }
.facts { display: flex; flex-direction: column; gap: 12px; }
.fact { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px; }
.fact b { display: block; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 20px; line-height: 27px; color: var(--ink); }
.fact p { margin-top: 8px; font-size: 15px; line-height: 24px; color: var(--body-moderate); }
.fact .cite { display: block; margin-top: 10px; }

/* Two-bar chart: share of reviewers who raised their rating (Hassan et al. 2018).
   Bars are scaled to the data, 4.4% and 0.7%, nothing decorative. */
.chart { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px 22px; }
.chart h3 { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 16px; line-height: 22px; color: var(--ink); }
.chart .sub { font-size: 13.5px; line-height: 20px; color: var(--body-subtle); margin-top: 4px; }
.bars { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.bar { display: grid; grid-template-columns: 150px 1fr 60px; align-items: center; gap: 14px; font-size: 14px; color: var(--body-moderate); }
.bar i { display: block; height: 30px; border-radius: 6px; background: var(--line-strong); width: calc(var(--v) * 100% / 5); min-width: 6px; }
.bar.hi i { background: var(--accent); }
.bar b { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 18px; color: var(--ink); text-align: right; }
.bar.hi b { color: var(--accent-deep); }
.chart .cite { margin-top: 16px; display: block; }

/* ---------- Outcome rows ---------- */
.rows { background: var(--paper); border-top: 1px solid var(--line); }
.row { padding: 104px 0; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.row .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.row.flip .row-copy { order: 2; }
.row-copy { display: flex; flex-direction: column; gap: 20px; max-width: 520px; }
.row-copy h3 { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 38px; line-height: 1.12; letter-spacing: -0.025em; color: var(--ink); }
.row-copy h3 em { font-style: normal; display: block; color: var(--body-subtle); font-weight: 600; }
.row-copy p { font-size: 16px; line-height: 26px; color: var(--body-moderate); }
.row-copy .cite { margin-top: -6px; }
.row-media { display: flex; justify-content: center; }
.ui { width: 100%; max-width: 520px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 60px -44px rgba(28, 28, 26, .5); overflow: hidden; }
.ui-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--ground); }
.ui-head b { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 14px; color: var(--ink); }
.ui-head span { font-size: 12.5px; color: var(--body-subtle); }
.ui-head .pill { font-family: 'Fira Mono', monospace; font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--accent-deep); background: var(--accent-wash); border: 1px solid var(--accent-line); padding: 4px 8px; border-radius: 999px; }
.ui-foot { padding: 10px 18px; border-top: 1px solid var(--line); font-family: 'Fira Mono', monospace; font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--body-subtle); }

/* approval queue */
.q { list-style: none; }
.q li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 13px 18px; border-top: 1px solid var(--line); font-size: 14px; }
.q li:first-child { border-top: 0; }
.q .rv-store { padding: 4px 9px 4px 8px; font-size: 12px; }
.q .txt { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q .txt small { display: block; font-size: 12px; color: var(--body-subtle); white-space: normal; }
.q .st { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.q .st.ok { background: var(--accent-wash); color: var(--accent-deep); }
.q .st.wait { background: var(--ground); color: var(--body-moderate); border: 1px solid var(--line); }
.q .st.you { background: var(--amber-wash); color: var(--amber); }

/* ranked report */
.rep { list-style: none; counter-reset: rank; }
.rep li { counter-increment: rank; display: grid; grid-template-columns: 26px 1fr 72px 90px; gap: 12px; align-items: center; padding: 13px 18px; border-top: 1px solid var(--line); font-size: 14px; }
.rep li:first-child { border-top: 0; }
.rep li::before { content: counter(rank); font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 14px; color: var(--body-subtle); }
.rep .is { color: var(--ink); font-weight: 500; }
.rep .is small { display: flex; gap: 6px; margin-top: 3px; }
.rep .is small img { width: 13px; height: 13px; }
.rep .n { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 15px; color: var(--ink); text-align: right; }
.rep .n small { display: block; font-family: 'Fira Sans', sans-serif; font-weight: 400; font-size: 11px; color: var(--body-subtle); }
.rep .tr { font-size: 12px; font-weight: 600; text-align: right; }
.rep .tr.up { color: var(--neg); }
.rep .tr.new { color: var(--amber); }
.rep .tr.flat { color: var(--body-subtle); }
.rep .tr.down { color: var(--accent-deep); }
.rep .tr i { display: inline-block; vertical-align: middle; margin-left: 6px; width: 44px; height: 14px; }
.rep .tr i svg { width: 44px; height: 14px; display: block; }

/* unified inbox */
.inbox { list-style: none; }
.inbox li { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 14px; }
.inbox li:first-child { border-top: 0; }
.inbox .ic { width: 30px; height: 30px; border-radius: 9px; background: var(--ground); border: 1px solid var(--line); display: grid; place-items: center; }
.inbox .ic img { width: 16px; height: 16px; }
.inbox .txt { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox .txt small { display: block; font-size: 12px; color: var(--body-subtle); }
.inbox .st { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--accent-wash); color: var(--accent-deep); white-space: nowrap; }
.inbox .st.read { background: var(--ground); color: var(--body-moderate); border: 1px solid var(--line); }

/* slack digest */
.slack { padding: 18px; }
.slack-msg { display: grid; grid-template-columns: 38px 1fr; gap: 12px; }
.slack-av { width: 38px; height: 38px; border-radius: 9px; background: var(--accent); color: #fff; display: grid; place-items: center; font-family: 'Manrope', sans-serif; font-weight: 800; }
.slack-msg .who { font-size: 14px; }
.slack-msg .who b { font-weight: 700; }
.slack-msg .who small { color: var(--body-subtle); margin-left: 6px; font-size: 12px; }
.slack-msg .body { margin-top: 4px; font-size: 14px; line-height: 22px; color: var(--ink); }
.slack-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.slack-kpis div { background: var(--ground); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.slack-kpis b { display: block; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 18px; color: var(--ink); }
.slack-kpis b.up { color: var(--accent-deep); }
.slack-kpis span { font-size: 11.5px; color: var(--body-subtle); }
.slack-msg ul { margin: 6px 0 0 18px; font-size: 14px; line-height: 22px; }
.slack-msg .body em { font-style: normal; color: var(--accent-deep); font-weight: 600; }

/* knowledge base */
.kb { list-style: none; }
.kb li { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 14px; }
.kb li:first-child { border-top: 0; }
.kb .doc { color: var(--ink); font-weight: 500; }
.kb .doc small { display: block; font-size: 12px; color: var(--body-subtle); font-weight: 400; }
.kb .src { font-family: 'Fira Mono', monospace; font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--body-subtle); }
.kb .src.auto { color: var(--accent-deep); }

/* ---------- Control ladder ---------- */
.control { padding: 112px 0; background: var(--ink); color: #fff; }
.control .lbl { color: #7fd1ad; }
.control .h2 { color: #fff; }
.control .sec-head p:not(.lbl) { color: rgba(255, 255, 255, .72); }
.ladder { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 48px; counter-reset: lvl; }
.ladder li { counter-increment: lvl; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; padding: 28px 26px; }
.ladder li::before { content: "Level " counter(lvl); font-family: 'Fira Mono', monospace; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #7fd1ad; }
.ladder h3 { margin-top: 12px; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 22px; line-height: 28px; }
.ladder p { margin-top: 10px; font-size: 15px; line-height: 24px; color: rgba(255, 255, 255, .72); }
.ladder li.start { border-color: #7fd1ad; }
.ladder li.start::after { content: "Where everyone starts"; display: inline-block; margin-top: 16px; font-size: 12px; font-weight: 600; color: #7fd1ad; }
.control .note { margin-top: 28px; font-size: 14px; line-height: 22px; color: rgba(255, 255, 255, .6); }

/* ---------- Audience: apps and games ---------- */
.aud { padding: 112px 0; }
.aud-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.aud-card { display: flex; flex-direction: column; gap: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 32px; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
a.aud-card:hover { border-color: var(--accent-line); transform: translateY(-2px); box-shadow: 0 18px 40px -26px rgba(28, 28, 26, .4); }
.aud-card h3 { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 26px; line-height: 32px; letter-spacing: -0.02em; color: var(--ink); }
.aud-card p { font-size: 15.5px; line-height: 24px; color: var(--body-moderate); }
.aud-card ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.aud-card li { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: var(--ground); border: 1px solid var(--line); color: var(--body-moderate); }
.aud-card .go { margin-top: auto; padding-top: 6px; font-size: 14.5px; font-weight: 600; color: var(--accent-deep); }

/* ---------- How it works ---------- */
.how { padding: 112px 0; background: var(--paper); border-top: 1px solid var(--line); }
.how-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 44px; counter-reset: how; }
.how-step { counter-increment: how; background: var(--ground); border: 1px solid var(--line); border-radius: 16px; padding: 30px 28px; display: flex; flex-direction: column; gap: 10px; }
.how-step::before { content: counter(how); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 16px; color: var(--accent-deep); background: var(--accent-wash); border: 1px solid var(--accent-line); }
.how-step h3 { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 20px; line-height: 26px; color: var(--ink); }
.how-step p { font-size: 15px; line-height: 24px; color: var(--body-moderate); }
.how-step .time { margin-top: auto; padding-top: 8px; font-family: 'Fira Mono', monospace; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-deep); }
.how-cta { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 40px; }

/* ---------- Why Eirin ---------- */
.why { padding: 112px 0; }
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 44px; }
.why-card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 26px; }
.why-card b { display: block; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 18px; line-height: 24px; color: var(--ink); }
.why-card p { margin-top: 8px; font-size: 14.5px; line-height: 22px; color: var(--body-moderate); }

/* ---------- Team: logo ticker (the previous site's look, restored) ----------
   One seamless marquee, edge to edge, instead of a static wall in a card.
   The track holds the nine logos FOUR times and slides exactly -50% — i.e.
   two whole copies — so the frame the loop restarts on is pixel-identical to
   the one before it and there is no jump. Four copies (not two) so the track
   still overflows a 4K viewport at the seam.
   Per-item `margin-right` rather than `gap` is load-bearing for that: `gap`
   drops the trailing space, which would land the seam half a gap out. */
.fold-experts {
  --xp-gap: 30px;
  --xp-tile: 172px;
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 78px 0 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  /* picks fold-4's tint up at the seam and hands off to fold-5's #f6f6f4 */
  background: linear-gradient(180deg, #dcece3 0%, #e9f2ed 28%, #f3f4f2 68%, #f6f6f4 100%);
}
.fold-experts::before,
.fold-experts::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(56px);
}
.fold-experts::before { width: 620px; height: 300px; left: 50%; top: -40px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(14, 143, 98, 0.16), rgba(14, 143, 98, 0)); }
.fold-experts::after  { width: 520px; height: 300px; right: -120px; bottom: -80px; background: radial-gradient(closest-side, rgba(139, 127, 214, 0.13), rgba(139, 127, 214, 0)); }

.experts-head {
  position: relative;
  width: 100%;
  max-width: 900px;
  padding: 0 24px;
  text-align: center;
}
.experts-head h2 {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -0.7px;
  color: var(--white);
}
.experts-head h2 b {
  font-weight: 800;
  background: linear-gradient(100deg, #0a6b4a 0%, #14a877 52%, #0e8f62 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- the ticker --- */
.xp-ticker {
  position: relative;
  width: 100%;
  /* the mask clips to this box, so the padding is what keeps a hovered tile's
     lift and drop shadow from being sliced off */
  padding: 26px 0;
  /* edge to edge: the row runs off both sides and dissolves rather than stops.
     no-repeat matters — the default would tile the fade across the overflow
     instead of hiding it. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.xp-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: xp-slide 52s linear infinite;
  /* keeps the slide on the compositor, so it can't stutter against layout */
  will-change: transform;
  backface-visibility: hidden;
}
@keyframes xp-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.xp-set { display: flex; align-items: center; flex: none; }
/* hovering anywhere on the row holds it, so a logo can actually be read */
.xp-ticker:hover .xp-track { animation-play-state: paused; }

.xp-logo {
  position: relative;
  flex: none;
  width: var(--xp-tile);
  margin-right: var(--xp-gap);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(28, 28, 26, 0.09);
  box-shadow: 0 10px 22px -16px rgba(28, 28, 26, 0.38);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), box-shadow .32s ease;
}
.xp-logo img { display: block; width: 100%; height: auto; }
/* unifies the tiles whose PNG carries its own dark brand background */
.xp-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.xp-logo:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 38px -20px rgba(28, 28, 26, 0.42);
}

.experts-note {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  max-width: calc(100% - 32px);
  margin-top: 6px;
  padding: 15px 32px 15px 24px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(28, 28, 26, 0.06);
  box-shadow: 0 16px 34px -26px rgba(28, 28, 26, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-align: left;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--body-moderate);
}
.experts-note svg { flex: none; width: 19px; height: 19px; color: var(--purple); }
/* once it has to wrap (narrow viewports) the two lines come out even */
.experts-note > span { text-wrap: balance; }
.experts-note .rc { color: var(--accent-deep); font-weight: 600; }

@media (max-width: 900px) {
  .fold-experts { --xp-tile: 150px; --xp-gap: 22px; padding: 62px 0 70px; gap: 16px; }
  .fold-experts::before, .fold-experts::after { display: none; }
  .experts-head h2 { font-size: 28px; letter-spacing: -0.4px; }
  .xp-track { animation-duration: 40s; }
}
@media (max-width: 600px) {
  .fold-experts { --xp-tile: 126px; --xp-gap: 16px; padding: 50px 0 58px; gap: 12px; }
  .experts-head { padding: 0 16px; }
  .experts-head h2 { font-size: 24px; line-height: 1.26; }
  .experts-head h2 br { display: none; }
  .xp-ticker {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
  .xp-track { animation-duration: 32s; }
  .xp-logo { border-radius: 11px; }
  .experts-note { font-size: 13.5px; gap: 10px; padding: 13px 20px 13px 16px; }
  .experts-note svg { width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  /* no travel: drop the duplicate copies and let the one set wrap centred */
  .xp-ticker { padding: 6px 0; -webkit-mask-image: none; mask-image: none; }
  .xp-track { animation: none; width: 100%; }
  .xp-set { flex-wrap: wrap; justify-content: center; width: 100%; padding: 0 20px; }
  .xp-set + .xp-set { display: none; }
  .xp-logo { margin: 0 calc(var(--xp-gap) / 2) var(--xp-gap); }
  .xp-logo:hover { transform: none; }
}
/* off-screen the slide parks (site.js adds .anim-off to [data-anim-host] while it is out of view);
   !important because the animation shorthand above resets animation-play-state to running */
.anim-off .xp-track { animation-play-state: paused !important; }

/* ---------- Pricing: founding partners ---------- */
.pricing { padding: 112px 0; scroll-margin-top: 70px; }
.fp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.fp-card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 32px; }
.fp-card.get { border-color: var(--accent-line); background: linear-gradient(160deg, #eef7f2 0%, #ffffff 60%); }
.fp-tag { font-family: 'Fira Mono', monospace; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--body-subtle); }
.fp-card.get .fp-tag { color: var(--accent-deep); }
.fp-lead { margin-top: 12px; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 30px; line-height: 36px; letter-spacing: -0.02em; color: var(--ink); }
.fp-lead small { display: block; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--body-moderate); margin-top: 4px; }
.fp-list { list-style: none; margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.fp-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 15px; line-height: 23px; color: var(--body-moderate); }
.fp-list li::before { content: ""; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 1px solid var(--accent-line); background: var(--accent-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%230a6b4a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.fp-card.give .fp-list li::before { background-color: var(--ground); border-color: var(--line); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='2.2' fill='%2355554f'/%3E%3C/svg%3E"); }
.fp-cta { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 40px; }

/* ---------- FAQ ---------- */
.faqs { padding: 112px 0; background: var(--paper); border-top: 1px solid var(--line); }
.faq { max-width: 820px; margin: 36px auto 0; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 22px 50px 22px 0; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 18px; line-height: 26px; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; margin-top: -14px; font-weight: 400; font-size: 26px; line-height: 28px; color: var(--accent-deep); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.faq details p { padding: 0 50px 24px 0; font-size: 16px; line-height: 26px; color: var(--body-moderate); }
.faq details p a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Closing CTA ---------- */
.closing { padding: 120px 0; background: var(--ground); text-align: center; }
.closing h2 { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 48px; line-height: 1.08; letter-spacing: -0.03em; color: var(--ink); }
.closing h2 b { display: block; color: var(--accent); }
.closing p { margin: 18px auto 0; max-width: 560px; font-size: 17px; line-height: 27px; color: var(--body-moderate); }
.closing .hero-ctas { align-items: center; margin-top: 32px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  :root { --gutter: 32px; }
  .hero { padding: 56px 0 48px; }
  .hero .wrap { gap: 40px; }
  .row .wrap { gap: 48px; }
}
@media (max-width: 1000px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { max-width: 640px; }
  .demo { justify-self: start; max-width: 600px; }
  .demo-posted { left: 12px; }
  .problem .wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .problem .sec-head { position: static; }
}
@media (max-width: 900px) {
  .h2 { font-size: 34px; }
  .proof .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-item { padding: 26px 20px; }
  .proof-item:nth-child(3) { border-left: 0; padding-left: 0; }
  .proof-item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .proof-item b { font-size: 34px; line-height: 38px; }
  .row { padding: 72px 0; }
  .row .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .row.flip .row-copy { order: 0; }
  .row-media { order: -1; }
  .row-copy h3 { font-size: 30px; }
  .ladder, .how-steps, .why-grid, .aud-grid, .fp-cards { grid-template-columns: minmax(0, 1fr); }
  .problem, .control, .aud, .how, .why, .pricing, .faqs { padding: 80px 0; }
  .closing { padding: 88px 0; }
  .closing h2 { font-size: 36px; }
}
@media (max-width: 600px) {
  :root { --gutter: 20px; }
  .hero { padding: 40px 0 40px; }
  .hero h1 { font-size: 34px; }
  .hero .sub { font-size: 16px; line-height: 25px; }
  .h2 { font-size: 28px; }
  .sec-head p:not(.lbl) { font-size: 16px; line-height: 25px; }
  .proof .wrap { grid-template-columns: minmax(0, 1fr); }
  .proof-item, .proof-item:nth-child(3) { border-left: 0; padding: 20px 0; }
  .proof-item:nth-child(n+2) { border-top: 1px solid var(--line); }
  .rv { padding: 16px; }
  .rv-quote, .rv-draft { font-size: 14px; line-height: 21px; }
  .demo-posted { position: static; margin-top: 12px; display: inline-flex; }
  .bar { grid-template-columns: 110px 1fr 50px; }
  .row-copy h3 { font-size: 26px; }
  .rep li { grid-template-columns: 22px 1fr 60px 70px; gap: 8px; padding: 12px 14px; }
  .rep .tr i { display: none; }
  .q li, .inbox li, .kb li { padding: 12px 14px; }
  .ladder li, .aud-card, .fp-card, .why-card { padding: 22px; }
  .closing h2 { font-size: 30px; }
  .faq summary { font-size: 16.5px; line-height: 24px; padding-right: 40px; }
  .faq details p { padding-right: 0; font-size: 15px; line-height: 24px; }
}
/* phones: up to 560px the two channel groups stack (the equal label column makes them too wide for one row, which fits from
   561px), and their icons start in the same column; the demo's label sits above its tabs (side by side they leave the tabs
   too little room) */
@media (max-width: 560px) { .chan-group > span { min-width: 80px; } }
@media (max-width: 480px) { .demo-label { flex-direction: column; align-items: flex-start; gap: 8px; } }
@media (max-width: 400px) {
  :root { --gutter: 16px; }
  .hero h1 { font-size: 30px; }
  .hero-chans ul { gap: 6px; }
  .hero-chans li { width: 30px; height: 30px; }
  .q li { grid-template-columns: auto 1fr; }
  .q .st { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, a.aud-card { transition: none; }
}

/* ======================================================================
   Moved over from the old inline stylesheet: buttons, nav, mobile menu,
   use-cases dropdown, booking modal, footer. Unchanged apart from indentation.
   ====================================================================== */
/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.24px;
  cursor: pointer;
  border: none;
  transition: transform .15s ease, opacity .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-white { background: var(--white); color: #fff; }
.btn-purple { background: var(--purple); color: #fff; }
.btn-sm { height: 28px; font-size: 14px; line-height: 18px; letter-spacing: -0.21px; }
.btn svg { width: 16px; height: 16px; }

/* ---------- Navigation ---------- */
nav {
  position: sticky;
  top: 0;
  z-index: 60;
  width: 100%;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  background: rgba(247, 247, 245, 0.85);
  border-bottom: 1px solid var(--line);
}
/* Fallback for browsers without backdrop-filter: keep the bar readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  nav { background: rgba(247, 247, 245, 0.96); }
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--gutter);
  margin: 0 auto;
  max-width: var(--maxw);
}
.nav-left { display: flex; align-items: center; gap: 40px; }
/* Desktop: the brand, the links and the Start free / Powered by group are three parts of the bar, spread
   across it with space-between (the grouping div steps out of the way). Below 901px the links go to the
   menu and the old two-part rules take over. The side padding is the page's own gutter, so the logo lines
   up with the hero text and the right group with the page's right edge. */
@media (min-width: 901px) { .nav-left { display: contents; } .nav-inner { gap: 20px; } }
/* 901-1100px: the three parts barely fit, so the links and the right group pull in a little to keep a gap. */
@media (min-width: 901px) and (max-width: 1100px) { .nav-links { gap: 18px; } .nav-right { gap: 10px; } }
@media (min-width: 901px) and (max-width: 990px) { .nav-right .powered .pb { display: none; } }   /* no room for the whole label: the logo alone, not half a word */
.logo {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--white);
}
/* Desktop: nav brand logo slightly larger */
.nav-left .logo { font-size: 28px; letter-spacing: 2px; font-weight: 700; }
/* Wordmark image variant of the logo (nav + footer) */
.logo { display: inline-flex; align-items: center; }
.logo img { display: block; width: auto; }
.nav-left .logo img { height: 24px; object-fit: contain; object-position: left center; }   /* when the bar is tight the wordmark scales down, it is not squeezed */
.foot-row .logo img { height: 21px; }
.nav-links { display: flex; gap: 24px; }
.nav-links a { position: relative; font-size: 16px; line-height: 24px; color: var(--body-moderate); padding-bottom: 3px; white-space: nowrap; }
.nav-links a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--purple);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-right .btn { white-space: nowrap; flex: none; }   /* tight bars squeeze the 'Powered by' label, never the button's text */
.vdiv { width: 1px; height: 24px; background: rgba(28, 28, 26, 0.18); }
.powered { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.powered .pb { display: inline-block; font-size: 12px; line-height: 18px; color: rgba(28, 28, 26, 0.4); white-space: nowrap; overflow: hidden; max-width: 130px; transition: opacity .25s ease, max-width .3s ease, margin .3s ease; }
.lysto-logo {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 14px;
  transform-origin: center;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), filter .3s ease;
  filter: saturate(0.5) brightness(0.92);
  will-change: transform;
  position: relative;
  z-index: 1;
}
.lysto-logo img { display: block; }
/* Single dark lockup (wordmark + mark already baked in, no invert needed) */
.lysto-logo .l-lockup { height: 14px; width: auto; }
/* On hover, scale the Lysto logo and slide it left to sit over the "Powered by" text */
.powered:hover .lysto-logo { transform: translateX(-34px) scale(1.85); filter: saturate(1.25) brightness(1.12); }
/* "Powered by" fades to 0 opacity but keeps its box, so the frame size is identical in default and hover */
.powered:hover .pb { opacity: 0; }

/* ---------- Mobile menu (staggered, after React Bits' StaggeredMenu) ----------
   At 900px and below the nav links fold into a hamburger toggle. Opening sweeps
   two accent layers and then the panel in from the right, and the links rise
   into place one after another. Plain CSS transitions stand in for the
   original GSAP timeline: every open-state delay below is that element's
   start time on it, and the closed state holds its reset back until the
   panel has slid away (.32s) so nothing visibly snaps. html.sm-open is the
   one switch, flipped by the mobile-menu script. */
.sm-toggle, .sm-menu { display: none; }
@media (max-width: 900px) {
  .sm-toggle { display: inline-flex; }
  .sm-menu { display: block; }
}
/* Icon-only, 44px square for touch. The negative margins keep the bar at
   the 28px height of the button beside it and put the icon on the gutter. */
.sm-toggle {
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -8px -13px -8px 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--white);
}
.sm-toggle:focus-visible { outline: 2px solid var(--purple); outline-offset: -4px; border-radius: 8px; }
/* Three-bar menu icon. On open the outer bars meet in the middle and fold
   into a close cross while the middle bar shrinks away. */
.sm-icon {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 14px;
}
.sm-icon::before, .sm-icon::after, .sm-icon > span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.sm-icon::before { top: 0; }
.sm-icon > span { top: 6px; transition: transform .2s ease .1s; }
.sm-icon::after { bottom: 0; }
.sm-icon::before, .sm-icon::after { transition: transform .35s cubic-bezier(.76, 0, .24, 1); }
.sm-open .sm-icon > span { transform: scaleX(0); transition-delay: 0s; }
.sm-open .sm-icon::before, .sm-open .sm-icon::after { transition: transform .8s cubic-bezier(.23, 1, .32, 1); }
.sm-open .sm-icon::before { transform: translateY(6px) rotate(45deg); }
.sm-open .sm-icon::after { transform: translateY(-6px) rotate(-45deg); }

/* Sits under the sticky nav (z 60), so the bar and its toggle stay on top.
   It has to live outside <nav>: the bar's backdrop-filter would otherwise
   become the containing block for anything fixed inside it. */
.sm-menu {
  position: fixed;
  inset: 0;
  z-index: 59;
  visibility: hidden;
  transition: visibility 0s linear .32s;
}
.sm-open .sm-menu { visibility: visible; transition-delay: 0s; }
/* Lock on body, never html: body's overflow then still carries to the
   viewport, whereas clipping html turns body (overflow-x: hidden) into the
   scroller and the sticky nav scrolls off with it. Same lock as the modal. */
html.sm-open body { overflow: hidden; }
.sm-layer, .sm-panel {
  position: absolute;
  inset: 0;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.5, 0, .75, 0);
}
.sm-layer { background: var(--accent-line); }
.sm-layer + .sm-layer { background: var(--purple); }
.sm-open .sm-layer { transform: none; transition: transform .5s cubic-bezier(.23, 1, .32, 1) calc(var(--i) * .07s); }
.sm-panel {
  display: flex;
  flex-direction: column;
  /* --sm-nav-h is the bar's measured height, set on open */
  padding: calc(var(--sm-nav-h, 56px) + 40px) 40px 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ground);
}
.sm-open .sm-panel { transform: none; transition: transform .65s cubic-bezier(.23, 1, .32, 1) .15s; }
/* side gutters track .nav-inner so the links line up under the logo */
@media (max-width: 600px) { .sm-panel { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 400px) { .sm-panel { padding-left: 14px; padding-right: 14px; } }

.sm-list { list-style: none; display: flex; flex-direction: column; gap: 8px; counter-reset: sm-item; }
.sm-list li { overflow: hidden; line-height: 1; }   /* the mask each label rises out of */
.sm-item {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 9vw, 52px);
  line-height: 1.05;
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--white);
  transition: color .25s;
}
.sm-item:hover { color: var(--purple); }
/* the li clips anything drawn outside it, so the ring goes inside */
.sm-item:focus-visible { outline: 2px solid var(--purple); outline-offset: -2px; border-radius: 4px; color: var(--purple); }
.sm-label {
  display: inline-block;
  transform-origin: 50% 100%;
  transform: translateY(140%) rotate(10deg);
  transition: transform 0s linear .32s;
}
.sm-open .sm-label { transform: none; transition: transform 1s cubic-bezier(.23, 1, .32, 1) calc(.25s + var(--i) * .1s); }
.sm-item::after {
  counter-increment: sm-item;
  content: counter(sm-item, decimal-leading-zero);
  margin-top: .3em;
  font-family: 'Fira Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--purple);
  opacity: 0;
  transition: opacity 0s linear .32s;
}
.sm-open .sm-item::after { opacity: 1; transition: opacity .6s cubic-bezier(.33, 1, .68, 1) calc(.35s + var(--i) * .08s); }

.sm-extra { margin-top: auto; padding-top: 40px; display: flex; flex-direction: column; gap: 12px; }
.sm-extra-title {
  font-family: 'Fira Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--purple);
  opacity: 0;
  transition: opacity 0s linear .32s;
}
.sm-open .sm-extra-title { opacity: 1; transition: opacity .5s cubic-bezier(.33, 1, .68, 1) .41s; }
.sm-extra-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.sm-extra-link {
  display: inline-block;
  font-size: 17px;
  font-weight: 500;
  line-height: 26px;
  color: var(--body-intense);
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0s linear .32s, transform 0s linear .32s, color .3s;
}
.sm-extra-link:hover { color: var(--purple); }
.sm-extra-link:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 4px; }
.sm-open .sm-extra-link {
  opacity: 1;
  transform: none;
  transition:
    opacity .55s cubic-bezier(.25, 1, .5, 1) calc(.45s + var(--i) * .08s),
    transform .55s cubic-bezier(.25, 1, .5, 1) calc(.45s + var(--i) * .08s),
    color .3s;
}
@media (prefers-reduced-motion: reduce) {
  .sm-menu, .sm-menu *, .sm-menu *::after,
  .sm-icon > span, .sm-icon::before, .sm-icon::after { transition: none !important; }
}


/* ---------- Use-cases dropdown (nav) ---------- */
.nav-dd { position: relative; display: inline-flex; }
.nav-dd > button {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 16px; line-height: 24px; padding: 0 0 3px;
  color: var(--body-moderate); background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.nav-dd > button svg { width: 12px; height: 12px; transition: transform .2s ease; }
.nav-dd > button:hover, .nav-dd.open > button { color: var(--white); }
.nav-dd.open > button svg { transform: rotate(180deg); }
.nav-dd > button:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; border-radius: 4px; }
.nav-dd-panel {
  position: absolute; top: calc(100% + 18px); left: -18px; width: 400px; padding: 8px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 60px -20px rgba(28, 28, 26, 0.28);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.nav-dd.open .nav-dd-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav-links .nav-dd-panel a { display: block; padding: 10px 12px; border-radius: 9px; white-space: normal; }
.nav-links .nav-dd-panel a::after { display: none; }
.nav-dd-panel a:hover, .nav-dd-panel a:focus-visible { background: var(--accent-wash); outline: none; }
.nav-dd-panel a b { display: block; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 15px; line-height: 21px; color: var(--white); }
.nav-dd-panel a span { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--body-moderate); }
.nav-dd-panel a.all { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; border-radius: 0 0 9px 9px; }
.nav-dd-panel a.all b { font-size: 13px; color: var(--accent-deep); }

/* ---------- Get Started Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(28, 28, 26, 0.45);
  backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal {
  position: relative;
  width: 100%; max-width: 460px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(14,143,98,0.10) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #ffffff 0%, #f7f7f5 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 36px 32px 28px;
  box-shadow: 0 30px 80px rgba(28,28,26,0.18);
  transform: translateY(12px) scale(0.97);
  opacity: 0;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), opacity .28s ease;
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); opacity: 1; }
.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(28,28,26,0.05); border: none; cursor: pointer;
  color: var(--body-subtle); font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease;
}
.modal-close:hover { background: rgba(28,28,26,0.1); color: var(--white); }
.modal h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; font-size: 26px; line-height: 32px; color: var(--white);
  margin-bottom: 10px;
}
/* the email step is a heading, one line of copy, the field and the button;
   the heading opens the modal, so it keeps clear of the close button */
.modal-body[data-view="form"] h2 { margin-bottom: 8px; padding-right: 30px; }
.modal-desc { font-size: 14.5px; line-height: 22px; color: var(--body-moderate); margin-bottom: 22px; }
.modal-form { display: flex; flex-direction: column; gap: 10px; }
.modal-input {
  width: 100%; height: 46px; padding: 0 16px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid var(--line-strong);
  color: var(--white); font-family: 'Fira Sans', sans-serif; font-size: 15px;
  outline: none; transition: border-color .2s ease, background .2s ease;
}
.modal-input::placeholder { color: var(--body-subtle); }
.modal-input:focus { border-color: var(--purple); background: rgba(14,143,98,0.05); }
.modal-form .btn { width: 100%; height: 46px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.modal-error { font-size: 12px; color: #c4564a; min-height: 14px; margin-top: -2px; }
/* success state */
.modal-success { text-align: center; padding: 8px 0; }
.modal-success .check {
  width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-wash); border: 1px solid var(--accent-line);
  color: var(--accent-deep); font-size: 28px;
}
.modal-success p { font-size: 14px; line-height: 21px; color: var(--body-moderate); margin: 8px 0 22px; }
.modal-success .email-echo { color: var(--white); font-weight: 500; }
/* calendar (Calendly) view */
.modal.calendar-mode { max-width: 680px; }
.modal-calendar .cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.modal-calendar .cal-back {
  flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(28,28,26,0.05); border: none; cursor: pointer;
  color: var(--body-subtle); font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease;
}
.modal-calendar .cal-back:hover { background: rgba(28,28,26,0.1); color: var(--white); }
.modal-calendar .cal-head h2 { font-size: 20px; line-height: 26px; margin: 0; }
.modal-calendar .cal-sub { font-size: 13px; line-height: 19px; color: var(--body-moderate); margin-bottom: 14px; }
.modal-calendar .cal-sub b { color: var(--white); font-weight: 600; }
#calendly-inline { min-width: 300px; height: 660px; border-radius: 10px; overflow: hidden; }

@media (max-width: 600px) {
  .modal { padding: 30px 22px 24px; }
  .modal h2 { font-size: 22px; line-height: 28px; }
  .modal.calendar-mode { max-width: 460px; }
  #calendly-inline { height: 560px; }
}

/* ---------- Footer ---------- */
footer {
  width: 100%;
  background: var(--paper);
  border-top: 1px solid var(--line);
  /* no backdrop-filter here — --paper is fully opaque, so the blur cost bought
     nothing but an extra compositing layer */
}
.foot-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px 115px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.foot-row .logo { font-size: 24px; }
.foot-cta { display: flex; align-items: center; gap: 14px; }
.foot-cta a { font-size: 16px; line-height: 24px; color: var(--body-moderate); }
.foot-div { height: 1px; width: 100%; background: var(--line); }
.foot-legal { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.foot-legal .left { display: flex; gap: 20px; }
.foot-legal span {
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--body-subtle);
}


/* nav + footer responsive rules (from the old responsive block) */
@media (max-width: 1100px) { .nav-inner { padding: 14px 40px; } .foot-inner { padding: 20px 48px; } }
@media (max-width: 900px) {
  .nav-inner { gap: 12px; }
  .nav-right { display: flex; gap: 10px; }
  .nav-right .vdiv, .nav-right .powered { display: none; }
  .nav-left { flex: 1; justify-content: space-between; gap: 12px; }
  .nav-links { display: none; }
}
@media (max-width: 600px) {
  .nav-inner { padding: 12px 20px; }
  .foot-inner { padding: 20px; }
  .foot-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .foot-legal { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 400px) { .nav-inner { padding: 10px 14px; } .nav-left { gap: 10px; } .foot-inner { padding: 16px 14px; } }

/* footer use-case links (from the old home stylesheet) */
.foot-uc { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; line-height: 22px; color: var(--body-moderate); }
.foot-uc b { font-weight: 500; color: var(--white); }
.foot-uc a:hover { color: var(--white); }

/* ======================================================================
   Visual layer: icons, scroll reveals and the product animations.
   Everything here degrades to the static page without JS (the html.js
   class gates the hidden start states) and under prefers-reduced-motion.
   ====================================================================== */

/* ---------- Icons (inline SVG symbols, see the sprite at the top of <body>) ---------- */
.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.lbl { display: inline-flex; align-items: center; gap: 8px; }
.lbl .ic { width: 16px; height: 16px; }
.ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-wash); border: 1px solid var(--accent-line); color: var(--accent-deep); flex: none; }
.ico .ic { width: 20px; height: 20px; }
.ico.neg { background: var(--neg-wash); border-color: #f0d3cf; color: var(--neg); }
.ico.amber { background: var(--amber-wash); border-color: #efdcb8; color: var(--amber); }
.fact { display: grid; grid-template-columns: 40px 1fr; gap: 16px; }
.fact > div { min-width: 0; }
.why-card { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.why-card .ico { width: 36px; height: 36px; border-radius: 10px; }
.how-step .ico { margin-bottom: 4px; }
.how-step::before { display: none; }
.how-step .num { font-family: 'Fira Mono', monospace; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--body-subtle); }
.ladder li .ico { background: rgba(127, 209, 173, .12); border-color: rgba(127, 209, 173, .35); color: #7fd1ad; }
.ladder li::before { display: block; margin-top: 14px; }
.aud-card .ico { width: 44px; height: 44px; border-radius: 13px; }
.aud-card .ico .ic { width: 22px; height: 22px; }
.aud-card ul li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; }
.aud-card ul li img { width: 14px; height: 14px; }
/* icon and number share a row, centred on each other; the caption runs full width under both */
.proof-item { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; align-items: center; align-content: start; }
.proof-item > div { display: contents; }
.proof-item .ico { grid-area: 1 / 1; width: 36px; height: 36px; border-radius: 11px; margin-top: 2px; }
.proof-item b { grid-area: 1 / 2; }
.proof-item > div > span { grid-area: 2 / 1 / 3 / 3; }
.proof-item small { grid-area: 3 / 1 / 4 / 3; }

/* ---------- Scroll reveal ---------- */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
html.js .reveal.in { opacity: 1; transform: none; }
html.js .reveal[data-delay="1"] { transition-delay: .1s; }
html.js .reveal[data-delay="2"] { transition-delay: .2s; }
html.js .reveal[data-delay="3"] { transition-delay: .3s; }

/* ---------- Hero: the draft writes itself, then gets approved ---------- */
.rv-draft-text { white-space: pre-wrap; }
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
html.js .rv.typing .rv-src, html.js .rv.typing .rv-actions { opacity: 0; transform: translateY(6px); }
.rv-src, .rv-actions { transition: opacity .4s ease, transform .4s ease; }
.rv-actions .go { transition: transform .15s ease, background .2s ease; }
.rv.approving .rv-actions .go { transform: scale(.96); background: var(--accent-deep); }
.rv .rv-posted { display: none; }
.rv.posted .rv-draft-label.live { display: none; }
.rv.posted .rv-posted { display: flex; }
.rv.posted .rv-draft { background: #e4f3ea; border-color: #b9dfca; }
html.js .demo-posted { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
html.js .demo-posted.show { opacity: 1; transform: none; }
.demo-tab { transition: background .2s ease, color .2s ease; }
.demo-item { animation: none; }
html.js .demo-item.on { animation: demoIn .35s ease; }
@keyframes demoIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Proof count-ups ---------- */
.proof-item b { font-variant-numeric: tabular-nums; }

/* ---------- Chart bars grow, sparklines draw, counts tick ---------- */
.bar i { transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
html.js .chart:not(.in) .bar i { width: 0 !important; }
.rep .tr polyline { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s ease .2s; }
.ui.in .rep .tr polyline { stroke-dashoffset: 0; }
.rep .n { font-variant-numeric: tabular-nums; }

/* ---------- Lists arrive one row at a time ---------- */
html.js .ui li { opacity: 0; transform: translateX(-10px); transition: opacity .45s ease, transform .45s ease; }
html.js .ui li.in { opacity: 1; transform: none; }
.q .st .a { display: none; }
html.js .q .st.wait:not(.done) .a, html.js .q .st.ok:not(.done) .a { display: inline; }
html.js .q .st:not(.done) .b { display: none; }
.q .st .a::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.2s steps(3, end) infinite; }
@keyframes dots { 0% { content: ""; } 33% { content: "."; } 66% { content: ".."; } 100% { content: "..."; } }
html.js .slack-kpis div { opacity: 0; transform: scale(.92); transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
html.js .ui.in .slack-kpis div { opacity: 1; transform: none; }
html.js .ui.in .slack-kpis div:nth-child(2) { transition-delay: .12s; }
html.js .ui.in .slack-kpis div:nth-child(3) { transition-delay: .24s; }
html.js .slack-msg ul li { opacity: 0; transform: translateY(6px); transition: opacity .4s ease .4s, transform .4s ease .4s; }
html.js .ui.in .slack-msg ul li { opacity: 1; transform: none; }
html.js .ui.in .slack-msg ul li:nth-child(2) { transition-delay: .55s; }
html.js .ui.in .slack-msg ul li:nth-child(3) { transition-delay: .7s; }
.kb .src.auto { position: relative; }
.kb .src.auto::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: var(--accent-line); transform: scaleX(0); transform-origin: left; }
html.js .ui.in .kb .src.auto::after { animation: read 1.2s ease forwards; }
@keyframes read { to { transform: scaleX(1); } }

/* ---------- Ladder track and how-it-works connector ---------- */
.ladder { position: relative; }
.ladder::before { content: ""; position: absolute; left: 8%; right: 8%; top: -22px; height: 2px; background: rgba(255, 255, 255, .12); border-radius: 2px; }
.ladder::after { content: ""; position: absolute; left: 8%; width: 84%; top: -22px; height: 2px; background: #7fd1ad; border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.2,.7,.2,1) .2s; }
.ladder.in::after { transform: scaleX(1); }
html.js .ladder li { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
html.js .ladder.in li { opacity: 1; transform: none; }
html.js .ladder.in li:nth-child(2) { transition-delay: .35s; }
html.js .ladder.in li:nth-child(3) { transition-delay: .7s; }
.how-steps { position: relative; }
.how-steps::before { content: ""; position: absolute; left: 10%; right: 10%; top: 48px; height: 2px; background: var(--line); }
.how-steps::after { content: ""; position: absolute; left: 10%; width: 80%; top: 48px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.2,.7,.2,1) .2s; }
.how-steps.in::after { transform: scaleX(1); }
.how-step { position: relative; z-index: 1; }

/* ---------- Closing: the channels, floating ---------- */
.closing-chans { list-style: none; display: flex; justify-content: center; gap: 12px; margin-top: 40px; flex-wrap: wrap; }
.closing-chans li { width: 48px; height: 48px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); display: grid; place-items: center; box-shadow: 0 12px 24px -16px rgba(28, 28, 26, .4); animation: float 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
.closing-chans img { width: 22px; height: 22px; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (max-width: 900px) {
  .ladder::before, .ladder::after, .how-steps::before, .how-steps::after { display: none; }
  .proof-item { grid-template-columns: 32px 1fr; column-gap: 10px; }
  .proof-item .ico { width: 32px; height: 32px; border-radius: 10px; }
}
/* 901-1100px: four columns are narrow here, so the stats scale down as they do at phone widths. Without this
   "15+ hrs" wrapped onto two lines and dragged its icon and caption out of line with the other three. */
@media (min-width: 901px) and (max-width: 1100px) {
  .proof-item { padding-left: 18px; padding-right: 18px; grid-template-columns: 32px 1fr; column-gap: 10px; }
  .proof-item .ico { width: 32px; height: 32px; border-radius: 10px; }
  .proof-item b { font-size: 34px; line-height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .reveal, html.js .ui li, html.js .ladder li, html.js .slack-kpis div, html.js .slack-msg ul li { opacity: 1; transform: none; transition: none; }
  html.js .chart:not(.in) .bar i { width: calc(var(--v) * 100% / 5) !important; }
  .rep .tr polyline { stroke-dashoffset: 0; transition: none; }
  .ladder::after, .how-steps::after { transform: scaleX(1); transition: none; }
  .closing-chans li { animation: none; }
  .caret, .q .st .a::after { animation: none; }
  html.js .demo-item.on { animation: none; }
}

/* keep the hero card from jumping while the draft types */
.rv-draft-text { display: block; min-height: 4.6em; }