/* KOTAN.ai — Graphite scheme (sophisticated, AI-native, restrained).
   This is the live site palette. Regenerate with build/themes.py from
   build/styles.base.css, then build/livecss.py to copy it here. */
/* ==========================================================================
   SHARED DESIGN SYSTEM — video distribution / ad monetization platform
   Wireframe / structural grid aesthetic. No cards, no shadows, no gradients.
   ========================================================================== */

:root{
  --bg:        #0E111C;   /* deep onyx page background */
  --bg-raised: #171B2B;   /* very slightly lifted panel bg (still flat) */
  --line:      #282D3D;   /* structural grid border */
  --line-soft: #1D2231;   /* faint divider */
  --text:      #E7E9EE;   /* primary text */
  --text-dim:  #C4C9D4;   /* secondary headline text */
  --muted:     #8891A0;   /* body copy on dark */
  --faint:     #565E6C;   /* tertiary / disclaimers */
  --accent:    #C7CDD9;   /* emerald — data increases, active state only */
  --accent-dim: #7C8496;
  --graphite:  #23262E;   /* footer surface */
  --graphite-line: #343842;
  /* Inter for display and body, JetBrains Mono for the label layer — matching
     the KOTAN.ai reference design. --serif is an alias kept so any older
     markup still resolves; it is not a serif. */
  --display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif:   var(--display);
  --mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --maxw: 1320px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{background:var(--bg);scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;          /* scaled up from 15px */
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
ul,ol{list-style:none;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

/* ---------- typography ---------- */
/* Inter needs more weight and tighter tracking than a grotesque at display
   sizes to read with the same authority. */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-0.028em;
  color:var(--text);
}
h1{font-size:clamp(44px,5.2vw,74px);line-height:1.03;}
h2{font-size:clamp(32px,3.6vw,50px);line-height:1.1;letter-spacing:-0.025em;}
h3{font-size:23px;line-height:1.3;font-weight:700;letter-spacing:-0.018em;}
h4{letter-spacing:-0.01em;}
p{color:var(--muted);}
.lead{font-size:19px;line-height:1.62;color:var(--muted);max-width:560px;}

/* mono labels / kickers / tags */
.mono{font-family:var(--mono);}
.kicker{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  display:inline-block;
}
.kicker.on{color:var(--accent);}

.tag{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--faint);
  border:1px solid var(--line);
  padding:4px 9px;
  display:inline-block;
}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--mono);
  font-size:13.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:15px 26px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#12151F;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:background .15s,color .15s;
}
.btn:hover{background:#DDE2EB;}
.btn-outline{
  background:transparent;
  color:var(--text);
  border:1px solid var(--line);
}
.btn-outline:hover{border-color:var(--muted);}

/* ---------- header / nav (shared) ---------- */
header.site{
  position:sticky;top:0;z-index:80;
  background:rgba(14,17,28,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
header.site .bar{
  display:flex;align-items:center;justify-content:space-between;
  height:88px;              /* enlarged from 64px */
}
.logo{
  font-family:var(--display);
  font-weight:800;
  font-size:27px;           /* enlarged from 19px */
  letter-spacing:-.03em;
  display:flex;align-items:center;gap:8px;
}
/* wordmark is one flex child so the 8px gap sits after the square only */
.logo .wordmark{display:inline-block;}
.logo .dim{color:var(--muted);font-weight:400;}
nav.primary{display:flex;align-items:center;gap:2px;}
nav.primary > a,
nav.primary .has-drop > a,
nav.primary .has-drop > .drop-trigger{
  /* .drop-trigger is a <button>: Solutions has no page of its own, and an
     <a> without an href is unfocusable and misreported by screen readers.
     These four lines strip the UA button styling back to the link's. */
  background:none;
  border:none;
  cursor:pointer;
  text-align:left;
  font-family:var(--mono);
  font-size:13px;           /* enlarged from 11.5px */
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
  padding:12px 18px;
  border-left:1px solid var(--line-soft);
  display:inline-flex;align-items:center;gap:7px;
}
nav.primary > *:first-child > a,
nav.primary > *:first-child > .drop-trigger,
nav.primary > a:first-child{border-left:none;}
nav.primary a:hover,nav.primary a.active,
nav.primary .drop-trigger:hover,nav.primary .drop-trigger.active{color:var(--text);}
nav.primary a.active,
nav.primary .drop-trigger.active{color:var(--accent);}
nav.primary .drop-trigger:focus-visible{outline:1px solid var(--accent);outline-offset:-2px;}
.nav-right{display:flex;align-items:center;gap:18px;}
.nav-toggle{display:none;}

/* ---------- nav dropdown ---------- */
.has-drop{position:relative;}
.has-drop .caret{
  width:0;height:0;flex:none;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:4px solid currentColor;
  opacity:.7;transition:transform .15s;
}
.has-drop .drop{
  position:absolute;top:100%;left:0;min-width:230px;
  background:rgba(14,17,28,.97);
  backdrop-filter:blur(10px);
  border:1px solid var(--line);
  padding:6px 0;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .14s,transform .14s,visibility .14s;
  z-index:90;
}
.has-drop:hover .drop,
.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0);}
.has-drop:hover .caret,
.has-drop:focus-within .caret{transform:rotate(180deg);}
.has-drop .drop a{
  display:block;border-left:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);padding:11px 20px;white-space:nowrap;
}
.has-drop .drop a:hover{color:var(--text);background:var(--bg-raised);}
.has-drop .drop a.active{color:var(--accent);}

