:root{
  --ink:#0B0E12; --ink-70:#40474F; --ink-45:#6B747E;
  --ground:#FAFAF8; --surface:#FFFFFF; --line:#E2E1DC;
  --accent:#B4531F;
  --col:1120px;
  --f: "Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--f); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-0.021em; line-height:1.1}
h1{font-size:clamp(2.6rem,6vw,4.4rem); letter-spacing:-0.032em}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem); letter-spacing:-0.026em}
h3{font-size:1.075rem; letter-spacing:-0.012em}
p{margin:0}
a{color:inherit}
.wrap{max-width:var(--col); margin-inline:auto; padding-inline:28px}
.eyebrow{
  font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-45);
}
.lede{font-size:clamp(1.05rem,1.55vw,1.28rem); color:var(--ink-70); line-height:1.55}

/* ---------- header ---------- */
header{position:sticky; top:0; z-index:20; background:rgba(250,250,248,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; gap:40px; height:74px}
/* The brand PNGs are cropped to the wordmark itself (485x55, no dead canvas).
   They used to be 500x200 with the letters occupying only the middle 26% of the
   height — so `height:19px` was rendering the actual glyphs at about 5px and the
   logo read as a smudge. Height here is now the real cap-height of the mark. */
.brand img{display:block; height:26px; width:auto}
nav{display:flex; gap:30px; margin-left:auto; font-size:.925rem; color:var(--ink-70)}
nav a{text-decoration:none}
nav a:hover{color:var(--ink)}
.signin{font-size:.925rem; color:var(--ink-70); text-decoration:none; margin-left:-12px; white-space:nowrap}
.signin:hover{color:var(--ink)}
/* Only where the row has room: below this the demo button would be pushed off the
   edge. The footer and the phone menu carry the same link. */
@media(max-width:1180px){.signin{display:none}}
.btn{
  display:inline-block; background:var(--accent); color:#fff; text-decoration:none;
  font-size:.925rem; font-weight:500; padding:11px 20px; border-radius:2px;
  transition:background .15s ease;
}
.btn:hover{background:#9A4416}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line); padding:10px 19px}
.btn-ghost:hover{background:#fff; border-color:var(--ink-45)}
/* ---------- mobile menu ----------
   🔴 THE NAV USED TO JUST VANISH BELOW 860px. `nav{display:none}` with nothing
   in its place meant a phone got the wordmark and the demo button and no way to
   reach Platform, Solutions, Deployment, Docs or Company except by scrolling to
   the footer and hoping the link was there. For Docs it was not there at all,
   so the entire documentation site was unreachable from a phone.

   CSS-only, via <details>. The site's only <script> is the JSON-LD block, and
   navigation is the last thing that should depend on JS running: a menu behind
   a failed script is a site with no menu, which is exactly the state being
   fixed here. <details> also gives keyboard operation and a real toggle for
   free, which a div-and-onclick would not. */
.menu{display:none; margin-left:auto; position:relative}
.menu>summary{
  list-style:none; cursor:pointer; padding:10px; margin:-10px;  /* 44px touch target */
  display:flex; align-items:center; color:var(--ink-70);
}
.menu>summary::-webkit-details-marker{display:none}   /* Safari's disclosure triangle */
.menu>summary:hover{color:var(--ink)}
.menu .bars, .menu .bars::before, .menu .bars::after{
  display:block; width:22px; height:2px; background:currentColor; border-radius:2px;
}
.menu .bars{position:relative}
.menu .bars::before, .menu .bars::after{content:""; position:absolute; left:0}
.menu .bars::before{top:-7px}
.menu .bars::after{top:7px}
/* Open state: the three bars become a cross, so the control says how to close
   itself rather than leaving the reader to guess. */
.menu[open]>summary .bars{background:transparent}
.menu[open]>summary .bars::before{top:0; transform:rotate(45deg)}
.menu[open]>summary .bars::after{top:0; transform:rotate(-45deg)}
.mnav{
  position:absolute; right:0; top:calc(100% + 14px); min-width:210px;
  /* 🔴 A <div role="navigation">, NOT a <nav>, and that is deliberate.
     Being a <nav> meant inheriting the global `nav{display:flex; gap:30px}`
     and `@media(max-width:860px){nav{display:none}}`. The first put 30px
     between every item and rendered a 78px-per-row column off the screen. The
     second was worse: any visitor holding a cached copy of the PREVIOUS
     stylesheet — 7 days, per Truehost's max-age — got the new markup with the
     old rules, which drew a bare disclosure arrow and hid the panel entirely.
     A div cannot be caught by either. The cache hash on the <link> is the real
     fix; this is what makes the stale case degrade to a plain list of links
     instead of nothing. */
  display:flex; flex-direction:column; gap:0;
  background:#fff; border:1px solid var(--line); border-radius:3px;
  box-shadow:0 12px 32px rgba(0,0,0,.10); padding:8px 0;
}
.mnav a{
  display:block; padding:12px 20px; text-decoration:none;
  font-size:.95rem; color:var(--ink-70);
}
.mnav a:hover{background:var(--paper-2, #f4f4f1); color:var(--ink)}
.mnav a[aria-current="page"]{color:var(--ink); font-weight:500}
/* The CTA is the last child and the only action among navigation. Desktop
   gives it an accent button; here it gets a rule above it and the accent
   colour, so it still reads as the thing to do rather than a sixth page. */
.mnav a:last-child{
  margin-top:8px; padding-top:16px; border-top:1px solid var(--line);
  color:var(--accent); font-weight:500;
}
.mnav a:last-child:hover{color:#9A4416}

/* 861–1000px: the full nav, the wordmark and the demo button did not fit at the desktop
   gaps and the page scrolled sideways (measured 2026-09-16, before the sign-in link). */
@media(max-width:1000px){.bar{gap:24px} nav{gap:18px}}
@media(max-width:860px){
  nav{display:none}
  .signin{display:none}          /* the menu carries "Sign in" */
  .menu{display:block}
}
/* The wordmark is very wide (8.8:1). Below ~520px it would collide with the
   "Request a demo" button once nav is hidden, so step it down there only. */
@media(max-width:520px){.bar{gap:20px} .brand img{height:21px}}
/* Under ~430px the wordmark, the demo button AND the menu control cannot share
   a row without the button wrapping. The menu wins: it reaches every page
   including Contact, so dropping the button costs a reader nothing but one tap,
   while dropping the menu is what this whole block exists to undo. */
@media(max-width:430px){.bar>.btn{display:none}}

/* ---------- hero ---------- */
.hero{padding-block:132px 108px; border-bottom:1px solid var(--line)}  /* padding-BLOCK, as .phero: the shorthand zeroed .wrap's gutter and the home hero ran to the screen edge on a phone */
.hero h1{max-width:15ch}
.hero .lede{margin-top:26px; max-width:56ch}
.cta{margin-top:38px; display:flex; gap:12px; flex-wrap:wrap}
.cta-note{margin-top:14px; font-size:.875rem; color:var(--ink-45); max-width:56ch}
.hero-meta{margin-top:64px; padding-top:26px; border-top:1px solid var(--line); display:flex; gap:56px; flex-wrap:wrap; color:var(--ink-45); font-size:.9rem}
.hero-meta b{display:block; color:var(--ink); font-weight:600; font-size:1.55rem; letter-spacing:-.02em; margin-bottom:2px}

/* ---------- product screenshots ----------
   Real screens from the demo tenant, cropped to the content area. Framed as an object on
   the ground (hairline + one soft drop), never a fake browser chrome. Width and height
   are always set on the <img> so nothing shifts while it loads. */
.shot{margin:0}
.shot .frame{border:1px solid var(--line); background:var(--surface); box-shadow:0 22px 48px -30px rgba(11,14,18,.28)}
.shot img{display:block; width:100%; height:auto}
.shot figcaption{margin-top:14px; font-size:.86rem; line-height:1.5; color:var(--ink-45); max-width:68ch}
.shot figcaption b{color:var(--ink-70); font-weight:600}
.product{padding:72px 0 104px}
.entry .shot{margin-top:34px}
.entry .shot + .shot{margin-top:26px}
.demo-note{display:block; margin-top:4px; font-size:.78rem; letter-spacing:.01em}

/* ---------- sections ---------- */
section{padding:104px 0; border-bottom:1px solid var(--line)}
.head{max-width:62ch}
.head h2{margin-bottom:18px}

/* capability grid */
.caps{margin-top:60px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.cap{background:var(--ground); padding:30px 28px 34px}
/* The grid draws its dividers with a --line background, so an unfilled trailing cell
   showed as a grey block. Eleven cards + this filler = full rows at 3 and 2 columns. */
.caps::after{content:""; background:var(--ground)}
@media(max-width:620px){.caps::after{display:none}}
.cap .n{font-size:.7rem; font-weight:600; color:var(--ink-45); letter-spacing:.12em; display:block; margin-bottom:16px}
.cap h3{margin-bottom:9px}
.cap p{font-size:.93rem; color:var(--ink-70); line-height:1.55}
.cap.opt h3::after{
  content:"Optional"; float:right; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); border:1px solid currentColor; padding:2px 6px; border-radius:2px; font-weight:600;
  position:relative; top:2px;
}
@media(max-width:900px){.caps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.caps{grid-template-columns:1fr}}
/* role band: four cards, so no filler cell at any width (4 fills rows of 4, 2 and 1) */
.caps.roles{grid-template-columns:repeat(4,1fr)}
.caps.roles::after{display:none}
.caps.roles .cap{display:flex; flex-direction:column}
.caps.roles .cap p:not(.more){flex:1}  /* the question grows, so every link sits on one line across the row */
.caps.roles .cap .more{margin-top:18px}
@media(max-width:1000px){.caps.roles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.caps.roles{grid-template-columns:1fr}}

/* verticals */
.dark{background:var(--ink); color:#EDEDEA; border-bottom:none}
.dark .lede{color:#A7ADB4}
.dark .eyebrow{color:#7C848D}
.verts{margin-top:56px; display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:#1C2128; border:1px solid #1C2128}
.vert{background:var(--ink); padding:32px 30px 36px}
.vert h3{margin-bottom:8px}
.vert .you{color:#A7ADB4; font-size:.93rem; margin-bottom:20px}
.mods{display:flex; flex-wrap:wrap; gap:7px}
.mod{font-size:.735rem; letter-spacing:.03em; padding:4px 10px; border:1px solid #2C333C; color:#C6CBD1; border-radius:2px}
.mod.up{border-color:var(--accent); color:#E8A277}
@media(max-width:760px){.verts{grid-template-columns:1fr}}

/* split */
.split{display:grid; grid-template-columns:1fr 1fr; gap:76px; align-items:start}
@media(max-width:880px){.split{grid-template-columns:1fr; gap:44px}}
.rows{border-top:1px solid var(--line)}
.row{padding:22px 0; border-bottom:1px solid var(--line)}
.row h3{margin-bottom:6px}
.row p{font-size:.93rem; color:var(--ink-70)}

/* quote */
.quote{background:var(--surface)}
.quote blockquote{margin:0; max-width:30ch; font-size:clamp(1.5rem,2.7vw,2.15rem); line-height:1.28; letter-spacing:-.022em; font-weight:500}
.attr{margin-top:30px; padding-top:20px; border-top:1px solid var(--line); font-size:.9rem; color:var(--ink-45)}
.attr b{color:var(--ink); font-weight:600}

/* close */
.close{text-align:center; padding:128px 0}
.close h2{max-width:20ch; margin-inline:auto; margin-bottom:20px}
.close .lede{max-width:52ch; margin-inline:auto}
.close .cta{justify-content:center}

footer{background:var(--ink); color:#8B939B; padding:64px 0 44px; font-size:.875rem}
.fgrid{display:flex; gap:64px; flex-wrap:wrap; padding-bottom:44px; border-bottom:1px solid #1C2128}
.fcol h4{margin:0 0 14px; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#5E666E; font-weight:600}
.fcol a{display:block; text-decoration:none; margin-bottom:8px; color:#C6CBD1}
.fcol a:hover{color:#fff}
.fbrand{margin-right:auto; max-width:30ch}
.fbrand img{height:22px; width:auto; margin-bottom:16px; display:block}
.fbrand .fbadge{display:inline-block; margin:14px 0 0}
.fbrand .fbadge img{height:auto; width:230px; max-width:100%; margin:0}
.legal{padding-top:26px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; color:#5E666E}

/* ================= inner pages ================= */
.phero{padding-block:96px 72px; border-bottom:1px solid var(--line)}  /* padding-BLOCK: the shorthand zeroed .wrap's side gutter, so every inner page ran text to the screen edge on a phone */
.phero h1{font-size:clamp(2.2rem,4.6vw,3.4rem); max-width:18ch}
.phero .lede{margin-top:22px; max-width:60ch}
.crumb{font-size:.8rem; color:var(--ink-45); margin-bottom:20px}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--ink)}

/* long-form capability / vertical entries */
.entry{padding:52px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:200px 1fr; gap:56px}
.entry:last-child{border-bottom:none}
.entry .side{font-size:.8rem; color:var(--ink-45)}
.entry .side .tag{display:inline-block; margin-top:10px; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; padding:3px 7px; border-radius:2px; border:1px solid var(--line)}
.entry .side .tag.inc{color:var(--ink-70)}
.entry .side .tag.opt{color:var(--accent); border-color:currentColor}
.entry h2{font-size:1.5rem; letter-spacing:-.02em; margin-bottom:14px}
.entry p{color:var(--ink-70); max-width:62ch}
.entry p + p{margin-top:14px}
.entry dl{margin:22px 0 0; display:grid; grid-template-columns:auto 1fr; gap:10px 22px; font-size:.92rem; max-width:62ch}
.entry dt{color:var(--ink-45); white-space:nowrap}
.entry dd{margin:0; color:var(--ink-70)}
@media(max-width:820px){.entry{grid-template-columns:1fr; gap:20px}}

/* simple prose */
.prose{max-width:68ch}
.prose h2{font-size:1.5rem; margin:44px 0 14px}
.prose h3{margin:30px 0 8px}
.prose p{color:var(--ink-70); margin-bottom:16px}
.prose ul{color:var(--ink-70); padding-left:20px; margin:0 0 16px}
.prose li{margin-bottom:8px}
.prose a{color:var(--accent)}

/* contact */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:76px; align-items:start}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr; gap:44px}}
.cbox{border:1px solid var(--line); background:var(--surface); padding:32px}
.cbox h3{margin-bottom:14px}
.cbox p{color:var(--ink-70); font-size:.95rem; margin-bottom:18px}
.mail{display:inline-block; font-size:1.15rem; font-weight:600; letter-spacing:-.01em; text-decoration:none; color:var(--accent); word-break:break-all}
.checklist{list-style:none; padding:0; margin:24px 0 0; border-top:1px solid var(--line)}
.checklist li{padding:13px 0; border-bottom:1px solid var(--line); color:var(--ink-70); font-size:.95rem}
.checklist li b{color:var(--ink); font-weight:600}

/* notice */
.notice{border-left:2px solid var(--accent); padding:14px 0 14px 20px; margin:28px 0; color:var(--ink-70); font-size:.93rem; max-width:64ch}

/* FAQ on the solution pages. <details> keeps the answers in the HTML a crawler reads
   and gives keyboard operation with no script — the site ships none. */
.faq{border-top:1px solid var(--line); padding:16px 0; max-width:62ch}
.faq:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; font-weight:600; color:var(--ink); list-style:none; position:relative; padding-right:28px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:0; top:0; color:var(--ink-45); font-weight:400}
.faq[open] summary::after{content:"\2013"}
.faq summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.faq p{margin-top:10px}
.more{margin-top:18px; font-size:.92rem}

/* A handheld screen: phone-width, so it reads at the size it is actually used. */
.shot.device{max-width:250px}
.shot.device .frame{border-radius:14px; overflow:hidden}

/* ── forms (contact, order) ─────────────────────────────────────────────── */
.form{display:grid; gap:18px; max-width:720px}
.form .fields{display:grid; gap:18px}
.form .pair{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:640px){.form .pair{grid-template-columns:1fr}}
.form label{display:grid; gap:6px; font-size:.9rem; color:var(--ink-70)}
.form input[type=text],.form input[type=email],.form input[type=tel],.form input[type=number],
.form select,.form textarea{
  font:inherit; color:var(--ink); background:#fff; border:1px solid var(--line);
  border-radius:4px; padding:10px 12px; width:100%; box-sizing:border-box}
.form textarea{min-height:120px; resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--accent); outline-offset:1px}
.form fieldset{border:1px solid var(--line); border-radius:6px; padding:14px 16px; margin:0}
.form legend{font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-45); padding:0 6px}
.form .form-privacy{font-size:.86rem; color:var(--ink-70); margin:0}
.form .choice{display:flex; gap:10px; align-items:flex-start; padding:6px 0; font-size:.93rem; color:var(--ink)}
.form .choice input{margin-top:4px}
.form .choice small{display:block; color:var(--ink-45); font-size:.82rem}
.form .choice input:disabled + span{opacity:.45}
.form .hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
.form button[disabled]{opacity:.6; cursor:wait}
.estimate-box{border-left:3px solid var(--accent); padding:10px 14px; background:#fff}
.estimate{font-weight:600; font-size:1.05rem}
.estimate-note{font-size:.82rem; color:var(--ink-45); margin-top:4px}
.form-status{font-size:.92rem; min-height:1.4em}
.form-status.ok{color:#1F7A3A; font-weight:500}
.form-status.error{color:#A32A1F}
.form.sent .fields{display:none}

/* ── API reference (/docs/api/) ─────────────────────────────────────────── */
.apiref .apimeta{display:grid; grid-template-columns:max-content 1fr; gap:8px 20px; margin:24px 0 32px; color:var(--ink-70)}
.apiref .apimeta dt{font-weight:600; color:var(--ink)}
.apiref code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88em; background:rgba(127,127,127,.12); padding:1px 5px; border-radius:3px; overflow-wrap:anywhere}
.apiref pre.code{background:#0F1318; color:#E6E8EA; padding:14px 16px; border-radius:6px; overflow-x:auto; font-size:.82rem; line-height:1.5; margin:8px 0 18px; max-width:100%}
.apitoc{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:8px 28px; border:1px solid var(--line); padding:18px 20px; margin:0 0 40px}
.apitoc h3{font-size:.95rem; margin:6px 0}
.apitoc ul{list-style:none; padding:0; margin:0 0 8px}
.apitoc li{margin:4px 0; font-size:.88rem; overflow-wrap:anywhere}
.apitoc a{color:var(--ink-70); text-decoration:none}
.apitoc a:hover{color:var(--accent)}
.apiref .verb{display:inline-block; min-width:3.6em; font-family:ui-monospace,Menlo,monospace; font-size:.78em; font-weight:700; color:var(--accent)}
.apitag{font-size:1.8rem; margin:56px 0 6px; padding-top:16px; border-top:1px solid var(--line)}
.apiop{padding:26px 0; border-bottom:1px solid var(--line); scroll-margin-top:90px}
.apiop h3{font-size:1.05rem; overflow-wrap:anywhere}
.apiop h3 code{background:none; padding:0; font-size:1em}
.apiop .apisum{font-weight:600; margin:6px 0}
.apiop p{color:var(--ink-70); max-width:72ch; margin:6px 0}
.apiop h4{font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; margin:18px 0 4px; color:var(--ink-45)}
.apiop h4 small{text-transform:none; letter-spacing:0; font-weight:400}
.apiop dl{display:grid; grid-template-columns:minmax(120px,max-content) 1fr; gap:6px 18px; margin:14px 0; font-size:.92rem}
.apiop dt small{color:var(--ink-45); font-weight:400}
.apiop dd{color:var(--ink-70); margin:0}
.apiop .status{font-family:ui-monospace,Menlo,monospace; font-weight:700; color:var(--ink)}
.apierr{padding-left:18px; color:var(--ink-70); font-size:.92rem}
@media (max-width:640px){
  .apiref .apimeta, .apiop dl{grid-template-columns:1fr}
  .apiop dd{margin-bottom:6px}
}

/* Optional "help us understand" questions on the forms */
.form fieldset.feedback{display:grid; gap:12px}
.form label small{color:var(--ink-45); font-size:.8rem}