/* Result Studio marketing site.
   Design language: near-black and warm cream in alternating full-width bands, gold as
   the only accent, huge tight headlines, mono uppercase eyebrows and button labels.
   No frameworks. Everything the pages need lives here. */

:root {
  --ink: #0E0E0E;
  --ink-2: #171614;
  --ink-3: #201e1a;
  --cream: #F6F2E9;
  --cream-2: #EDE6D6;
  --gold: #F2B33D;
  --gold-soft: rgba(242, 179, 61, 0.14);
  --on-dark: #f4f1ea;
  --on-dark-muted: #a9a294;
  --on-light: #171410;
  --on-light-muted: #6e675a;
  --line-dark: rgba(244, 241, 234, 0.12);
  --line-light: rgba(23, 20, 16, 0.12);
  --radius: 20px;
  --font-sans: 'Geist', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist', -apple-system, 'Segoe UI', sans-serif; /* was Geist Mono; retired 2026-08-04 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--ink);
  color: var(--on-dark);
  font-size: 17px;
  letter-spacing: -0.02em;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 880px; }

/* ---------------------------------------------------------------- type */

h1, h2, h3 { font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; }
h1 { font-size: clamp(42px, 7vw, 82px); letter-spacing: -0.04em; }
h2 { font-size: clamp(32px, 4.6vw, 54px); }
h3 { font-size: clamp(19px, 2vw, 23px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }

.lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.65; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
}
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

.muted { color: var(--on-dark-muted); }
.section--light .muted { color: var(--on-light-muted); }

/* ---------------------------------------------------------------- buttons */

.btn {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 17px 28px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: #f7c35d; }
.btn--ghost-dark { background: transparent; color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--line-dark); }
.btn--ghost-dark:hover { background: rgba(244, 241, 234, 0.07); }
.btn--ghost-light { background: transparent; color: var(--on-light); box-shadow: inset 0 0 0 1px var(--line-light); }
.btn--ghost-light:hover { background: rgba(23, 20, 16, 0.06); }
.btn--ink { background: var(--ink); color: var(--on-dark); }
/* A ghost button on the cream band. .btn--ghost-dark paints near-white text,
   which on cream is invisible: the "What this setup gives you" buttons on the
   whole of /for were unreadable and the page just looked empty. The markup has
   been corrected to --ghost-light, and this keeps the failure from being
   silent if the wrong one is ever used again. */
.section--light .btn--ghost-dark {
  color: var(--on-light);
  box-shadow: inset 0 0 0 1px var(--line-light);
}
.section--light .btn--ghost-dark:hover { background: rgba(23, 20, 16, 0.06); }
.btn--ink:hover { background: #242220; }

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(14, 14, 14, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-dark);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: 74px;
}
.site-header__logo img { height: 26px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav a {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--on-dark-muted);
  transition: color 0.15s ease;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--on-dark); }
.site-header__cta { display: flex; align-items: center; gap: 12px; }
.site-header__cta .btn { padding: 12px 20px; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  color: var(--on-dark);
  align-items: center;
  justify-content: center;
}

/* Product dropdown */
.nav-item--product { position: relative; }
/* The panel floats 16px below the trigger. Without this bridge, the pointer loses the
   hover while crossing that gap and the menu vanishes before it can be reached. */
.nav-item--product::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -30px;
  right: -30px;
  height: 22px;
}
.nav-dropdown {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  padding: 10px;
  min-width: 250px;
  display: none;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.nav-item--product:hover .nav-dropdown,
.nav-item--product:focus-within .nav-dropdown { display: block; }
.nav-dropdown a {
  display: block;
  padding: 11px 14px;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-dark);
}
.nav-dropdown a span { display: block; font-size: 12.5px; color: var(--on-dark-muted); margin-top: 1px; }
.nav-dropdown a:hover { background: rgba(244, 241, 234, 0.06); }


/* Mega menu. The product dropdown is a single column of five; "Who it is for"
   is ten verticals, which needs columns or it becomes a scroll. Same hover
   bridge and the same panel styling, laid out as a grid instead of a list. */
