/* Palette lifted from absolutedata.ai, whose own custom properties are:
     --bg #0b0f15  --bg-soft #0f1623  --text #e6f1ff  --muted #98a2b3
     --primary #6ee7ff  --primary-strong #22d3ee  --secondary #a78bfa
   Kaizini keeps its own logo; everything around it is theirs, so the product
   sits inside the company's design rather than beside it. The logo's blue-to-
   teal gradient already lives in the same family as the cyan. */
:root{
  --ink:#e6f1ff; --ink-2:#c0cfe4; --ink-3:#98a2b3;
  --bg:#0b0f15; --panel:#0f1623; --panel-2:#141d2b; --rule:#1e2a3a;
  --accent:#6ee7ff; --accent-strong:#22d3ee; --accent-soft:#0e2733;
  --on-accent:#06131a;
  --violet:#a78bfa;
  --ok:#34d399; --ok-soft:#0d2a22;
  --bad:#f87171; --bad-soft:#2c1a1c;
  --warn:#fcd34d; --warn-soft:#2b2617;
  --blue:#6ee7ff; --blue-soft:#0e2733;
  --glow:0 0 30px rgba(34,211,238,.25), 0 0 80px rgba(167,139,250,.15);
  --r:8px;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
code,.mono{font-family:"Cascadia Mono",Consolas,monospace; font-size:13px}

/* chrome ------------------------------------------------------------------ */
body > header{display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 28px; border-bottom:1px solid var(--rule);
  background:var(--panel)}
.brand{display:flex; align-items:center; color:var(--ink)}
.brand img{border-radius:6px; display:block}
.brand:hover{text-decoration:none}
.wm{font-weight:700; font-size:18px; letter-spacing:.01em}
nav{display:flex; align-items:center; gap:14px; font-size:14px}
nav a{color:var(--ink-2)}
nav a:hover{color:var(--ink); text-decoration:none}
nav form{display:inline}
.who{color:var(--ink-3); border-left:1px solid var(--rule); padding-left:14px}

main{max-width:1180px; margin:0 auto; padding:26px 28px 56px}
body.centred main{display:flex; align-items:center; justify-content:center;
  min-height:calc(100vh - 150px); padding-top:0}
footer{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  max-width:1180px; margin:0 auto; color:var(--ink-3); font-size:12.5px;
  padding:16px 28px; border-top:1px solid var(--rule)}

.flashes{max-width:1180px; margin:16px auto 0; padding:0 28px}
.flashes p{margin:0 0 8px; background:var(--accent-soft); color:var(--accent);
  border-radius:var(--r); padding:11px 15px; font-size:14px}

h1{font-size:25px; margin:0 0 6px} h1.doc{font-size:23px}
h2{font-size:16px; margin:30px 0 10px; letter-spacing:.02em}
.sub{color:var(--ink-2); margin:0 0 18px}
.why{color:var(--ink-3); font-size:12.5px; margin-left:10px}
.hint{color:var(--ink-3); font-size:13px; margin:12px 0 0; max-width:74ch}
.empty{color:var(--ink-3)}
.cnt{color:var(--ink-3); font-weight:400; font-size:13px}
.back{display:inline-block; margin-bottom:14px; color:var(--ink-2); font-size:14px}
.back:hover{color:var(--accent); text-decoration:none}

/* sign-in ----------------------------------------------------------------- */
.gate{width:100%; max-width:390px; background:var(--panel);
  border:1px solid var(--rule); border-radius:var(--r); padding:26px 30px 22px;
  text-align:center}
.glogo{margin-bottom:10px; max-width:150px; height:auto}
.gate h1{font-size:23px; margin-bottom:4px}
.gate .tagline{color:var(--ink-2); font-size:13.5px; margin:0 0 18px}
.gate form{display:block; text-align:left}
.gate label{display:block; margin-bottom:12px}
.gate label span{display:block; font-size:12.5px; color:var(--ink-2); margin-bottom:5px}
.gate label em{color:var(--ink-3); font-style:normal}
.gate input{width:100%; padding:10px 12px; border:1px solid var(--rule);
  border-radius:var(--r); background:var(--panel-2); color:var(--ink); font:inherit}
.gate input:focus{outline:none; border-color:var(--accent)}
.gate button{width:100%; margin-top:6px}
.gate.wide{max-width:520px}
.gate select{width:100%; padding:11px 13px; border:1px solid var(--rule);
  border-radius:var(--r); background:var(--panel-2); color:var(--ink); font:inherit}
.gate select:focus{outline:none; border-color:var(--accent)}
.gate input:disabled{color:var(--ink-3); cursor:not-allowed}
/* Two fields on one row whose labels are not the same length. Aligning on the
   bottom edge keeps the inputs level however the label text wraps -- at this
   width, at a narrower one, or after a translation makes a label longer. */
.pair{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end;
  margin-bottom:14px}
.pair label{margin-bottom:0}
.pair .cc{flex:1 1 210px} .pair .ph{flex:1 1 210px}
.pair input, .pair select{display:block; height:46px}
.small{font-size:11.5px; display:block}
.under{display:block; margin-top:5px; font-size:12px; color:var(--ink-3);
  line-height:1.45}
.under.standalone{margin:-6px 0 14px}
.mailstate{color:var(--ink-3); font-size:13px; margin:-8px 0 18px}
.note-box{background:var(--accent-soft); color:var(--accent); border-radius:var(--r);
  padding:10px 13px; font-size:13.5px; margin:0 0 18px; text-align:left}
.codebox{font-family:"Cascadia Mono",Consolas,monospace; font-size:26px;
  letter-spacing:.34em; text-align:center}
.resend{margin-top:10px}
.resend button{width:100%}
a.quiet{color:var(--ink-3); font-size:12.5px}
.small-btn{padding:6px 15px; font-size:13.5px}
.small-btn:hover{text-decoration:none; filter:brightness(1.08)}
.gate textarea{width:100%; padding:11px 13px; border:1px solid var(--rule);
  border-radius:var(--r); background:var(--panel-2); color:var(--ink); font:inherit;
  resize:vertical}
.gate textarea:focus{outline:none; border-color:var(--accent)}
/* Off-screen rather than display:none -- a bot that reads styles skips a hidden
   field, and this one is meant to be filled in. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.issued{background:var(--accent-soft); border:1px solid var(--accent);
  border-radius:var(--r); padding:18px 22px; margin-bottom:24px}
.issued h2{margin-top:0; color:var(--accent)}
.issued p{color:var(--ink-2); font-size:14px}
.creds{max-width:520px; margin-bottom:16px}
.creds td{font-size:15px}
.creds td:first-child{color:var(--ink-2); width:110px}
.gate .foot{margin:16px 0 0; font-size:12.5px; color:var(--ink-3)}
.err{background:var(--bad-soft); color:var(--bad); border-radius:var(--r);
  padding:10px 13px; font-size:13.5px; margin:0 0 18px; text-align:left}

/* upload ------------------------------------------------------------------ */
.drop{background:var(--panel); border:1px solid var(--rule); border-radius:var(--r);
  padding:22px 26px}
.drophead{display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  flex-wrap:wrap}
.drophead h1{margin-bottom:4px}
.drophead .sub{margin-bottom:0}
.meter{text-align:right; background:var(--panel-2); border:1px solid var(--rule);
  border-radius:var(--r); padding:10px 16px; min-width:150px}
.meter.out{border-color:var(--bad)}
.meter .mk{display:block; font-size:10.5px; letter-spacing:.09em; font-weight:700;
  text-transform:uppercase; color:var(--ink-3)}
.meter .mv{font-size:28px; font-weight:700; color:var(--accent); line-height:1.1}
.meter.out .mv{color:var(--bad)}
.meter .ml{display:block; font-size:11.5px; color:var(--ink-3)}

.terms{margin:18px 0 4px; background:var(--accent-soft); color:var(--ink-2);
  border-left:3px solid var(--accent); border-radius:0 7px 7px 0;
  padding:13px 16px; font-size:13.5px; line-height:1.55; max-width:none}
.terms strong{color:var(--ink)}

.drop form{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-top:16px}
.file{flex:1 1 300px; position:relative; display:block}
.file input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%}
.fname{display:block; padding:11px 14px; border:1.5px dashed var(--rule);
  border-radius:var(--r); color:var(--ink-2); background:var(--panel-2)}
