/* Life in 22 Taps — site styles. System fonts only: the site makes no
   third-party requests, which matches what the app promises. */
:root{
  --ink:#141413; --muted:#5B6169; --line:#E5E7EB; --blue:#2743A6; --blue-deep:#14275E;
  --gold1:#F6D06B; --gold2:#D9A62E; --bg:#ffffff; --panel:#F4F5F8; --tile-ink:#1F2430;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F3F3F1; --muted:#A5ABB3; --line:#2E3136; --blue:#8FA4F0; --blue-deep:#C9D3FA;
    --bg:#121316; --panel:#1C1E23;
  }
}
:root[data-theme="dark"]{
  --ink:#F3F3F1; --muted:#A5ABB3; --line:#2E3136; --blue:#8FA4F0; --blue-deep:#C9D3FA;
  --bg:#121316; --panel:#1C1E23;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.6;-webkit-text-size-adjust:100%}
a{color:var(--blue)}
a:focus-visible,summary:focus-visible{outline:3px solid var(--gold2);outline-offset:3px;border-radius:4px}
img,svg{max-width:100%}

.wrap{max-width:1040px;margin:0 auto;padding:0 22px}
.narrow{max-width:700px}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 0 18px;flex-wrap:wrap}
.brand{text-decoration:none;color:var(--blue);font-weight:800;font-size:22px;letter-spacing:-.4px;
  display:inline-block}
.brand::after{content:"";display:block;height:5px;width:100%;border-radius:3px;margin-top:4px;
  background:linear-gradient(90deg,var(--gold1),var(--gold2))}
.top nav{display:flex;gap:20px;font-size:15px}
.top nav a{color:var(--ink);text-decoration:none}
.top nav a:hover,.top nav a[aria-current]{color:var(--blue);text-decoration:underline;text-underline-offset:4px}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding:40px 0 64px}
.hero h1{font-size:clamp(34px,5.2vw,56px);line-height:1.06;letter-spacing:-1.6px;margin:0 0 20px;
  color:var(--blue-deep);font-weight:800}
.hero .lede{font-size:20px;color:var(--muted);margin:0 0 28px;max-width:32em}
.buy{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pill{display:inline-block;background:var(--blue);color:#fff;border-radius:99px;padding:13px 22px;
  font-weight:700;text-decoration:none}
.buy .note{font-size:15px;color:var(--muted)}

/* the phone: the one memorable thing on the page */
.phone{justify-self:center;width:100%;max-width:330px;border-radius:38px;padding:14px;
  background:#1B1D22;box-shadow:0 30px 60px -25px rgba(20,39,94,.55)}
.screen{border-radius:26px;padding:16px 12px 14px;
  background:linear-gradient(160deg,#E9EDF8,#F8F4E8)}
.screen .title{font-weight:800;color:#2743A6;font-size:15px;margin:0 2px 2px}
.screen .title::after{content:"";display:block;width:74px;height:3px;border-radius:2px;margin-top:3px;
  background:linear-gradient(90deg,#F6D06B,#D9A62E)}
.favs{display:flex;gap:6px;margin:10px 0;padding:6px;border:1.5px solid #D9A62E;border-radius:12px}
.favs span{flex:1;height:22px;border-radius:7px;background:#fff;opacity:.85}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.t{border-radius:10px;padding:6px 4px 5px;text-align:center;color:var(--tile-ink);
  font-size:10.5px;line-height:1.15;position:relative;
  animation:pop .5s cubic-bezier(.2,.8,.3,1.2) both;animation-delay:calc(var(--i)*28ms)}
.t b{display:block;font-size:17px;line-height:1.2;font-weight:400}
.t i{position:absolute;top:3px;right:5px;font-style:normal;font-size:9px;color:#5B6169}
@keyframes pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.t{animation:none}}

/* sections */
section{padding:56px 0;border-top:1px solid var(--line)}
h2{font-size:clamp(26px,3.4vw,34px);line-height:1.15;letter-spacing:-.6px;margin:0 0 16px;color:var(--blue-deep)}
h3{font-size:19px;margin:28px 0 6px}
p{margin:0 0 14px}
.muted{color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px}
ul.plain{list-style:none;padding:0;margin:0}
ul.plain li{padding:12px 0;border-bottom:1px solid var(--line)}
ul.plain li:last-child{border-bottom:0}
ul.plain strong{display:block}

.quote{font-size:22px;line-height:1.35;color:var(--ink);margin:0 0 6px;font-weight:600}
.box{background:var(--panel);border-radius:18px;padding:24px 26px}
.gold{border-left:5px solid var(--gold2)}

table{width:100%;border-collapse:collapse;font-size:16px;display:block;overflow-x:auto}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:700}

details{border-bottom:1px solid var(--line);padding:4px 0}
summary{cursor:pointer;font-weight:600;padding:12px 0;list-style-position:outside}
details p,details ul{margin:0 0 14px}

footer{border-top:1px solid var(--line);padding:30px 0 50px;font-size:14px;color:var(--muted)}
footer p{margin:0 0 6px}
footer nav{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:14px}

@media (max-width:820px){
  .hero,.split{grid-template-columns:1fr;gap:34px}
  .hero{padding-top:18px}
}