* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:85px
}
body {
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  background:var(--bg);
  color:var(--ink);
  --bg:#f8f5ed;
  --ink:#1c352d;
  --muted:#65716a;
  --accent:#315a48;
  --panel:#eee9dc;
  --line:#d9d9cb
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible {
  outline:3px solid #a96a35;
  outline-offset:5px
}
.product-nav {
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1320px;
  margin:auto;
  padding:0 48px;
  border-bottom:1px solid var(--line)
}
.wordmark {
  font-size:17px;
  letter-spacing:-.5px
}
.product-nav>div {
  display:flex;
  align-items:center;
  gap:30px;
  font-size:12px
}
.nav-cta {
  background:var(--ink);
  color:var(--bg);
  padding:9px 17px;
  border-radius:20px
}
.hero {
  overflow:hidden;
  position:relative
}
.eyebrow {
  font-size:11px;
  font-weight:650;
  letter-spacing:2px;
  line-height:1.5
}
.hero h1 {
  font-size:clamp(60px,6.5vw,104px);
  font-weight:650;
  letter-spacing:-5px;
  line-height:1.02;
  margin:22px 0
}
.hero h1 span,h2 span {
  color:var(--muted)
}
.hero-sub {
  font-size:20px;
  line-height:1.5;
  color:var(--muted);
  letter-spacing:-.4px
}
.primary {
  display:inline-flex;
  gap:26px;
  align-items:center;
  background:var(--accent);
  color:var(--bg);
  padding:15px 24px;
  border-radius:30px;
  font-size:14px;
  font-weight:550;
  margin:18px 0;
  transition:transform .25s,opacity .25s
}
.primary:hover {
  transform:translateY(-3px);
  opacity:.88
}
.hero-caption {
  font-size:12px;
  color:var(--muted);
  line-height:1.8
}
.device {
  width:280px;
  aspect-ratio:1350/2760;
  position:relative;
  filter:drop-shadow(0 24px 22px #0002)
}
.device .screen {
  position:absolute;
  width:89.333333%;
  height:95%;
  left:5.333333%;
  top:2.5%;
  border-radius:12.3% / 5.65%;
  object-fit:fill
}
.bezel {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none
}
.field-hero {
  min-height:750px;
  max-width:1440px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1.1fr;
  align-items:center;
  padding:70px 7%
}
.field-copy {
  position:relative;
  z-index:2
}
.field-hero h1 {
  font-size:clamp(60px,6.5vw,94px)
}
.field-stage {
  position:relative;
  height:630px
}
.field-stage .main-phone {
  width:280px;
  position:absolute;
  left:8%;
  top:12px;
  transform:rotate(-7deg);
  z-index:2
}
.field-stage .secondary-phone {
  width:235px;
  position:absolute;
  left:52%;
  top:150px;
  transform:rotate(8deg);
  z-index:3
}
.orbit {
  position:absolute;
  border:1px solid #bbbba955;
  border-radius:50%;
  width:570px;
  height:570px;
  top:20px;
  left:-15px
}
.orbit-two {
  width:440px;
  height:440px;
  top:85px;
  left:50px
}
.field-label {
  position:absolute;
  bottom:0;
  left:20%;
  font-size:9px;
  letter-spacing:3px;
  color:var(--muted)
}
.intro {
  text-align:center;
  max-width:900px;
  padding:110px 30px 75px;
  margin:auto
}
h2 {
  font-size:clamp(38px,4.2vw,64px);
  letter-spacing:-2.5px;
  line-height:1.08;
  font-weight:600;
  margin:22px 0
}
p {
  line-height:1.6
}
.body-copy {
  font-size:19px;
  color:var(--muted);
  max-width:590px;
  margin:25px auto
}
.feature-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  max-width:1240px;
  margin:auto;
  padding:0 40px
}
.feature-card {
  border-radius:28px;
  overflow:hidden;
  height:760px;
  background:var(--panel);
  position:relative
}
.card-copy {
  padding:42px 44px 0;
  position:relative;
  z-index:2
}
h3 {
  font-size:36px;
  line-height:1.12;
  letter-spacing:-1.2px;
  margin:20px 0
}
.card-copy>p:last-child {
  font-size:15px;
  max-width:350px;
  color:var(--muted)
}
.card-phone {
  margin:35px auto 0;
  width:255px;
  transform:rotate(-5deg)
}
.card-phone .device {
  width:100%
}
.directory-card {
  background:#e0e7dc
}
.directory-card .card-phone {
  transform:rotate(5deg)
}
.study-section {
  max-width:1240px;
  margin:130px auto;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:80px;
  padding:0 60px;
  align-items:center
}
.study-devices {
  position:relative;
  height:650px
}
.study-devices>div {
  position:absolute;
  width:250px;
  top:0;
  left:0;
  transform:rotate(-7deg)
}
.study-devices>div+div {
  left:40%;
  top:110px;
  transform:rotate(7deg)
}
.study-devices .device {
  width:100%
}
.study-copy>p {
  color:var(--muted);
  font-size:17px
}
.study-copy>.eyebrow {
  font-size:11px
}
.detail-line {
  border-top:1px solid var(--line);
  display:flex;
  gap:22px;
  margin-top:24px;
  padding-top:14px;
  font-size:14px
}
.detail-line>span {
  padding-top:18px;
  color:var(--muted);
  font-size:11px
}
.detail-line p {
  color:var(--muted)
}
.detail-line b {
  color:var(--ink);
  font-weight:550
}
.privacy-section {
  padding:85px 25px;
  text-align:center;
  background:var(--panel)
}
.privacy-icon {
  font-size:56px;
  line-height:1.2;
  color:var(--accent)
}
.privacy-section>p:not(.eyebrow) {
  max-width:460px;
  margin:25px auto;
  color:var(--muted);
  font-size:18px
}
.privacy-facts {
  display:flex;
  justify-content:center;
  gap:30px;
  margin-top:40px;
  font-size:12px
}
.privacy-facts span:before {
  content:'✓';
  padding-right:8px;
  color:var(--accent)
}
.download-section {
  text-align:center;
  padding:110px 25px 80px
}
.download-section>p {
  color:var(--muted)
}
.availability {
  font-size:12px;
  line-height:1.8
}
footer {
  border-top:1px solid var(--line);
  max-width:1200px;
  margin:auto;
  padding:35px 40px 30px;
  font-size:11px;
  color:var(--muted)
}
footer>p {
  max-width:850px
}
.footer-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:25px;
  gap:20px
}
.policy-buttons {
  display:flex;
  gap:10px
}
.policy-buttons a {
  border:1px solid var(--line);
  border-radius:22px;
  padding:10px 15px;
  white-space:nowrap
}
.policy-buttons a:hover {
  color:var(--ink);
  border-color:var(--ink)
}
.will-reveal {
  opacity:0;
  transform:translateY(28px);
  transition:opacity .75s,transform .75s
}
.will-reveal.visible {
  opacity:1;
  transform:none
}
.hero .device {
  animation:arrive 1s cubic-bezier(.2,.7,.3,1) both
}
@keyframes arrive {
  from {
    opacity:0;
    translate:0 35px
  }
  to {
    opacity:1;
    translate:0 0
  }
  
}
@media(max-width:1000px) {
  .hero h1 {
    letter-spacing:-3px
  }
  .feature-grid {
    padding:0 24px
  }
  .card-copy {
    padding:30px 28px 0
  }
  h3 {
    font-size:30px
  }
  .study-section {
    gap:35px;
    padding:0 35px
  }
  .study-devices {
    transform:scale(.8);
    transform-origin:left center;
    width:450px;
    margin-right:-90px
  }
  .study-copy h2 {
    font-size:44px
  }
  
}
@media(max-width:700px) {
  .product-nav {
    padding:0 20px;
    height:64px
  }
  .wordmark {
    font-size:14px
  }
  .product-nav>div {
    gap:14px
  }
  .product-nav>div>a:not(.nav-cta) {
    display:none
  }
  .nav-cta {
    font-size:11px
  }
  .hero h1 {
    font-size:60px;
    letter-spacing:-3px
  }
  .hero-sub {
    font-size:18px
  }
  .field-copy {
    position:relative;
    z-index:5
  }
  .field-stage .main-phone {
    left:8%
  }
  .field-stage .secondary-phone {
    left:51%
  }
  .field-label {
    left:17%
  }
  .intro {
    padding:75px 24px 45px
  }
  h2 {
    font-size:40px;
    letter-spacing:-1.8px
  }
  .body-copy {
    font-size:17px
  }
  .feature-grid {
    grid-template-columns:1fr;
    padding:0 18px;
    gap:18px
  }
  .feature-card {
    height:700px
  }
  .card-copy {
    padding:32px
  }
  .card-phone {
    width:235px
  }
  .study-section {
    display:flex;
    flex-direction:column-reverse;
    margin:75px auto;
    padding:0 28px;
    gap:32px
  }
  .study-copy h2 {
    font-size:42px
  }
  .study-devices {
    width:440px;
    transform:scale(.73);
    transform-origin:top center;
    height:620px;
    margin:0 0 -160px
  }
  .privacy-section {
    padding:65px 24px
  }
  .privacy-facts {
    flex-direction:column;
    gap:15px;
    margin-top:30px
  }
  .download-section {
    padding:75px 24px 60px
  }
  .download-section .primary {
    font-size:12px;
    padding:15px 20px
  }
  .footer-row {
    flex-direction:column;
    align-items:flex-start
  }
  .policy-buttons {
    flex-wrap:wrap
  }
  footer {
    padding:28px 24px
  }
  .eyebrow {
    font-size:10px;
    letter-spacing:1.7px
  }
  
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .hero .device {
    animation:none
  }
  .will-reveal {
    opacity:1;
    transform:none;
    transition:none
  }
  .primary {
    transition:none
  }
  
}
.product-nav {
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(248,245,237,.94);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px)
}
.skip-link {
  position:fixed;
  top:-80px;
  left:20px;
  z-index:30;
  padding:12px 20px;
  background:var(--ink);
  color:var(--bg);
  border-radius:8px
}
.skip-link:focus {
  top:10px
}
.privacy-icon {
  display:block;
  margin:0 auto 22px
}
@media(max-width:700px) {
  .field-hero {
    display:block;
    padding:50px 25px 20px;
    text-align:center
  }
  .field-stage {
    transform:scale(.72);
    transform-origin:top center;
    width:480px;
    margin:40px 0 -130px;
    left:50%;
    translate:-50% 0;
    height:640px
  }
  .field-copy {
    position:relative;
    z-index:5
  }
  
}
@media(min-width:701px) and (max-width:1000px) {
  .field-hero {
    padding:60px 5%;
    grid-template-columns:1fr 1fr;
    min-height:660px
  }
  .field-stage {
    transform:scale(.8);
    transform-origin:left center;
    width:500px;
    margin-right:-100px
  }
  
}