@media (max-width:1240px){
  nav.primary > a,
  nav.primary .has-drop > a,
  nav.primary .has-drop > .drop-trigger{padding:12px 12px;font-size:12px;letter-spacing:.03em;}
}
/* ---------- mobile nav ----------
   Below 1080px nav.primary is hidden, so the toggle is the only route between
   pages. The Company dropdown is flattened into a labelled group here — a
   hover-revealed submenu is unreachable by touch. */
.nav-toggle{
  display:none;
  width:46px;height:46px;flex:none;
  align-items:center;justify-content:center;
  background:none;border:1px solid var(--line);
  color:var(--text);cursor:pointer;padding:0;
}
.nav-toggle:hover{border-color:var(--muted);}
/* matches the focus treatment on form fields rather than the browser default */
.nav-toggle:focus-visible,
.mobile-nav a:focus-visible{outline:1px solid var(--accent);outline-offset:2px;}
.nav-toggle .nt-bars{display:block;position:relative;width:20px;height:14px;}
.nav-toggle .nt-bars i{
  position:absolute;left:0;width:100%;height:1.5px;
  background:currentColor;
  transition:transform .18s ease,opacity .12s ease;
}
.nav-toggle .nt-bars i:nth-child(1){top:0;}
.nav-toggle .nt-bars i:nth-child(2){top:6px;}
.nav-toggle .nt-bars i:nth-child(3){top:12px;}
.nav-open .nav-toggle .nt-bars i:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-open .nav-toggle .nt-bars i:nth-child(2){opacity:0;}
.nav-open .nav-toggle .nt-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.mobile-nav{
  display:none;
  border-top:1px solid var(--line);
  background:var(--bg);
  max-height:calc(100vh - 88px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:8px 32px 28px;
}
.mobile-nav nav{display:flex;flex-direction:column;}
/* .mn-cta is excluded throughout: it is a .btn, and inheriting the link
   colour here would paint light text onto the light accent fill. */
.mobile-nav a:not(.mn-cta){
  font-family:var(--mono);font-size:14px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-dim);
  /* 44px minimum touch target — WCAG 2.5.5 and both platform guidelines */
  min-height:44px;display:flex;align-items:center;
  border-bottom:1px solid var(--line-soft);
}
.mobile-nav a:not(.mn-cta):hover,
.mobile-nav a:not(.mn-cta):active{color:var(--text);}
.mobile-nav a.active{color:var(--accent);}
.mobile-nav .mn-group{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);
  min-height:44px;display:flex;align-items:flex-end;padding-bottom:9px;
}
.mobile-nav .mn-sub{display:flex;flex-direction:column;}
.mobile-nav .mn-sub a{padding-left:18px;font-size:13px;}
.mobile-nav .mn-cta{
  display:flex;width:100%;justify-content:center;
  margin-top:22px;min-height:52px;align-items:center;
}

@media (max-width:1080px){
  nav.primary{display:none;}
  .nav-toggle{display:inline-flex;}
  .nav-open .mobile-nav:not([hidden]){display:block;}
}
@media (max-width:560px){
  /* logo + CTA + toggle stop fitting on one line; the panel carries the CTA */
  .nav-right > .btn{display:none;}
  .mobile-nav{padding:8px 20px 24px;}
}

/* ---------- page kicker / breadcrumb strip ---------- */
.subpage-head{
  border-bottom:1px solid var(--line);
  padding:56px 0 44px;
}
.crumb{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin-bottom:20px;display:block;
}
.crumb a{color:var(--faint);}
.crumb a:hover{color:var(--muted);}
.crumb .sep{margin:0 8px;color:var(--line);}

/* ---------- structural grid panels ---------- */
.row-bordered{border-top:1px solid var(--line);}
.row-bordered.last{border-bottom:1px solid var(--line);}

.grid{display:grid;border-left:1px solid var(--line);border-right:1px solid var(--line);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-5{grid-template-columns:repeat(5,1fr);}
.grid > *{border-left:1px solid var(--line);padding:40px 32px;}
.grid > *:first-child{border-left:none;}
/* five cells are narrower, so ease the horizontal padding back */
.grid-5 > *{padding:34px 22px;}

/* five across only holds on wide viewports; drop to two before the
   single-column breakpoint rather than crushing the headings */
@media (max-width:1180px){
  .grid-5{grid-template-columns:repeat(2,1fr);}
  .grid-5 > *{border-left:1px solid var(--line);border-top:1px solid var(--line);}
  .grid-5 > *:nth-child(-n+2){border-top:none;}
  .grid-5 > *:nth-child(odd){border-left:none;}
}

/* .grid-2 was omitted here originally, so two-up panels stayed side by side
   below 900px and overflowed narrow viewports. All grid variants collapse. */
@media (max-width:900px){
  .grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr;}
  .grid > *{border-left:none !important;border-top:1px solid var(--line);}
  .grid > *:first-child{border-top:none;}
}

