:root {
  color-scheme:light;
  --ink:#171b24;
  --muted:#606977;
  --blue:#2861e7;
  --line:#e5e8ee;
  --soft:#f6f8fc;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:#fff;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
}

a {
  color:inherit;
  text-underline-offset:4px;
}

img {
  max-width:100%;
  height:auto;
}

svg {
  flex-shrink:0;
}

p {
  line-height:1.65;
}

a:focus-visible,summary:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:5px;
  border-radius:3px;
}

::selection {
  background:#dce7ff;
}

section[id],aside[id] {
  scroll-margin-top:30px;
}

.container {
  width:min(1120px,calc(100% - 96px));
  margin-inline:auto;
}

.skip-link {
  position:absolute;
  top:12px;
  left:12px;
  z-index:5;
  transform:translateY(-160%);
  padding:12px 20px;
  background:var(--ink);
  color:#fff;
}

.skip-link:focus {
  transform:none;
}

.site-header {
  min-height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:20px;
  font-weight:650;
  letter-spacing:-.6px;
  text-decoration:none;
}

.brand img {
  width:36px;
  height:36px;
}

.site-header nav,.site-footer nav {
  display:flex;
  align-items:center;
  gap:30px;
}

.site-header nav a {
  font-size:14px;
  font-weight:550;
  text-decoration:none;
}

.site-header nav a:hover,.site-footer a:hover {
  color:var(--blue);
}

.github-link {
  white-space:nowrap;
}

.github-link span {
  margin-left:4px;
}

.hero {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  align-items:center;
  gap:55px;
  padding-top:60px;
  padding-bottom:72px;
}

.eyebrow {
  font-size:12px;
  font-weight:650;
  letter-spacing:1.8px;
  line-height:1.5;
  margin:0 0 24px;
  color:var(--muted);
}

h1 {
  font-size:clamp(64px,7.5vw,104px);
  line-height:1.01;
  letter-spacing:-5.5px;
  font-weight:650;
  margin:0 0 27px;
}

h1 span {
  color:var(--blue);
}

.hero-description {
  font-size:18px;
  line-height:1.7;
  color:var(--muted);
  margin:0 0 29px;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:54px;
  padding:14px 23px;
  border-radius:11px;
  background:var(--blue);
  color:#fff;
  text-decoration:none;
  font-size:16px;
  font-weight:600;
  box-shadow:0 4px 8px #2861e716;
  transition:background .15s,transform .15s;
}

.button:hover {
  background:#174dcc;
  transform:translateY(-2px);
}

.button:active {
  transform:translateY(0);
}

.download-meta {
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
  margin:16px 0 10px;
}

.text-link {
  font-size:14px;
  text-decoration:none;
}

.text-link:hover {
  text-decoration:underline;
}

.launch-link {
  color:var(--muted);
}

.app-preview {
  margin:0;
  min-width:0;
}

.screenshot-stage {
  background:#edf2fc;
  border:1px solid #e4ebf9;
  border-radius:30px;
  padding:30px 40px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.app-screenshot {
  display:block;
  width:350px;
  border-radius:14px;
  box-shadow:0 26px 45px -18px #27365660,0 2px 5px #27365612;
}

figcaption {
  text-align:center;
  font-size:13px;
  color:var(--muted);
  margin-top:18px;
}

.principles {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-block:1px solid var(--line);
  padding-block:27px;
}

.principles p {
  margin:0;
  font-size:15px;
  color:var(--muted);
  line-height:1.6;
}

.principles strong {
  color:var(--ink);
  font-weight:550;
}

.principles ul {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:30px;
  font-size:14px;
  color:var(--muted);
}

.principles li::before {
  content:"✓";
  margin-right:8px;
  color:var(--blue);
  font-weight:600;
}

.section {
  padding-block:94px;
}

.section .eyebrow {
  margin-bottom:17px;
}

h2 {
  font-size:clamp(32px,4vw,44px);
  line-height:1.15;
  letter-spacing:-1.6px;
  font-weight:600;
  margin:0 0 20px;
}

.section-intro {
  font-size:18px;
  color:var(--muted);
  margin:0;
  line-height:1.7;
}

.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px;
  margin-top:50px;
}

.feature-icon {
  color:var(--blue);
  margin-bottom:22px;
  height:30px;
}

h3 {
  font-size:19px;
  letter-spacing:-.4px;
  line-height:1.4;
  font-weight:600;
  margin:0 0 12px;
}

.feature-grid p,.install-steps p {
  font-size:16px;
  color:var(--muted);
  margin:0;
  line-height:1.75;
}

.privacy-note {
  display:flex;
  align-items:center;
  gap:14px;
  border-top:1px solid var(--line);
  padding-top:28px;
  margin-top:42px;
  color:var(--muted);
}

.privacy-note p {
  font-size:14px;
  margin:0;
}

.privacy-note strong {
  font-weight:600;
  color:var(--ink);
}

.install-section {
  background:var(--soft);
  border-block:1px solid #eef0f4;
}

.install-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
}

.install-heading>p {
  font-size:14px;
  color:var(--muted);
  line-height:1.8;
}

.install-steps {
  list-style:none;
  padding:0;
  margin:35px 0 40px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px;
}