.file:hover .fname{border-color:var(--accent); color:var(--ink)}
.isin{display:flex; flex-direction:column; gap:5px}
.isin span{font-size:12.5px; color:var(--ink-2)}
.isin em{color:var(--ink-3); font-style:normal}
.isin input{padding:10px 12px; border:1px solid var(--rule); border-radius:var(--r);
  background:var(--panel-2); color:var(--ink); font-family:"Cascadia Mono",monospace;
  width:190px; text-transform:uppercase}
.check{display:flex; align-items:center; gap:7px; color:var(--ink-2); font-size:13.5px;
  padding-bottom:11px}

button{font:inherit; font-weight:600; cursor:pointer; border-radius:var(--r);
  padding:11px 22px; color:var(--ink);
  background:linear-gradient(135deg, rgba(110,231,255,.15), rgba(167,139,250,.15));
  border:1px solid rgba(255,255,255,.12);
  transition:box-shadow .3s, background .3s}
button:hover{
  background:linear-gradient(135deg, rgba(110,231,255,.25), rgba(167,139,250,.25));
  box-shadow:0 8px 40px rgba(34,211,238,.3)}
button.ghost,.btn.ghost{background:none; color:var(--ink-2);
  border:1px solid var(--rule); padding:7px 13px; font-size:13px; font-weight:600;
  box-shadow:none}
