/* Self-hosted fonts. Latin subset only. Generated from Google Fonts. */

@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/Archivo-600.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/Archivo-700.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;
  src:url('/fonts/Archivo-800.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/IBMPlexMono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/IBMPlexMono-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/IBMPlexMono-600.woff2') format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/PublicSans-400.woff2') format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/PublicSans-500.woff2') format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/PublicSans-600.woff2') format('woff2');}

:root{
    --ink:#0B0E11;
    --dark:#000000;
    --dark-2:#121212;
    --paper:#ffffff;
    --soft:#F2F4F7;
    --line:#DDE2E8;
    --line-dk:#282828;
    --body:#3E4854;
    --body-dk:#A8A8A8;
    --accent:#3B5BDB;
    --accent-hi:#5B78E8;
    --accent-ink:#ffffff;
    --green:#1F9D6B;
    --max:1200px;
    --display:"Archivo",system-ui,sans-serif;
    --text:"Public Sans",system-ui,sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,monospace;
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
  body{margin:0; background:var(--paper); color:var(--ink);
    font:17px/1.6 var(--text); -webkit-font-smoothing:antialiased}
  a{color:inherit; text-decoration:none}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 40px}
  @media(max-width:700px){.wrap{padding:0 20px}}
  :is(a,button,[tabindex]):focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
  section[id]{scroll-margin-top:88px}

  /* ---------- type ---------- */
  .label{font:500 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
    color:var(--accent); margin:0 0 18px}
  h1{font:800 clamp(44px,6.6vw,80px)/0.97 var(--display); letter-spacing:-.035em; margin:0 0 22px}
  h2{font:800 clamp(30px,4.2vw,50px)/1.02 var(--display); letter-spacing:-.03em; margin:0 0 14px}
  h3{font:700 19px/1.25 var(--display); letter-spacing:-.015em; margin:0 0 8px}
  .sub{font-size:18.5px; color:var(--body); max-width:52ch; margin:0}
  .sub.dk{color:var(--body-dk)}

  /* ---------- mark ---------- */
  .brand{display:inline-flex; align-items:center; gap:13px}
  .brand svg{height:24px; width:auto; display:block; color:currentColor; flex:none}
  .brand b{font:800 17px/1 var(--display); letter-spacing:.16em}

  /* ---------- header ---------- */
  header{position:sticky; top:0; z-index:40; background:#000; border-bottom:1px solid #1E1E1E}
  .bar{display:flex; align-items:center; justify-content:space-between; height:72px}
  header .brand{color:#fff}
  header nav{display:flex; gap:34px}
  header nav a{font:500 14px/1 var(--text); color:#B3B3B3}
  header nav a:hover{color:#fff}
  .menu{display:none; background:none; border:0; color:#fff; padding:8px; cursor:pointer}
  .menu svg{width:24px;height:24px;display:block}
  @media(max-width:820px){
    header nav{display:none}
    .menu{display:block}
    header nav.open{display:flex; flex-direction:column; gap:0; position:absolute; left:0; right:0; top:72px;
      background:#0C0C0C; border-bottom:1px solid #1E1E1E; padding:6px 0}
    header nav.open a{padding:14px 40px}
  }
  @media(max-width:700px){
    header nav.open a{padding:14px 20px}
  }

  /* ---------- hero ---------- */
  .hero{background:var(--paper); color:var(--ink); padding:100px 0 108px}
  .hero .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:76px; align-items:center}
  .hero h1{color:var(--ink)}
  .jump{display:inline-flex; align-items:center; gap:9px; margin-top:32px;
    font:500 15px/1 var(--text); color:var(--ink); border-bottom:1px solid var(--line); padding-bottom:7px}
  .jump:hover{border-bottom-color:var(--accent)}
  .proof{display:flex; flex-wrap:wrap; gap:0 40px; margin:52px 0 0; padding-top:24px;
    border-top:1px solid var(--line-dk)}
  .proof dt{font:500 10px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
    color:#8A8A8A; margin-bottom:8px}
  .proof dd{margin:0; font:700 19px/1 var(--display); letter-spacing:-.02em; color:#fff}
  @media(max-width:520px){.proof{gap:20px 28px}.proof dd{font-size:16px}}
  @media(max-width:960px){.hero .wrap{grid-template-columns:1fr; gap:54px}.hero{padding:64px 0 76px}}

  /* ---------- board ---------- */
  .deck{background:#0A0A0A; border:1px solid #0A0A0A; border-radius:12px; overflow:hidden;
    box-shadow:0 22px 60px rgba(0,0,0,.22)}
  .timer{height:3px; background:rgba(255,255,255,.09)}
  .timer i{display:block; height:100%; width:0; background:var(--accent)}
  @keyframes fill{from{width:0}to{width:100%}}
  .deck-top{display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; border-bottom:1px solid var(--line-dk)}
  .deck-top .t{font:500 10px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:#8A8A8A}
  .deck-top .auto{display:flex; align-items:center; gap:7px; font:500 10px/1 var(--mono);
    letter-spacing:.14em; color:var(--green)}
  .deck-top .auto .dot{width:6px;height:6px;border-radius:50%;background:var(--green)}
  .deck.stopped .deck-top .auto{color:#7A7A7A}
  .deck.stopped .deck-top .auto .dot{background:#7A7A7A}
  .cards{position:relative; min-height:250px}
  .card{position:absolute; inset:0; padding:24px 22px 18px; opacity:0; visibility:hidden;
    transition:opacity .3s ease; display:flex; flex-direction:column}
  .card.on{opacity:1; visibility:visible; position:relative}
  .card .n{font:500 10px/1 var(--mono); letter-spacing:.16em; color:#7A7A7A; margin-bottom:15px}
  .card .nm{font:800 29px/1 var(--display); letter-spacing:-.03em; color:#fff; margin:0 0 10px}
  .card .ds{font-size:15.5px; line-height:1.55; color:#B0B0B0; margin:0 0 auto; max-width:34ch}
  .card .meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:20px}
  .st{font:600 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
    border-radius:3px; padding:6px 8px}
  .st.live{background:var(--accent); color:var(--accent-ink)}
  .st.use{border:1px solid #2E6B57; background:#12332A; color:#4FBF95}
  .st.early{border:1px solid #3A3A3A; background:transparent; color:#9A9A9A}
  .tag{font:500 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
    color:#9A9A9A; border:1px solid var(--line-dk); border-radius:3px; padding:6px 8px}
  .deck-nav{display:flex; align-items:center; gap:4px; padding:0 14px 14px}
  .deck-nav button{background:none; border:1px solid var(--line-dk); color:#A0A0A0; cursor:pointer;
    width:32px; height:30px; border-radius:5px; display:grid; place-items:center}
  .deck-nav button:hover{color:#fff; border-color:#454545}
  .deck-nav svg{width:14px;height:14px;display:block}
  .deck-nav .pips{display:flex; gap:5px; margin-left:auto}
  .deck-nav .pips b{width:5px;height:5px;border-radius:50%;background:#3A3A3A;display:block}
  .deck-nav .pips b.on{background:var(--accent)}

  /* ---------- solutions ---------- */
  .solutions{padding:88px 0 100px; background:var(--soft); border-top:1px solid var(--line)}
  .solutions .head{margin-bottom:14px}
  .solutions .head h2{margin:0}

  .feat{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,400px); gap:56px;
    padding:44px 0 48px; border-top:1px solid var(--line)}
  .feat .fx{font:500 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
    color:var(--accent); margin:0 0 14px}
  .feat h3{font-size:clamp(30px,3.6vw,42px); font-weight:800; letter-spacing:-.03em; line-height:1;
    margin:0 0 14px}
  .feat .lead{font-size:17.5px; line-height:1.6; color:var(--body); margin:0; max-width:50ch}
  .flist{display:grid; grid-template-columns:1fr 1fr; gap:18px 32px; margin:28px 0 0}
  .flist div{padding-top:13px; border-top:1px solid var(--line)}
  .flist b{display:block; font:700 14px/1.3 var(--display); margin-bottom:4px}
  .flist span{display:block; color:var(--body); font-size:14px; line-height:1.5}
  .fstat{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:26px;
    font:500 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#6B7480}
  .fstat .pill{border:1px solid var(--line); border-radius:4px; padding:7px 10px; color:var(--body)}
  .fstat .pill.on{border-color:var(--accent); color:var(--accent)}

  /* the panel beside each featured item */
  .panel{border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden;
    align-self:start}
  .panel .ph{display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 15px; border-bottom:1px solid var(--line); background:var(--soft)}
  .panel .ph b{font:600 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#5A6673}
  .panel .ph i{font:500 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
    color:var(--green); font-style:normal}
  .panel .pb{padding:18px 16px}
  .q{background:var(--soft); border:1px solid var(--line); border-radius:7px; padding:11px 12px;
    font-size:13.5px; line-height:1.45; color:#48535F}
  .chips{display:flex; flex-wrap:wrap; gap:6px; margin:13px 0}
  .chips span{font:500 9px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
    background:var(--soft); border:1px solid var(--line); border-radius:4px; padding:6px 7px; color:#5A6673}
  .bars{display:flex; align-items:flex-end; gap:7px; height:76px; padding:0 2px;
    border-bottom:1px solid var(--line); margin-top:4px}
  .bars i{flex:1; border-radius:3px 3px 0 0; background:#B6C4D2; display:block}
  .bars i.hi{background:var(--accent)}
  .cap{font:500 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
    color:#7C8794; margin-top:11px; display:block}
  .lines{display:grid; gap:7px; margin-top:14px}
  .lines i{display:block; height:6px; border-radius:999px; background:#CBD5E0}
  .lines i:nth-child(2){width:88%} .lines i:nth-child(3){width:64%}
  .cite{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px;
    padding-top:12px; border-top:1px solid var(--line);
    font:500 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#7C8794}
  .cite b{color:var(--accent); font-weight:600}

  @media(max-width:960px){
    .feat{grid-template-columns:1fr; gap:38px}
    .flist{grid-template-columns:1fr 1fr}
  }
  @media(max-width:620px){.flist{grid-template-columns:1fr}}

  /* rest of the catalog */
  .rest{border-top:1px solid var(--line); padding-top:44px; margin-top:8px}
  .rest .rh{font:500 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
    color:#8A929C; margin:0 0 26px}

  /* the WAR family */
  .family{border:1px solid var(--line); border-radius:12px; padding:28px 30px 30px; margin:0 0 46px;
    background:#fff}
  .fam-head{display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; align-items:start;
    padding-bottom:22px; margin-bottom:24px; border-bottom:1px solid var(--line)}
  .fam-head .fam-mk{font:800 38px/0.9 var(--display); letter-spacing:-.03em; color:var(--accent);
    display:block; padding-top:2px}
  .fam-head b{display:block; font:700 16px/1.3 var(--display); letter-spacing:-.01em; margin-bottom:6px}
  .fam-head div span{display:block; color:var(--body); font-size:15px; line-height:1.55; max-width:62ch}
  .family .grid4{gap:22px 44px}
  .family .it{border-left-color:#C6D2DE}
  @media(max-width:620px){
    .family{padding:24px 20px 26px}
    .fam-head{grid-template-columns:1fr; gap:12px}
  }
  .grid4{display:grid; grid-template-columns:repeat(2,1fr); gap:42px 52px}

  /* expanded catalog entry */
  .wcard{border-top:1px solid var(--line); padding-top:22px}
  .wcard .wh{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; margin-bottom:9px}
  .wcard .wn{font:700 20px/1.2 var(--display); letter-spacing:-.02em}
  .wcard .ws{font:500 9.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:#8A929C}
  .wcard .ws.on{color:var(--accent)}
  .wcard .wd{margin:0 0 15px; font-size:15.5px; line-height:1.55; color:var(--ink)}
  .wcard ul{list-style:none; margin:0 0 16px; padding:0; display:grid; gap:9px}
  .wcard li{position:relative; padding-left:17px; font-size:14.5px; line-height:1.5; color:var(--body)}
  .wcard li::before{content:""; position:absolute; left:0; top:10px; width:8px; height:1px;
    background:var(--accent)}
  .wcard .wt{font:500 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:#8A929C}
  @media(max-width:820px){.grid4{grid-template-columns:1fr; gap:34px}.solutions{padding:70px 0}}

  /* ---------- principles ---------- */
  .how{background:#000; color:#fff; padding:104px 0 100px}
  .how h2{max-width:none; text-wrap:balance; color:#fff}
  .how .sub{max-width:none; color:var(--body-dk)}
  .cols{display:grid; grid-template-columns:repeat(3,1fr); gap:46px; margin-top:58px}
  .col h3{padding-top:20px; border-top:3px solid var(--accent); color:#fff}
  .col p{margin:0; color:var(--body-dk); font-size:16px; line-height:1.6}
  @media(max-width:820px){.cols{grid-template-columns:1fr; gap:34px}.how{padding:70px 0}}

  /* ---------- team ---------- */
  .team{padding:96px 0; background:var(--paper); border-top:1px solid var(--line)}
  .team .row{display:grid; grid-template-columns:230px minmax(0,1fr); gap:44px}
  .team p{margin:0 0 18px; font-size:18px; line-height:1.65; max-width:56ch}
  .team p:last-child{margin-bottom:0}
  .team h2{margin-bottom:12px}
  .team .bg{margin-top:34px; padding-top:28px; border-top:1px solid var(--line)}
  .team .bg p{font-size:15.5px; line-height:1.6; color:var(--body); max-width:var(--col);
    margin-bottom:0; text-align:center}
  /* institution row and degree tiles share one column width so edges line up */
  .team .bg{--col:580px}
  .inst{display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:6px 14px;
    max-width:var(--col); margin:0 0 16px}
  .inst span{font:400 16px/1.5 var(--text); letter-spacing:.01em; color:var(--body)}
  .inst i{color:#B4BAC2; font-style:normal; font-size:13px; line-height:1}

  /* degree tiles — school color signals where */
  .degrees{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
    margin:0 0 18px; max-width:var(--col)}
  .deg{background:var(--soft); border:1px solid var(--line); border-radius:9px; overflow:hidden;
    display:flex; flex-direction:column}
  .deg .cap{display:block; height:4px; flex:none}
  .deg.van .cap{background:#C6A02C}
  .deg.har .cap{background:#A51C30}
  .deg .in{padding:13px 14px 14px; flex:1; display:flex; flex-direction:column}
  .deg b{display:block; font:700 15px/1.25 var(--display); letter-spacing:-.015em;
    margin:0 0 auto; padding-bottom:10px}
  .deg .in span{font:500 9.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#7C8794}
  @media(max-width:620px){.degrees{grid-template-columns:1fr; max-width:none}}
  @media(max-width:820px){.team .row{grid-template-columns:1fr; gap:18px}.team{padding:70px 0}}

  /* ---------- footer ---------- */
  footer{background:#000; color:#9A9A9A; padding:40px 0}
  .foot{display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap}
  footer .brand{color:#fff}
  .foot nav{display:flex; gap:26px}
  .foot a{font-size:14px}
  .foot a:hover{color:#fff}
  .foot .c{font:400 12px/1.5 var(--mono); color:#6B6B6B}

  @media(prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* ================= product & index pages ================= */

/* links that sit inside existing headings shouldn't change their look */
h2 a, h3 a, .wn, .card .nm a { color:inherit }
h2 a:hover, h3 a:hover, .wn:hover, .card .nm a:hover { color:var(--accent) }
.wcard .wn { display:inline-block }

/* "More on X →" under a featured block */
.more{display:inline-flex; align-items:center; gap:8px; margin-top:24px;
  font:600 14px/1 var(--text); color:var(--accent); border-bottom:1px solid transparent; padding-bottom:5px}
.more:hover{border-bottom-color:var(--accent)}

/* solid button, used on product heroes and the 404 */
.btn{display:inline-flex; align-items:center; gap:9px; margin-top:32px; padding:14px 24px;
  font:600 15px/1 var(--text); border-radius:6px; background:var(--accent); color:var(--accent-ink);
  transition:background .15s, transform .12s}
.btn:hover{background:var(--accent-hi); transform:translateY(-1px)}

/* sub-page hero: same black as the header, shorter */
.phero{background:var(--dark); color:#fff; padding:76px 0 72px}
.phero h1{color:#fff; font-size:clamp(40px,5.6vw,68px); margin-bottom:18px}
.phero .label a{color:var(--accent)}
.phero .label a:hover{color:#fff}
.phero .label span{color:#555; margin:0 4px}
.phero .sub{max-width:56ch}
.phero .proof{margin-top:44px}
@media(max-width:700px){.phero{padding:52px 0 56px}}

/* prose block */
.pbody{padding:84px 0 20px}
.prose h2{font-size:clamp(26px,3vw,34px); margin-bottom:22px}
.prose p{font-size:18px; line-height:1.7; color:var(--body); max-width:70ch; margin:0 0 20px}
.prose p:last-child{margin-bottom:0}

/* capability grid */
.pcaps{padding:64px 0 88px}
.pcaps h2{font-size:clamp(26px,3vw,34px); margin-bottom:30px}
.capgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 48px}
.capgrid div{padding-top:16px; border-top:1px solid var(--line)}
.capgrid b{display:block; font:700 17px/1.3 var(--display); letter-spacing:-.015em; margin-bottom:7px}
.capgrid span{display:block; color:var(--body); font-size:16px; line-height:1.6}
@media(max-width:760px){.capgrid{grid-template-columns:1fr; gap:22px}.pbody{padding:56px 0 12px}.pcaps{padding:44px 0 60px}}

/* related strip */
.prel{padding:72px 0 88px; background:var(--soft); border-top:1px solid var(--line)}
.prel .rh{font:500 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:#8A929C; margin:0 0 26px}
@media(max-width:760px){.prel{padding:52px 0 64px}}

/* the solutions index reuses .solutions but has no featured blocks */
.sub-page .solutions{padding:76px 0 96px}
.sub-page .rest .rh:not(:first-child){margin-top:46px}

/* keep the footer at the bottom on short pages (404) */
body{min-height:100vh; display:flex; flex-direction:column}
body > main{flex:1 0 auto}
body > footer{flex:none}

/* ---- product screenshots ---- */
.pshots{padding:64px 0 8px}
.pshots h2{font-size:clamp(26px,3vw,34px); margin-bottom:30px}
.shots{display:grid; gap:44px}
.shots figure{margin:0}
.shots img{width:100%; height:auto; display:block; border:1px solid var(--line);
  border-radius:12px; background:var(--ink); box-shadow:0 18px 50px rgba(11,14,17,.10)}
.shots figcaption{margin-top:14px; font-size:15px; line-height:1.6; color:var(--body); max-width:70ch}
@media(max-width:760px){.pshots{padding:44px 0 4px}.shots{gap:32px}}