.nav-dropdown--mega {
  min-width: 620px;
  padding: 18px;
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
}
.nav-item--product:hover .nav-dropdown--mega,
.nav-item--product:focus-within .nav-dropdown--mega { display: grid; }
.nav-dropdown--mega .mega-head {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--on-dark-muted);
  padding: 6px 14px 8px;
}
.nav-dropdown--mega .mega-foot {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line-dark);
}

/* Legal footer. Three quiet lines that have to be on every page. */
.site-footer__legal { flex-direction: column; align-items: flex-start; gap: 14px; }
.site-footer__legal-links { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer__legal-links a { color: var(--on-dark-muted); text-decoration: none; font-size: 14px; }
.site-footer__legal-links a:hover { color: var(--on-dark); }
.site-footer__company { display: flex; flex-direction: column; gap: 4px; }
.site-footer__company span { font-size: 13px; color: var(--on-dark-muted); opacity: 0.75; line-height: 1.6; }

/* ------------------------------------------------------------------ pricing */

.page-hero--tight { padding-bottom: clamp(20px, 3vw, 40px); }

/* Beta terms sit above the cards on purpose: the price is meaningless until
   somebody knows it is currently zero. */
.beta-banner {
  margin-top: 34px;
  max-width: 620px;
  background: rgba(242, 179, 61, 0.08);
  border: 1px solid rgba(242, 179, 61, 0.3);
  border-radius: 16px;
  padding: 18px 22px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--on-dark-muted);
}
.beta-banner strong { color: var(--gold); font-weight: 600; }

.price-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  margin: 0 auto 40px;
}
.price-toggle__btn {
  border: 0;
  background: none;
  color: var(--on-dark-muted);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.price-toggle__btn.is-active { background: var(--gold); color: var(--ink); }
.price-toggle__save { font-size: 12px; opacity: 0.85; }
.price-toggle { display: flex; width: max-content; }

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.price-card {
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: 20px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* The recommended plan is lifted rather than recoloured, so the gold stays
   meaningful as the action colour rather than becoming decoration. */
.price-card--featured { border-color: rgba(242, 179, 61, 0.45); }
.price-card__flag {
  position: absolute;
  top: -11px;
  left: 26px;
  background: var(--gold);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
}
.price-card h3 { font-size: 20px; margin: 0; }
.price-card__who { font-size: 14px; color: var(--on-dark-muted); margin: 0 0 10px; min-height: 40px; }
.price-card__price { display: flex; align-items: baseline; gap: 8px; }
.price-card__amount { font-size: 40px; font-weight: 600; letter-spacing: -1.5px; }
.price-card__unit { font-size: 14px; color: var(--on-dark-muted); }
.price-card__billing { font-size: 13px; color: var(--on-dark-muted); margin: 0 0 6px; }
.price-card__cta { width: 100%; margin: 10px 0 6px; }
.price-card__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.price-card__list li {
  font-size: 14.5px;
  color: var(--on-dark-muted);
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}
.price-card__list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 7px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}
.price-note {
  text-align: center;
  margin-top: 30px;
  font-size: 14.5px;
  color: var(--on-dark-muted);
}

@media (max-width: 900px) {
  .price-grid { grid-template-columns: 1fr; }
  .price-card__who { min-height: 0; }
  .price-toggle { margin-left: 0; }
}

/* ----------------------------------------------------------------- trust */

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.trust-card {
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: 18px;
  padding: 26px 24px;
}
.trust-card h3 { font-size: 17px; margin: 0 0 10px; }
.trust-card p { font-size: 14.5px; line-height: 1.65; color: var(--on-dark-muted); margin: 0; }

.doc-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.doc-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  text-decoration: none;
  color: var(--on-dark);
  background: var(--ink-2);
}
.doc-link:hover { border-color: rgba(242, 179, 61, 0.45); }
.doc-link strong { font-size: 16px; font-weight: 600; }
.doc-link span { font-size: 14px; color: var(--on-dark-muted); line-height: 1.6; }

/* ------------------------------------------------------------------ legal */

