:root{
  color-scheme:light dark;
  --accent:#FF6B00; --accent-ink:#C24E00;
  --ink:#141312; --muted:#6B6560; --bg:#fff; --surface:#F7F5F3;
  --line:#E4E0DC; --maxw:46rem;
}
@media (prefers-color-scheme:dark){
  :root{--ink:#EDEAE7;--muted:#9C948C;--bg:#131211;--surface:#1D1B19;
        --line:#2E2B28;--accent-ink:#FF8A3D;}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.65;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px}
img{max-width:100%;height:auto}
a{color:var(--accent-ink)}
main{max-width:var(--maxw);margin:0 auto;padding:0 1.25rem 4rem}
h1,h2,h3{line-height:1.25;letter-spacing:-0.015em}
h1{font-size:2rem;margin:0 0 .6rem}
h2{font-size:1.35rem;margin:2.75rem 0 .75rem}
p{margin:0 0 1rem}

header.site,footer.site{max-width:var(--maxw);margin:0 auto;padding:1rem 1.25rem}
header.site{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap}
.wordmark{display:flex;align-items:center;gap:.5rem;font-weight:700;color:inherit;
  text-decoration:none}
.wordmark img{border-radius:7px}
header.site nav{display:flex;align-items:center;gap:1rem;font-size:.94rem}
header.site nav a{color:var(--muted);text-decoration:none}
header.site nav a[aria-current]{color:var(--ink);font-weight:600}
.nav-cta{color:var(--accent-ink)!important;font-weight:600}

.hero{text-align:center;padding:1.5rem 0 .5rem}
.appicon{border-radius:22px;box-shadow:0 6px 22px rgba(0,0,0,.16);margin-bottom:1rem}
.tagline{color:var(--muted);font-size:1.08rem;max-width:34rem;margin:0 auto 1.5rem}
.price{color:var(--muted);font-size:.9rem;margin-top:.75rem}
.store-badge{display:inline-block;transition:opacity .15s ease}
.store-badge img{width:246px;height:82px;object-fit:contain;vertical-align:middle}
.store-badge.sm img{width:164px;height:55px}
.store-badge:hover{opacity:.88}

/* Store screenshots are 640x1386, far taller than the copy beside them. Cap the
   height so consecutive feature rows do not stack into one unbroken column of
   phones with the text floating in the gaps. */
.feature.has-shot{display:grid;grid-template-columns:1fr 210px;gap:2rem;
  align-items:center;padding:1.25rem 0}
.feature.has-shot .prose h2{margin-top:0}
.feature.has-shot + .feature{border-top:1px solid var(--line)}
.shot{margin:0;text-align:center}
.shot img{width:auto;max-width:100%;max-height:400px;border-radius:18px;
  border:1px solid var(--line)}
figcaption{color:var(--muted);font-size:.85rem;margin-top:.5rem}

.cta{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:1.1rem 1.25rem;margin:1.75rem 0;text-align:center}
.cta p{margin:0 0 .75rem}

ul.cards{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
ul.cards.wide{gap:.85rem}
ul.cards a{display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:.95rem 1.1rem;text-decoration:none;color:inherit}
ul.cards a:hover{border-color:var(--accent)}
ul.cards strong{display:block;color:var(--accent-ink);margin-bottom:.15rem}
ul.cards span{color:var(--muted);font-size:.9rem}

.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:.85rem 0;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--muted);font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq .answer{padding-bottom:.5rem}
.faq .answer p{margin:0 0 .5rem}
.more a{font-size:.9rem;text-decoration:none;font-weight:600}

.table-wrap{overflow-x:auto;margin:0 0 1.5rem;border:1px solid var(--line);
  border-radius:12px}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;
  font-size:.94rem}
th,td{text-align:left;padding:.55rem .85rem;border-bottom:1px solid var(--line);
  white-space:nowrap}
thead th{background:var(--surface);font-size:.82rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted)}
tbody tr:last-child td{border-bottom:none}

.crumbs{font-size:.88rem;color:var(--muted);margin-bottom:.75rem}
.crumbs a{color:var(--muted);text-decoration:none}
.lede{font-size:1.12rem;color:var(--ink)}
ol.howto{list-style:decimal;padding-left:1.4rem;margin:0 0 1.5rem}
ol.howto li{margin-bottom:.7rem}
ol.howto strong{display:block}
ol.howto span{color:var(--muted)}
article ul,article ol{list-style:revert;padding-left:1.4rem}
article ul.cards{list-style:none;padding-left:0}
.related{margin-top:3rem}
.closer{text-align:center;margin-top:3.5rem;padding-top:2rem;
  border-top:1px solid var(--line)}

footer.site{border-top:1px solid var(--line);margin-top:3rem;color:var(--muted);
  font-size:.9rem}
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}
.foot-cols h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;
  margin:0 0 .5rem;color:var(--muted)}
.foot-cols ul{list-style:none;margin:0;padding:0}
.foot-cols li{margin-bottom:.35rem;line-height:1.4}
.foot-cols a{color:inherit;text-decoration:none}
.foot-cols a:hover{color:var(--accent-ink)}
.colophon{font-size:.82rem;margin:0}

@media (max-width:640px){
  body{font-size:16px}
  h1{font-size:1.65rem}
  .feature.has-shot{grid-template-columns:1fr}
  .shot{max-width:230px;margin:0 auto}
  .foot-cols{grid-template-columns:1fr}
}