:root {
  color-scheme: light;
  --paper: #f8f8ee;
  --ink: #14261f;
  --muted: #4c5d51;
  --line: #d6ddce;
  --accent: #d6f579;
  --forest: #102820;
  --forest-line: #466152;
  --radius: 1.5rem;
  font: 100%/1.5 "DM Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 3px solid #467f28; outline-offset: 5px; }
.wrap { width: min(100% - 3rem, 73rem); margin-inline: auto; }

.skip {
  position: absolute;
  z-index: 2;
  top: .7rem;
  left: .7rem;
  translate: 0 -180%;
  padding: .6rem 1rem;
  border-radius: .45rem;
  background: var(--accent);
}
.skip:focus { translate: 0; }

.site-header, .site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.2rem;
  padding-block: 1.2rem;
}
.site-header { border-bottom: 1px solid var(--line); }
.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  width: fit-content;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.21rem;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .72rem;
  background: var(--forest);
  color: var(--accent);
  font-size: 1.5rem;
  letter-spacing: 0;
}
nav { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1.6rem; }
nav a { text-decoration: none; font-weight: 650; font-size: .91rem; }
nav a:hover, .text-link:hover { text-decoration: underline; text-underline-offset: .22em; }
.nav-account { padding: .54rem .78rem; border: 1px solid var(--line); border-radius: 999px; }
.nav-account span, .text-link span { margin-left: .14em; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.8rem);
  padding-block: clamp(2.6rem, 6.3vw, 6.2rem);
}
.hero-copy { min-width: 0; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { line-height: 1.08; }
h1 {
  font-size: clamp(3.15rem, 6.05vw, 5.65rem);
  font-weight: 850;
  letter-spacing: -.086em;
  max-width: 9ch;
}
h1 em { color: #376445; font-style: normal; white-space: nowrap; }
.hero-copy > p:not(.install-note) {
  max-width: 34ch;
  margin-top: 1.48rem;
  font-size: clamp(1.03rem, 1.6vw, 1.23rem);
  line-height: 1.56;
  color: var(--muted);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.75rem; }
.button {
  display: inline-flex;
  gap: .75rem;
  align-items: center;
  min-height: 3.2rem;
  padding: .65rem 1rem;
  border: 1px solid transparent;
  border-radius: .7rem;
  font-size: .96rem;
  font-weight: 750;
  text-decoration: none;
}
.button-primary { background: var(--accent); border-color: #c1df66; }
.button-primary:hover { background: #c9e96b; }
.button-secondary { border-color: #aebbad; }
.button-secondary:hover { background: #edf1e3; }
.install-note { margin-top: .85rem; font-size: .84rem; color: var(--muted); }

.relay {
  --display-paper: #f7f8ee;
  min-width: 0;
  padding: clamp(1.1rem, 3vw, 2rem);
  color: var(--paper);
  background: radial-gradient(ellipse at 55% 52%, #285144 0%, var(--forest) 67%);
  border: 1px solid #193b2f;
  border-radius: var(--radius);
}
.relay figcaption { font-size: 1.16rem; font-weight: 750; letter-spacing: -.035em; }
.relay-controls {
  display: flex;
  gap: .25rem;
  width: fit-content;
  max-width: 100%;
  margin-top: .75rem;
  padding: .24rem;
  background: #0b2018;
  border: 1px solid var(--forest-line);
  border-radius: .7rem;
}
.relay-controls button {
  min-height: 2.45rem;
  padding: .33rem .68rem;
  border: 0;
  border-radius: .47rem;
  color: #e6eee0;
  background: transparent;
  cursor: pointer;
  font-size: .83rem;
  font-weight: 700;
  line-height: 1.2;
}
.relay-controls button[aria-pressed="true"] { color: var(--ink); background: var(--accent); }
.relay-controls button:not([aria-pressed="true"]):hover { background: #2a4438; }
.relay-controls button:focus-visible { outline-color: var(--accent); }
.devices {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(1.65rem, .47fr) minmax(0, .91fr);
  align-items: center;
  gap: .45rem;
  max-width: 26rem;
  margin: 1.1rem auto 1rem;
}
.device-column { display: grid; justify-items: center; min-width: 0; gap: .45rem; }
.device-label { font-size: .78rem; font-weight: 700; color: #e7f0e0; white-space: nowrap; }
.android, .flip { position: relative; width: 100%; filter: drop-shadow(0 .55rem .55rem #061913a0); }
.android {
  max-width: 9.45rem;
  height: 15.25rem;
  padding: .46rem;
  border: 1px solid #839285;
  border-radius: 1.35rem;
  background: linear-gradient(135deg, #5e6a60, #202823 45%, #34443a);
}
.android-camera {
  position: absolute;
  z-index: 1;
  top: .67rem;
  left: 50%;
  width: .25rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #14251f;
  translate: -50%;
}
.android-screen {
  height: 100%;
  overflow: hidden;
  border: 1px solid #131c15;
  border-radius: .99rem;
  background: #e7eedf;
}
.android-bar {
  display: flex;
  align-items: center;
  gap: .37rem;
  min-height: 3.38rem;
  padding: .78rem .43rem .3rem;
  background: #f7fbf1;
  color: var(--ink);
}
.contact-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: #dbe9cb;
  color: #2d4939;
  font-size: .71rem;
  font-weight: 850;
}
.android-bar strong, .android-bar small { display: block; line-height: 1.25; }
.android-bar strong { font-size: .75rem; }
.android-bar small { font-size: .58rem; }
.chat-bg {
  min-height: 100%;
  padding: .46rem .37rem;
  background: radial-gradient(circle at 3px 3px, #60816a25 1px, transparent 1.5px) 0 0 / 10px 10px;
}
.chat-bubble {
  width: fit-content;
  max-width: 100%;
  padding: .34rem .41rem;
  color: #1a2d23;
  background: #fbfdf6;
  border-radius: .13rem .48rem .48rem .48rem;
  box-shadow: 0 1px 1px #152b2029;
  font-size: .75rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.chat-out { margin: .36rem 0 0 auto; background: #d6edb7; border-radius: .48rem .13rem .48rem .48rem; }
.flip { max-width: 8.7rem; }
.flip-top, .flip-bottom {
  border: 1px solid #819489;
  background: linear-gradient(130deg, #718077, #283630 45%, #45584c);
}
.flip-top { height: 8.25rem; padding: .33rem .46rem .45rem; border-radius: 1.18rem 1.18rem .56rem .56rem; }
.earpiece {
  width: 1.5rem;
  height: .15rem;
  margin: .14rem auto .34rem;
  border-radius: 999px;
  background: #111d17;
}
.flip-screen {
  height: calc(100% - .63rem);
  overflow: hidden;
  padding: .34rem;
  border: 1px solid #12271b;
  border-radius: .35rem;
  background: var(--display-paper);
}
.flip-bar { margin-bottom: .38rem; padding-bottom: .16rem; border-bottom: 1px solid #c7d6c3; color: var(--ink); font-size: .69rem; font-weight: 850; }
.flip-screen .chat-bubble { background: #e3ecdc; font-size: .68rem; }
.flip-screen .chat-bubble strong { display: block; margin-bottom: .14rem; font-size: .65rem; }
.flip-screen .chat-out { background: #d6edb7; }
.hinge { height: .43rem; width: 79%; margin-inline: auto; background: linear-gradient(#8d9e92, #182820); }
.flip-bottom { height: 6.57rem; padding: .36rem .52rem; border-radius: .54rem .54rem 1.18rem 1.18rem; }
.keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .16rem .2rem; }
.keys span {
  display: grid;
  place-items: center;
  height: .94rem;
  border: 1px solid #62766a;
  border-radius: .22rem;
  background: #1e2d25;
  color: #e5eee6;
  font-size: .55rem;
  line-height: 1;
}
.keys .key-round { border: 2px solid #9aab9f; border-radius: .45rem; background: #324339; }
.relay-route { display: flex; align-items: center; color: var(--accent); }
.relay-route span { flex: 1; border-top: 1px dashed #a7c76f; }
.relay-route b {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem;
  aspect-ratio: 1;
  border: 1px solid #a7c76f;
  border-radius: 50%;
  background: var(--forest);
  font-size: 1.18rem;
  line-height: 1;
}
.demo-description { min-height: 3.15em; color: #e1edde; font-size: .85rem; line-height: 1.45; }

.how, .faq { border-top: 1px solid var(--line); padding-block: clamp(2rem, 4.5vw, 4rem); }
h2 { font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 810; letter-spacing: -.065em; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; padding: 0; margin: 1.2rem 0 0; list-style: none; counter-reset: setup; }
.steps li { counter-increment: setup; padding: 1.15rem; border: 1px solid var(--line); border-radius: 1rem; background: #fdfdf5; }
.steps li::before {
  content: counter(setup);
  display: grid;
  place-items: center;
  width: 2rem;
  aspect-ratio: 1;
  margin-bottom: .8rem;
  background: #e6efcf;
  border-radius: .55rem;
  font-weight: 850;
}
h3 { font-size: 1.15rem; letter-spacing: -.035em; }
.steps p, .faq p { margin-top: .53rem; color: var(--muted); font-size: .95rem; }
code { background: #eef2e3; padding: .14em .23em; border-radius: .22em; overflow-wrap: anywhere; }
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2rem; }
.text-link { font-weight: 700; text-underline-offset: .2em; }
details { border-bottom: 1px solid var(--line); }
details:first-child { border-top: 1px solid var(--line); }
summary { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 3.15rem; padding-block: .65rem; list-style: none; font-weight: 750; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+" / ""; color: #376445; font-size: 1.25rem; font-weight: 550; }
details[open] summary::after { content: "−" / ""; }
.faq details p { margin: 0 0 .95rem; }
.site-footer { align-items: start; border-top: 1px solid var(--line); padding-block: 1.6rem 2.25rem; }
.site-footer p { color: var(--muted); margin-top: .5rem; font-size: .8rem; }
.site-footer nav { padding-top: .44rem; }

@media (max-width: 830px) {
  .wrap { width: min(100% - 2rem, 39rem); }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 1.9rem; }
  h1 { font-size: clamp(3.05rem, 9.2vw, 5.1rem); }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

@media (max-width: 570px) {
  .site-header { align-items: start; flex-wrap: wrap; }
  .site-header nav { width: 100%; justify-content: space-between; gap: .3rem .7rem; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .site-footer { flex-direction: column; }
  .site-footer nav { padding-top: 0; }
}

@media (max-width: 350px) {
  .wrap { width: calc(100% - 1.35rem); }
  h1 { font-size: 2.75rem; }
  .relay { padding: .8rem; }
  .devices { column-gap: .22rem; }
  .relay-route b { width: 1.65rem; }
  .chat-bubble { padding-inline: .28rem; }
}