/* Long-form legal reads badly at body-copy width and worse in the dark grey
   used for supporting text, so it gets a measure and a lighter tone. */
.legal-body { font-size: 16px; line-height: 1.75; color: var(--on-dark-muted); }
.legal-body h2 { font-size: 21px; margin: 44px 0 14px; color: var(--on-dark); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { margin: 0 0 16px; }
.legal-body ul { margin: 0 0 18px; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.legal-body strong { color: var(--on-dark); font-weight: 600; }
.legal-body a { color: var(--gold); }
.legal-table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; }
.legal-table th, .legal-table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-dark);
}
.legal-table th { color: var(--on-dark); font-weight: 600; width: 30%; }
.legal-table tr:first-child th { width: auto; }

/* ------------------------------------------------------ status & changelog */

.status-head--operational { color: var(--on-dark); }
.status-head--degraded, .status-head--down { color: #f0a04a; }

.status-list { display: flex; flex-direction: column; gap: 14px; }
.status-row {
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  padding: 22px 24px;
}
.status-row__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.status-row__top strong { display: block; font-size: 16px; }
.status-row__top span { display: block; font-size: 13.5px; color: var(--on-dark-muted); margin-top: 3px; }
.status-row__detail { font-size: 13.5px; color: var(--on-dark-muted); margin: 12px 0 0; }

.pill {
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.pill--operational { background: rgba(46, 157, 99, 0.15); color: #4cc98a; border-color: rgba(46, 157, 99, 0.3); }
.pill--degraded { background: rgba(240, 160, 74, 0.14); color: #f0a04a; border-color: rgba(240, 160, 74, 0.3); }
.pill--down { background: rgba(224, 93, 79, 0.14); color: #ff8b8f; border-color: rgba(224, 93, 79, 0.3); }
.pill--unknown { background: rgba(244, 241, 234, 0.07); color: var(--on-dark-muted); border-color: var(--line-dark); }

/* Ninety day bars. Hollow means no reading, which is not the same as healthy. */
.bars { display: flex; gap: 2px; margin-top: 16px; height: 30px; align-items: stretch; }
.bar { flex: 1; border-radius: 2px; min-width: 2px; }
.bar--ok { background: rgba(46, 157, 99, 0.7); }
.bar--warn { background: rgba(240, 160, 74, 0.8); }
.bar--bad { background: rgba(224, 93, 79, 0.85); }
.bar--nodata { background: rgba(244, 241, 234, 0.07); }
.bars-legend { display: flex; justify-content: space-between; margin-top: 7px; font-size: 12px; color: var(--on-dark-muted); opacity: 0.7; }

.status-meta { margin-top: 22px; font-size: 13.5px; color: var(--on-dark-muted); }

.incident { background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: 16px; padding: 20px 22px; margin-bottom: 12px; }
.incident__head { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.incident__when { font-size: 13px; color: var(--on-dark-muted); margin: 6px 0 10px; }

.release { border-bottom: 1px solid var(--line-dark); padding: 0 0 32px; margin-bottom: 32px; }
.release:last-child { border-bottom: 0; }
.release__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.release__head strong { font-size: 21px; }
.release__date { font-size: 14px; color: var(--on-dark-muted); }
.release__platforms { display: flex; gap: 6px; }
.platform { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(244, 241, 234, 0.07); color: var(--on-dark-muted); }
.release__summary { color: var(--on-dark-muted); margin: 10px 0 16px; font-size: 15.5px; }
.release__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.release__list li { display: flex; gap: 12px; align-items: flex-start; }
.tag {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 6px;
  min-width: 66px;
  text-align: center;
}
.tag--added { background: rgba(46, 157, 99, 0.15); color: #4cc98a; }
.tag--improved { background: rgba(242, 179, 61, 0.14); color: var(--gold); }
.tag--fixed { background: rgba(244, 241, 234, 0.08); color: var(--on-dark-muted); }
.tag--security { background: rgba(224, 93, 79, 0.14); color: #ff8b8f; }
.change { font-size: 15px; line-height: 1.6; color: var(--on-dark-muted); }
.change strong { color: var(--on-dark); font-weight: 600; }
.release--compact { border: 0; padding: 0 0 18px; margin: 0 0 18px; }
.release--compact p { color: var(--on-dark-muted); margin: 8px 0 0; font-size: 15px; }
.muted { color: var(--on-dark-muted); }

/* ------------------------------------------------------------------- help */

.help-search {
  width: 100%;
  margin-top: 30px;
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  padding: 15px 18px;
  color: var(--on-dark);
  font-family: var(--font-sans);
  font-size: 16px;
  outline: none;
}
.help-search:focus { border-color: rgba(242, 179, 61, 0.5); }
.help-search::placeholder { color: var(--on-dark-muted); opacity: 0.7; }

.help-search-form { margin: 0; }

.help-crumbs {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 14px; color: var(--on-dark-muted); margin-bottom: 14px;
}
.help-crumbs a { color: var(--on-dark-muted); text-decoration: none; }
.help-crumbs a:hover { color: var(--gold); }

/* The index: one card per category, so the shape of the whole thing is visible
   at a glance rather than as a wall of accordions. */
.help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.help-cat-card {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: var(--ink-2);
  padding: 24px 24px 22px;
}
.help-cat-card h2 { font-size: 19px; margin: 0 0 6px; }
.help-cat-card h2 a { color: var(--on-dark); text-decoration: none; }
.help-cat-card h2 a:hover { color: var(--gold); }
.help-cat__blurb { color: var(--on-dark-muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 16px; }
.help-cat-list { list-style: none; margin: 0; padding: 0; }
.help-cat-list li { margin-bottom: 9px; }
.help-cat-list a { color: var(--on-dark); text-decoration: none; font-size: 15px; }
.help-cat-list a:hover { color: var(--gold); }
.help-more { display: inline-block; margin-top: 6px; color: var(--gold); font-size: 14px; text-decoration: none; }

/* A list of articles with their summaries. Used for a category page and for
   search results, because they answer the same question. */
.help-index { list-style: none; margin: 0; padding: 0; }
.help-index li { margin-bottom: 10px; }
.help-index a {
  display: block;
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  background: var(--ink-2);
  padding: 17px 20px;
  text-decoration: none;
}
.help-index a:hover { border-color: rgba(242, 179, 61, 0.4); }
.help-index strong { display: block; font-size: 16px; font-weight: 600; color: var(--on-dark); margin-bottom: 3px; }
.help-index span { font-size: 14px; line-height: 1.6; color: var(--on-dark-muted); }

/* An article page: body and a sticky column of navigation. */
.help-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 46px; align-items: start; }
@media (max-width: 900px) { .help-layout { grid-template-columns: 1fr; gap: 34px; } }

.help-article-body { max-width: 720px; font-size: 16.5px; line-height: 1.75; color: var(--on-dark); }
.help-article-body p { margin: 0 0 18px; color: var(--on-dark-muted); }
.help-article-body h2 { font-size: 23px; margin: 40px 0 12px; letter-spacing: -0.02em; }
.help-article-body h3 { font-size: 18px; margin: 28px 0 10px; }
.help-article-body a { color: var(--gold); }
.help-article-body code {
  font-family: var(--font-mono);
  background: var(--ink-3);
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 0.9em;
}
.help-list, .help-steps { margin: 0 0 20px; padding-left: 22px; color: var(--on-dark-muted); }
.help-list li, .help-steps li { margin-bottom: 9px; }
.help-steps { counter-reset: step; list-style: none; padding-left: 0; }
.help-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 40px;
  margin-bottom: 14px;
}
/* Numbered steps get a real numeral rather than a bullet: instructions are read
   by someone following along, and "I am on 4" has to be answerable. */
.help-steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold-soft);
  border: 1px solid rgba(242, 179, 61, 0.35);
  color: var(--gold);
  font-size: 13px; font-weight: 600;
}

.help-shot { margin: 26px 0 30px; }
.help-shot a { display: block; cursor: zoom-in; }
.help-shot img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  background: var(--ink-2);
}
.help-shot figcaption { font-size: 13.5px; color: var(--on-dark-muted); margin-top: 9px; }

.help-callout {
  display: flex; gap: 12px;
  border: 1px solid var(--line-dark);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  background: var(--ink-2);
  padding: 15px 18px;
  margin: 22px 0;
  font-size: 15px; line-height: 1.65;
}
.help-callout b { color: var(--gold); white-space: nowrap; font-weight: 600; }
.help-callout div { color: var(--on-dark-muted); }
.help-callout--warning { border-left-color: #e0715a; }
.help-callout--warning b { color: #e0715a; }

.help-table-wrap { overflow-x: auto; margin: 22px 0; }
.help-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.help-table th, .help-table td {
  text-align: left; padding: 11px 14px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--on-dark-muted);
}
.help-table th { color: var(--on-dark); font-weight: 600; white-space: nowrap; }

.help-related { margin-top: 52px; }
.help-related h2 { margin-bottom: 16px; }

.help-aside { position: sticky; top: 96px; display: grid; gap: 20px; }
.help-toc b, .help-ask b { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--on-dark-muted); margin-bottom: 10px; }
.help-toc ul { list-style: none; margin: 0; padding: 0; }
.help-toc li { margin-bottom: 8px; }
.help-toc a { color: var(--on-dark); text-decoration: none; font-size: 14.5px; line-height: 1.5; display: block; }
.help-toc a:hover { color: var(--gold); }
.help-ask { border: 1px solid var(--line-dark); border-radius: 14px; padding: 18px; background: var(--ink-2); }
.help-ask p { font-size: 14px; line-height: 1.6; color: var(--on-dark-muted); margin: 0 0 14px; }
.btn--sm { padding: 9px 16px; font-size: 14px; }

/* Live status pill in the footer. The dot pulses only when something is wrong,
   so a healthy site stays quiet and a problem draws the eye. */
.status-dot-link { display: inline-flex; align-items: center; gap: 8px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot--operational { background: #4cc98a; }
.status-dot--degraded { background: #f0a04a; animation: statusPulse 2s ease-in-out infinite; }
.status-dot--down { background: #ff8b8f; animation: statusPulse 1.4s ease-in-out infinite; }
.status-dot--unknown { background: var(--on-dark-muted); opacity: 0.5; }
@keyframes statusPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .status-dot { animation: none; } }

/* ---------------------------------------------------------------- sections */

.section { padding: clamp(64px, 9vw, 118px) 0; }
.section--light { background: var(--cream); color: var(--on-light); }
.section--tight { padding: clamp(44px, 6vw, 76px) 0; }

.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head--split {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.section-head--split > div { max-width: 700px; }

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  padding: clamp(84px, 12vw, 170px) 0 clamp(60px, 8vw, 110px);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: -40% -20% auto;
  height: 130%;
  background:
    radial-gradient(52% 44% at 68% 22%, rgba(242, 179, 61, 0.17), transparent 62%),
    radial-gradient(40% 36% at 22% 74%, rgba(242, 179, 61, 0.07), transparent 60%);
  pointer-events: none;
  /* Above the photo, below the content. */
  z-index: 1;
}
/* The team photo, as a soft vignette in the top right rather than a section
   background: sizing a full-frame portrait shot with `cover` over a tall hero
   turns faces into texture. The radial mask fades it out in every direction, so
   it needs no seam-hiding washes and the gold glow paints over it untouched. */
.hero::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(520px, 62vw, 1080px);
  aspect-ratio: 1940 / 1243;
  background: url('/site-assets/hero-team.webp') center / cover no-repeat;
  opacity: 0.42;
  -webkit-mask-image: radial-gradient(88% 82% at 68% 32%, rgba(0, 0, 0, 1) 28%, transparent 70%);
  mask-image: radial-gradient(88% 82% at 68% 32%, rgba(0, 0, 0, 1) 28%, transparent 70%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero h1 { max-width: 15ch; }
.hero .lead { max-width: 560px; margin: 26px 0 36px; color: var(--on-dark-muted); }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__note { margin-top: 18px; font-size: 14px; color: var(--on-dark-muted); }

/* Product frame (browser chrome around a screenshot) */
.frame {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  background: var(--ink-2);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
}
.section--light .frame { border-color: var(--line-light); box-shadow: 0 30px 70px rgba(23, 20, 16, 0.18); }
.frame__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-dark);
  background: rgba(244, 241, 234, 0.03);
}
.frame__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(244, 241, 234, 0.16); }
.frame > img {
  /* No aspect-ratio and no cropping. Every screenshot is captured trimmed to its
     own content by scripts/shots, so its proportions are already the right ones.
     Forcing a single ratio here re-cropped them all a second time: a tall panel
     lost its bottom half, and a short one got padded back out with the dead
     space the capture had just removed. */
  display: block;
  width: 100%;
  height: auto;
}
.frame__bar span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--on-dark-muted);
  margin-left: 10px;
  letter-spacing: 0.04em;
}
.hero__frame { margin-top: clamp(44px, 6vw, 72px); }

/* ---------------------------------------------------------------- stats */

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.stats b {
  display: block;
  font-size: clamp(38px, 4.6vw, 58px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 10px;
}
.stats span { font-size: 15px; color: var(--on-dark-muted); }
.section--light .stats span { color: var(--on-light-muted); }

/* ---------------------------------------------------------------- replaces marquee */

.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 14px; width: max-content; animation: marquee 30s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
.chip {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 15px 26px;
  border-radius: 999px;
  background: rgba(244, 241, 234, 0.05);
  border: 1px solid var(--line-dark);
  color: var(--on-dark-muted);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- cards */

.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card {
  border-radius: var(--radius);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
a.card:hover { transform: translateY(-4px); }
.section--light .card { background: var(--cream-2); color: var(--on-light); }
.section--light a.card:hover { box-shadow: 0 18px 44px rgba(23, 20, 16, 0.14); }
.section:not(.section--light) .card { background: var(--ink-2); border: 1px solid var(--line-dark); }
.card p { font-size: 15.5px; line-height: 1.6; }
.card .card__more {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--gold);
}
.section--light .card .card__more { color: var(--on-light); }

.icon-chip {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-chip svg { width: 22px; height: 22px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.section:not(.section--light) .icon-chip { background: var(--gold-soft); }

/* ---------------------------------------------------------------- split (how it works) */

.split { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius); overflow: hidden; }
.split__text { background: var(--ink); padding: clamp(34px, 5vw, 70px); display: flex; flex-direction: column; }
.split__media { min-height: 340px; position: relative; background: var(--ink-3); }
.split__media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__count {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--on-dark-muted);
  margin-bottom: auto;
  padding-bottom: 44px;
}
.split__count b { color: var(--gold); font-size: 26px; font-weight: 600; }
.split h3 { font-size: clamp(26px, 3vw, 40px); font-weight: 400; letter-spacing: -0.02em; color: var(--gold); margin-bottom: 14px; }
.split p { color: var(--on-dark-muted); max-width: 42ch; }

/* ------------------------------------------------------------ sector photos

   Photographs of the trade, as opposed to the .frame treatment used for
   screenshots. Deliberately different: a screenshot is a claim about the
   product and gets a browser chrome around it, a photograph is there to say
   "this page is about you" and should read as a photograph. Same radius and
   border as .frame so they sit in the same family, no title bar, and a fixed
   aspect so a page does not jump around while the image loads. */

.sector-photo {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  background: var(--ink-2);
  position: relative;
}
.section--light .sector-photo { border-color: var(--line-light); }
.sector-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Beside the copy in a feature row, matching the 3:2 the photographs are shot at. */
.feature-row .sector-photo { aspect-ratio: 3 / 2; }

/* Sector photo in a vertical page's hero.

   The same treatment as the homepage team photo, on purpose: low opacity over
   the ink, radial-masked so it dissolves in every direction, gold glow painting
   over the top, headline in front. The first version of this was a bordered
   full-width card wedged between the hero and the first section, which read as
   an image dumped on the page: a photograph in this design is atmosphere, not
   an exhibit. The image arrives per page in the --sector-photo custom property
   so one rule serves all nine verticals. */

.page-hero--photo::before { z-index: 1; }
.page-hero--photo::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(520px, 60vw, 1040px);
  aspect-ratio: 3 / 2;
  background: var(--sector-photo) center / cover no-repeat;
  opacity: 0.42;
  -webkit-mask-image: radial-gradient(88% 82% at 68% 32%, rgba(0, 0, 0, 1) 28%, transparent 70%);
  mask-image: radial-gradient(88% 82% at 68% 32%, rgba(0, 0, 0, 1) 28%, transparent 70%);
  pointer-events: none;
}
.page-hero--photo .container { z-index: 1; }

/* ---------------------------------------------------------------- feature rows */

.feature-row {
  display: grid;
  /* Weighted towards the picture. These are screenshots of real interface, and
     every 30px the column gains is 30px of legibility in text that is already
     small by the time it is on the page. */
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
  padding: clamp(36px, 5vw, 60px) 0;
}
/* A row with no screenshot beside it. Used where the claim is about something
   there is no picture of yet: better an honest block of text than a picture of
   the wrong thing. The list goes to two columns so it does not run as one long
   thin ribbon down a full-width row. */
.feature-row--solo { grid-template-columns: 1fr; max-width: 780px; }
.feature-row--solo ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 26px; }
.feature-row + .feature-row { border-top: 1px solid var(--line-light); }
.section:not(.section--light) .feature-row + .feature-row { border-top-color: var(--line-dark); }
/* Mirror the column widths as well as the order. Setting only `order` left the
   picture in the 1fr column on every flipped row, so alternating rows showed
   the screenshot a third smaller than the row above for no reason. */
.feature-row--flip { grid-template-columns: 1.35fr 1fr; }
.feature-row--flip .feature-row__text { order: 2; }
.feature-row h3 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 400; letter-spacing: -0.02em; margin-bottom: 14px; }
.feature-row p { margin-bottom: 12px; }
.feature-row ul { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.feature-row li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; }
.feature-row li::before {
  content: '';
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E0E0E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* ---------------------------------------------------------------- quote */

.quote { text-align: center; max-width: 900px; margin: 0 auto; }
.quote blockquote { font-size: clamp(24px, 3.4vw, 40px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.25; }
.quote figcaption { margin-top: 28px; font-size: 15px; }
.quote figcaption b { display: block; font-size: 16px; }

/* ---------------------------------------------------------------- FAQ */

.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details {
  border-radius: 16px;
  padding: 22px 26px;
  background: var(--cream-2);
}
.section:not(.section--light) .faq details { background: var(--ink-2); border: 1px solid var(--line-dark); }
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 22px; font-weight: 400; color: var(--gold); transition: transform 0.2s ease; flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 14px; font-size: 15.5px; line-height: 1.65; }
.section--light .faq details p { color: var(--on-light-muted); }
.section:not(.section--light) .faq details p { color: var(--on-dark-muted); }

/* ---------------------------------------------------------------- big CTA */

.big-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(80px, 11vw, 150px) 0;
}
.big-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 50% 115%, rgba(242, 179, 61, 0.22), transparent 65%),
    radial-gradient(45% 40% at 82% -10%, rgba(242, 179, 61, 0.08), transparent 60%);
}
.big-cta .container { position: relative; }
.big-cta h2 { max-width: 18ch; margin: 0 auto 18px; }
.big-cta p { max-width: 52ch; margin: 0 auto 34px; color: var(--on-dark-muted); }
.big-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------- footer */