/* panel block used for tiers/modules */
.panel-num{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--accent);
  margin-bottom:16px;display:block;
}
.panel h3{margin-bottom:10px;}
/* The homepage panel headings are the only inline links to the three product
   pages now that the problem section is gone, so they need to look clickable
   without turning into blue links. Colour on hover, plus a focus ring, since
   `a{color:inherit;text-decoration:none}` above strips both by default. */
.panel h3 a{color:inherit;transition:color .15s;}
.panel h3 a:hover{color:var(--accent);}
.panel h3 a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.panel p{font-size:16px;line-height:1.6;}
.panel .specs{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);}
.panel .specs li{
  font-family:var(--mono);font-size:12.5px;color:var(--faint);
  padding:4px 0;display:flex;
}

/* ---------- terminal metric table ---------- */
.metric-table{
  border:1px solid var(--line);
  font-family:var(--mono);
}
.metric-table .mt-head{
  display:grid;grid-template-columns:1fr 140px 220px;
  border-bottom:1px solid var(--line);
  padding:12px 24px;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
}
.metric-table .mt-row{
  display:grid;grid-template-columns:1fr 140px 220px;
  border-bottom:1px solid var(--line-soft);
  padding:22px 24px;
  align-items:center;
}
.metric-table .mt-row:last-child{border-bottom:none;}
.metric-table .mt-row .label{
  font-family:var(--sans);color:var(--text-dim);font-size:16.5px;
}
.metric-table .mt-row .metric-val{
  font-size:25px;font-weight:800;color:var(--accent);
}
.metric-table .mt-row .metric-note{font-size:12.5px;color:var(--faint);}
@media (max-width:760px){
  .metric-table .mt-head{display:none;}
  .metric-table .mt-row{grid-template-columns:1fr;gap:6px;padding:20px 20px;}
}

/* ==========================================================================
   VIDEO BACKDROP — shared by .hero-video (homepage) and .video-band (a
   shorter standalone strip, available for subpages). The .vb-* internals are
   generic; each host sets its own height and scrim.
   ========================================================================== */
.vb-media{position:absolute;inset:0;z-index:0;}
.vb-video{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.8) contrast(1.06);
}
/* same 1px scanline treatment as .video-mock, for system consistency */
.vb-scan{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(
    180deg, rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px,
    transparent 1px, transparent 3px
  );
}
.vb-veil{position:absolute;inset:0;pointer-events:none;}
.vb-hud{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding-bottom:16px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);
  pointer-events:none;
}
.vb-hud .rec{color:var(--accent);display:flex;align-items:center;}
/* the round status dot was removed site-wide; the span is kept in the markup
   so it can be restored, but it renders nothing */
.vb-hud .rec .dot{display:none;}

/* ---------- homepage hero, video behind the content ---------- */
.hero-video{
  position:relative;
  min-height:clamp(620px,calc(100vh - 88px),960px);
  display:flex;align-items:center;
  overflow:hidden;
  background:var(--bg);
}
/* The city footage is far brighter than a scrim alone can handle without
   washing the image out. Darkening the source keeps the picture readable
   (structure survives) while lifting text contrast across the whole frame. */
/* Video runs essentially untouched now. Legibility comes from a scrim that is
   heavy only under the text column and clears to nothing across the rest of
   the frame, rather than from darkening the whole picture. */
.hero-video .vb-video{filter:brightness(1.06) saturate(1) contrast(1.02);}
/* two-axis scrim: the horizontal pass buys headline contrast on the left,
   the vertical pass seats the footage under the header and above the fold */
.hero-video .vb-veil{
  background:
    linear-gradient(90deg,
      rgba(14,17,28,.92) 0%,
      rgba(14,17,28,.88) 40%,
      rgba(14,17,28,.76) 56%,
      rgba(14,17,28,.28) 72%,
      rgba(14,17,28,0)   84%,
      rgba(14,17,28,0)   100%),
    linear-gradient(180deg,
      rgba(14,17,28,.42) 0%,
      rgba(14,17,28,0)   28%,
      rgba(14,17,28,0)   60%,
      rgba(14,17,28,.72) 100%);
}
.hero-video .hero-inner{
  position:relative;z-index:2;width:100%;
  padding-top:104px;padding-bottom:128px;
}
/* Narrower than the 900px used elsewhere so the headline stays inside the
   scrimmed column and the scrim can clear earlier across the frame. */
.hero-video h1{max-width:720px;}
/* --muted clears 6.2:1 on the flat page bg but only ~3.8:1 over footage,
   under the 4.5:1 floor for text this size — step it up over video only */
.hero.hero-video .lead.mono-sub{max-width:600px;color:var(--text-dim);}
/* Shadows are belt-and-braces: the scrim already carries the contrast, but
   these hold the text together over the brightest frames of the loop. */
