/* Hort landing page. Direction B "Phosphor". Self-hosted fonts (OFL), no third-party requests. */
@font-face{font-family:"JetBrains Mono";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:800;font-style:normal;font-display:swap;src:url(fonts/jetbrains-mono-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}

:root{
  --bg:#F2EFE6;--surface:#E9E5D9;--ink:#15120F;--muted:#5E584E;--line:#D6D0C1;--line-strong:#B9B2A1;
  --accent:#E3A639;--accent-ink:#8A5A06;--on-accent:#15120F;--accent2:#3D7A1C;
  --term-bg:#110E0F;--term-ink:#EDE6DA;--term-muted:#8C857B;--term-line:#2C2627;--term-accent:#F0B43C;--term-accent2:#8CCB55;
  --f-display:"JetBrains Mono",ui-monospace,monospace;--f-body:"IBM Plex Sans",system-ui,sans-serif;--f-mono:"JetBrains Mono",ui-monospace,monospace;
  --r:4px;--frame-r:6px;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0E0B0C;--surface:#161213;--ink:#EDE6DA;--muted:#9C948A;--line:#272223;--line-strong:#3B3436;
    --accent:#F0B43C;--accent-ink:#F0B43C;--on-accent:#120D05;--accent2:#8CCB55;--term-bg:#080607;--term-line:#272223}
}
*{box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--f-body);-webkit-text-size-adjust:100%}
a{color:inherit}
code{font-family:var(--f-mono);font-size:.9em}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wrap{max-width:1160px;margin:0 auto}

.m-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px clamp(16px,4vw,48px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font:800 18px var(--f-display);letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.brand img{width:32px;height:32px}
.chev{color:var(--accent2);font-weight:800}
.m-links{display:flex;gap:20px;font-size:14px;color:var(--muted)}
.m-links a{text-decoration:none}
.m-links a:hover{color:var(--ink)}

.section{padding:clamp(40px,7vw,88px) clamp(16px,4vw,48px)}
.btn{display:inline-flex;align-items:center;gap:8px;font:700 14px/1 var(--f-mono);text-decoration:none;padding:13px 20px;border-radius:var(--r);border:1px solid transparent}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink)}

.term{background:var(--term-bg);color:var(--term-ink);border-radius:var(--r);font:14px/1.65 var(--f-mono);overflow:hidden;border:1px solid var(--term-line)}
.term-bar{display:flex;align-items:center;gap:6px;padding:9px 14px;border-bottom:1px solid var(--term-line);font-size:12px;color:var(--term-muted)}
.term-bar i{width:9px;height:9px;border-radius:50%;background:var(--term-line);display:inline-block}
.term pre{margin:0;padding:16px 18px;overflow-x:auto;font:inherit;white-space:pre}
.t-p{color:var(--term-accent2)} .t-m{color:var(--term-muted)} .t-a{color:var(--term-accent)} .t-v{color:var(--term-ink);font-weight:700}