.site-footer { border-top: 1px solid var(--line-dark); padding-top: clamp(50px, 7vw, 84px); overflow: hidden; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 36px;
  padding-bottom: clamp(40px, 6vw, 70px);
}
.site-footer__brand img { height: 26px; width: auto; margin-bottom: 16px; }
.site-footer__brand p { font-size: 14.5px; color: var(--on-dark-muted); max-width: 30ch; }
.site-footer h4 {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--gold);
  margin-bottom: 18px;
}
.site-footer ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.site-footer ul a { text-decoration: none; font-size: 15px; color: var(--on-dark-muted); }
.site-footer ul a:hover { color: var(--on-dark); }
.site-footer__legal {
  border-top: 1px solid var(--line-dark);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--on-dark-muted);
}
.site-footer__wordmark {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.16;
  margin-bottom: -6%;
  pointer-events: none;
  user-select: none;
}

/* ---------------------------------------------------------------- forms */

.form-grid { display: flex; flex-direction: column; gap: 16px; }
.form-grid label { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.01em; display: block; margin-bottom: 7px; }
.form-grid input, .form-grid textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line-light);
  background: #fff;
  color: var(--on-light);
}
.form-grid input:focus, .form-grid textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; }
.form-note { font-size: 14px; }

/* ---------------------------------------------------------------- page hero (inner pages) */

