/* vizhi.dev — one stylesheet for every page. No build step, no external requests.
   Light and dark follow the system; the keypad illustration stays dark in both,
   because it depicts hardware. */

:root{
  --ground:#f7f6f2; --stage:#ffffff; --line:#e3e0d9; --soft:#f0ece3;
  --ink:#1b1a18; --muted:#5b5954; --faint:#8a877f;
  --amber:#a86a1f; --amber-fill:#e8b84b; --amber-ink:#1a1405;
  --blue:#3d6ca8; --teal:#2b8a75; --pink:#b8505f;
  --disp:"Avenir Next",Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#141517; --stage:#1b1d20; --line:#2b2e33; --soft:#202226;
    --ink:#eceef0; --muted:#9aa0a8; --faint:#6b7076;
    --amber:#e8b84b; --amber-fill:#e8b84b; --amber-ink:#1a1405;
    --blue:#8fb7e8; --teal:#74c4b0; --pink:#e39aa6;
  }
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--ground);color:var(--ink);font-family:var(--disp);
     -webkit-font-smoothing:antialiased;line-height:1.55;font-size:16px}
a{color:var(--ink)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}
section{padding:64px 0}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
         color:var(--amber);margin-bottom:16px}
h1{font-size:clamp(36px,6vw,64px);font-weight:600;line-height:1.05;letter-spacing:-.015em;text-wrap:balance}
h2{font-size:clamp(26px,3.6vw,38px);font-weight:600;line-height:1.12;letter-spacing:-.01em;text-wrap:balance;margin-bottom:16px}
h3{font-size:19px;font-weight:600}
.lede{font-size:clamp(16px,1.5vw,19px);color:var(--muted);max-width:36em}
.lede b{color:var(--ink);font-weight:600}
code,kbd,pre{font-family:var(--mono)}
code{font-size:.9em;background:var(--soft);padding:1px 6px;border-radius:5px}
kbd{font-size:.85em;background:var(--soft);border:1px solid var(--line);border-bottom-width:2px;
    border-radius:6px;padding:1px 7px;white-space:nowrap}
pre{background:#0a0b0c;color:#eceef0;padding:14px 16px;border-radius:10px;overflow-x:auto;
    font-size:13.5px;line-height:1.55;margin:14px 0}
pre code{background:none;padding:0;font-size:inherit;color:inherit}

/* header */
header.site{display:flex;align-items:center;gap:10px;padding:20px 0;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
       font-weight:600;font-size:17px;letter-spacing:.01em}
.mark{width:30px;height:30px;border-radius:8px;background:#0a0b0c;display:inline-flex;
      align-items:center;justify-content:center;flex:none}
.mark svg{width:20px;height:20px}
header.site nav{margin-left:auto;display:flex;gap:20px;font-size:14px;flex-wrap:wrap}
header.site nav a{color:var(--muted);text-decoration:none}
header.site nav a:hover,header.site nav a[aria-current]{color:var(--ink)}
@media (max-width:640px){
  header.site{flex-wrap:wrap}
  header.site nav{margin-left:0;width:100%;gap:16px;padding-top:6px}
}

/* buttons */
.cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 20px;border-radius:11px;text-decoration:none;
     font-weight:600;font-size:15px;line-height:1.2}
.btn.primary{background:var(--amber-fill);color:var(--amber-ink)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--faint)}
.btn.small{padding:8px 14px;font-size:14px;border-radius:9px}
.sub{font-family:var(--mono);font-size:12.5px;color:var(--faint);margin-top:18px;line-height:1.7}

/* badges */
.badge{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
       text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid var(--line);
       color:var(--muted);white-space:nowrap;vertical-align:middle}
.badge.review{color:var(--amber);border-color:var(--amber)}
.badge.preview{color:var(--blue);border-color:var(--blue)}
.badge.available{color:var(--teal);border-color:var(--teal)}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding:56px 0 64px}
@media (max-width:860px){.hero{grid-template-columns:1fr}}

/* hero photo */
.photo{margin:0 0 0 auto;width:min(440px,100%)}
@media (max-width:860px){.photo{margin:8px 0 0;width:min(340px,100%)}}
.photo img{display:block;width:100%;height:auto;border-radius:22px;box-shadow:0 30px 60px rgba(0,0,0,.28)}

/* band */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--stage)}
.band .wrap{padding-top:52px;padding-bottom:52px}
.band p{font-size:clamp(17px,1.8vw,21px);color:var(--muted);max-width:42em;line-height:1.6}
.band b{color:var(--ink)}