.hero{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:center}
.eyebrow{font:700 13px var(--f-mono);color:var(--accent-ink);margin:0 0 18px}
.hero-mark{display:flex;align-items:center;gap:6px;margin-bottom:22px}
.hero-mark img{width:72px;height:72px}
.hero-mark .chev{font:800 56px/1 var(--f-mono)}
.hero h1{font:800 clamp(34px,5.6vw,64px)/1.02 var(--f-display);letter-spacing:-.03em;margin:0 0 18px;overflow-wrap:break-word}
.cur{display:inline-block;width:.5em;height:.9em;background:var(--accent);vertical-align:-.08em;margin-left:.08em;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.lede{color:var(--muted);font-size:17px;max-width:42ch;margin:0 0 26px}
.ctas{display:flex;gap:10px;flex-wrap:wrap}
.hero-note{color:var(--muted);font-size:14px;margin:18px 0 0;max-width:46ch}
.hero-term{box-shadow:8px 8px 0 var(--accent2)}

.sec-tag{font:700 13px var(--f-mono);color:var(--accent2);margin:0 0 10px}
.sec-h{font:800 clamp(26px,3.8vw,40px)/1.1 var(--f-display);letter-spacing:-.02em;margin:0 0 20px;max-width:24ch}
.sec-intro{color:var(--muted);max-width:62ch;margin:0 0 32px}
.sub-h{font:700 13px var(--f-mono);color:var(--muted);margin:40px 0 12px;text-transform:uppercase;letter-spacing:.08em}

.cards{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-strong);border-radius:var(--r)}
.card{padding:24px;border-right:1px solid var(--line-strong)}
.card:last-child{border-right:0}
.card .num{font:700 13px var(--f-mono);color:var(--accent-ink);display:block;margin-bottom:28px}
.card h3{margin:0 0 8px;font:700 17px/1.3 var(--f-mono)}
.card p{margin:0;color:var(--muted);font-size:15px}
.tag{display:inline-block;font:700 11px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.06em;padding:4px 6px;border-radius:var(--r);border:1px solid var(--line-strong);color:var(--muted);vertical-align:middle;margin-left:6px}
.tag-soon{border-color:var(--accent-ink);color:var(--accent-ink)}

.examples{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}
.example .label{font:700 12px var(--f-mono);margin:0 0 8px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent2)}
.example .label.soon{color:var(--accent-ink)}
.example .caption{color:var(--muted);font-size:14px;margin:10px 0 0}
.aside-note{margin:28px 0 0;padding:16px 20px;border-left:3px solid var(--accent2);background:var(--surface);color:var(--muted);font-size:15px;max-width:72ch}