.page-hero { padding: clamp(64px, 9vw, 120px) 0 clamp(40px, 6vw, 70px); position: relative; overflow: hidden; }
.page-hero::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto;
  height: 120%;
  background: radial-gradient(46% 42% at 76% 10%, rgba(242, 179, 61, 0.13), transparent 62%);
  pointer-events: none;
}
.page-hero .container { position: relative; }
.page-hero h1 { font-size: clamp(38px, 5.6vw, 68px); max-width: 17ch; }
.page-hero .lead { max-width: 620px; margin-top: 24px; color: var(--on-dark-muted); }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 960px) {
  .card-grid, .card-grid--3 { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .split__media { min-height: 260px; order: -1; }
  .feature-row { grid-template-columns: 1fr; }
  .feature-row--flip .feature-row__text { order: 0; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .site-nav {
    display: none;
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink-2);
    border-bottom: 1px solid var(--line-dark);
    padding: 10px 24px 18px;
    /* The menu is taller than a phone screen: five product links, ten industries and
       the rest. It hangs off a sticky header, so the page scrolling underneath never
       brings the bottom of it into view. Without a height bound and its own scroll,
       everything past the fold is simply unreachable. */
    max-height: calc(100vh - 74px);
    max-height: calc(100dvh - 74px);   /* dvh excludes mobile browser chrome */
    overflow-y: auto;
    /* Stop a flick at the end of the menu from scrolling the page behind it. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Clear of the home indicator on a notched phone. */
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
  .site-nav.open { display: flex; }
  /* The chat widget injects a launcher and an iframe fixed above everything else. On a
     phone they cover the open menu, so they step aside while it is open. Both ids come
     from our own widget.js loader. */
  body.nav-open #pipeline-chat-bubble,
  body.nav-open iframe[src*="chat-widget"] { display: none !important; }
  .site-nav > a, .nav-item--product > a { display: block; padding: 13px 0; }
  .nav-item--product .nav-dropdown,
  .nav-item--product .nav-dropdown--mega {
    position: static;
    transform: none;
    display: block;
    grid-template-columns: none;
    border: 0;
    background: none;
    box-shadow: none;
    padding: 0 0 6px 14px;
    min-width: 0;
  }
  .nav-dropdown--mega .mega-head { padding: 10px 0 4px; }
  .nav-dropdown--mega .mega-foot { border: 0; padding-top: 0; margin-top: 0; }
  /* No empty corner for the photo on a phone: it sits straight behind the
     headline, so it drops to a faint wash rather than competing with the text. */
  .hero::after { opacity: 0.14; }
  .page-hero--photo::after { opacity: 0.14; }
  .nav-toggle { display: inline-flex; }
  .site-header__cta .btn--ghost-dark { display: none; }
  .card-grid, .card-grid--3 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; gap: 26px; }
  .hero__actions .btn, .big-cta__actions .btn { width: 100%; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ------------------------------------------------------- entrance animations */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0.001;
    transform: translateY(24px);
    filter: blur(8px);
    transition:
      opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
      filter 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0s);
  }
  .reveal--in { opacity: 1; transform: none; filter: none; }

  .hero-word {
    display: inline-block;
    opacity: 0.001;
    transform: translateY(14px);
    filter: blur(10px);
    transition:
      opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
      filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0s);
  }
  .hero-word--in { opacity: 1; transform: none; filter: none; }
}