button.ghost:hover,.btn.ghost:hover{background:none; color:var(--ink);
  border-color:var(--accent); box-shadow:none}
.btn{display:inline-block; color:var(--ink); padding:9px 18px;
  border-radius:var(--r); font-weight:600;
  background:linear-gradient(135deg, rgba(110,231,255,.15), rgba(167,139,250,.15));
  border:1px solid rgba(255,255,255,.12);
  transition:box-shadow .3s, background .3s}
.btn:hover{text-decoration:none;
  background:linear-gradient(135deg, rgba(110,231,255,.25), rgba(167,139,250,.25));
  box-shadow:0 8px 40px rgba(34,211,238,.3)}
button.x{background:none; border:0; color:var(--ink-3); padding:2px 8px;
  font-size:17px; box-shadow:none}
button.x:hover{background:none; color:var(--bad); box-shadow:none}
.acts{display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap}
.acts form{display:flex; gap:5px; align-items:center}
.acts input[type=number]{padding:6px 8px; border:1px solid var(--rule);
  border-radius:6px; background:var(--panel-2); color:var(--ink); font:inherit;
  font-size:13px}

/* status ------------------------------------------------------------------ */
.status{margin:18px 0 6px; color:var(--ink-2); font-size:14px}
.dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px}
.dot.ok{background:var(--ok)} .dot.bad{background:var(--bad)}
.q{margin-left:12px; color:var(--accent)}

/* tables ------------------------------------------------------------------ */
.scroll{overflow-x:auto}
table{width:100%; border-collapse:collapse; margin-top:10px}
th{text-align:left; font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; padding:9px 12px;
  border-bottom:1px solid var(--rule); white-space:nowrap}
td{padding:10px 12px; border-bottom:1px solid var(--rule); vertical-align:top}
tbody tr:hover{background:var(--panel)}
.r{text-align:right}
table.fields td.fn{color:var(--ink-2); width:210px}
table.fields td.fv{font-weight:600; max-width:480px; word-break:break-word}
tr.empty td.fv{font-weight:400}
.dash{color:var(--ink-3)}
table.plain td{border-bottom:1px solid var(--rule)}
table.plain td:first-child{color:var(--ink-2); width:160px; white-space:nowrap}

.tag{display:inline-block; font-size:11px; font-weight:700; padding:2px 8px;
  border-radius:4px; white-space:nowrap; background:var(--panel-2); color:var(--ink-3)}
.tag.ok{background:var(--ok-soft); color:var(--ok)}
.tag.bad{background:var(--bad-soft); color:var(--bad)}
.tag.warn{background:var(--warn-soft); color:var(--warn)}
.tag.run{background:var(--blue-soft); color:var(--blue)}

