/* aura3 Apps — shared styles. Brand: black, white, greys. */
@font-face{
  font-family:"Space Grotesk";
  src:url("fonts/SpaceGrotesk.ttf") format("truetype");
  font-weight:300 700;
  font-display:swap;
}

:root{
  --black:#0a0a0a;
  --ink:#111;
  --white:#fff;
  --paper:#f5f5f4;
  --g100:#ededed;
  --g200:#dcdcdc;
  --g400:#9a9a9a;
  --g600:#5c5c5c;
  --g800:#262626;
  --display:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1120px;
  --pad:20px;
  --radius:22px;
  --header-h:68px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
::selection{background:var(--black);color:var(--white)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);width:100%}
.skip{
  position:absolute;left:-999px;top:8px;
  background:var(--black);color:var(--white);
  padding:10px 16px;border-radius:999px;z-index:100;
}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--black);outline-offset:3px}
.footer :focus-visible{outline-color:var(--white)}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--g200);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--header-h);gap:16px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:34px;width:auto}
.brand__word{
  font:600 14px/1 var(--display);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--g600);
}
.header-link{
  font:500 15px/1 var(--body);
  text-decoration:none;
  padding:8px 14px;
  border-radius:999px;
}
.header-link:hover{background:var(--g100)}
.header-link[aria-current="page"]{background:var(--black);color:var(--white)}

/* Hero */
.hero{padding:48px 0 36px;position:relative;overflow:hidden}
.hero--home{padding:56px 0 28px}
.hero__inner{display:grid;gap:24px;align-items:center}
.kicker{
  font:600 12px/1 var(--display);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--g600);
  margin:0 0 12px;
}
.hero h1{
  font:700 clamp(40px,11vw,84px)/.95 var(--display);
  letter-spacing:-.045em;
  margin:0 0 14px;
}
.hero .lede{
  font-size:18px;
  color:var(--g600);
  max-width:36ch;
  margin:0;
}
.hero__mascot{
  display:none;
  justify-self:end;
  width:min(180px,28vw);
  pointer-events:none;
  user-select:none;
}
@media (min-width:720px){
  .hero--home .hero__inner{grid-template-columns:1fr auto;gap:32px}
  .hero__mascot{display:block}
}

/* App hero on intro pages */
.app-hero{padding:40px 0 20px}
.app-hero__icon{
  width:80px;height:80px;border-radius:50%;
  box-shadow:0 8px 24px rgba(10,10,10,.08);
  background:transparent;
  margin:0 0 20px;
}
.app-hero h1{
  font:700 clamp(32px,8vw,64px)/1 var(--display);
  letter-spacing:-.04em;
  margin:0 0 10px;
}
.app-hero .lede{font-size:18px;color:var(--g600);margin:0 0 18px;max-width:40ch}
.app-hero .cta-row,.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta-row--end{margin-top:28px}

/* Badges */
.badge{
  display:inline-flex;align-items:center;
  font:600 11px/1 var(--display);
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius:999px;
  padding:6px 10px;
  border:1.5px solid var(--black);
  background:var(--white);
  color:var(--black);
  white-space:nowrap;
}
.badge--live{background:var(--black);color:var(--white)}
.badge--beta{background:var(--white);color:var(--black)}
.badge--coming-soon{border-color:var(--g400);color:var(--g600);background:var(--white)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;
  font:600 16px/1 var(--display);
  border-radius:999px;
  padding:14px 22px;
  border:1.5px solid var(--black);
  background:var(--black);
  color:var(--white);
  cursor:pointer;
  transition:transform .25s var(--ease),background .25s,color .25s,opacity .2s;
}
.btn:hover{transform:translateY(-2px);background:var(--white);color:var(--black)}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn--ghost{background:transparent;color:var(--black)}
.btn--ghost:hover{background:var(--black);color:var(--white)}
.btn--sm{font-size:14px;padding:10px 16px}
.btn.is-disabled,
.btn[aria-disabled="true"]{
  background:var(--g100);
  border-color:var(--g200);
  color:var(--g600);
  cursor:not-allowed;
  pointer-events:none;
  transform:none;
}

