:root {
  color-scheme: light;
  --ink: #171918;
  --muted: #69716d;
  --line: #d9dfda;
  --paper: #fbfcfa;
  --blue: #dff0f5;
  --coral: #e75a3a;
  --jade: #2c8370;
  --yellow: #f4c842;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  line-height: 1.55;
}

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

.site-header,
main,
footer {
  width: min(100% - 48px, 1060px);
  margin: 0 auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  font-size: 18px;
  font-weight: 750;
  letter-spacing: 0;
  text-decoration: none;
}

nav { display: flex; gap: 22px; }

nav a {
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
}

nav a:hover,
nav .is-current { color: var(--ink); }

.intro {
  max-width: 740px;
  padding: 104px 0 108px;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--jade);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

h1,
h2,
h3,
p { margin-top: 0; }

h1 {
  max-width: 100%;
  margin-bottom: 15px;
  font-size: clamp(48px, 9vw, 92px);
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1.04;
}

.intro > p:last-child,
.support-lede {
  color: var(--muted);
  font-size: 19px;
}

.apps { padding-bottom: 72px; }

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}

.section-heading h2,
.support-app h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0;
}

.app-entry {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 25px;
  align-items: center;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(112deg, #fff 0%, var(--blue) 100%);
}

.app-icon {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 20px;
  box-shadow: 0 9px 22px rgba(23, 25, 24, 0.16);
}

.app-icon.small {
  width: 62px;
  height: 62px;
  border-radius: 15px;
}

.app-platform {
  margin-bottom: 3px;
  color: var(--jade);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
}

.app-copy h3 {
  margin-bottom: 7px;
  font-size: 27px;
  letter-spacing: 0;
}

.app-copy p:last-child,
.support-app p:last-of-type { margin-bottom: 0; color: var(--muted); }

.app-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  min-width: 80px;
  font-size: 14px;
}

.more-apps {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

footer {
  display: flex;
  justify-content: space-between;
  padding: 25px 0 34px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.legal-page,
.support-page,
.directory-page { max-width: 760px; padding: 84px 0 96px; }

.legal-page h1,
.support-page h1 { margin-bottom: 11px; font-size: clamp(43px, 7vw, 72px); }

.updated { color: var(--muted); font-size: 14px; }

.legal-copy { margin-top: 50px; }

.legal-copy h2 {
  margin: 34px 0 9px;
  font-size: 19px;
}

.legal-copy p { color: #3b423e; }

.legal-copy a,
.text-link { color: var(--jade); font-weight: 650; }

.support-lede { margin-bottom: 52px; }

.support-contact {
  display: grid;
  grid-template-columns: 126px 1fr;
  gap: 4px 20px;
  padding: 25px 0 28px;
  border-top: 4px solid var(--coral);
  border-bottom: 1px solid var(--line);
}

.support-contact p { margin: 0; color: var(--muted); font-size: 14px; }
.support-contact a { font-size: 20px; font-weight: 700; }
.support-contact span { grid-column: 2; color: var(--muted); font-size: 14px; }

.support-app {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 21px;
  margin-top: 54px;
}

.support-app .eyebrow { margin-bottom: 5px; }
.support-app h2 { margin-bottom: 9px; }
.support-app .text-link { display: inline-block; margin-top: 15px; }

.directory-lede { max-width: 530px; color: var(--muted); font-size: 18px; }

.app-directory { margin-top: 48px; border-top: 1px solid var(--line); }

.directory-entry {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 19px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.directory-entry .eyebrow { margin-bottom: 3px; }
.directory-entry h2 { margin: 0 0 3px; font-size: 21px; }
.directory-entry p:last-child { margin-bottom: 0; color: var(--muted); font-size: 14px; }

@media (max-width: 620px) {
  .site-header,
  main,
  footer { width: min(100% - 32px, 1060px); }
  .site-header { min-height: 70px; }
  nav { gap: 15px; }
  .intro { padding: 68px 0 70px; }
  .app-entry { grid-template-columns: 66px minmax(0, 1fr); gap: 17px; padding: 20px; }
  .app-icon { width: 66px; height: 66px; border-radius: 16px; }
  .app-copy h3 { font-size: 23px; }
  .app-links { grid-column: 1 / -1; flex-direction: row; align-items: center; padding-top: 4px; }
  .legal-page,
  .support-page,
  .directory-page { padding: 58px 0 72px; }
  .support-contact { grid-template-columns: 1fr; }
  .support-contact span { grid-column: 1; }
  .directory-entry { grid-template-columns: 54px minmax(0, 1fr); gap: 15px; }
  .directory-entry .app-icon.small { width: 54px; height: 54px; border-radius: 13px; }
  .directory-entry .text-link { grid-column: 2; }
  footer { gap: 14px; flex-wrap: wrap; }
}