/* Triaj landing page. Paper with ruled grid, ballpoint-ink type, and triage tags as the one bold element. */
:root{
  --paper:#f6f7f9;--grid:#e3e8f2;--ink:#15224a;--ink2:#4b5675;--card:#ffffff;--line:#d6dce9;
  --now:#e0393e;--soon:#e9a100;--later:#1f9d84;--nowtx:#b4262b;--soontx:#8a5f00;--latertx:#107663;
  --display:"Archivo",system-ui,sans-serif;--read:"Atkinson",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0f1424;--grid:#18203a;--ink:#eef1fa;--ink2:#aab3cc;--card:#161e36;--line:#2a3456;
  --nowtx:#ff8a8d;--soontx:#f5c04a;--latertx:#4fd1b5}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:17px/1.55 var(--read);background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:32px 32px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,dt,.logo,.btn,.tabs button{font-family:var(--display)}
h2{font-size:clamp(28px,3.6vw,40px);line-height:1.08;font-weight:800;font-stretch:92%;letter-spacing:-.01em;margin:0 0 16px}
p{max-width:62ch}
code{font:600 .86em ui-monospace,Consolas,monospace;background:var(--card);border:1px solid var(--line);padding:1px 5px;border-radius:5px;word-break:break-word}
:focus-visible{outline:3px solid var(--now);outline-offset:3px}
main>section{max-width:1160px;margin:0 auto;padding:88px 24px}

.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;padding:13px 22px;border-radius:10px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.small{font-size:14px;padding:8px 16px;border-radius:8px}
.btn[hidden]{display:none}

.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:28px;padding:12px 24px;padding-top:calc(12px + env(safe-area-inset-top,0px));
  background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-stretch:110%;font-size:21px;text-decoration:none}
.logo img{border-radius:7px}
.links{display:flex;gap:24px;margin-left:auto;font-size:15px}
.links a{text-decoration:none;color:var(--ink2)}
.links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center;padding-top:72px!important}
h1{font-size:clamp(52px,8.4vw,108px);line-height:.92;font-weight:900;font-stretch:72%;letter-spacing:-.015em;margin:0 0 26px;text-wrap:balance}
.lede{font-size:19px;color:var(--ink2);margin:0 0 28px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.fine{font-size:14.5px;color:var(--ink2);margin-top:20px}

/* the board of triage tags */
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.bin h2{font-size:15px;font-weight:800;font-stretch:100%;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.bin h2:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c)}
.now{--c:var(--now);--tx:var(--nowtx)}.soon{--c:var(--soon);--tx:var(--soontx)}.later{--c:var(--later);--tx:var(--latertx)}
.tg{position:relative;display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-left:7px solid var(--c);
  border-radius:4px 12px 12px 4px;padding:14px 12px 12px 24px;margin-bottom:10px;box-shadow:0 1px 0 var(--line),0 8px 20px rgba(21,34,74,.06);
  animation:sortin .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.25s + var(--i) * .08s)}
.tg:before{content:"";position:absolute;left:8px;top:16px;width:9px;height:9px;border-radius:50%;background:var(--paper);border:1.5px solid var(--line)}
.tg b{font:700 15.5px/1.2 var(--display);font-stretch:95%}
.tg span{font-size:13.5px;color:var(--ink2)}
.tg em{font-style:normal;font:600 12.5px var(--display);color:var(--tx);margin-top:4px}
.soon .tg:nth-of-type(2){transform:rotate(-1.2deg)}
.later .tg:nth-of-type(2){transform:rotate(1deg)}
@keyframes sortin{from{opacity:0;transform:translate(calc(var(--i) * -18px + 40px),-24px) rotate(calc(var(--i) * 3deg - 9deg))}}

/* screenshots */
.screens{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:28px;align-items:end;padding-top:24px!important}
figure{margin:0}
.desk img{border-radius:12px;border:1px solid var(--line);box-shadow:0 30px 70px rgba(21,34,74,.16)}
.phone img{border-radius:28px;border:8px solid var(--ink);box-shadow:0 30px 60px rgba(21,34,74,.22)}

/* features */
.features{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:48px;align-items:start}
.features h2{position:sticky;top:96px}
dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:34px 36px}
dt{font-size:21px;font-weight:800;font-stretch:90%;line-height:1.15;margin-bottom:8px}
dd{margin:0;color:var(--ink2);font-size:16px}

/* install */
.install{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.install[hidden]{display:none}
.install>div{background:var(--ink);color:var(--paper);border-radius:18px;padding:40px 36px}
.install>div p{color:color-mix(in srgb,var(--paper) 78%,transparent);margin:0 0 22px}
.install .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.install .btn:hover{background:transparent;color:var(--paper)}
.how{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.how li{display:grid;gap:2px;padding-left:18px;border-left:3px solid var(--later);color:var(--ink2);font-size:16px}
.how b{font:800 18px var(--display);font-stretch:92%;color:var(--ink)}

/* companion */
.companion{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:start}
.cintro p{color:var(--ink2);margin:0 0 24px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tabs button{font-size:14.5px;font-weight:700;background:var(--card);color:var(--ink2);border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:10px}
.steps[hidden]{display:none}
.steps li{counter-increment:s;position:relative;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px 14px 56px;font-size:15.5px}
.steps li:before{content:counter(s);position:absolute;left:16px;top:13px;width:26px;height:26px;border-radius:50%;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font:800 13px var(--display)}

.privacy{padding-bottom:110px!important}
.privacy p{color:var(--ink2);font-size:18px}

.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;max-width:1160px;margin:0 auto;padding:24px 24px calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);font-size:14.5px;color:var(--ink2)}
.foot span{display:flex;gap:20px}

@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:44px}
  .features,.install,.companion{grid-template-columns:1fr;gap:28px}
  .features h2{position:static}
  .screens{grid-template-columns:minmax(0,1fr) 34%}
}
@media (max-width:640px){
  body{font-size:16px;background-size:26px 26px}
  main>section{padding:60px 16px}
  .top{padding-left:16px;padding-right:16px;gap:12px}
  .links{display:none}
  .top .btn{margin-left:auto}
  .hero{padding-top:40px!important}
  h1{font-size:clamp(50px,15vw,72px)}
  .lede{font-size:17.5px}
  .ctas .btn{flex:1 1 100%}
  .board{grid-template-columns:1fr;gap:4px}
  .soon .tg:nth-of-type(2),.later .tg:nth-of-type(2){transform:none}
  .screens{grid-template-columns:1fr;justify-items:center}
  .screens .desk{display:none}
  .screens .phone{width:min(300px,78%)}
  dl{grid-template-columns:1fr;gap:26px}
  .install>div{padding:30px 22px}
  .steps li{padding-left:52px}
  .foot{padding-left:16px;padding-right:16px}
}
@media (prefers-reduced-motion:reduce){.tg{animation:none}html{scroll-behavior:auto}}