/* Cards */
.section{padding:16px 0 64px}
.section h2, .block h2{
  font:700 clamp(26px,5vw,40px)/1.05 var(--display);
  letter-spacing:-.03em;
  margin:0 0 16px;
}
.grid{
  display:grid;
  gap:16px;
}
@media (min-width:720px){
  .grid--apps{grid-template-columns:repeat(3,1fr);gap:20px}
}
.card{
  background:var(--white);
  border:1px solid var(--g200);
  border-radius:var(--radius);
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
a.card{text-decoration:none;color:inherit}
a.card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(10,10,10,.08)}
.card__icon{width:56px;height:56px;border-radius:50%;background:transparent}
.card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.card h2{font:700 22px/1.15 var(--display);letter-spacing:-.02em;margin:0}
.card p{margin:0;color:var(--g600);flex:1}
.card .btn{align-self:flex-start;margin-top:auto}

/* Intro blocks */
.block{padding:8px 0 40px}
.block p{max-width:60ch}
.features{list-style:none;margin:0;padding:0;display:grid;gap:10px}
@media (min-width:720px){.features{grid-template-columns:1fr 1fr;gap:12px 24px}}
.features li{
  position:relative;
  padding:12px 14px 12px 42px;
  background:var(--paper);
  border-radius:14px;
}
.features li::before{
  content:"";
  position:absolute;left:14px;top:16px;
  width:16px;height:16px;
  background:var(--black);
  border-radius:50%;
  box-shadow:inset 0 0 0 3.5px var(--paper);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M6.3 11.1 3.2 8l1.1-1.1 2 2 4.4-4.4L11.8 5.6z'/></svg>");
  background-repeat:no-repeat;
  background-position:center;
  background-size:12px;
}

/* Screenshots */
.shots{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:4px 0 12px;
  margin:0 calc(var(--pad) * -1);
  padding-left:var(--pad);
  padding-right:var(--pad);
}
.shot{
  flex:0 0 min(68vw, 260px);
  scroll-snap-align:start;
}
.shot img{
  width:100%;
  border-radius:20px;
  border:1px solid var(--g200);
  background:var(--g100);
  box-shadow:0 10px 28px rgba(10,10,10,.08);
}
.shot figcaption{
  font-size:13px;
  color:var(--g600);
  margin-top:8px;
}
@media (min-width:900px){
  .shots{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    overflow:visible;
    margin:0;
    padding:4px 0;
  }
  .shot{flex:none}
}
.shots-placeholder{
  background:var(--paper);
  border:1px dashed var(--g200);
  border-radius:var(--radius);
  padding:36px 20px;
  color:var(--g600);
  text-align:center;
}
.shot-note{font-size:13px;color:var(--g600);margin:0 0 12px}

/* Install steps */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:60ch}
.steps li{
  display:grid;
  grid-template-columns:32px 1fr;
  gap:12px;
  align-items:start;
  padding:12px 0;
  border-bottom:1px solid var(--g100);
}
.steps li:last-child{border-bottom:0}
.steps .num{
  width:32px;height:32px;border-radius:50%;
  background:var(--black);color:var(--white);
  font:600 14px/32px var(--display);
  text-align:center;
}
.pwa-note{color:var(--g600);font-size:15px}

/* FAQ */
.faq{max-width:70ch;border-top:1px solid var(--g200)}
.faq details{border-bottom:1px solid var(--g200)}
.faq summary{
  cursor:pointer;
  font:600 17px/1.35 var(--display);
  padding:16px 28px 16px 0;
  list-style:none;
  position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";
  position:absolute;right:0;top:16px;
  font:600 22px/1 var(--display);
  color:var(--g600);
}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 16px;color:var(--g600)}

/* Footer */
.footer{
  margin-top:auto;
  background:var(--black);
  color:var(--white);
  padding:48px 0 24px;
}
.footer .brand img{height:36px;width:auto}
.footer-row{
  display:flex;flex-wrap:wrap;
  justify-content:space-between;
  gap:20px;
  align-items:flex-end;
}
.footer a{text-decoration:underline;text-underline-offset:3px}
.footer a:hover{color:var(--g200)}
.footer-copy{margin:28px 0 0;padding-top:18px;border-top:1px solid var(--g800);color:var(--g400);font-size:13px}
.footer-copy p{margin:0}

/* Utilities */
.paper{background:var(--paper)}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}