/* /about and /de share this sheet. Keep it small: the page is a plain
   explainer for search engines and first-time visitors. */
@font-face{
  font-family:"Archivo";
  src:url("/fonts/archivo-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --orange:#F04E00; --orange-deep:#C93F00;
  --bone:#ECE9E3; --bone-2:#E2DED6; --hairline:#DAD5CC;
  --ink:#171717; --ink-2:#5C5C5C; --ink-3:#8F8F8A;
  --white:#fff;
  --display:"Archivo",system-ui,-apple-system,sans-serif;
  --pad:clamp(20px,5vw,48px);
  --maxw:960px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--display);background:var(--bone);color:var(--ink);
  line-height:1.4;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* header */
header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--pad);background:var(--orange);color:var(--white);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:15px;letter-spacing:-.02em}
.brand .glyph{width:26px;height:26px;border-radius:8px;background:var(--ink);display:grid;place-items:center;flex:none}
.brand .glyph svg{width:14px;height:14px}

/* buttons */
.btn{
  display:inline-flex;align-items:center;font-weight:800;font-size:15px;
  padding:11px 18px;border-radius:999px;white-space:nowrap;
  background:var(--white);color:var(--orange);
}
.btn-dark{background:var(--ink);color:var(--white)}
.btn:hover{opacity:.92}
.appstore{
  display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--white);
  padding:10px 18px 10px 16px;border-radius:12px;
}
.appstore:hover{opacity:.92}
.appstore svg{width:24px;height:24px;flex:none}
.appstore .as-txt{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.appstore .as-small{font-size:10px;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.appstore .as-big{font-weight:800;font-size:18px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:28px}

/* hero */
.hero{background:var(--orange);color:var(--white);padding:clamp(40px,7vw,80px) 0 clamp(48px,8vw,88px)}
h1{font-weight:900;letter-spacing:-.03em;line-height:1;font-size:clamp(38px,7vw,64px);max-width:16ch}
.hero .lead{font-size:clamp(17px,2.2vw,21px);font-weight:500;max-width:52ch;margin-top:20px}
.hero .btn-dark{background:var(--ink)}

/* sections */
.sec{padding:clamp(44px,7vw,80px) 0;border-top:1px solid var(--hairline)}
h2{font-weight:900;letter-spacing:-.02em;line-height:1;font-size:clamp(28px,4.5vw,40px)}
.steps{list-style:none;display:grid;gap:24px;margin-top:28px;counter-reset:step}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{counter-increment:step}
.steps li::before{content:counter(step);display:block;font-weight:900;color:var(--orange);font-size:14px;margin-bottom:8px}
h3{font-weight:800;font-size:19px;letter-spacing:-.01em;margin-bottom:8px}
.steps p,.note,.free p{color:var(--ink-2);font-size:16px}
.note{margin-top:32px;max-width:60ch}

/* screenshots */
.shots{background:var(--bone-2)}
.gallery{display:grid;gap:24px;margin-top:28px}
.gallery img{width:100%;max-width:260px;margin-inline:auto;border-radius:22px;border:1px solid var(--hairline);background:var(--ink)}
@media(min-width:760px){.gallery{grid-template-columns:repeat(3,1fr)}.gallery img{max-width:300px}}
.gallery figcaption{margin-top:12px;text-align:center;font-weight:700;font-size:15px}

/* free */
.free p{max-width:56ch;margin-top:16px;font-size:18px}

/* footer */
footer{padding:32px 0 40px;border-top:1px solid var(--hairline)}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}
footer nav a{font-weight:700;font-size:14px;color:var(--ink-2)}
footer nav a:hover{color:var(--orange)}
.legal{margin-top:18px;color:var(--ink-3);font-size:12px}

/* narrow phones: the hero button is right below, so the header one can go */
.brand .wm{white-space:nowrap}
@media(max-width:480px){header .btn{display:none}}