.hero-video h1,
.hero-video .kicker,
.hero-video .lead.mono-sub{
  text-shadow:0 1px 18px rgba(14,17,28,.85), 0 1px 3px rgba(14,17,28,.7);
}
/* the HUD now sits over unscrimmed footage at the bottom right */
.hero-video .vb-hud{text-shadow:0 1px 10px rgba(14,17,28,.95), 0 1px 3px rgba(14,17,28,.9);}
.hero-video .vb-hud span:last-child{color:var(--muted);}
@media (max-width:960px){
  .hero-video{min-height:clamp(520px,84vh,760px);}
  .hero-video .hero-inner{padding-top:72px;padding-bottom:96px;}
}
/* Below ~900px the horizontal pass is compressed into a narrow viewport, so
   the headline and sub-lead cross into its lighter end. Steepen the ramp for
   tablet and phone widths — this is what lets the video run brighter without
   dropping text contrast below the 4.5:1 floor. */
/* 901–1180px: text still occupies most of the width, so the scrim clears
   later and less completely than on wide screens. */
@media (max-width:1180px){
  .hero-video .vb-veil{
    background:
      linear-gradient(90deg,
        rgba(14,17,28,.92) 0%,
        rgba(14,17,28,.88) 52%,
        rgba(14,17,28,.62) 74%,
        rgba(14,17,28,.22) 100%),
      linear-gradient(180deg,
        rgba(14,17,28,.46) 0%,
        rgba(14,17,28,.04) 30%,
        rgba(14,17,28,.08) 62%,
        rgba(14,17,28,.78) 100%);
  }
}
/* At phone and small-tablet widths the text spans the frame, so there is no
   clear region to give back — the scrim stays heavy throughout. */
@media (max-width:900px){
  .hero-video .vb-veil{
    background:
      linear-gradient(90deg,
        rgba(14,17,28,.92) 0%,
        rgba(14,17,28,.88) 62%,
        rgba(14,17,28,.74) 100%),
      linear-gradient(180deg,
        rgba(14,17,28,.50) 0%,
        rgba(14,17,28,.16) 32%,
        rgba(14,17,28,.22) 64%,
        rgba(14,17,28,.84) 100%);
  }
}
@media (max-width:640px){
  .hero-video{min-height:clamp(460px,78vh,640px);}
  .vb-hud span:last-child{display:none;}
}