.mtag{display:inline-block; font-size:12px; font-weight:700; padding:3px 9px;
  border-radius:4px; white-space:nowrap}
.mtag.pr{background:var(--blue-soft); color:var(--blue)}
.mtag.fb{background:var(--accent-soft); color:var(--accent)}
.mtag em{font-style:normal; opacity:.75; font-size:10.5px}

/* result ------------------------------------------------------------------ */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px; margin:20px 0}
.stats div{background:var(--panel); border:1px solid var(--rule); border-radius:var(--r);
  padding:14px 16px}
.stats .k{display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; margin-bottom:6px}
.stats .v{font-size:24px; font-weight:700}
.stats .v em{font-style:normal; font-size:13px; color:var(--ink-3); font-weight:400}
.stats .foot{display:block; margin-top:5px; font-size:11.5px; color:var(--ink-3)}

.bars{display:flex; flex-wrap:wrap; gap:10px}
.bar{border-radius:8px; padding:12px 16px; border:1px solid var(--rule);
  background:var(--panel); min-width:190px}
.bar.pr{border-left:3px solid var(--blue)}
.bar.fb{border-left:3px solid var(--accent)}
.bar .mn{display:block; font-family:"Cascadia Mono",monospace; font-size:13px;
  color:var(--ink-2)}
.bar .mv{font-size:19px; font-weight:700}
.note{color:var(--ink-2); font-size:14px; max-width:78ch}

.working{display:flex; align-items:center; gap:12px; background:var(--panel);
  border:1px solid var(--rule); border-left:3px solid var(--blue);
  border-radius:var(--r); padding:15px 18px; margin:18px 0}
.working .el{margin-left:auto; color:var(--ink-3); font-family:"Cascadia Mono",monospace}
.spin{width:15px; height:15px; border:2px solid var(--rule);
  border-top-color:var(--blue); border-radius:50%; animation:sp .8s linear infinite;
  flex:none}
@keyframes sp{to{transform:rotate(360deg)}}

.card{background:var(--panel); border:1px solid var(--rule); border-radius:var(--r);
  padding:18px 20px; margin:18px 0}
.card.bad{border-left:3px solid var(--bad)}
.card.warn-card{border-left:3px solid var(--warn); background:var(--warn-soft)}
.card.warn-card h2{color:var(--warn); margin-top:0}
.flaglist{margin:12px 0 0; padding-left:18px}
.flaglist li{color:var(--ink-2); font-size:12.5px; font-family:"Cascadia Mono",
  Consolas,monospace; margin-bottom:6px; word-break:break-word}
.card h1,.card h2{margin-top:0}
pre{white-space:pre-wrap; word-break:break-word; color:var(--ink-2); font-size:12.5px;
  background:var(--bg); padding:12px; border-radius:6px; margin:0}

/* about ------------------------------------------------------------------- */
/* The article used to be one 74ch column pinned to the left of a 1180px page,
   which left two thirds of a desktop window empty. It now centres, and the
   material that does not need to be read in order sits beside the steps. */
.doc-page{max-width:760px; margin:0 auto}

/* landing ----------------------------------------------------------------- */
/* Both landing pages are meant to be read without scrolling, so the page is
   centred in the viewport rather than stacked from the top. */
body.onescreen main{display:flex; align-items:center; justify-content:center;
  min-height:calc(100vh - 148px); padding-top:0; padding-bottom:0}
body.onescreen .hero{margin:0}
.hero.tight{text-align:left; max-width:760px}
.hero.tight .lead{margin:0 0 4px; max-width:none}
.hero.tight .cta{justify-content:flex-start}
.hero.tight .ctanote{margin-left:0; text-align:left}
.hero.tight .back{margin-bottom:10px}

.steps4{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  margin:18px 0 0; text-align:left}
.steps4 div{background:var(--panel); border:1px solid var(--rule);
  border-radius:var(--r); padding:12px 14px}
