@charset "UTF-8";
:root{
  --ink:#edf7f2;
  --muted:#94aaa0;
  --paper:#0c1411;
  --green:#00bd87;
  --mint:#39e7b0;
  --line:#ffffff12;
  --dark:#030806;
  --radius:28px;
  --gutter:clamp(20px,4.4vw,72px);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased
}
*,*::before,*::after{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body{
  margin:0
}
body.dialog-open{
  overflow:hidden
}
a{
  color:inherit;
  text-decoration:none
}
button,summary,a{
  -webkit-tap-highlight-color:transparent
}
button,input{
  font:inherit
}
button{
  color:inherit;
  cursor:pointer
}
img{
  display:block;
  max-width:100%;
  height:auto
}
svg{
  flex-shrink:0
}
button{
  border:0
}
h1,h2,h3,p,figure,blockquote{
  margin:0
}
h1,h2,h3{
  text-wrap:balance
}
p{
  line-height:1.65
}
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid #39e7b0;
  outline-offset:5px
}
::selection{
  background:var(--mint);
  color:var(--ink)
}
[hidden]{
  display:none!important
}
.container{
  width:min(100% - var(--gutter)*2,1320px);
  margin-inline:auto
}
.section{
  padding-block:112px
}
.icon,.large-icon,.work-icon{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round
}
.icon-library{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.eyebrow{
  text-transform:uppercase;
  font-size:11px;
  line-height:1.5;
  font-weight:650;
  letter-spacing:.15em;
  display:flex;
  align-items:center;
  gap:10px
}
.lead{
  font-size:clamp(17px,1.45vw,20px);
  line-height:1.6
}
.small-note{
  font-size:12px;
  line-height:1.65;
  color:var(--muted)
}
h2{
  font-size:clamp(34px,4.5vw,60px);
  line-height:1.06;
  letter-spacing:-.055em;
  font-weight:550
}
h3{
  font-weight:550;
  letter-spacing:-.035em
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  min-height:52px;
  padding:14px 24px;
  border-radius:50px;
  font-size:14px;
  font-weight:600;
  transition:background .2s,transform .2s;
  white-space:nowrap
}
.button:hover{
  transform:translateY(-2px)
}
.button-small{
  min-height:42px;
  padding:10px 18px;
  font-size:12px
}
.button-light{
  background:var(--paper);
  color:var(--ink)
}
.button-green{
  background:var(--green);
  color:#fff
}
.button-green:hover{
  background:#26d9a0
}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:24px;
  font-size:14px;
  font-weight:550;
  min-height:44px;
  border-bottom:1px solid #ffffff45
}
.text-link span{
  transition:transform .2s
}
.text-link:hover span{
  transform:translate(2px,2px)
}
.text-link.ink{
  border-color:#17382345;
  width:max-content;
  max-width:100%
}
.status-dot{
  display:inline-block;
  width:7px;
  height:7px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--mint)
}
.skip-link{
  position:fixed;
  top:-100px;
  left:20px;
  z-index:20;
  background:#fff;
  padding:12px 24px;
  border-radius:10px
}
.skip-link:focus{
  top:14px
}
/* The new landing has its own stylesheet;
legal pages keep styles.css. */
.site-header{
  height:82px;
  padding-inline:var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:#030806db;
  color:white;
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter:blur(18px);
  border-bottom:1px solid #ffffff12
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:23px;
  font-weight:750;
  letter-spacing:-.065em;
  white-space:nowrap
}
.brand img{
  object-fit:contain
}
.brand-dot{
  color:var(--mint)
}
.desktop-nav{
  display:flex;
  align-items:center;
  gap:30px;
  font-size:12px;
  color:#d2d9d2
}
.desktop-nav a{
  padding-block:14px
}
.desktop-nav a:hover{
  color:#fff
}
.header-actions{
  display:flex;
  align-items:center;
  gap:20px
}
.language-menu{
  position:relative;
  font-size:12px
}
.language-menu summary{
  display:flex;
  gap:8px;
  align-items:center;
  list-style:none;
  cursor:pointer;
  min-height:44px
}
.language-menu summary::-webkit-details-marker{
  display:none
}
.language-menu .icon{
  width:17px;
  height:17px
}
.language-options{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  background:#fff;
  color:var(--ink);
  border-radius:16px;
  border:1px solid var(--line);
  box-shadow:0 15px 40px #0002;
  min-width:176px;
  padding:8px;
  display:grid
}
.language-options a{
  padding:11px 14px;
  border-radius:9px
}
.language-options a:hover,.language-options a[aria-current]{
  background:#18362a
}
.language-options a[aria-current]::after{
  content:'✓';
  float:right;
  color:var(--green)
}
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--dark);
  color:#fff
}
.hero-photo,.hero-shade{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none
}
.hero-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:60% 55%;
  opacity:.67
}
.hero-shade{
  background:linear-gradient(90deg,#030806 4%,#030806eb 25%,#03080655 64%,#03080633),linear-gradient(0deg,#030806,transparent 25%)
}
.hero-layout{
  min-height:730px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  padding-top:54px;
  padding-bottom:54px;
  gap:38px
}
.hero-copy{
  max-width:660px;
  position:relative;
  z-index:2
}
.hero h1{
  font-size:clamp(46px,5.4vw,80px);
  line-height:1.02;
  font-weight:530;
  letter-spacing:-.065em;
  margin-top:26px
}
.hero h1 em{
  font-style:normal;
  color:var(--mint)
}
.hero .lead{
  max-width:500px;
  color:#c7d0c9;
  margin-top:26px
}
.store-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:32px
}
.store-link{
  display:flex;
  gap:12px;
  align-items:center;
  min-width:168px;
  min-height:59px;
  padding:10px 19px;
  border-radius:13px;
  background:#fff;
  color:#141c17;
  border:1px solid #fff;
  transition:background .2s,transform .2s
}
.store-link:hover{
  background:#e9f4e5;
  transform:translateY(-2px)
}
.store-link svg{
  width:24px;
  height:27px;
  fill:currentColor
}
.store-link span{
  display:flex;
  flex-direction:column;
  gap:1px
}
.store-link small{
  font-size:10px;
  line-height:1.3
}
.store-link strong{
  font-size:19px;
  font-weight:600;
  letter-spacing:-.025em
}
.hero-promise{
  font-size:12px;
  color:#b8c7bd;
  margin-top:13px
}
.hero-copy>.text-link{
  margin-top:26px
}
.hero-product{
  position:relative;
  display:grid;
  place-items:center;
  min-height:620px
}
.device{
  padding:7px;
  background:linear-gradient(135deg,#555b57,#111 40%,#616761);
  border-radius:44px;
  box-shadow:0 34px 70px #0004,0 0 0 1px #ffffff35;
  overflow:hidden
}
.device picture,.device img{
  display:block;
  border-radius:37px;
  width:100%;
  overflow:hidden
}
.hero-device{
  width:258px;
  position:relative;
  transform:rotate(6deg);
  transition:transform .5s
}
.hero-device:hover{
  transform:rotate(1deg) translateY(-5px)
}
.orbit{
  position:absolute;
  width:580px;
  height:580px;
  border:1px solid #d9efdf1c;
  border-radius:50%;
  pointer-events:none
}
.orbit-two{
  width:440px;
  height:440px
}
.floating-label{
  position:absolute;
  z-index:2;
  display:flex;
  gap:10px;
  align-items:center;
  padding:14px 20px;
  max-width:240px;
  font-size:12px;
  border-radius:16px;
  background:#071c15e8;
  border:1px solid #ffffff24;
  box-shadow:0 16px 50px #0003;
  backdrop-filter:blur(12px)
}
.floating-label-top{
  top:65px;
  left:0;
  transform:rotate(-5deg)
}
.floating-label-top svg{
  color:var(--mint)
}
.floating-label-bottom{
  bottom:63px;
  right:-6px;
  transform:rotate(4deg)
}
.hero-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:21px;
  border-top:1px solid #ffffff25;
  color:#a7b6ab;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase
}
.hero-foot a{
  font-size:20px;
  min-width:44px;
  text-align:center;
  color:#fff
}
.benefit-strip{
  border-bottom:1px solid var(--line);
  background:#0c1712
}
.benefit-strip .container{
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding-block:26px
}
.benefit-strip span{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px
}
.benefit-strip svg{
  color:var(--green)
}
.section-heading{
  margin-bottom:42px
}
.section-heading .eyebrow{
  color:var(--green);
  margin-bottom:20px
}
.heading-row{
  display:flex;
  justify-content:space-between;
  gap:60px;
  align-items:end
}
.heading-row h2{
  max-width:680px
}
.heading-row p{
  max-width:335px;
  font-size:15px;
  color:var(--muted)
}
.tab-list{
  display:flex;
  gap:7px
}
.tab-list button{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  background:transparent;
  border-radius:50px;
  font-size:14px;
  min-height:48px;
  padding:12px 21px;
  transition:background .2s,color .2s
}
.tab-list button[aria-selected=true]{
  background:var(--ink);
  color:#fff
}
.tab-list button:not([aria-selected=true]):hover{
  background:#18362a
}
.feature-tabs{
  padding-bottom:26px;
  flex-wrap:wrap
}
.feature-panel{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  min-height:570px;
  background:#0c1712;
  border-radius:var(--radius);
  overflow:hidden
}
.feature-panel+.feature-panel{
  margin-top:24px
}
.js-tabs .feature-panel+.feature-panel{
  margin-top:0
}
.feature-copy{
  padding:clamp(30px,4.5vw,66px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:start
}
.feature-number{
  color:#66a58e;
  font-size:12px;
  letter-spacing:.12em;
  margin-bottom:34px
}
.feature-copy h3{
  font-size:clamp(30px,3.3vw,46px);
  line-height:1.08;
  margin-bottom:22px
}
.feature-copy>p:not(.small-note){
  color:#a1b7ab;
  font-size:15px
}
.feature-copy blockquote{
  border-left:2px solid var(--green);
  padding-left:17px;
  margin-block:26px 12px;
  font-size:18px;
  line-height:1.55;
  font-weight:500
}
.feature-copy .text-link{
  margin-top:24px
}
.feature-art{
  position:relative;
  align-self:center;
  overflow:hidden
}
.photo-composite{
  width:100%;
  line-height:0
}
.photo-composite .scene{
  width:100%
}
.in-car .screen-overlay{
  position:absolute;
  left:38.45%;
  top:15.45%;
  width:25.8%;
  height:44.25%;
  transform:rotate(-.25deg);
  border-radius:10%;
  overflow:hidden;
  background:#101010;
  padding:0
}
.screen-overlay img{
  width:100%;
  height:100%;
  object-fit:fill
}
.on-desk{
  align-self:center
}
.on-desk .screen-overlay{
  position:absolute;
  left:55.85%;
  top:15.35%;
  width:20.9%;
  height:67.35%;
  border-radius:10%;
  padding:0;
  overflow:hidden;
  background:#111
}
.journal-art{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:580px;
  align-self:stretch;
  background:radial-gradient(circle at 50% 60%,#064c35,#030806);
  padding:45px
}
.journal-device{
  position:relative;
  width:220px;
  transform:rotate(5deg);
  border-radius:35px;
  padding:6px
}
.journal-device img{
  border-radius:29px
}
.service-art{
  align-self:stretch;
  display:grid;
  place-items:center;
  min-height:570px
}
.service-art>picture{
  position:absolute;
  inset:0
}
.service-art>picture>img{
  width:100%;
  height:100%;
  object-fit:cover
}
.service-summary{
  position:relative;
  width:78%;
  max-width:330px;
  padding:25px;
  border-radius:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
  background:#0b1c16f2;
  box-shadow:0 20px 60px #0005
}
.service-summary strong{
  font-size:32px;
  font-weight:500;
  letter-spacing:-.04em
}
.service-summary>span:not(.pill){
  font-size:14px;
  border-top:1px solid var(--line);
  padding-top:12px
}
.service-summary small{
  font-size:10px;
  color:var(--muted)
}
.pill{
  font-size:11px;
  display:inline-flex;
  align-items:center;
  align-self:start;
  gap:7px;
  padding:7px 11px;
  background:#103b2c;
  border-radius:50px;
  color:#56e1b4;
  line-height:1.4
}
.pill .status-dot{
  background:var(--green)
}
.pill .icon{
  width:14px;
  height:14px
}
.section-footnote{
  font-size:11px;
  color:var(--muted);
  margin-top:18px
}
.maintenance-section{
  background:var(--dark);
  color:#f3f5ef;
  padding-block:106px;
  overflow:hidden
}
.maintenance-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,8vw,120px);
  align-items:center
}
.maintenance-copy .eyebrow{
  color:var(--mint);
  margin-bottom:22px
}
.maintenance-copy .lead{
  margin-top:24px;
  color:#aebdb2;
  max-width:430px
}
.steps{
  list-style:none;
  padding:0;
  margin:36px 0 0;
  display:grid;
  gap:24px
}
.steps li{
  display:flex;
  align-items:start;
  gap:18px
}
.steps li>span{
  font-size:11px;
  letter-spacing:.1em;
  color:var(--mint);
  border:1px solid #ffffff25;
  border-radius:50%;
  width:33px;
  height:33px;
  display:grid;
  place-items:center;
  flex-shrink:0
}
.steps h3{
  font-size:19px;
  letter-spacing:-.02em;
  margin-bottom:5px
}
.steps p{
  font-size:13px;
  color:#9fb0a4;
  max-width:360px
}
.maintenance-demo{
  background:#0c1411;
  color:var(--ink);
  border-radius:26px;
  padding:26px;
  box-shadow:0 0 110px #00bd8726;
  transform:rotate(1deg)
}
.demo-heading{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:600;
  margin-bottom:24px;
  flex-wrap:wrap
}
.demo-heading>.icon{
  color:var(--green)
}
.demo-label{
  font-size:9px;
  letter-spacing:.03em;
  font-weight:400;
  color:var(--muted);
  margin-left:auto
}
.service-tabs{
  padding:4px;
  background:#060c09;
  border-radius:50px;
  margin-bottom:24px;
  gap:0
}
.service-tabs button{
  flex:1;
  font-size:12px;
  min-height:40px;
  padding:9px 8px;
  white-space:normal
}
.maintenance-panel{
  min-height:386px;
  padding:0 9px 4px
}
.maintenance-panel+.maintenance-panel{
  margin-top:35px
}
.js-tabs .maintenance-panel+.maintenance-panel{
  margin-top:0
}
.service-date{
  font-size:37px;
  font-weight:550;
  letter-spacing:-.05em;
  line-height:1.2;
  margin-top:17px
}
.service-date>span{
  display:block;
  font-size:18px;
  letter-spacing:-.02em;
  color:var(--muted);
  margin-top:5px
}
.work-list{
  list-style:none;
  padding:0;
  margin:23px 0;
  display:grid;
  gap:0
}
.work-list li{
  display:flex;
  gap:14px;
  align-items:center;
  border-top:1px solid var(--line);
  padding-block:16px;
  font-size:14px;
  font-weight:550
}
.work-icon{
  width:40px;
  height:40px;
  padding:9px;
  border-radius:11px;
  background:#113728;
  color:var(--green)
}
.work-list small{
  display:block;
  font-size:11px;
  font-weight:400;
  color:var(--muted);
  margin-top:4px
}
.calendar-note{
  background:#113728;
  padding:13px;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  line-height:1.5;
  color:#7be7bf
}
.maintenance-panel>.small-note{
  margin-top:14px;
  font-size:11px
}
.parts-item{
  position:relative;
  margin-top:24px;
  padding-left:53px
}
.parts-item .work-icon{
  position:absolute;
  left:0;
  top:0
}
.parts-item h3{
  font-size:16px
}
.parts-item p{
  font-size:12px;
  color:var(--muted);
  margin-block:5px 12px
}
.interval-track{
  background:#17382b;
  height:5px;
  border-radius:10px;
  overflow:hidden
}
.interval-track span{
  display:block;
  width:65%;
  height:100%;
  background:var(--green);
  border-radius:10px
}
.interval-track.second span{
  width:35%
}
.parts-item+.small-note{
  margin-top:28px
}
.everyday-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--line)
}
.everyday-grid article{
  padding:36px 26px 0;
  border-right:1px solid var(--line)
}
.everyday-grid article:first-child{
  padding-left:0
}
.everyday-grid article:last-child{
  border-right:0;
  padding-right:0
}
.large-icon{
  width:31px;
  height:31px;
  color:var(--green);
  margin-bottom:30px
}
.everyday-grid h3{
  font-size:21px;
  margin-bottom:13px;
  line-height:1.2
}
.everyday-grid p{
  font-size:13px;
  color:var(--muted)
}
.community-section{
  padding-block:90px;
  background:#0c1712
}
.community-layout{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:65px;
  align-items:center
}
.community-copy .eyebrow{
  color:var(--green);
  margin-bottom:20px
}
.community-copy .lead{
  font-size:17px;
  margin-block:24px;
  color:#a1b7ab
}
.community-copy .small-note{
  margin-top:13px
}
.community-layout figure{
  align-self:center
}
.community-layout figure img{
  aspect-ratio:1.28;
  object-fit:cover;
  border-radius:24px;
  object-position:48%
}
.community-layout figcaption{
  font-size:10px;
  color:var(--muted);
  margin-top:10px
}
.principles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px;
  margin-top:70px;
  padding-top:32px;
  border-top:1px solid #ffffff12
}
.principles article>span{
  font-size:11px;
  color:#66a58e
}
.principles h3{
  font-size:22px;
  margin-block:15px 10px
}
.principles p{
  font-size:13px;
  color:#a1b7ab
}
.faq-section{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:100px
}
.faq-section .eyebrow{
  color:var(--green);
  margin-bottom:22px
}
.faq-section .text-link{
  margin-top:24px
}
.faq-list{
  border-top:1px solid var(--line)
}
.faq-list details{
  border-bottom:1px solid var(--line)
}
.faq-list summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  padding:24px 0;
  font-size:16px;
  font-weight:550;
  line-height:1.5;
  list-style:none;
  cursor:pointer
}
.faq-list summary::-webkit-details-marker{
  display:none
}
.faq-list summary::after{
  content:'+';
  font-size:25px;
  font-weight:300;
  flex-shrink:0
}
.faq-list details[open] summary::after{
  content:'−'
}
.faq-list details p{
  font-size:14px;
  color:var(--muted);
  padding:0 35px 24px 0
}
.faq-list p a{
  text-decoration:underline;
  text-underline-offset:3px
}
.download-section{
  padding-block:84px;
  background:#030806;
  color:#fff;
  text-align:center;
  position:relative;
  overflow:hidden
}
.download-section .container{
  position:relative
}
.download-section::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 120%,#00ab7440,transparent 70%);
  pointer-events:none
}
.app-icon{
  border-radius:20px;
  margin:0 auto 26px;
  box-shadow:0 8px 35px #0003
}
.download-section .eyebrow{
  justify-content:center;
  color:#bcd3b4
}
.download-section h2{
  max-width:800px;
  margin:20px auto
}
.download-section .lead{
  max-width:580px;
  margin-inline:auto;
  color:#b8c8ba;
  font-size:17px
}
.download-section .store-links{
  justify-content:center
}
.download-section .small-note{
  color:#abbfab;
  margin-top:17px
}
.site-footer{
  padding-block:45px;
  display:flex;
  justify-content:space-between;
  gap:40px
}
.footer-brand{
  font-size:22px
}
.site-footer p{
  font-size:12px;
  color:var(--muted);
  margin-block:14px
}
.site-footer small{
  font-size:10px;
  color:var(--muted)
}
.site-footer nav{
  display:grid;
  gap:12px;
  align-content:start;
  font-size:12px
}
.site-footer nav a:hover{
  text-decoration:underline;
  text-underline-offset:4px
}
.screenshot-dialog{
  border:0;
  padding:28px 30px 20px;
  background:var(--dark);
  color:#fff;
  border-radius:24px;
  max-width:calc(100vw - 24px);
  max-height:calc(100dvh - 24px);
  overflow:auto;
  overscroll-behavior:contain
}
.screenshot-dialog::backdrop{
  background:#0b110cdb;
  backdrop-filter:blur(8px)
}
.zoom-image{
  max-height:calc(100dvh - 122px);
  width:auto;
  max-width:100%;
  border-radius:18px;
  margin:auto
}
.screenshot-dialog p{
  font-size:11px;
  max-width:360px;
  color:#a8b8ac;
  text-align:center;
  margin:15px auto 0
}
.dialog-close{
  position:sticky;
  top:0;
  float:right;
  margin:-16px -18px 0 0;
  z-index:2;
  width:40px;
  height:40px;
  border-radius:50%;
  color:white;
  background:#25392a;
  box-shadow:0 2px 10px #0006;
  font-size:25px;
  line-height:1
}
.panel-enter{
  animation:panel-enter .35s ease both
}
@keyframes panel-enter{
  from{
    opacity:.3;
    transform:translateY(7px)
  }
  to{
    opacity:1;
    transform:translateY(0)
  }
}
@media(min-width:1500px){
  .hero-layout{
    min-height:810px
  }
  .hero-device{
    width:285px
  }
  .hero-product{
    min-height:660px
  }
}
@media(max-width:1080px){
  .desktop-nav{
    gap:18px
  }
  .hero-layout{
    gap:15px;
    grid-template-columns:1.15fr .85fr
  }
  .hero h1{
    font-size:58px
  }
  .hero-device{
    width:228px
  }
  .hero-product{
    min-height:570px
  }
  .floating-label{
    max-width:185px;
    padding:12px 14px
  }
  .floating-label-top{
    left:-15px;
    top:55px
  }
  .floating-label-bottom{
    right:-10px;
    bottom:38px
  }
  .hero-layout{
    min-height:690px
  }
  .maintenance-layout{
    gap:38px
  }
  .maintenance-demo{
    padding:21px
  }
  .service-date{
    font-size:32px
  }
  .community-layout{
    gap:35px
  }
  .faq-section{
    gap:50px
  }
  .feature-copy{
    padding:34px
  }
  .feature-panel,.service-art{
    min-height:515px
  }
  .journal-art{
    min-height:515px
  }
  .journal-device{
    width:196px
  }
  .feature-number{
    margin-bottom:22px
  }
  .feature-copy h3{
    font-size:36px
  }
  .feature-copy blockquote{
    font-size:16px
  }
  .everyday-grid article{
    padding-inline:20px
  }
}
@media(max-width:760px){
  html{
    scroll-padding-top:88px
  }
  .site-header{
    height:70px;
    gap:16px
  }
  .brand{
    font-size:21px;
    gap:9px
  }
  .brand img{
    width:31px
  }
  .desktop-nav{
    display:none
  }
  .header-actions{
    gap:14px
  }
  .header-actions .button-small{
    font-size:11px;
    min-height:38px;
    padding:9px 13px;
    gap:8px
  }
  .language-menu summary>.icon{
    display:none
  }
  .hero-layout{
    grid-template-columns:1fr;
    padding-top:44px;
    gap:12px;
    min-height:0
  }
  .hero h1{
    font-size:clamp(45px,8.5vw,68px);
    max-width:620px;
    margin-top:20px
  }
  .hero .lead{
    font-size:16px;
    max-width:500px;
    margin-top:21px
  }
  .hero-copy{
    max-width:100%
  }
  .hero-copy>.text-link{
    margin-top:16px
  }
  .hero .store-links{
    margin-top:24px
  }
  .hero-product{
    min-height:510px;
    margin-top:22px;
    max-width:460px;
    width:100%;
    margin-inline:auto
  }
  .hero-device{
    width:215px
  }
  .hero-photo img{
    object-position:65% 100%;
    opacity:.8
  }
  .hero-shade{
    background:linear-gradient(180deg,#030806 5%,#030806e8 30%,#03080699 55%,#03080640 75%,#030806)
  }
  .floating-label-top{
    top:45px;
    left:0
  }
  .floating-label-bottom{
    bottom:37px;
    right:0
  }
  .hero-foot{
    font-size:8px;
    letter-spacing:.04em;
    gap:20px
  }
  .hero-foot span:first-child{
    max-width:55%
  }
  .hero-foot a{
    display:none
  }
  .hero-layout{
    padding-bottom:14px
  }
  .orbit-one{
    width:440px;
    height:440px
  }
  .orbit-two{
    width:340px;
    height:340px
  }
  .benefit-strip .container{
    flex-wrap:wrap;
    gap:14px 24px;
    padding-block:22px
  }
  .benefit-strip span{
    font-size:11px;
    gap:8px
  }
  .benefit-strip .icon{
    width:18px;
    height:18px
  }
  .section{
    padding-block:68px
  }
  .section-heading{
    margin-bottom:28px
  }
  .heading-row{
    display:block
  }
  .heading-row p{
    margin-top:20px;
    max-width:480px;
    font-size:14px
  }
  .feature-tabs{
    gap:5px;
    padding-bottom:20px
  }
  .feature-tabs button{
    font-size:12px;
    padding:10px 14px;
    min-height:43px;
    gap:7px
  }
  .feature-tabs svg{
    width:17px;
    height:17px
  }
  .feature-panel{
    grid-template-columns:1fr;
    min-height:0
  }
  .feature-copy{
    padding:30px
  }
  .feature-number{
    margin-bottom:20px
  }
  .feature-copy h3{
    font-size:34px;
    max-width:460px
  }
  .feature-copy>p:not(.small-note){
    font-size:14px
  }
  .feature-copy blockquote{
    margin-top:22px
  }
  .feature-art.in-car{
    max-height:none;
    width:100%
  }
  .in-car{
    aspect-ratio:1122 / 1402
  }
  .feature-art.on-desk{
    min-height:0
  }
  .journal-art{
    min-height:500px
  }
  .journal-device{
    width:195px
  }
  .service-art{
    min-height:410px
  }
  .service-summary strong{
    font-size:30px
  }
  .section-footnote{
    font-size:10px
  }
  .maintenance-section{
    padding-block:68px
  }
  .maintenance-layout{
    grid-template-columns:1fr;
    gap:36px
  }
  .maintenance-copy h2{
    max-width:500px
  }
  .maintenance-copy .lead{
    font-size:16px
  }
  .maintenance-demo{
    max-width:520px;
    width:100%;
    margin-inline:auto;
    padding:24px;
    transform:none
  }
  .steps{
    gap:20px
  }
  .steps p{
    max-width:100%
  }
  .maintenance-panel{
    min-height:386px
  }
  .everyday-grid{
    grid-template-columns:1fr 1fr;
    row-gap:30px
  }
  .everyday-grid article{
    padding:28px 20px 0
  }
  .everyday-grid article:nth-child(even){
    border-right:0;
    padding-right:0
  }
  .everyday-grid article:nth-child(odd){
    padding-left:0
  }
  .everyday-grid h3{
    font-size:20px
  }
  .everyday-grid p{
    font-size:12px
  }
  .large-icon{
    margin-bottom:22px
  }
  .community-section{
    padding-block:62px
  }
  .community-layout{
    grid-template-columns:1fr;
    gap:32px
  }
  .community-copy .lead{
    font-size:16px
  }
  .community-layout figure img{
    aspect-ratio:1.55
  }
  .principles{
    grid-template-columns:1fr;
    gap:26px;
    margin-top:34px;
    padding-top:28px
  }
  .principles article{
    position:relative;
    padding-left:38px
  }
  .principles article>span{
    position:absolute;
    left:0;
    top:5px
  }
  .principles h3{
    margin-top:0;
    font-size:21px
  }
  .faq-section{
    grid-template-columns:1fr;
    gap:30px
  }
  .faq-list summary{
    font-size:15px;
    padding-block:21px
  }
  .faq-list details p{
    font-size:13px;
    padding-right:10px
  }
  .download-section{
    padding-block:66px
  }
  .download-section .lead{
    font-size:15px
  }
  .download-section h2{
    font-size:40px
  }
  .site-footer{
    flex-direction:column;
    gap:28px
  }
  .site-footer nav{
    display:flex;
    flex-wrap:wrap;
    gap:16px 22px
  }
  .site-footer nav a:last-child{
    width:100%
  }
}
@media(max-width:390px){
  .brand{
    font-size:18px
  }
  .brand img{
    width:26px
  }
  .header-actions{
    gap:10px
  }
  .header-actions .button-small span{
    display:none
  }
  .hero h1{
    font-size:42px
  }
  .store-link{
    min-width:148px;
    padding:9px 13px;
    gap:9px
  }
  .store-link strong{
    font-size:17px
  }
  .store-link small{
    font-size:9px
  }
  .store-link svg{
    width:20px
  }
  .store-links{
    gap:8px
  }
  .hero-product{
    min-height:485px
  }
  .floating-label{
    font-size:10px;
    max-width:152px
  }
  .hero-device{
    width:198px
  }
  .feature-tabs button{
    font-size:11px;
    padding:10px 12px
  }
  .feature-copy{
    padding:26px
  }
  .feature-copy h3{
    font-size:31px
  }
  .maintenance-demo{
    padding:20px 16px
  }
  .service-tabs button{
    font-size:11px
  }
  .demo-label{
    font-size:8px
  }
  .everyday-grid h3{
    font-size:18px
  }
  .service-date{
    font-size:30px
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *,*::before,*::after{
    animation:none!important;
    transition:none!important
  }
  .hero-device:hover{
    transform:rotate(6deg)
  }
}

/* Product positioning and audience cards share the existing brand and image assets. */
.hero h1 em { display: block; }
.hero-free {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 23px;
  color: var(--mint);
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 550;
  line-height: 1.45;
}
.hero-free .icon { width: 21px; height: 21px; }
.hero .lead { margin-top: 17px; }
.product-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-block: 38px;
  border-bottom: 1px solid var(--line);
}
.product-facts > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-inline: 30px;
  border-right: 1px solid var(--line);
}
.product-facts > div:first-child { padding-left: 0; }
.product-facts > div:last-child { border: 0; }
.product-facts span { color: var(--muted); font-size: 12px; }
.audience-section { background: #0c1712; padding-block: 76px; }
.audience-lead { color: var(--muted); font-size: 16px; max-width: 610px; margin-top: 22px; }
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.audience-card { padding: 30px; background: var(--paper); border: 1px solid #ffffff0a; border-radius: 21px; }
.audience-number { color: var(--green); font-size: 12px; letter-spacing: .1em; }
.audience-card h3 { font-size: 28px; line-height: 1.2; margin-block: 25px 15px; }
.audience-card > p { color: var(--muted); font-size: 14px; }
.audience-card details { border-top: 1px solid var(--line); margin-top: 26px; }
.audience-card summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-block: 18px 0; cursor: pointer; list-style: none; font-size: 13px; font-weight: 550; color: var(--green); }
.audience-card summary::-webkit-details-marker { display: none; }
.audience-card summary::after { content: '+'; font-size: 22px; font-weight: 400; }
.audience-card details[open] summary::after { content: '−'; }
.audience-card details p { padding-top: 16px; font-size: 13px; color: var(--muted); }
@media (max-width: 1080px) {
  .audience-card { padding: 24px; }
  .audience-card h3 { font-size: 25px; }
  .desktop-nav { gap: 18px; }
}
@media (max-width: 760px) {
  .hero-free { font-size: 17px; margin-top: 20px; }
  .product-facts { grid-template-columns: 1fr 1fr; row-gap: 25px; padding-block: 28px; }
  .product-facts > div { padding-inline: 20px; }
  .product-facts > div:nth-child(odd) { padding-left: 0; }
  .product-facts > div:nth-child(even) { border: 0; padding-right: 0; }
  .product-facts span { font-size: 11px; }
  .audience-section { padding-block: 60px; }
  .audience-grid { grid-template-columns: 1fr; gap: 14px; }
  .audience-card h3 { margin-top: 17px; }
  .audience-lead { font-size: 14px; }
}

/* A continuous black canvas: light, scale and spacing provide the section rhythm. */
:root {
  --surface: #0a1711;
  --emerald: #00bd87;
  color-scheme: dark;
  background: #030806;
}
body { background: #030806; }
main { position: relative; isolation: isolate; overflow: clip; }
main::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 700px at 110% 6%, #007f5033, transparent 72%),
    radial-gradient(ellipse 65% 650px at -15% 27%, #00885429, transparent 74%),
    radial-gradient(ellipse 60% 750px at 105% 53%, #007b6030, transparent 73%),
    radial-gradient(ellipse 65% 800px at 0% 79%, #005c4424, transparent 74%);
}
::selection { background: #39e7b0; color: #031b11; }
h2 { font-size: clamp(38px, 5.5vw, 78px); font-weight: 500; letter-spacing: -.055em; }
.section { padding-block: clamp(76px, 9vw, 142px); }
.site-header {
  height: 76px;
  background: #030806b8;
  border: 0;
  backdrop-filter: blur(22px);
}
.brand-dot, .footer-brand > span { color: var(--mint); }
.brand img { opacity: .94; }
.desktop-nav { color: #adc0b6; }
.button-light, .button-green {
  color: #032016;
  background: var(--mint);
  box-shadow: 0 5px 28px #00bd871c;
}
.button-light:hover, .button-green:hover { background: #6ef1c6; box-shadow: 0 8px 38px #00bd873d; }
.text-link { border: 0; }
.text-link.ink { color: var(--mint); border: 0; }
.text-link:hover { color: var(--mint); }
.language-options { background: #0c1b14; border-color: #ffffff14; box-shadow: 0 20px 70px #0009; }
.language-options a:hover, .language-options a[aria-current] { background: #12452f; }
.skip-link { color: #032016; }
.hero { background: transparent; overflow: hidden; }
.hero-photo { inset: 0 -8% 0 15%; mask-image: linear-gradient(#000 65%, transparent); }
.hero-photo img { opacity: .48; object-position: 64% 55%; }
.hero-shade {
  background: linear-gradient(90deg, #030806 6%, #030806cb 35%, transparent 78%), linear-gradient(0deg, #030806, transparent 28%);
}
.hero-layout { grid-template-columns: 1.2fr .8fr; min-height: 810px; gap: 24px; padding-top: 52px; }
.hero-copy { max-width: 780px; }
.hero h1 { font-size: clamp(54px, 6.45vw, 98px); line-height: 1.015; letter-spacing: -.07em; font-weight: 530; }
.hero h1 em { color: var(--mint); }
.hero-wordmark {
  position: absolute;
  top: 11%;
  right: -3%;
  color: transparent;
  -webkit-text-stroke: 1px #36e8ac0c;
  font-size: clamp(170px, 27vw, 470px);
  line-height: 1;
  font-weight: 750;
  letter-spacing: -.09em;
  z-index: -1;
  user-select: none;
  pointer-events: none;
}
.hero-product { min-height: 645px; }
.hero-product::before {
  content: '';
  position: absolute;
  width: 650px;
  height: 490px;
  border-radius: 50%;
  background: conic-gradient(from 30deg, transparent 7%, #00a87277 22%, transparent 42%, #00604455 65%, transparent 85%);
  filter: blur(48px);
  transform: rotate(-24deg);
  pointer-events: none;
}
.hero-device { width: 274px; transform: rotate(7deg); box-shadow: 0 40px 100px #0009, 0 0 80px #00bd871c; }
.hero-device:hover { transform: rotate(3deg) translateY(-8px); }
.orbit { border: 0; width: 610px; height: 410px; background: radial-gradient(ellipse, transparent 53%, #00b48316 58%, transparent 64%); transform: rotate(-32deg); }
.orbit-two { width: 810px; height: 500px; opacity: .5; }
.floating-label { background: #071b14eb; border: 1px solid #1ea57129; box-shadow: 0 20px 60px #0005; }
.floating-label-top { left: -24px; top: 48px; }
.floating-label-bottom { right: -12px; bottom: 38px; }
.hero-foot { border: 0; padding-block: 18px 30px; color: #91b4a2; }
.store-link { background: #f3fff9; color: #071c11; border-color: transparent; }
.store-link:hover { background: #bcfbe0; }
.product-facts { border: 0; padding-block: 45px; }
.product-facts > div { border: 0; min-width: 0; padding-inline: 18px; }
.product-facts span { color: var(--muted); }
.product-facts .fact-icon { width: 42px; height: 42px; color: var(--mint); margin-bottom: 10px; stroke-width: 1.5; flex-shrink: 0; }

/* Duplicated decorative text creates one seamless loop; readable content stays still. */
.kinetic-band {
  position: relative;
  overflow: hidden;
  padding-block: 50px 35px;
  margin-block: 12px 25px;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.kinetic-track { display: flex; width: max-content; transform: translateX(-8%); }
.kinetic-copy { display: flex; align-items: center; gap: 50px; padding-right: 50px; white-space: nowrap; font-size: clamp(72px, 10vw, 154px); letter-spacing: -.065em; font-weight: 550; line-height: 1.2; text-transform: uppercase; color: #ccf2e4; }
.kinetic-copy i { font-size: .54em; font-style: normal; color: var(--emerald); }
.outline-word { color: transparent; -webkit-text-stroke: 1px #4ab48985; }
.motion-ready .kinetic-track { animation: kinetic-drift 65s linear infinite; animation-play-state: paused; }
.motion-ready .kinetic-band.is-visible .kinetic-track { animation-play-state: running; }
.page-hidden .kinetic-band .kinetic-track { animation-play-state: paused; }
@keyframes kinetic-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.audience-section, .maintenance-section, .community-section, .download-section { background: transparent; }
.audience-section { padding-block: 90px 125px; }
.audience-section .section-heading { max-width: 880px; }
.audience-grid { gap: 30px; padding-bottom: 32px; }
.audience-card {
  position: relative;
  isolation: isolate;
  background: linear-gradient(155deg, #184d302f, #10221b18 78%);
  border: 0;
  border-radius: 36px;
  padding: 34px;
  transition: background .35s, transform .35s;
}
.audience-card:nth-child(2) { margin-top: 55px; }
.audience-card:nth-child(3) { margin-top: 105px; }
.audience-card:hover { background: linear-gradient(155deg, #1967444a, #0a171133 78%); transform: translateY(-5px); }
.audience-number { display: block; font-size: 72px; line-height: 1; letter-spacing: -.07em; font-weight: 450; color: #164c36; }
.audience-card h3 { font-size: clamp(26px, 2.6vw, 36px); margin-top: 32px; }
.audience-card details { border: 0; margin-top: 16px; }
.audience-card summary { color: var(--mint); }
.heading-row { gap: 55px; }
.heading-row h2 { max-width: 820px; }
.heading-row p { min-width: 220px; }
.feature-tabs { gap: 9px; padding-bottom: 40px; }
.tab-list button { color: #94b4a3; }
.tab-list button[aria-selected=true] { color: #032016; background: var(--mint); }
.tab-list button:not([aria-selected=true]):hover { color: #d8ffeb; background: #103121; }
.feature-panel { background: transparent; border-radius: 0; overflow: visible; column-gap: 48px; }
.feature-copy { padding-left: 0; padding-right: 18px; }
.feature-copy h3 { font-size: clamp(36px, 4vw, 58px); }
.feature-copy blockquote { border-left: 0; padding-left: 0; color: #b6f5d7; font-size: 21px; }
.feature-number { font-size: 16px; color: var(--green); }
.feature-art { border-radius: 70px 25px 85px 25px; box-shadow: 0 26px 100px #0005; }
.photo-composite { mask-image: linear-gradient(180deg, #000 86%, transparent 100%); }
.photo-composite .scene { filter: saturate(.65) brightness(.77); }
.journal-art { background: radial-gradient(ellipse at 50% 55%, #007f4e40, transparent 68%); box-shadow: none; overflow: visible; border-radius: 0; }
.journal-device { max-width: 100%; transform: none; flex-shrink: 0; }
.service-summary { backdrop-filter: blur(16px); box-shadow: 0 25px 90px #0008; }
.maintenance-section { padding-block: 115px; overflow: visible; }
.maintenance-copy h2 { max-width: 650px; }
.maintenance-demo { color: var(--ink); background: linear-gradient(155deg, #0f2c1f, #080f0b 65%); border: 1px solid #16845826; border-radius: 35px; padding: 30px; box-shadow: 0 0 150px #00935a1c, 0 45px 100px #0005; transform: rotate(2deg); }
.demo-label { color: #92ab9d; }
.service-tabs { background: #030b07; }
.work-list li { border-top-color: #ffffff0c; }
.pill, .work-icon, .calendar-note { background: #0e3625; color: #61e9b9; }
.interval-track { background: #0c2b1d; }
.everyday-grid { border: 0; gap: 32px; }
.everyday-grid article { border: 0; padding: 22px 0; }
.everyday-grid article:first-child, .everyday-grid article:last-child { padding: 22px 0; }
.large-icon { width: 37px; height: 37px; color: var(--mint); }
.everyday-grid h3 { font-size: 24px; }
.community-section { padding-block: 110px; }
.community-layout { gap: 80px; }
.community-layout figure { transform: rotate(-3deg); }
.community-layout figure img { border-radius: 100px 25px 100px 25px; filter: saturate(.6) brightness(.8); mask-image: linear-gradient(#000 80%, transparent); }
.community-layout figcaption { margin-top: -5px; padding-left: 18px; transform: rotate(3deg); }
.principles { border: 0; gap: 55px; margin-top: 90px; }
.principles article > span { color: var(--green); font-size: 20px; }
.principles h3 { font-size: 26px; }
.faq-list { border: 0; }
.faq-list details { border: 0; padding-inline: 24px; margin-bottom: 10px; border-radius: 20px; background: #0c20152b; }
.faq-list details[open] { background: #10302055; }
.faq-list summary { font-weight: 450; }
.faq-list summary::after { color: var(--green); }
.download-section { padding-block: 120px 170px; isolation: isolate; }
.download-section::before { background: radial-gradient(ellipse at 50% 80%, #007e493d, transparent 66%); z-index: -1; }
.download-section::after { content: 'TACHKA'; position: absolute; bottom: -.14em; left: 50%; transform: translateX(-50%); color: #1051312b; font-size: 27vw; line-height: 1; letter-spacing: -.08em; font-weight: 750; z-index: -1; pointer-events: none; }
.download-section h2 { max-width: 1100px; font-size: clamp(45px, 6.8vw, 94px); margin-block: 26px; }
.app-icon { box-shadow: 0 0 60px #00bd872b; }
.site-footer { padding-block: 50px; }
.screenshot-dialog { background: #07120c; }
.dialog-close { background: #154f35; }
@media (max-width: 1080px) {
  .hero-layout { grid-template-columns: 1.15fr .85fr; min-height: 750px; }
  .hero h1 { font-size: clamp(51px, 6.3vw, 70px); }
  .hero-device { width: 236px; }
  .hero-product { min-height: 610px; }
  .floating-label-top { left: -20px; }
  .audience-grid { gap: 17px; }
  .audience-card { padding: 25px; }
  .audience-card:nth-child(2) { margin-top: 30px; }
  .audience-card:nth-child(3) { margin-top: 60px; }
  .feature-panel { column-gap: 30px; }
  .feature-copy h3 { font-size: 40px; }
  .feature-copy blockquote { font-size: 18px; }
  .maintenance-demo { padding: 23px; }
  .community-layout { gap: 40px; }
}
@media (max-width: 760px) {
  .site-header { height: 70px; }
  .hero-layout { grid-template-columns: 1fr; padding-top: 42px; min-height: 0; }
  .hero h1 { font-size: clamp(45px, 8.5vw, 68px); }
  .hero-photo { inset: 30% -65% 0 -30%; }
  .hero-photo img { opacity: .45; }
  .hero-shade { background: linear-gradient(180deg, #030806 12%, #0308069c 50%, #03080615 75%, #030806); }
  .hero-wordmark { top: 40%; right: -10%; font-size: 44vw; }
  .hero-product { min-height: 530px; }
  .hero-device { width: 220px; }
  .hero-product::before { width: 440px; height: 350px; filter: blur(35px); }
  .floating-label-top { left: 0; top: 42px; }
  .floating-label-bottom { right: 0; bottom: 32px; }
  .hero-foot { padding-block: 12px 26px; }
  .product-facts { padding-block: 25px; row-gap: 28px; }
  .kinetic-band { padding-block: 35px 20px; margin-block: 12px 0; }
  .kinetic-copy { font-size: 70px; gap: 28px; padding-right: 28px; }
  .audience-section { padding-block: 65px 30px; }
  .audience-grid { gap: 16px; padding-bottom: 0; }
  .audience-card, .audience-card:nth-child(2), .audience-card:nth-child(3) { margin-top: 0; padding: 28px; }
  .audience-card:nth-child(2) { margin-left: 14px; }
  .audience-card:nth-child(3) { margin-right: 14px; }
  .audience-card h3 { font-size: 28px; margin-top: 22px; }
  .audience-number { font-size: 53px; }
  .heading-row p { min-width: 0; }
  .feature-tabs { padding-bottom: 24px; gap: 5px; }
  .feature-panel { grid-template-columns: 1fr; }
  .feature-copy { padding: 16px 0 32px; }
  .feature-copy h3 { font-size: 37px; }
  .feature-art { border-radius: 45px 18px 65px 18px; }
  .maintenance-section { padding-block: 80px; }
  .maintenance-demo { transform: none; padding: 24px; border-radius: 27px; }
  .everyday-grid { gap: 25px; }
  .everyday-grid article, .everyday-grid article:first-child, .everyday-grid article:last-child { padding: 10px 0; }
  .everyday-grid h3 { font-size: 21px; }
  .community-section { padding-block: 65px; }
  .community-layout { gap: 38px; }
  .community-layout figure { transform: none; }
  .community-layout figure img { border-radius: 55px 18px 65px 18px; }
  .community-layout figcaption { transform: none; }
  .principles { margin-top: 45px; gap: 28px; }
  .principles article > span { font-size: 13px; }
  .principles h3 { font-size: 22px; }
  .faq-list details { padding-inline: 18px; }
  .download-section { padding-block: 75px 100px; }
  .download-section h2 { font-size: clamp(38px, 8vw, 60px); }
  .site-footer { padding-block: 32px; }
}
@media (max-width: 390px) {
  .hero h1 { font-size: 43px; }
  .hero-product { min-height: 495px; }
  .hero-device { width: 198px; }
  .hero-free { font-size: 16px; }
  .maintenance-demo { padding: 21px 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .kinetic-track { animation: none !important; }
  .hero-device:hover { transform: rotate(7deg); }
  .audience-card:hover { transform: none; }
}