.step-number {
  display:block;
  font-size:14px;
  font-variant-numeric:tabular-nums;
  font-weight:600;
  color:var(--blue);
  margin-bottom:18px;
}

.install-steps a {
  color:var(--ink);
}

.first-launch {
  border:1px solid #dce2ee;
  border-radius:14px;
  background:#fff;
  padding:28px 32px;
}

.first-launch h3 {
  font-size:17px;
}

.first-launch p {
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
  margin:10px 0;
}

.first-launch strong {
  font-weight:600;
  color:#414956;
}

.first-launch a:hover {
  color:var(--blue);
}

.beta-links {
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
  margin-top:20px;
  font-size:14px;
}

.closing {
  text-align:center;
  padding-block:80px;
}

.closing>img {
  display:block;
  width:64px;
  height:64px;
  margin:0 auto 24px;
}

.closing h2 {
  margin-bottom:12px;
}

.closing>p {
  font-size:17px;
  color:var(--muted);
  margin:0 0 25px;
}

.closing .closing-meta {
  font-size:13px;
  margin:17px 0 0;
}

.site-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  border-top:1px solid var(--line);
  padding-block:25px 32px;
  color:var(--muted);
  font-size:13px;
}

.site-footer p {
  margin:0;
}

.site-footer a {
  text-decoration:none;
}

.site-footer nav {
  gap:24px;
}

@media(min-width:1440px) {
  .hero {
    padding-top:80px;
    padding-bottom:90px;
  }
}

@media(max-width:1000px) {
  .container {
    width:calc(100% - 64px);
  }
  .hero {
    gap:30px;
    padding-top:35px;
  }
  h1 {
    letter-spacing:-4px;
  }
  .screenshot-stage {
    padding:25px;
  }
  .feature-grid,.install-steps {
    gap:28px;
  }
  .principles ul {
    gap:17px;
  }
  .install-heading {
    align-items:flex-start;
  }
  .install-heading>p {
    flex-shrink:0;
  }
}

@media(max-width:760px) {
  .container {
    width:calc(100% - 40px);
  }
  .site-header {
    min-height:82px;
  }
  .site-header nav {
    gap:18px;
  }
  .site-header nav a {
    font-size:13px;
  }
  .brand {
    font-size:18px;
  }
  .brand img {
    width:30px;
    height:30px;
  }
  .hero {
    grid-template-columns:1fr;
    gap:38px;
    padding-top:33px;
    padding-bottom:40px;
  }
  .hero-copy {
    text-align:center;
  }
  .eyebrow {
    font-size:11px;
    letter-spacing:1.5px;
    margin-bottom:21px;
  }
  h1 {
    font-size:clamp(68px,13vw,92px);
    letter-spacing:-4px;
    line-height:1.04;
  }
  .hero-description {
    font-size:17px;
  }
  .app-preview {
    width:min(430px,100%);
    margin-inline:auto;
  }
  .screenshot-stage {
    padding:26px 34px;
    border-radius:23px;
  }
  .app-screenshot {
    width:320px;
  }
  figcaption {
    font-size:12px;
  }
  .principles {
    flex-direction:column;
    text-align:center;
    gap:19px;
    padding-block:24px;
  }
  .principles ul {
    flex-wrap:wrap;
    justify-content:center;
    gap:10px 18px;
    font-size:13px;
  }
  .section {
    padding-block:60px;
  }
  h2 {
    font-size:34px;
    letter-spacing:-1.3px;
  }
  .section-intro {
    font-size:17px;
  }
  .desktop-break {
    display:none;
  }
  .feature-grid {
    grid-template-columns:1fr;
    gap:32px;
    margin-top:35px;
  }
  .feature-icon {
    margin-bottom:13px;
  }
  .feature-grid article {
    max-width:540px;
  }
  .feature-grid p,.install-steps p {
    font-size:16px;
  }
  .privacy-note {
    align-items:flex-start;
    margin-top:32px;
    padding-top:25px;
  }
  .privacy-note svg {
    margin-top:3px;
  }
  .install-heading {
    display:block;
  }
  .install-heading>p {
    margin-top:0;
  }
  .install-steps {
    grid-template-columns:1fr;
    gap:28px;
    margin-top:30px;
  }
  .step-number {
    margin-bottom:8px;
  }
  .first-launch {
    padding:23px;
  }
  .beta-links {
    gap:15px 20px;
  }
  .closing {
    padding-block:58px;
  }
  .closing h2 {
    font-size:34px;
  }
  .site-footer {
    flex-direction:column;
    gap:16px;
    padding-block:25px;
  }
  .site-footer nav {
    gap:24px;
  }
}

@media(max-width:380px) {
  .site-header {
    gap:12px;
  }
  .site-header nav {
    gap:12px;
  }
  .site-header nav a {
    font-size:12px;
  }
  .brand {
    gap:5px;
    font-size:16px;
  }
  .brand img {
    width:27px;
    height:27px;
  }
  .screenshot-stage {
    padding:20px;
  }
  .button {
    width:100%;
    padding-inline:15px;
  }
  h2 {
    font-size:30px;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    transition:none!important;
  }
}