:root {
  --nav-h: 3.25rem;
}

* {
  box-sizing: border-box;
  border-radius: 0;
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: system-ui, -apple-system, sans-serif;
  background: #22272e;
  color: #d6dae0;
  line-height: 1.55;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

a {
  color: #71aee5;
}

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  min-height: var(--nav-h);
  border-bottom: 4px solid #14171c;
}

nav .brand {
  margin-right: auto;
  font-weight: 700;
  font-size: 1.1rem;
}

nav a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: #d6dae0;
  text-decoration: none;
  padding: 0 0.9rem;
}

nav a svg,
.nav-toggle svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

nav a:hover,
.nav-toggle:hover {
  background: #171b21;
  color: #fff;
}

.nav-check {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--nav-h);
  min-height: var(--nav-h);
  border-left: 4px solid #14171c;
  cursor: pointer;
  color: #d6dae0;
}

.nav-links {
  display: flex;
  align-items: stretch;
}

@media (max-width: 800px) {
  .nav-toggle {
    display: flex;
  }

  .nav-links {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    border-top: 4px solid #14171c;
  }

  .nav-check:checked ~ .nav-links {
    display: flex;
  }

  .nav-links a {
    min-height: var(--nav-h);
  }
}

.hero {
  --bg-image: url("/images/devices.png");
  min-height: calc(100svh - var(--nav-h));
  display: grid;
  justify-items: center;
  align-content: start;
  text-align: center;
  padding: 16vh 1.25rem 3rem;
  background:
    linear-gradient(
      to bottom,
      #22272e 20%,
      rgba(34, 39, 46, 0.86) 48%,
      rgba(34, 39, 46, 0) 78%
    ),
    var(--bg-image) center bottom / cover no-repeat;
    background-color: #bfc5b287;
}

@media (orientation: portrait) {
  .hero {
    --bg-image: url("/images/devices2.png");
  }
}

.hero h1 {
  font-size: clamp(1.8rem, 5vw, 3rem);
  margin: 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.download {
  padding: 4.5rem 1.25rem;
  border-top: 4px solid #14171c;
  text-align: center;
  background: #171b21;
}

.download h2 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
}

.download > p {
  margin: 0 auto;
  max-width: 32rem;
  color: #aab2bc;
}

.download-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
}

.download img {
  height: 64px;
  width: auto;
  display: block;
}

.download-note {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: #8a929c;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
}

.cards aside {
  height: 100%;
  margin: 0;
  padding: 0.25rem 0.9rem 0.9rem;
  background: #2d333c;
  border: 4px solid #444;
}

.cards h3 {
  margin: 0.75rem 0;
  font-size: 1.05rem;
}

.cards p {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
}

.cards aside:nth-child(1) {
  border-top-color: #4d9e51;
}

.cards aside:nth-child(1) h3 {
  color: #82c786;
}

.cards aside:nth-child(2) {
  border-top-color: #71aee5;
}

.cards aside:nth-child(2) h3 {
  color: #71aee5;
}

.cards aside:nth-child(3) {
  border-top-color: #d9a33f;
}

.cards aside:nth-child(3) h3 {
  color: #e2bd6b;
}

.feature {
  padding: 2.5rem 1.25rem;
  border-top: 4px solid #14171c;
}

.feature .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.feature.flip .shots {
  order: 2;
}

.shots {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  min-width: 0;
}

.shots img {
  flex: 1 1 8rem;
  min-width: 0;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.shot img { max-width: 100%; }

article {
  max-width: 46rem;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 1.25rem;
}

button,
select,
input:not([type="checkbox"]):not([type="range"]),
.btn {
  border-radius: 0;
  border: 4px solid #444;
  background: #2d333c;
  color: inherit;
  font: inherit;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
}

button:hover,
select:hover,
.btn:hover {
  background: #1d2127;
}

/* text entry shouldn't inherit the pointer cursor */
input:not([type="checkbox"]):not([type="range"]) {
  cursor: text;
}

/* pressed: a touch lighter than the hover shade */
button:active,
select:active,
.btn:active {
  background: #262d36;
}

/* Accent variants, driven by custom properties so a new accent is one
   variable set. Must sit below the base rules above to win hover ties. */
.accent-blue,
.accent-gold,
.accent-red {
  border-color: var(--btn-accent);
  background: var(--btn-bg);
  color: var(--btn-fg);
}

.accent-blue:hover,
.accent-gold:hover,
.accent-red:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-fg-hover);
}

