/* Features, Docs and About (features.html, docs.html, about.html), the pages the header and footer link to besides
   pricing and the legal pages. Built on styles.css; this file adds only what those pages need. */

/* Page heads: the first section after one sits closer than the landing page's 136 px. */
.page-top+.sec{padding-top:104px}

/* Features: a row of the page's sections under the heading. */
.jump{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:28px}
.jump a{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:var(--surf);color:var(--mfg);font-size:13.5px}
.jump a:hover{color:var(--fg);background:var(--surf2);text-decoration:none}

/* Docs: the heading and the text in one column, the navigation beside both. */
.docs{display:grid;grid-template-columns:200px minmax(0,760px);grid-template-areas:"nav head" "nav body";column-gap:64px;row-gap:22px;align-items:start}
.docs-head{grid-area:head;margin-top:8px}
.docs-body{grid-area:body;min-width:0}
.docs-nav{grid-area:nav;position:sticky;top:24px;display:flex;flex-direction:column;gap:1px;max-height:calc(100vh - 48px);overflow-y:auto;padding-top:10px}
.docs-nav p{margin:18px 0 6px;padding:0 10px;font-family:"Geist Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--mfg)}
.docs-nav p:first-child{margin-top:0}
.docs-nav a{display:flex;align-items:center;min-height:32px;padding:0 10px;border-radius:8px;color:var(--mfg);font-size:13.5px}
.docs-nav a:hover{color:var(--fg);background:var(--hover);text-decoration:none}
.docs-nav a[aria-current]{color:var(--fg);background:var(--nav-on)}
.docs-body .prose h2:first-child{margin-top:12px}
.prose .doc-code{margin:0 0 16px;border-radius:12px;box-shadow:none}
.prose .doc-code .ed-bar{height:38px;padding:0 8px 0 12px}
.prose .ed-code{font-size:12.5px;line-height:21px;color:oklch(0.9 0.01 255);padding:14px 18px 16px}
.prose .docs-steps{list-style:none;padding:0;margin:0 0 18px;counter-reset:step;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.docs-steps li{counter-increment:step;display:flex;flex-direction:column;gap:8px;margin:0;padding:16px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,var(--surf2),var(--surf));font-size:14px;line-height:22px}
.docs-steps li::before{content:counter(step);display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;font-family:"Geist Mono",ui-monospace,monospace;font-size:11.5px;color:var(--pri);background:color-mix(in oklab,var(--pri) 13%,transparent);border:1px solid color-mix(in oklab,var(--pri) 32%,transparent)}
.docs-steps b{display:block;font-weight:600;color:var(--fg)}
.docs-help{margin-top:40px !important;padding-top:20px;border-top:1px solid var(--line)}

/* Docs → Masking: the same lines on the site and in the replay. */
.mask-demo{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;margin:4px 0 18px}
.md-card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surf);font-size:14px;line-height:20px;color:var(--fg)}
.md-card+.md-arrow+.md-card{font-family:"Geist Mono",ui-monospace,monospace;font-size:13px;color:var(--mfg)}
.md-card b{font-weight:600}
.md-h{font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--mfg)}
.md-in{display:flex;align-items:center;height:32px;padding:0 10px;border-radius:7px;border:1px solid var(--input);background:var(--page);font-family:"Geist Mono",ui-monospace,monospace;font-size:12.5px;overflow:hidden;white-space:nowrap}
.md-box{display:flex;align-items:center;justify-content:center;height:44px;border-radius:8px;background:repeating-linear-gradient(135deg,var(--surf2) 0 8px,var(--hover) 8px 16px);color:var(--mfg);font-family:Inter,system-ui,sans-serif;font-size:12px}
.md-empty{background:none;border:1px dashed var(--line2)}
.md-arrow{color:var(--pri);font-size:20px}

/* About */
.ab-person{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 24px;align-items:center;max-width:720px;margin:48px auto 0;padding:28px;box-sizing:border-box;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,var(--surf2),var(--surf) 65%);box-shadow:inset 0 1px 0 var(--hl)}
.ab-photo{grid-row:span 2;display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;border:1px solid var(--line2);background:var(--pri-s);color:var(--pri)}
.ab-photo svg{width:30px;height:30px}
.ab-person blockquote{margin:0}
.ab-person blockquote p{font-size:17px;line-height:27px;color:var(--fg);text-wrap:pretty}
.ab-person figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:14px}
.ab-person figcaption b{font-weight:600}
.ab-sec{padding-top:112px}
.ab-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:40px}
.ab-tile{gap:10px;padding:24px}
.ab-ico{display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-bottom:6px;border-radius:10px;background:color-mix(in oklab,var(--pri) 13%,transparent);color:var(--pri)}
.ab-two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 64px;align-items:start}
.ab-facts>div,.ab-contact li{display:grid;grid-template-columns:180px minmax(0,1fr);gap:4px 20px;padding:16px 0;border-top:1px solid var(--line);font-size:15px;line-height:24px}
.ab-facts>div:last-child,.ab-contact li:last-child{border-bottom:1px solid var(--line)}
.ab-facts dt{font-weight:600;color:var(--fg)}
.ab-facts dd{color:var(--mfg)}
.ab-facts dd a{white-space:nowrap}
.ab-contact a{font-weight:500}

@media (max-width:1000px){
.ab-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
.docs{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "nav" "body";row-gap:18px}
.docs-nav{position:static;flex-direction:row;gap:6px;max-height:none;margin:0 -16px;padding:0 16px 4px;overflow-x:auto;scrollbar-width:none}
.docs-nav p{display:none}
.docs-nav a{flex:none;min-height:32px;padding:0 12px;border:1px solid var(--line2);border-radius:999px;background:var(--surf);white-space:nowrap}
.ab-two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
.page-top+.sec{padding-top:56px}
.jump{justify-content:flex-start;flex-wrap:nowrap;margin:24px -16px 0;padding:0 16px 4px;overflow-x:auto;scrollbar-width:none}
.jump a{flex:none}
.prose .docs-steps{grid-template-columns:minmax(0,1fr)}
.docs-steps li{flex-direction:row;align-items:flex-start;gap:12px}
.docs-steps li::before{flex:none}
.mask-demo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.md-arrow{display:none}
.md-card{padding:12px;font-size:13px}
.ab-person{grid-template-columns:minmax(0,1fr);margin-top:36px;padding:22px}
.ab-photo{grid-row:auto;width:56px;height:56px}
.ab-tiles{grid-template-columns:minmax(0,1fr);margin-top:28px}
.ab-facts>div,.ab-contact li{grid-template-columns:minmax(0,1fr);padding:14px 0}
}