: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)}
.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}

@media(max-width:860px){
  nav{display:none}
  .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:132px 0 108px; border-bottom:1px solid var(--line)}
.hero h1{max-width:15ch}
.hero .lede{margin-top:26px; max-width:56ch}
.cta{margin-top:38px; display:flex; gap:12px; flex-wrap:wrap}
.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}}

/* 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}
.legal{padding-top:26px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; color:#5E666E}

/* ================= inner pages ================= */
.phero{padding:96px 0 72px; border-bottom:1px solid var(--line)}
.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}