.accent-blue:active,
.accent-gold:active,
.accent-red:active {
  background: var(--btn-bg-active);
}

.accent-blue {
  --btn-accent: #71aee5;
  --btn-bg: #26303b;
  --btn-fg: #9ecdf0;
  --btn-bg-hover: #1c2530;
  --btn-fg-hover: #c6e2fa;
  --btn-bg-active: #243140;
}

.accent-gold {
  --btn-accent: #d9a33f;
  --btn-bg: #33301f;
  --btn-fg: #e2bd6b;
  --btn-bg-hover: #272314;
  --btn-fg-hover: #f2d795;
  --btn-bg-active: #332d18;
}

.accent-red {
  --btn-accent: #e07a7a;
  --btn-bg: #3a2626;
  --btn-fg: #f0c0c0;
  --btn-bg-hover: #2e1d1d;
  --btn-fg-hover: #ffd9d9;
  --btn-bg-active: #3b2525;
}

.btn {
  display: inline-block;
  text-decoration: none;
  padding: 0.6rem 1.4rem;
}

.device-icon {
  display: inline-flex;
  vertical-align: -0.15em;
}

.device-icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.target-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.target-box {
  border: 4px solid #444;
  background: #2d333c;
}

.target-box summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  list-style: none;
}

.target-box summary::-webkit-details-marker {
  display: none;
}

.target-box summary:hover {
  background: #171b21;
}

.target-box summary::after {
  content: "+";
  margin-left: auto;
  font-weight: 700;
}

.target-box[open] summary::after {
  content: "\2212";
}

.target-info {
  padding: 0.35rem 0.75rem 0.75rem;
  border-top: 4px solid #14171c;
  font-size: 0.9rem;
}

.target-info p,
.target-info ul {
  margin: 0.4rem 0;
}

.target-info ul {
  padding-left: 1.2rem;
}

.faq {
  padding: 4rem 1.25rem;
  border-top: 4px solid #14171c;
}

.faq h2 {
  max-width: 46rem;
  margin: 0 auto 1.5rem;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
}

.faq-list {
  max-width: 46rem;
  margin: 0 auto;
  border: 4px solid #444;
  background: #2d333c;
}

.faq-item + .faq-item {
  border-top: 4px solid #14171c;
}

.faq-item summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  user-select: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  background: #171b21;
}

.faq-item summary::after {
  content: "+";
  margin-left: auto;
  font-weight: 700;
  color: #8a929c;
}

.faq-item[open] summary {
  background: #262d36;
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-body {
  padding: 0 1.1rem 1.1rem;
  border-top: 4px solid #14171c;
  color: #aab2bc;
}

.faq-body p {
  margin: 0.75rem 0 0;
}

footer {
  padding: 2.5rem 1.25rem 2rem;
  border-top: 4px solid #14171c;
  text-align: center;
  font-size: 0.9rem;
}

footer p {
  margin: 0;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.75rem;
  margin-bottom: 1.25rem;
}

.footer-links a {
  color: #d6dae0;
  text-decoration: none;
}

.footer-links a:hover {
  color: #fff;
}

.tagline {
  font-size: 1.1rem;
  color: #aab2bc;
}

.model-list {
  columns: 2;
}

.attribution {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: #8a929c;
}

.target-page .target-box {
  margin-bottom: 0.75rem;
}

@media (max-width: 800px) {
  .feature .wrap {
    grid-template-columns: 1fr;
  }

  .feature .wrap > * {
    min-width: 0;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .model-list {
    columns: 1;
  }
}