/* Public pages (landing, privacy, 404). Tokens, fonts, buttons and the device come from app.css. */
.site{font-size:16px}
.site a:not(.btn){color:inherit}
.btn-lg{height:46px;padding:0 22px;font-size:15px}

.site-head{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:24px;padding:12px max(16px,calc((100% - 1120px)/2));background:color-mix(in srgb,var(--shell) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-head .brand{text-decoration:none}
.site-nav{display:flex;gap:4px;margin-left:auto}
.site-nav a{padding:8px 10px;border-radius:var(--r-sm);color:var(--ink-2);font-weight:500;text-decoration:none}
.site-nav a:hover{color:var(--ink);background:var(--hover)}
.site-cta{display:flex;gap:6px}

.hero{max-width:880px;margin:0 auto;padding:64px 16px 24px;text-align:center}
.hero-title{font:700 clamp(56px,11vw,112px)/.9 var(--sans);letter-spacing:-.045em}
.hero-lede{max-width:56ch;margin:18px auto 0;font-size:19px;line-height:1.5;color:var(--ink-2)}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px}
.hero-device{margin-top:44px;text-align:left}
.hero-device .screen{display:flex;flex-direction:column;--accent:#8FD16A}
.hero-device .dialog{margin-top:0}

.band{max-width:1120px;margin:0 auto;padding:72px 16px 8px;scroll-margin-top:48px}
.band h2{font:700 clamp(32px,5vw,44px)/1.05 var(--sans);letter-spacing:-.03em}
.band-lede{max-width:62ch;margin-top:10px;font-size:17px;color:var(--ink-2)}
.band h3{font:700 22px/1.15 var(--sans);letter-spacing:-.01em}
.band ol,.band ul{list-style:none;margin:0;padding:0}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px!important}
.steps li{padding:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.steps p{margin-top:6px;color:var(--ink-2)}
.step-n{display:inline-grid;place-items:center;width:32px;height:32px;margin-bottom:14px;border-radius:8px;background:var(--device);color:var(--amber);font:700 16px var(--pixel)}

.phase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px!important;counter-reset:ph}
.phase-grid article{height:100%;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.phase-grid article > p:not(.eyebrow):not(.phase-meta){margin-top:6px;font-size:15px;color:var(--ink-2)}
.phase-meta{margin-top:10px;font:500 12px var(--mono);color:var(--ink-3)}

.comp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:28px!important}
.comp-grid article{height:100%;padding:12px 12px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.comp-grid .screen{margin-bottom:12px}
.comp-grid .creature{display:block;width:120px;height:120px;margin:0 auto;padding-top:8px}
.comp-grid article:hover .c-body{animation:bob 1.4s ease-in-out infinite}
.comp-grid h3{font-size:20px}
.comp-grid .type{font:500 11px var(--mono);color:var(--ink-3);letter-spacing:0}
.comp-grid p{margin-top:4px;font-size:14px;color:var(--ink-2)}
.comp-grid .forms{margin-top:8px;font:500 11px/1.5 var(--mono);color:var(--ink-3)}

.feat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:28px!important;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--line)}
.feat-grid li{padding:20px;background:var(--panel)}
.feat-grid h3{font-size:19px}
.feat-grid p{margin-top:4px;font-size:15px;color:var(--ink-2)}

.faq{max-width:760px;margin-top:20px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:16px;padding:16px 0;font:600 18px/1.3 var(--sans);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:500 20px/1 var(--mono);color:var(--ink-3)}
.faq details[open] summary::after{content:"−"}
.faq details p{max-width:64ch;padding:0 0 18px;color:var(--ink-2)}

.final{display:grid;grid-template-columns:220px minmax(0,1fr);align-items:center;gap:32px;padding-bottom:40px}
.final .hero-cta{justify-content:flex-start}
.final-art .creature{width:100%;height:auto;aspect-ratio:1}

.site-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:64px;padding:24px max(16px,calc((100% - 1120px)/2));border-top:1px solid var(--line);font-size:14px;color:var(--ink-3)}
.site-foot nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.site-foot nav a{color:var(--ink-2)}
.site-foot p{width:100%;margin:0}

.prose{max-width:720px;margin:0 auto;padding:56px 16px 16px}
.prose h1{font:700 48px/1 var(--sans);letter-spacing:-.03em}
.prose h2{margin-top:32px;font:700 26px/1.2 var(--sans)}
.prose p{margin-top:10px;color:var(--ink-2)}

.nf{max-width:560px;margin:0 auto;padding:64px 16px;text-align:center}
.nf-art .creature{width:180px;height:180px;margin:0 auto}
.nf h1{font:700 44px/1.05 var(--sans);letter-spacing:-.03em}
.nf .band-lede{margin:10px auto 0}

@media (max-width:900px){
  .site-nav{display:none}
  .site-cta{margin-left:auto}
  .steps,.phase-grid,.feat-grid{grid-template-columns:minmax(0,1fr)}
  .comp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .final{grid-template-columns:minmax(0,1fr);text-align:center}
  .final-art{max-width:200px;margin:0 auto}
  .final .band-lede{margin-left:auto;margin-right:auto}
  .final .hero-cta{justify-content:center}
}
@media (max-width:620px){
  .site-head{gap:12px}
  .site-head .brand span{display:none}
  .site-cta .btn-ghost{display:none}
  .hero{padding-top:40px}
  .hero-lede{font-size:17px}
  .band{padding-top:56px}
  .comp-grid .creature{width:96px;height:96px}
}