/* feature cards */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
@media (max-width:860px){.feats{grid-template-columns:1fr}}
.feat{border:1px solid var(--line);border-radius:16px;padding:24px 22px;background:var(--stage);
      display:flex;flex-direction:column;gap:10px}
.feat .glyph{font-size:22px;color:var(--amber)}
.feat p{font-size:14.5px;color:var(--muted)}

/* family list */
.family{margin-top:8px;border-top:1px solid var(--line)}
.member{display:grid;grid-template-columns:52px 1fr auto;gap:8px 20px;padding:24px 0;
        border-bottom:1px solid var(--line);align-items:start}
.member img{width:52px;height:52px;border-radius:12px;display:block}
.member .mark-planned{width:52px;height:52px;border-radius:12px;border:1px dashed var(--line);
        display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:20px}
.member .for{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.member h3{font-size:21px;margin:2px 0 6px}
.member p{font-size:15px;color:var(--muted);max-width:52em}
.member .meta{font-family:var(--mono);font-size:12px;color:var(--faint);margin-top:8px}
.member .side{display:flex;flex-direction:column;align-items:flex-end;gap:12px;padding-top:4px}
@media (max-width:640px){
  .member{grid-template-columns:44px 1fr}
  .member img,.member .mark-planned{width:44px;height:44px}
  .member .side{grid-column:2;flex-direction:row;align-items:center;justify-content:flex-start}
}
.req{font-family:var(--mono);font-size:12.5px;color:var(--faint);margin-top:20px}

/* guide pages */
.guide{display:grid;grid-template-columns:210px minmax(0,1fr);gap:56px;padding:48px 0 72px}
@media (max-width:1023px){.guide{grid-template-columns:1fr;gap:28px}}
.toc{position:sticky;top:24px;align-self:start;font-size:13.5px}
@media (max-width:1023px){.toc{position:static}}
.toc .eyebrow{margin-bottom:10px}
.toc a{display:block;color:var(--muted);text-decoration:none;padding:4px 0;line-height:1.35}
.toc a:hover{color:var(--ink)}
@media (max-width:1023px){
  .toc a{display:inline-block;margin:0 14px 6px 0}
}
article{max-width:70ch;min-width:0}
article h1{font-size:clamp(30px,4vw,44px);margin-bottom:10px}
article .lede{margin-bottom:12px}
article h2{font-size:24px;margin:52px 0 12px;padding-top:6px;scroll-margin-top:28px}
article h2:first-of-type{margin-top:40px}
article h3{font-size:17px;margin:26px 0 8px;scroll-margin-top:28px}
article p,article li{font-size:16px}
article p{margin:10px 0}
article ul,article ol{padding-left:22px;margin:10px 0}
article li{margin:8px 0}
article li>ul{margin-top:4px}
article hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.callout{border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:10px;
         padding:12px 16px;margin:16px 0;background:var(--stage)}
.callout.mac{border-left-color:var(--blue)}
.callout.win{border-left-color:var(--teal)}
.callout .tag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
              color:var(--muted);display:block;margin-bottom:4px}
.callout p{margin:6px 0;font-size:15px}
.tablewrap{overflow-x:auto;margin:14px 0}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{text-align:left;vertical-align:top;padding:9px 10px;border-top:1px solid var(--line)}
tr:last-child td{border-bottom:1px solid var(--line)}
th{font-weight:600;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em;border-top:0;padding-top:0}
td:first-child{white-space:normal}
details{border:1px solid var(--line);border-radius:10px;padding:10px 16px;margin:14px 0;background:var(--stage)}
summary{cursor:pointer;font-weight:600;font-size:15px}
details[open] summary{margin-bottom:8px}
.pathlist{list-style:none;padding:0}
.pathlist li{font-family:var(--mono);font-size:13.5px;margin:6px 0;word-break:break-all}
.pathlist li span{font-family:var(--disp);color:var(--muted);font-size:14px;display:block}
.faq h2{font-size:22px;margin:44px 0 8px}
.faq h3{font-size:17px;margin:26px 0 6px}
.faq p,.faq li{color:var(--ink)}
.legal p,.legal li{font-size:15.5px}
.legal h2{font-size:20px;margin:36px 0 8px}

/* support */
.support .cta{margin-top:20px}

/* footer */
footer{border-top:1px solid var(--line);padding:36px 0 56px;margin-top:40px}
footer .row{display:flex;gap:22px;flex-wrap:wrap;font-size:14px}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--ink)}
footer .disc{margin-top:18px;font-size:13px;color:var(--faint);max-width:56em;line-height:1.6}