.feat{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.feat li{display:grid;grid-template-columns:minmax(0,26ch) 1fr;gap:8px 24px;padding:16px 0;border-bottom:1px solid var(--line)}
.feat strong{font:700 15px/1.4 var(--f-mono)}
.feat span{color:var(--muted)}

.security{border-top:1px solid var(--line)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.cols h3{font:700 15px var(--f-mono);margin:0 0 12px}
.cols ul{margin:0;padding:0 0 0 18px;color:var(--muted)}
.cols li{margin-bottom:12px}
.cols li strong{color:var(--ink)}
.cols .tag{margin-left:4px}
.today-note{margin:32px 0 0;color:var(--muted);max-width:72ch}

.install-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}
.install-grid h3{font:700 13px var(--f-mono);color:var(--accent-ink);margin:0 0 8px}
.after{margin-top:8px}
.after-line{color:var(--muted);margin:14px 0 0}

.about{border-top:1px solid var(--line)}
.about p{max-width:66ch}
.about .why{color:var(--muted)}

.m-footer{border-top:1px solid var(--line);padding:32px clamp(16px,4vw,48px);font-size:14px;color:var(--muted)}
.m-footer .row{display:flex;flex-wrap:wrap;gap:8px 24px;margin-bottom:12px}
.m-footer a{text-decoration:none}
.m-footer a:hover{color:var(--ink);text-decoration:underline}
.m-footer p{margin:0 0 6px}
.m-footer .foot-brand{color:var(--ink);font:700 14px var(--f-mono)}

.legal{max-width:72ch}
.legal h1{font:800 clamp(28px,4vw,40px)/1.1 var(--f-display);letter-spacing:-.02em}
.legal h2{font:700 17px var(--f-mono);margin:32px 0 8px}

@media (max-width:760px){
  .m-links{display:none}
  .hero,.cols,.examples,.install-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .card{border-right:0;border-bottom:1px solid var(--line-strong)}
  .card:last-child{border-bottom:0}
  .feat li{grid-template-columns:1fr}
  .term{font-size:12.5px}
  .hero-term{box-shadow:5px 5px 0 var(--accent2)}
}
/* Web app: /login, /recover, /devices */
.btn{cursor:pointer}
.btn-ghost{background:transparent}
.btn:disabled{opacity:.55;cursor:default}
.btn-small{padding:7px 12px;font-size:13px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.muted{color:var(--muted)}
.form{max-width:44ch}
.field{margin:0 0 16px}
.field label{display:block;font:700 13px var(--f-mono);margin:0 0 6px}
.field input:not([type=checkbox]),.field textarea{width:100%;font:15px/1.4 var(--f-mono);padding:10px 12px;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r)}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.field textarea{resize:vertical}
.field .check{display:flex;align-items:center;gap:8px;font:400 14px var(--f-body);margin:10px 0 0}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 20px;margin:20px 0 0;max-width:72ch}
.facts dt{font:700 12px var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding-top:3px}
.facts dd{margin:0;overflow-wrap:anywhere}
@media (max-width:760px){.facts{grid-template-columns:1fr;gap:0}.facts dd{margin-bottom:12px}}
.hint{color:var(--muted);font-size:14px;margin:6px 0 0}
.status{min-height:1.6em;margin:8px 0;color:var(--muted)}
.status-error{color:#B3261E}
.status-ok{color:var(--accent2)}
@media (prefers-color-scheme:dark){.status-error{color:#FF8A80}}
.panel{border-top:1px solid var(--line-strong);padding:20px 0 4px;margin-top:24px;max-width:72ch}
.panel-h{font:700 15px var(--f-mono);margin:0 0 10px}
.notices{border-left:3px solid var(--accent);background:var(--surface);padding:14px 20px;margin:0 0 24px;max-width:72ch}
.notices ul{margin:0;padding-left:18px}
.list{width:100%;border-collapse:collapse;font-size:15px;margin-bottom:8px}
.list th{text-align:left;font:700 12px var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:8px 12px 8px 0;border-bottom:1px solid var(--line-strong)}
.list td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.list td:last-child,.list th:last-child{text-align:right;padding-right:0}
.kit{display:none}
@media print{
  body>*:not(.kit){display:none!important}
  .kit{display:block;color:#000;background:#fff;font:14px/1.6 var(--f-body);padding:24px}
  .kit h2{font:800 22px var(--f-display)}
  .kit dt{font:700 12px var(--f-mono);text-transform:uppercase;letter-spacing:.06em;margin-top:16px}
  .kit dd{margin:4px 0 0;font:700 18px var(--f-mono);word-break:break-all}
}
@media (max-width:760px){
  .list thead{display:none}
  .list tr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 0;border-bottom:1px solid var(--line)}
  .list td{border:0;padding:0}
  .list td:first-child{font-weight:600}
  .list td[data-label]::before{content:attr(data-label) ": ";color:var(--muted)}
  .list td:last-child{grid-row:1/span 4;grid-column:2;align-self:center}
}
/* /vault */
.field textarea{display:block}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.btn-danger{border-color:#B3261E;color:#B3261E}
@media (prefers-color-scheme:dark){.btn-danger{border-color:#FF8A80;color:#FF8A80}}
.vault-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 8px}
.search{flex:1 1 220px;font:15px/1.4 var(--f-mono);padding:11px 12px;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r)}
.vault-count{font-size:14px;margin:8px 0}
.entries{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong);max-width:880px}
.entry{padding:14px 0;border-bottom:1px solid var(--line)}
.entry-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.entry-name{margin:0;font:700 16px/1.4 var(--f-mono);overflow-wrap:anywhere}
.entry-desc{margin:2px 0 0;font-size:15px;overflow-wrap:anywhere}
.variants{list-style:none;margin:8px 0 0;padding:0}
.variant{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:5px 0}
.variant-label{flex:1 1 16ch;font:14px/1.4 var(--f-mono);color:var(--muted);overflow-wrap:anywhere}
.variant-actions{display:flex;gap:6px}
.variant-value{flex:1 1 100%;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px}
.variant-value:empty{display:none}
.entry .status:empty{min-height:0;margin:0}
.editor{border-left:3px solid var(--accent2);padding:4px 0 4px 16px;margin:12px 0 4px}
.editor .panel-h{margin-top:16px}
@media (max-width:480px){.field-row{grid-template-columns:1fr}.editor{padding-left:12px}}
@media (prefers-reduced-motion:reduce){.cur{animation:none}html{scroll-behavior:auto}}