/* The application. Same design tokens as the marketing site, so a customer
 * who pays does not land somewhere that looks like a different company. */

:root{
  --paper:#FBFAF8; --ink:#15171A; --body:#3A3F45; --muted:#6B7178;
  --line:#E3DFD8; --rule:#EFEBE4; --sunk:#F4F1EC; --white:#fff;
  --green:#14503C; --green-l:#1C6B50; --oxide:#9A3B1E; --amber:#8A5A00;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--body);
  font:16px/1.6 Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
a{color:var(--green); text-decoration:underline; text-underline-offset:2px}
a:hover{color:var(--green-l)}
h1,h2,h3{color:var(--ink); letter-spacing:-.02em; margin:0}
h1{font-size:27px; line-height:1.2; font-weight:700}
h2{font-size:20px; line-height:1.3; font-weight:700}
h3{font-size:16px; line-height:1.35; font-weight:600; letter-spacing:-.01em}
p{margin:0 0 12px}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------------------------------------------------------------- masthead */
.mast{background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.mast .in{max-width:1080px; margin:0 auto; padding:14px 20px; display:flex;
  align-items:center; gap:18px; flex-wrap:wrap}
.brand{font-size:17px; font-weight:700; letter-spacing:-.02em; text-decoration:none; color:var(--ink)}
.brand .b1{color:var(--ink)} .brand .b2{color:var(--green)}
.mast nav{margin-left:auto; display:flex; align-items:center; gap:16px; font-size:14px}
.mast nav a{color:var(--body); text-decoration:none}
.mast nav a:hover{color:var(--green)}
.who{font-size:13px; color:var(--muted)}

/* ------------------------------------------------------------------ layout */
.wrap{max-width:1080px; margin:0 auto; padding:28px 20px 80px}
.narrow{max-width:620px}
.row{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.spread{display:flex; gap:16px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap}
.stack>*+*{margin-top:10px}
.grid{display:grid; gap:14px}
@media (min-width:820px){ .cols{grid-template-columns:300px 1fr} }

/* ------------------------------------------------------------------ cards */
.card{background:var(--white); border:1px solid var(--line); padding:22px 24px}
.card+.card{margin-top:14px}
.card h2{margin-bottom:4px}
.lede{color:var(--muted); font-size:15px; margin:0 0 16px}
.sep{border:0; border-top:1px solid var(--rule); margin:20px 0}

/* ----------------------------------------------------------------- buttons */
.btn{display:inline-block; border:1px solid var(--ink); background:var(--white);
  color:var(--ink); font:600 15px/1 Archivo,sans-serif; padding:12px 18px;
  cursor:pointer; text-decoration:none; text-align:center}
.btn:hover{background:var(--sunk); color:var(--ink)}
.btn.primary{background:var(--green); border-color:var(--green); color:#fff}
.btn.primary:hover{background:var(--green-l); border-color:var(--green-l); color:#fff}
.btn.sm{padding:8px 13px; font-size:14px}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btn.quiet{border-color:var(--line); color:var(--body); font-weight:500}
.btn.quiet:hover{border-color:var(--ink); color:var(--ink)}

/* ------------------------------------------------------------------ fields */
label{display:block; font-size:15px; font-weight:600; color:var(--ink); margin-bottom:3px}
.hint{font-size:13px; line-height:1.5; color:var(--muted); margin:0 0 7px}
.ref{font:500 11px/1.4 "IBM Plex Mono",ui-monospace,monospace; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted)}
input[type=text],input[type=email],input[type=url],input[type=date],input[type=number],
textarea,select{
  width:100%; font:15px/1.5 Archivo,sans-serif; color:var(--ink); background:var(--white);
  border:1px solid var(--line); padding:10px 12px; border-radius:0
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--green); outline-offset:-2px;
  border-color:var(--green)}
textarea{min-height:88px; resize:vertical}
.field{margin-bottom:20px}
.field.miss input,.field.miss textarea,.field.miss select{border-color:var(--oxide)}
.feeds{font-size:12px; color:var(--muted); margin-top:5px}
.checkrow{display:flex; gap:9px; align-items:flex-start}
.checkrow input{width:18px; height:18px; margin-top:2px; flex:none}
.checkrow label{margin:0}

/* --------------------------------------------------------------- messages */
.msg{border:1px solid var(--line); background:var(--white); padding:13px 16px;
  font-size:14px; line-height:1.55; margin-bottom:16px}
.msg.bad{border-left:3px solid var(--oxide)}
.msg.warn{border-left:3px solid var(--amber)}
.msg.good{border-left:3px solid var(--green)}
.msg.info{border-left:3px solid var(--muted)}
.msg ul{margin:8px 0 0; padding-left:20px}
.msg b{color:var(--ink)}

/* ------------------------------------------------------------------ lists */
.list{border-top:1px solid var(--rule)}
.item{border-bottom:1px solid var(--rule); padding:14px 0; display:flex; gap:14px;
  align-items:flex-start; justify-content:space-between; flex-wrap:wrap}
.item .t{font-weight:600; color:var(--ink); font-size:15px}
.item .d{font-size:13px; color:var(--muted); margin-top:2px}
.item .r{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

.tag{display:inline-block; font:600 11px/1 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.05em; text-transform:uppercase; padding:5px 8px; border:1px solid var(--line);
  color:var(--muted); background:var(--sunk); white-space:nowrap}
.tag.now{border-color:var(--green); color:var(--green); background:#EFF5F2}
.tag.old{opacity:.7}
.tag.bad{border-color:var(--oxide); color:var(--oxide); background:#FBF1ED}

/* ------------------------------------------------------------------ progress */
.bar{display:flex; gap:3px; margin:10px 0 4px}
.bar i{flex:1; height:5px; background:var(--rule)}
.bar i.on{background:var(--green)}
.pct{font-size:13px; color:var(--muted)}

/* ------------------------------------------------------------------ nav rail */
.rail{position:sticky; top:70px}
.rail a{display:block; padding:9px 12px; font-size:14px; color:var(--body);
  text-decoration:none; border-left:2px solid var(--rule)}
.rail a:hover{background:var(--sunk); color:var(--ink)}
.rail a.on{border-left-color:var(--green); color:var(--ink); font-weight:600; background:var(--sunk)}
.rail .n{float:right; font-size:12px; color:var(--muted); font-weight:500}

/* ------------------------------------------------------------------ tables */
.tw{overflow-x:auto; max-width:100%}
table{width:100%; border-collapse:collapse; font-size:14px}
th{text-align:left; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid var(--ink); padding:0 12px 6px 0; font-weight:600}
td{padding:9px 12px 9px 0; border-bottom:1px solid var(--rule); vertical-align:top}

/* ------------------------------------------------------------------ misc */
.stamp{background:var(--sunk); border-left:3px solid var(--green); padding:10px 14px;
  font:500 13px/1.5 "IBM Plex Mono",ui-monospace,monospace; color:var(--ink); margin:0 0 16px}
.spin{display:inline-block; width:13px; height:13px; border:2px solid var(--line);
  border-top-color:var(--green); border-radius:50%; animation:sp .7s linear infinite;
  vertical-align:-2px; margin-right:7px}
@keyframes sp{to{transform:rotate(360deg)}}
.hide{display:none!important}
footer{border-top:1px solid var(--line); background:var(--white); margin-top:40px}
footer .in{max-width:1080px; margin:0 auto; padding:22px 20px; font-size:13px;
  line-height:1.6; color:var(--muted)}

@media (max-width:520px){
  .wrap{padding:20px 16px 60px}
  h1{font-size:23px}
  .card{padding:18px 16px}
  .mast .in{padding:12px 16px}
}