/*
 * The pages around the landing page: the product pages, About, Contact, the
 * site map and the 404. Same brand as site/index.html — graphite, chalk, pink
 * for voice only, green for done only, Bricolage Grotesque and Figtree, no
 * gradients — without the landing page's animation.
 */
:root{
  --graphite:#1D2023;--chalk:#EEF0EA;--paper:#FAFBF8;
  --pink:#FF4F8B;--green:#0F7A55;--stone:#5E6561;--line:#D6DBD2;
  --display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --ui:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--chalk);color:var(--graphite);font-family:var(--ui);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:8px}
.wrap{max-width:1040px;margin:0 auto;padding:0 32px}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.08}
h1{font-size:clamp(40px,6vw,68px);letter-spacing:-.04em;margin-bottom:20px}
h2{font-size:clamp(28px,3.4vw,38px);margin:0 0 14px}
h3{font-size:21px;letter-spacing:-.02em;margin:0 0 6px;line-height:1.25}
p{max-width:64ch}
.lede{font-size:clamp(18px,1.7vw,21px);color:var(--stone);line-height:1.5}
.eyebrow{font-size:14px;font-weight:600;color:var(--stone);margin-bottom:16px}

/* header */
.top{position:sticky;top:0;z-index:10;background:rgba(238,240,234,.94);border-bottom:1px solid var(--line)}
.topin{display:flex;align-items:center;gap:24px;height:66px}
.lockup{display:inline-flex;align-items:center;gap:9px;font-family:"Bricolage Grotesque",var(--display);font-weight:800;font-size:24px;letter-spacing:-.035em;text-decoration:none}
.lockup svg{width:30px;height:30px}
.nav{display:flex;gap:20px;font-size:15px}
.nav a{text-decoration:none;border-bottom:1.5px solid transparent;padding:2px 0}
.nav a:hover,.nav a[aria-current="page"]{border-color:var(--graphite)}
.topr{margin-inline-start:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 22px;border-radius:25px;background:var(--graphite);color:var(--chalk);font:600 16px var(--ui);text-decoration:none;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px -14px rgba(29,32,35,.7)}
.btn svg{width:17px;height:17px;flex:none}
.btn.sm{height:40px;padding:0 16px;font-size:14.5px;border-radius:20px}
.btn.ghost{background:transparent;color:var(--graphite);box-shadow:inset 0 0 0 1.5px var(--line)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.meta{margin-top:12px;font-size:14px;color:var(--stone)}

/* sections */
.hero{padding:72px 0 56px}
section{padding:64px 0;border-top:1px solid var(--line)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px}
.grid.three{grid-template-columns:repeat(3,1fr)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px 22px 20px}
.card p{color:var(--stone);font-size:15.5px}
.steps{list-style:none;counter-reset:s;display:grid;gap:14px;margin-top:24px;max-width:720px}
.steps li{counter-increment:s;display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start}
.steps li::before{content:counter(s);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--graphite);color:var(--chalk);font:700 15px var(--ui)}
.steps b{display:block}
.steps span{color:var(--stone);font-size:15.5px}
kbd{font:600 13px var(--ui);background:var(--paper);border:1px solid var(--line);border-bottom-width:2px;border-radius:7px;padding:1px 7px}
.faq{margin-top:20px;max-width:780px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:18px 0;font:600 18px/1.35 var(--display)}
.faq details p{color:var(--stone);padding:0 0 20px}
.links{list-style:none;display:grid;gap:10px;margin-top:16px}
.links a{font-weight:600}
.links small{display:block;color:var(--stone);font-size:15px;font-weight:400}
.cta{background:var(--graphite);color:var(--chalk);border-radius:26px;padding:44px 36px;margin:8px 0 72px}
.cta h2{color:var(--chalk)}
.cta p{color:rgba(238,240,234,.75)}
.cta .btn{background:var(--chalk);color:var(--graphite)}
.cta .meta{color:rgba(238,240,234,.62)}
.cta .meta a{color:inherit}

/* footer */
footer{border-top:1px solid var(--line);padding:44px 0 56px;font-size:15px;color:var(--stone)}
.fgrid{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap}
.flinks{display:flex;flex-wrap:wrap;gap:10px 24px;list-style:none}
.flinks a{text-decoration:none}
.flinks a:hover{text-decoration:underline}
.fbot{margin-top:28px;font-size:14px}

@media (max-width:860px){
  .nav{display:none}
  .grid,.grid.three{grid-template-columns:1fr}
}
@media (max-width:560px){
  .wrap{padding:0 20px}
  .topr .btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .topr .btn{width:40px;padding:0}
  .cta{padding:32px 22px}
}

/* blog */
.post{max-width:780px;padding-top:64px;padding-bottom:24px}
.post .eyebrow a{text-decoration:none;font-weight:600}
.post .lede{margin-bottom:36px}
.post h2{font-size:clamp(24px,2.6vw,30px);margin:44px 0 12px}
.post p,.post li{font-size:18px;line-height:1.72}
.post p{margin:0 0 18px;max-width:none}
.post ul,.post ol{margin:0 0 18px 24px}
.post li{margin:6px 0}
.post blockquote{border-inline-start:3px solid var(--graphite);padding:4px 0 4px 18px;margin:0 0 18px;font-weight:600}
.posts li a{font-size:18px}