/* ---------- standalone video band (shorter strip, for subpages) ---------- */
.video-band{
  position:relative;
  height:clamp(300px,52vh,540px);
  overflow:hidden;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.video-band .vb-veil{
  background:linear-gradient(
    180deg,
    rgba(14,17,28,.42) 0%,
    rgba(14,17,28,.14) 40%,
    rgba(14,17,28,.90) 100%
  );
}
@media (max-width:640px){
  .video-band{height:clamp(220px,38vh,300px);}
}

/* motion-sensitive users get the still frame instead of the loop */
@media (prefers-reduced-motion:reduce){
  .vb-video{display:none;}
  .vb-media{background:url('hero-loop-poster.jpg') center/cover no-repeat;}
}

/* ---------- hero split ---------- */
.hero{border-bottom:1px solid var(--line);}
.hero-split{
  display:grid;grid-template-columns:60fr 40fr;
  border-left:1px solid var(--line);border-right:1px solid var(--line);
}
.hero-split .hcol{padding:80px 40px;}
.hero-split .hcol:first-child{border-right:1px solid var(--line);}
@media (max-width:960px){
  .hero-split{grid-template-columns:1fr;}
  .hero-split .hcol:first-child{border-right:none;border-bottom:1px solid var(--line);}
  .hero-split .hcol{padding:52px 28px;}
}

.hero h1{margin:20px 0 22px;}
.hero .lead.mono-sub{
  font-family:var(--mono);
  font-size:13px;
  line-height:1.75;
  color:var(--muted);
  max-width:480px;
  border-left:2px solid var(--accent);
  padding-left:16px;
}
.hero-cta{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap;}

/* video mockup — bounding-box tracking visual, built entirely in CSS.
   CURRENTLY UNUSED: removed from the homepage hero in favour of the real
   video band. Kept here so the component can be dropped back into any page
   with the markup pattern .video-mock > .scanline + .vm-bg-shapes +
   .vm-frame + .bbox[data-label] + .vm-footer. Safe to delete if not wanted. */
.video-mock{
  position:relative;
  border:1px solid var(--line);
  aspect-ratio:4/5;
  background:
    linear-gradient(180deg, #141826 0%, #0E111C 100%);
  overflow:hidden;
}
.video-mock .scanline{
  position:absolute;inset:0;
  background:repeating-linear-gradient(
    180deg, rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px,
    transparent 1px, transparent 3px
  );
  pointer-events:none;
}
.video-mock .vm-frame{
  position:absolute;top:16px;left:16px;right:16px;
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);
}
.video-mock .vm-frame .rec{color:var(--accent);display:flex;align-items:center;gap:6px;}
.video-mock .vm-frame .rec .dot{display:none;}
.video-mock .bbox{
  position:absolute;
  border:1px solid var(--accent);
}
.video-mock .bbox::before{
  content:attr(data-label);
  position:absolute;top:-19px;left:-1px;
  font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  color:#12151F;background:var(--accent);
  padding:2px 6px;white-space:nowrap;
}
.video-mock .bbox .corner{position:absolute;width:8px;height:8px;border-color:var(--accent);}
.video-mock .vm-footer{
  position:absolute;bottom:16px;left:16px;right:16px;
  display:flex;justify-content:space-between;align-items:flex-end;
  font-family:var(--mono);font-size:9.5px;color:var(--faint);
}
.video-mock .vm-footer .readout{text-align:right;}
.video-mock .vm-footer .readout b{color:var(--accent);font-weight:600;}
.video-mock .vm-bg-shapes{position:absolute;inset:0;opacity:.5;}
.video-mock .shape{position:absolute;background:#1E2333;}

/* ---------- module / numbered list blocks ---------- */
.module{padding:44px 32px;}
.module .m-num{
  font-family:var(--display);font-size:44px;font-weight:600;color:var(--line);
  line-height:1;margin-bottom:18px;
}
.module .m-lab{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px;display:block;
}
.module h3{margin-bottom:10px;}
.module p{font-size:16px;}

/* ---------- CTA band ---------- */
.cta-band{border-top:1px solid var(--line);padding:88px 0;text-align:center;}
.cta-band h2{margin:16px 0 14px;}
.cta-band .lead{margin:0 auto 30px;text-align:center;}
.cta-band .hero-cta{justify-content:center;}

/* ---------- footer ---------- */
/* Graphite surface rather than page onyx, so the footer reads as its own
   band. Text colours are lifted to hold contrast on the lighter ground. */
footer.site{
  background:var(--graphite);
  border-top:1px solid var(--graphite-line);
  padding:56px 0 44px;
  color:#DCE0E8;
}
footer.site p{color:#B9BFCB;}
footer.site .logo{color:#F3F5F9;}
footer.site .logo .dim{color:#A6AEBC;}
footer.site .fgrid{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:32px;}
footer.site h4{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#9AA2B1;margin-bottom:15px;font-weight:600;
}
footer.site ul li{margin-bottom:10px;}
footer.site ul li a{font-size:15px;color:#C3C9D4;}
footer.site ul li a:hover{color:#FFFFFF;}
footer.site .fbottom{
  margin-top:48px;padding-top:26px;border-top:1px solid var(--graphite-line);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  font-family:var(--mono);font-size:12px;color:#9AA2B1;letter-spacing:.03em;
}
footer.site .fbottom a{color:#C3C9D4;}
footer.site .fbottom a:hover{color:#FFFFFF;}
@media (max-width:900px){
  footer.site .fgrid{grid-template-columns:1fr 1fr;}
}

/* ---------- generic section spacing ---------- */
.section{padding:88px 0;}
.section-head{margin-bottom:48px;max-width:680px;}
.section-head h2{margin-top:14px;}
.section-head .lead{margin-top:14px;max-width:600px;}

/* ==========================================================================
   EXTENDED COMPONENTS — company, resources, legal, and status pages.
   Same wireframe grammar: flat surfaces, 1px structural rules, mono labels.
   ========================================================================== */

/* ---------- long-form prose (legal, about, policy) ---------- */
.prose{max-width:760px;}
.prose h2{font-size:clamp(22px,2.2vw,28px);margin:48px 0 14px;}
.prose h3{margin:32px 0 10px;}
.prose h2:first-child,.prose h3:first-child{margin-top:0;}
.prose p{margin-bottom:18px;font-size:17px;line-height:1.72;}
.prose ul,.prose ol{margin:0 0 18px 0;padding-left:0;}
.prose ul li,.prose ol li{
  color:var(--muted);font-size:17px;line-height:1.7;
  padding:5px 0;position:relative;
}
/* unordered lists carry no marker. ol keeps its numerals below — those are
   sequence, not decoration — so it re-adds the indent it needs. */
.prose ol li{padding-left:20px;}
.prose ol{counter-reset:pro;}
.prose ol li{counter-increment:pro;}
.prose ol li::before{
  content:counter(pro,decimal-leading-zero);position:absolute;left:0;
  font-family:var(--mono);font-size:11px;color:var(--accent);top:8px;
}
.prose a{color:var(--accent);border-bottom:1px solid var(--accent-dim);}
.prose a:hover{border-bottom-color:var(--accent);}
.prose strong{color:var(--text-dim);font-weight:600;}
.prose .updated{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin-bottom:36px;display:block;
}

/* ---------- notice / callout strip ---------- */
.notice{
  border:1px solid var(--line);
  border-left:2px solid var(--accent);
  padding:18px 22px;
  margin:0 0 36px;
}
.notice p{font-size:13.5px;line-height:1.65;margin:0;}
.notice .n-lab{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:8px;
}
.notice.warn{border-left-color:#D9A441;}
.notice.warn .n-lab{color:#D9A441;}

/* ---------- two-column doc layout with sticky rail ---------- */
.doc-layout{
  display:grid;grid-template-columns:230px 1fr;gap:0;
  border-left:1px solid var(--line);border-right:1px solid var(--line);
}
.doc-rail{
  border-right:1px solid var(--line);
  padding:40px 24px;
  position:sticky;top:88px;align-self:start;max-height:calc(100vh - 88px);overflow-y:auto;
}
.doc-body{padding:40px 40px 56px;min-width:0;}
.doc-rail h4{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin:24px 0 10px;font-weight:600;
}
.doc-rail h4:first-child{margin-top:0;}
.doc-rail a{
  display:block;font-size:13px;color:var(--muted);
  padding:5px 0 5px 12px;border-left:1px solid var(--line-soft);
}
.doc-rail a:hover{color:var(--text);border-left-color:var(--muted);}
.doc-rail a.active{color:var(--accent);border-left-color:var(--accent);}
@media (max-width:900px){
  .doc-layout{grid-template-columns:1fr;}
  .doc-rail{position:static;max-height:none;border-right:none;border-bottom:1px solid var(--line);}
  .doc-body{padding:36px 24px 44px;}
}

/* ---------- code blocks ---------- */
.code{
  border:1px solid var(--line);
  background:var(--bg-raised);
  font-family:var(--mono);font-size:12.5px;line-height:1.7;
  color:var(--text-dim);
  overflow-x:auto;
  margin:0 0 24px;
}
.code .code-head{
  border-bottom:1px solid var(--line);
  padding:9px 16px;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  display:flex;justify-content:space-between;gap:12px;
}
.code pre{padding:16px;white-space:pre;}
.code .k{color:var(--accent);}      /* key / keyword */
.code .s{color:#9BB4D9;}            /* string */
.code .c{color:var(--faint);}       /* comment */
code.inline{
  font-family:var(--mono);font-size:12.5px;
  border:1px solid var(--line);padding:1px 5px;color:var(--text-dim);
}

/* ---------- listing rows (careers, press, changelog) ---------- */
.listing{border-top:1px solid var(--line);}
.listing .row{
  display:grid;grid-template-columns:1fr 200px 150px;
  gap:20px;align-items:center;
  padding:22px 0;
  border-bottom:1px solid var(--line-soft);
}
.listing .row:hover .r-title{color:var(--accent);}
.listing .r-title{font-family:var(--display);font-size:17px;font-weight:600;color:var(--text);}
.listing .r-meta{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--faint);text-transform:uppercase;
}
.listing .r-desc{font-size:15px;color:var(--muted);margin-top:5px;max-width:560px;}
@media (max-width:820px){
  .listing .row{grid-template-columns:1fr;gap:8px;padding:20px 0;}
}

/* ---------- press / article cards in a bordered grid ---------- */
.article-date{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:12px;
}
.article-src{
  font-family:var(--mono);font-size:11px;color:var(--faint);
  margin-top:14px;display:block;
}

/* ---------- team grid ---------- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);}
.team-grid .member{background:var(--bg);padding:28px 24px;}
.team-grid .avatar{
  width:44px;height:44px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:13px;color:var(--accent);
  margin-bottom:16px;
}
.team-grid h4{font-family:var(--display);font-size:15px;color:var(--text);margin-bottom:4px;font-weight:600;}
.team-grid .role{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);
}
@media (max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.team-grid{grid-template-columns:1fr;}}

/* ---------- status page ---------- */
.status-banner{
  border:1px solid var(--line);
  border-left:2px solid var(--accent);
  padding:24px 26px;
  display:flex;align-items:center;gap:16px;
  margin-bottom:40px;
}
.status-banner .big{
  font-family:var(--display);font-size:22px;font-weight:600;color:var(--text);
}
.status-banner .sub{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin-top:4px;
}
/* status dots removed with every other round dot; state is carried by the
   text label beside them, which was already there */
.sdot{display:none;}
.status-list{border:1px solid var(--line);}
.status-list .srow{
  display:grid;grid-template-columns:1fr 130px 120px;
  gap:16px;align-items:center;
  padding:16px 24px;
  border-bottom:1px solid var(--line-soft);
}
.status-list .srow:last-child{border-bottom:none;}
.status-list .sname{font-size:16px;color:var(--text-dim);}
.status-list .sstate{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:8px;
}
.status-list .suptime{
  font-family:var(--mono);font-size:11.5px;color:var(--faint);text-align:right;
}
/* 30-day uptime strip */
.uptime-bar{display:flex;gap:2px;margin-top:10px;}
.uptime-bar i{flex:1;height:22px;background:var(--accent-dim);display:block;}
.uptime-bar i.warn{background:#8A6A29;}
.uptime-bar i.down{background:#8A3838;}
@media (max-width:760px){
  .status-list .srow{grid-template-columns:1fr auto;}
  .status-list .suptime{display:none;}
}

/* ---------- key/value spec table (trust, benchmarks) ---------- */
.kv{border:1px solid var(--line);}
.kv .kvrow{
  display:grid;grid-template-columns:260px 1fr;gap:20px;
  padding:16px 24px;border-bottom:1px solid var(--line-soft);
}
.kv .kvrow:last-child{border-bottom:none;}
.kv .kvk{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);padding-top:2px;
}
.kv .kvv{font-size:16px;color:var(--text-dim);line-height:1.62;}
@media (max-width:720px){
  .kv .kvrow{grid-template-columns:1fr;gap:6px;}
}
/* .kv-terms — the label column on its own, for a .kv whose values are
   temporarily hidden. Without this the 260px/1fr grid leaves the value column
   empty and the labels stranded against the left edge. */
.kv.kv-terms .kvrow{grid-template-columns:1fr;padding:15px 24px;}
.kv.kv-terms .kvk{
  font-size:14px;letter-spacing:.09em;color:var(--text-dim);padding-top:0;
}

/* ---------- inline signup / demo form ---------- */
.signup{max-width:760px;}
.signup-row{display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--line);}
.signup .field{
  flex:1 1 200px;min-width:0;
  background:var(--bg-raised);
  border:none;
  border-right:1px solid var(--line);
  color:var(--text);
  font-family:var(--mono);font-size:13px;
  padding:14px 16px;
}
.signup .field::placeholder{color:var(--faint);}
.signup .field:focus{outline:none;background:#1A1F2E;}
.signup .field:focus-visible{outline:1px solid var(--accent);outline-offset:-1px;}
.signup .btn{border:none;flex:0 0 auto;}
/* honeypot: hidden from people, still reachable by bots */
.signup .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-note{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--faint);margin-top:12px;
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
@media (max-width:640px){
  .signup-row{flex-direction:column;border:none;}
  .signup .field{border:1px solid var(--line);border-bottom:none;}
  .signup .btn{width:100%;justify-content:center;}
}

/* ---------- contact page ---------- */
/* single column since the aside was removed; the form is capped rather than
   stretched to the full 1320px wrap */
.contact-layout{max-width:760px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.field-group{margin-bottom:22px;display:flex;flex-direction:column;}
.field-group label{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px;
}
.req{color:var(--accent);}
.contact-form .field{
  background:var(--bg-raised);
  border:1px solid var(--line);
  color:var(--text);
  font-family:var(--sans);font-size:16px;
  padding:14px 16px;width:100%;
}
.contact-form textarea.field{font-family:var(--sans);line-height:1.6;resize:vertical;}
.contact-form .field::placeholder{color:var(--faint);}
.contact-form .field:focus{outline:none;border-color:var(--muted);background:#1A1F2E;}
.contact-form .field:focus-visible{outline:1px solid var(--accent);outline-offset:-2px;}
.contact-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.contact-form .btn{margin-top:6px;}
.contact-aside h3{font-size:19px;margin-bottom:4px;}
.steps{counter-reset:st;}
.steps li{
  counter-increment:st;position:relative;padding:8px 0 8px 34px;
  color:var(--muted);font-size:16px;line-height:1.6;
}
.steps li::before{
  content:counter(st,decimal-leading-zero);position:absolute;left:0;top:10px;
  font-family:var(--mono);font-size:12px;color:var(--accent);
}
.contact-aside a{color:var(--accent);}
.contact-aside a:hover{border-bottom:1px solid var(--accent);}

@media (max-width:620px){
  .field-row{grid-template-columns:1fr;gap:0;}
}

/* ---------- anchor nav strip ---------- */
.anchor-nav{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;gap:0;flex-wrap:wrap;
  position:sticky;top:88px;z-index:60;
  background:rgba(14,17,28,.92);backdrop-filter:blur(10px);
}
.anchor-nav a{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:13px 20px;border-right:1px solid var(--line-soft);
}
.anchor-nav a:hover{color:var(--text);}
.anchor-nav a.active{color:var(--accent);}

/* offset anchored headings so the sticky chrome doesn't cover them */
[id]{scroll-margin-top:150px;}

/* ---------- misc ---------- */
.hairline{height:1px;background:var(--line);border:none;}
.center{text-align:center;}
.mt-8{margin-top:8px;}.mt-12{margin-top:12px;}.mt-16{margin-top:16px;}.mt-24{margin-top:24px;}.mt-32{margin-top:32px;}.mt-48{margin-top:48px;}

/* ==========================================================================
   Touch refinements — 1080px and below
   Two things that read fine with a mouse and badly with a thumb: standalone
   link rows only ~19–31px tall, and mono labels tracked down to 10–11.5px.
   The breakpoint matches the one where nav.primary gives way to the toggle,
   so every viewport driven by touch gets the same treatment and the desktop
   composition is untouched.

   Inline links inside a sentence are deliberately left alone — WCAG 2.5.5
   exempts them, and padding them out would wreck the line rhythm.
   ========================================================================== */
@media (max-width:1080px){
  /* --- 44px hit areas on standalone link rows --- */
  .logo{min-height:44px;}
  footer.site ul li{margin-bottom:0;}
  footer.site ul li a{min-height:44px;display:flex;align-items:center;font-size:15px;}
  footer.site .fbottom a,
  .crumb a{display:inline-flex;align-items:center;min-height:44px;}
  .doc-rail a,
  .anchor-nav a{min-height:44px;display:flex;align-items:center;}

  /* --- lift every mono label off the 9.5–11.5px floor to a 12px minimum ---
     These are the complete set of sub-12px rules in this stylesheet. The
     tight letter-spacing that made them read as labels at 10.5px is eased
     slightly so the larger size does not run long. */
  footer.site h4{font-size:12.5px;letter-spacing:.1em;margin-bottom:6px;}
  footer.site .fbottom{font-size:12.5px;row-gap:4px;}
  footer.site .fgrid{gap:26px 32px;}
  .crumb{font-size:12px;}
  .field-group label{font-size:12.5px;letter-spacing:.08em;}
  .form-note{font-size:12px;letter-spacing:.04em;}
  .tag{font-size:12px;}
  .vb-hud{font-size:12px;letter-spacing:.08em;}
  .code .code-head{font-size:12px;letter-spacing:.04em;}
  .metric-table .mt-head{font-size:12px;letter-spacing:.1em;}
  .module .m-lab{font-size:12px;letter-spacing:.1em;}
  .notice .n-lab{font-size:12px;letter-spacing:.1em;}
  .doc-rail h4{font-size:12px;letter-spacing:.1em;}
  .article-date{font-size:12px;}
  .team-grid .role{font-size:12px;}
  .prose ol li::before{font-size:12px;}
  .prose .updated{font-size:12px;}
  .listing .r-meta{font-size:12px;}
  .article-src{font-size:12px;}
  .status-banner .sub{font-size:12px;}
  .status-list .sstate{font-size:12px;}
  .status-list .suptime{font-size:12px;}
  .anchor-nav a{font-size:12px;}
}
@media (max-width:600px){
  footer.site .fgrid{grid-template-columns:1fr;}
  footer.site .fbottom{flex-direction:column;align-items:flex-start;}
  /* the anchor rail scrolls sideways rather than wrapping into a tall block */
  .anchor-nav{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .anchor-nav a{white-space:nowrap;}
}

/* ==========================================================================
   GRAPHITE — scheme-specific adjustments
   ========================================================================== */

/* Header: same surface as the footer, taller, with larger type. Text is
   lifted toward the footer's palette but kept a step below it. */
header.site{
  background:#23262E;
  border-bottom:1px solid #343842;
  backdrop-filter:none;
}
header.site .bar{height:104px;}
.logo{font-size:31px;color:#EDF0F5;}
.logo .dim{color:#A6AEBC;}
nav.primary > a,
nav.primary .has-drop > a,
nav.primary .has-drop > .drop-trigger{
  font-size:14px;
  color:#AEB6C4;
  border-left:1px solid #343842;
  padding:12px 20px;
}
nav.primary a:hover,
nav.primary .drop-trigger:hover{color:#F2F4F8;}
nav.primary a.active,
nav.primary .drop-trigger.active{color:var(--accent);}
.has-drop .drop{background:#23262E;border-color:#414654;}
.has-drop .drop a{color:#AEB6C4;font-size:13px;}
.has-drop .drop a:hover{color:#F2F4F8;background:#2B2F39;}
header.site .btn-outline{border-color:#454A58;color:#EDF0F5;}
header.site .btn-outline:hover{border-color:#8C94A4;}
@media (max-width:1240px){
  nav.primary > a,
  nav.primary .has-drop > a,
  nav.primary .has-drop > .drop-trigger{padding:12px 13px;font-size:13px;}
}
/* Mobile nav sits on the header's graphite surface, not the page ground, so
   the open panel reads as an extension of the bar. */
.nav-toggle{border-color:#454A58;color:#EDF0F5;}
.nav-toggle:hover{border-color:#8C94A4;}
.mobile-nav{
  background:#23262E;
  border-top:1px solid #343842;
  max-height:calc(100vh - 104px);
}
.mobile-nav a:not(.mn-cta){color:#C3C9D4;border-bottom:1px solid #343842;}
.mobile-nav a:not(.mn-cta):hover,
.mobile-nav a:not(.mn-cta):active{color:#F2F4F8;}
.mobile-nav a.active{color:var(--accent);}
.mobile-nav .mn-group{color:#8A93A2;}
.mobile-nav .mn-sub a{color:#AEB6C4;}
@media (max-width:560px){
  /* a 104px sticky bar costs ~12% of a phone viewport; the desktop
     proportions do not need to survive down here */
  header.site .bar{height:76px;}
  .logo{font-size:25px;}
  .mobile-nav{max-height:calc(100vh - 76px);}
}

/* sticky offsets follow the taller bar */
.doc-rail{top:104px;max-height:calc(100vh - 104px);}
.anchor-nav{top:104px;background:rgba(14,17,28,.94);}
[id]{scroll-margin-top:166px;}
.hero-video{min-height:clamp(620px,calc(100vh - 104px),960px);}

/* The 64px page-grid texture sat behind everything at a pitch unrelated to
   the layout, so its lines cut through headings and crossed the panel
   borders. Dropped here; the structural 1px rules carry the wireframe
   language on their own, and are nudged up slightly to compensate. */
body{background-image:none;}
.row-bordered,
.grid,
.grid > *,
.metric-table,
.kv,
.code,
.status-list,
.listing,
.doc-layout,
.team-grid,
.notice{border-color:#2E3444;}
.grid > *{border-left-color:#2E3444;}
.metric-table .mt-row,
.kv .kvrow,
.status-list .srow,
.listing .row,
.panel .specs{border-bottom-color:#242938;}
.panel .specs{border-top-color:#242938;}