.steps4 .n{display:inline-block; width:22px; height:22px; line-height:22px;
  text-align:center; border-radius:50%; background:var(--accent-soft);
  color:var(--accent); font-size:12px; font-weight:700; margin-bottom:8px}
.steps4 strong{display:block; font-size:15px; margin-bottom:3px}
.steps4 em{font-style:normal; font-size:12.5px; color:var(--ink-3);
  line-height:1.45}

.facts{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  margin:22px 0 24px; text-align:left}
.facts div{background:var(--panel); border:1px solid var(--rule);
  border-radius:var(--r); padding:13px 15px}
.facts .k{display:block; font-size:10.5px; letter-spacing:.09em; font-weight:700;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
.facts .v{display:block; font-size:16px; font-weight:700; color:var(--accent);
  margin-bottom:4px}
.facts em{font-style:normal; font-size:12.5px; color:var(--ink-3);
  line-height:1.45}
.hero{text-align:center; max-width:860px; margin:0 auto}
.herologo{max-width:150px; height:auto; margin-bottom:8px}
.hero h1{font-size:27px; line-height:1.2; margin-bottom:8px}
.hero .lead{font-size:15.5px; color:var(--ink-2); max-width:66ch;
  margin:0 auto 22px}
.byline{font-size:12.5px; color:var(--ink-3); margin:0 0 12px;
  letter-spacing:.02em}
.byline a{color:var(--ink-2)}

/* The trial terms as one row of plain facts rather than four cards. */
.quickfacts{list-style:none; display:flex; flex-wrap:wrap; justify-content:center;
  gap:6px 22px; padding:0; margin:16px auto 18px; max-width:76ch;
  font-size:12.5px; color:var(--ink-3)}
.quickfacts li{position:relative}
.quickfacts li + li::before{content:"·"; position:absolute; left:-13px;
  color:var(--rule)}
.quickfacts strong{color:var(--ink-2); font-weight:600}
.cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:0}
.btn.big{padding:13px 28px; font-size:15.5px}
.ctanote{font-size:12px; color:var(--ink-3); max-width:64ch; margin:10px auto 0}
.closer{text-align:center; margin-top:34px}
.closer h2{font-size:19px; margin-bottom:16px}
.panel{max-width:760px; margin-left:auto; margin-right:auto}
.doc-head{display:block; max-width:68ch; margin:0 auto 26px; text-align:center}
.doc-head h1{margin-bottom:10px}
.doc-page .lead{font-size:17.5px; color:var(--ink); margin:0 0 16px}
.doc-page p{color:var(--ink-2); margin-left:auto; margin-right:auto}
.doc-page h2{font-size:15px; margin-top:0}
.doc-page ul,.doc-page ol{color:var(--ink-2); padding-left:20px; margin-bottom:0}
.doc-page li{margin-bottom:9px}
.doc-page li:last-child{margin-bottom:0}
.doc-page .steps li strong{color:var(--ink)}

.panel{background:var(--panel); border:1px solid var(--rule); border-radius:var(--r);
  padding:22px 26px}
.panel h2:not(:first-child){margin-top:24px}
.panel table{margin-top:0}
.panel table.plain tr:last-child td{border-bottom:0}
.panel table.plain td{padding-left:0}

.smallprint{font-size:13px; color:var(--ink-3); border-top:1px solid var(--rule);
  padding-top:16px; margin:26px auto 0; text-align:center; max-width:80ch}

@media (max-width:640px){
  main{padding:18px 14px 40px}
  header{padding:12px 14px} footer{padding:16px 14px}
  nav{gap:10px; font-size:13px}
  table.fields td.fn{width:auto}
  .drophead{flex-direction:column}
  .meter{text-align:left; width:100%}
}

/* Four across is the point on a laptop; below that, two, then one. */
@media (max-width:820px){
  .steps4,.facts{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:25px}
}
@media (max-width:460px){
  .steps4,.facts{grid-template-columns:1fr}
}

/* Inside a sign-in card the pair is two short fields, not two wide ones. */
.gate .pair{gap:10px; margin-bottom:12px}
.gate .pair .cc,.gate .pair .ph{flex:1 1 120px}
.gate .pair input,.gate .pair select{height:auto}