@charset "UTF-8";
:root {
  --ink:#092530;
  --teal:#0f7d7d;
  --mint:#defaf2;
  --amber:#ffb04f;
  --paper:#f7f9f5;
  --muted:#52676c;
  --line:#dce5df;
  --radius:32px;
  color-scheme:light;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:110px;
}

body {
  margin:0;
}

body.dialog-open {
  overflow:hidden;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

button,input {
  font:inherit;
}

button {
  cursor:pointer;
}

a {
  color:inherit;
  text-decoration:none;
}

img {
  max-width:100%;
  height:auto;
  display:block;
}

p,h1,h2,h3,figure {
  margin:0;
}

button {
  color:inherit;
}

::selection {
  background:#acecda;
  color:var(--ink);
}

:focus-visible {
  outline:3px solid var(--teal);
  outline-offset:5px;
}

.container {
  width:min(1240px,calc(100% - 96px));
  margin-inline:auto;
}

.icon {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none;
}

.reverse {
  transform:rotate(180deg);
}

.icon-definitions {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

.skip-link {
  position:fixed;
  top:-100px;
  left:16px;
  padding:12px 20px;
  background:var(--ink);
  color:white;
  z-index:100;
}

.skip-link:focus {
  top:12px;
}

.site-header {
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(247,249,245,.91);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border-bottom:1px solid rgba(9,37,48,.08);
}

.nav-wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:88px;
  gap:24px;
}

.brand {
  display:inline-flex;
  flex-shrink:0;
}

.brand img {
  width:126px;
  height:auto;
}

#main-nav {
  display:flex;
  align-items:center;
  gap:34px;
  font-size:14px;
  font-weight:600;
}

#main-nav>a:not(.nav-download) {
  padding:12px 0;
  color:#38545b;
}

#main-nav>a:hover {
  color:var(--teal);
}

.nav-download {
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--ink);
  color:#fff;
  border-radius:30px;
  padding:13px 21px;
  transition:background .2s;
}

.nav-download .icon {
  width:19px;
  height:19px;
}

#main-nav>.nav-download:hover {
  color:white;
  background:var(--teal);
}

.menu-toggle {
  display:none;
}

.hero {
  display:grid;
  grid-template-columns:1fr 1.02fr;
  align-items:center;
  min-height:750px;
  padding-top:38px;
  padding-bottom:60px;
  gap:35px;
}

.hero-copy {
  padding-bottom:20px;
  position:relative;
  z-index:2;
}

.eyebrow {
  font-size:11px;
  font-weight:750;
  letter-spacing:.16em;
  line-height:1.6;
  text-transform:uppercase;
}

.hero .eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--teal);
  letter-spacing:.115em;
}

.small-track {
  position:relative;
  width:20px;
  height:12px;
  border-top:2px solid;
  border-bottom:2px solid;
  flex:none;
}

.small-track:after {
  content:"";
  position:absolute;
  height:6px;
  width:9px;
  border-radius:4px;
  background:var(--amber);
  top:1px;
  left:6px;
}

h1,h2,h3 {
  font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:750;
  letter-spacing:-.055em;
}

h1 {
  font-size:clamp(64px,6.25vw,91px);
  line-height:1.04;
  margin-top:23px;
}

h1 span {
  color:var(--teal);
}

.hero-description {
  font-size:18px;
  line-height:1.7;
  color:var(--muted);
  max-width:440px;
  margin-top:25px;
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:32px;
}

.store-badge {
  display:inline-flex;
  flex-shrink:0;
  border-radius:9px;
  transition:transform .2s;
}

.store-badge:hover {
  transform:translateY(-3px);
}

.store-badge img {
  width:156px;
  height:52px;
  object-fit:contain;
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-weight:650;
  font-size:14px;
  line-height:1.5;
}

.text-link .icon {
  width:20px;
  height:20px;
  transition:transform .2s;
}

.text-link:hover {
  color:var(--teal);
}

.text-link:hover .icon {
  transform:translateX(4px);
}

.device-note {
  font-size:12px;
  color:#62767b;
  margin-top:20px;
}

.hero-art {
  position:relative;
  height:630px;
  isolation:isolate;
}

.hero-art:before {
  content:"";
  position:absolute;
  inset:35px -20px 18px -30px;
  z-index:-1;
  background:radial-gradient(ellipse at 55% 50%,#c3eee1 0%,#e0f1e9 43%,transparent 71%);
}

.orbit {
  position:absolute;
  z-index:-1;
  border:1px solid #c6ded3;
  border-radius:50%;
  width:545px;
  height:545px;
  left:9px;
  top:42px;
  transform:rotate(-24deg) scaleY(.8);
}

.orbit-two {
  transform:rotate(38deg) scaleY(.85);
  width:630px;
  height:480px;
  left:-20px;
  top:91px;
}

.phone {
  position:relative;
  overflow:hidden;
  border:6px solid #17363c;
  border-radius:39px;
  background:var(--ink);
  box-shadow:0 24px 48px -16px #09253055,0 0 0 1px #a5b6b2;
  line-height:0;
}

.phone:after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:32px;
  box-shadow:inset 0 0 0 1px #ffffff30;
  pointer-events:none;
}

.phone img {
  width:100%;
}

.hero-art .phone {
  position:absolute;
  width:252px;
}

.phone-back {
  top:28px;
  right:12px;
  transform:rotate(10deg);
}

.phone-front {
  top:87px;
  left:29px;
  transform:rotate(-8deg);
  z-index:2;
}

.art-label {
  position:absolute;
  font-size:11px;
  letter-spacing:.04em;
  font-weight:650;
  z-index:3;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.label-top {
  top:18px;
  left:5px;
  transform:rotate(-8deg);
}

.label-top>span {
  font-size:24px;
  color:var(--teal);
}

.label-bottom {
  bottom:15px;
  right:1px;
  background:#fff;
  border-radius:40px;
  padding:14px 17px;
  box-shadow:0 8px 28px #0925300c;
}

.mint-dot {
  width:8px;
  height:8px;
  background:var(--teal);
  border-radius:50%;
}

.hero-rail {
  position:absolute;
  left:65px;
  right:45px;
  bottom:12px;
  height:2px;
  background:#bfd6cc;
  z-index:-1;
  transform:rotate(-8deg);
}

.rail-dot {
  position:absolute;
  width:8px;
  height:8px;
  border:2px solid var(--teal);
  border-radius:50%;
  top:-3px;
  background:var(--paper);
}

.rail-dot:last-child {
  right:0;
}

.mini-train {
  position:absolute;
  background:var(--amber);
  border:2px solid var(--ink);
  border-radius:8px;
  width:30px;
  height:13px;
  top:-6px;
  animation:train-route 12s ease-in-out infinite;
}

.mini-train:after {
  content:"";
  position:absolute;
  height:3px;
  width:12px;
  top:3px;
  left:5px;
  background:var(--ink);
  border-radius:2px;
}

@keyframes train-route {
  0%,10% {
    left:0;
  }
  70%,85% {
    left:calc(100% - 30px);
  }
  100% {
    left:0;
  }
}

.capabilities {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  padding:26px 0;
  border-block:1px solid var(--line);
}

.capabilities>span {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-weight:600;
  font-size:13px;
}

.capabilities .icon {
  color:var(--teal);
  width:22px;
  height:22px;
}

.section {
  padding-top:112px;
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:38px;
}

.section-heading .eyebrow,.faq-heading .eyebrow {
  color:var(--teal);
  margin-bottom:16px;
}

h2 {
  font-size:clamp(38px,4vw,56px);
  line-height:1.12;
}

h3 {
  font-size:34px;
  line-height:1.14;
  letter-spacing:-.04em;
}

.section-heading>p,.gallery-intro>p {
  font-size:15px;
  line-height:1.8;
  color:var(--muted);
  max-width:340px;
  padding-bottom:5px;
}

.feature-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:415px 290px;
  gap:24px;
}

.feature-card {
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
}

.feature-copy {
  position:relative;
  z-index:2;
}

.feature-number {
  display:block;
  font-size:10px;
  font-weight:750;
  letter-spacing:.15em;
  margin-bottom:17px;
  line-height:1.5;
}

.feature-copy>p {
  font-size:14px;
  line-height:1.7;
  margin-top:15px;
  max-width:280px;
}

.feature-footnote {
  position:absolute;
  bottom:23px;
  left:30px;
  right:30px;
  font-size:10px;
  line-height:1.6;
  z-index:3;
}

.map-card {
  background:var(--ink);
  color:white;
  grid-row:span 2;
  padding:38px;
}

.map-card h3 {
  font-size:43px;
}

.map-card .feature-number {
  color:#9ed7c9;
}

.map-card .feature-copy>p {
  color:#c4d8db;
  max-width:310px;
}

.pill {
  display:inline-flex;
  align-items:center;
  gap:14px;
  border:1px solid #ffffff33;
  border-radius:40px;
  padding:10px 15px;
  font-size:11px;
  color:#d2f5eb;
  margin-top:23px;
}

.pill .icon {
  width:18px;
  height:18px;
}

.map-phone {
  position:absolute;
  width:235px;
  right:49px;
  top:310px;
  transform:rotate(10deg);
  border-color:#497177;
  box-shadow:0 18px 40px #0006;
}

.map-orbit {
  width:540px;
  height:540px;
  border:1px solid #ffffff12;
  border-radius:50%;
  position:absolute;
  bottom:-270px;
  left:-80px;
  box-shadow:0 0 0 62px #ffffff03,0 0 0 124px #ffffff03;
}

.map-card .feature-footnote {
  color:#c9e1e2;
  bottom:21px;
  max-width:215px;
}

.platform-card {
  background:#e4f1e8;
  padding:30px;
}

.platform-card .feature-copy {
  max-width:57%;
}

.platform-card .feature-copy>p {
  max-width:230px;
  color:#42645c;
}

.platform-card h3 {
  font-size:30px;
}

.platform-card .feature-number {
  color:#4e6d62;
}

.platform-scene {
  position:absolute;
  width:51%;
  max-width:none;
  right:-10px;
  top:110px;
  border:6px solid #f7faf6;
  border-radius:28px;
  transform:rotate(-8deg);
  box-shadow:0 18px 35px #183e3026;
}

.platform-card .feature-footnote {
  max-width:270px;
  color:#496156;
  font-size:10px;
}

.updates-card {
  background:#f7ece5;
  padding:30px;
  display:flex;
  align-items:center;
  gap:20px;
}

.updates-card .feature-copy {
  width:48%;
  flex:none;
}

.updates-card h3 {
  font-size:30px;
}

.updates-card .feature-number {
  color:#86624d;
}

.updates-card .feature-copy>p {
  color:#6e5c50;
}

.update-visual {
  width:58%;
  transform:rotate(-5deg);
  flex:none;
}

.update-visual img {
  width:100%;
  border-radius:18px;
  box-shadow:0 12px 32px #684b2815;
  border:5px solid #fffcf9;
}

.preview-label {
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#76573e;
  margin-bottom:12px;
}

.screens-section {
  padding-bottom:58px;
  background:#eaf0eb;
  margin-top:112px;
}

.screens-section.section {
  padding-top:75px;
}

.screens-section .section-heading {
  margin-bottom:38px;
}

.gallery-intro {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
}

.carousel-controls {
  display:flex;
  gap:10px;
}

.round-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid #bacdc4;
  border-radius:50%;
  background:transparent;
  transition:background .2s,opacity .2s;
}

.round-button:hover {
  background:#fff;
}

.round-button:disabled {
  opacity:.3;
  cursor:default;
}

.round-button .icon {
  width:20px;
  height:20px;
}

.gallery {
  display:flex;
  overflow-x:auto;
  gap:24px;
  padding:2px max(48px,calc((100vw - 1240px)/2)) 24px;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:max(48px,calc((100vw - 1240px)/2));
  scrollbar-width:thin;
  scrollbar-color:#acc7bc transparent;
  overscroll-behavior-x:contain;
}

.gallery-item {
  flex:0 0 264px;
  min-width:0;
  scroll-snap-align:start;
}

.screenshot-open {
  display:block;
  position:relative;
  border-radius:22px;
  overflow:hidden;
  border:1px solid #d6e3dc;
  background:var(--ink);
  transition:transform .25s;
}

.screenshot-open:hover {
  transform:translateY(-2px);
}

.screenshot-open>img {
  width:100%;
  height:auto;
}

.expand-label {
  position:absolute;
  bottom:14px;
  right:14px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#ffffffed;
  color:var(--ink);
  box-shadow:0 3px 14px #09253022;
}

.expand-label .icon {
  width:17px;
  height:17px;
}

.gallery-item figcaption {
  display:flex;
  gap:11px;
  font-size:12px;
  font-weight:600;
  line-height:1.5;
  margin-top:15px;
}

.gallery-item figcaption>span {
  color:var(--teal);
  font-size:10px;
  padding-top:1px;
}

.gallery-note {
  font-size:11px;
  line-height:1.6;
  color:#5c7269;
  margin-top:16px;
}

.no-js .carousel-controls {
  display:none;
}

.everyday-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.device-card {
  position:relative;
  overflow:hidden;
  min-height:560px;
  border-radius:var(--radius);
  padding:35px;
}

.device-card h3 {
  font-size:36px;
}

.device-card .feature-copy>p {
  color:var(--muted);
  max-width:300px;
}

.widget-card {
  background:#ecece4;
}

.widget-card .feature-number {
  color:#66705e;
}

.widget-art {
  position:relative;
  margin-top:36px;
  height:250px;
}

.widget-orbit {
  position:absolute;
  border:1px solid #ccd6c6;
  border-radius:50%;
  height:350px;
  width:350px;
  top:12px;
  right:-55px;
  box-shadow:0 0 0 50px #dbe4d62b;
}

.widget-wide {
  position:absolute;
  width:90%;
  top:0;
  left:-7px;
  border-radius:25px;
  box-shadow:0 14px 30px #23332222;
  transform:rotate(-5deg);
  border:5px solid #f7f8f2;
}

.widget-small {
  position:absolute;
  width:41%;
  right:2px;
  top:100px;
  border-radius:25px;
  box-shadow:0 14px 30px #23332222;
  transform:rotate(7deg);
  border:5px solid #f7f8f2;
}

.widget-card .feature-footnote {
  color:#626d5d;
}

.watch-card {
  background:#e0eeeb;
}

.watch-card .feature-number {
  color:#49746e;
}

.watch-art {
  position:relative;
  height:300px;
  margin-top:23px;
}

.watch-case {
  position:absolute;
  line-height:0;
  border:7px solid #244348;
  border-radius:50px;
  background:#000;
  box-shadow:0 18px 30px #0b323f3d;
  isolation:isolate;
}

.watch-case:before {
  content:"";
  position:absolute;
  right:-12px;
  top:49px;
  width:7px;
  height:26px;
  background:#405b5f;
  border-radius:3px;
  z-index:-1;
}

.watch-case img {
  border-radius:42px;
  width:100%;
}

.watch-main {
  width:186px;
  top:9px;
  left:26px;
  transform:rotate(-12deg);
  z-index:2;
}

.watch-secondary {
  width:166px;
  right:24px;
  top:42px;
  transform:rotate(13deg);
  border-color:#637778;
}

.premium-band {
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:24px;
  padding:32px;
  border:1px solid var(--line);
  border-radius:26px;
}

.premium-icon {
  width:60px;
  height:60px;
  background:#ffedce;
  border-radius:20px;
  display:grid;
  place-items:center;
  flex:none;
  color:#74521f;
}

.premium-icon .icon {
  width:26px;
  height:26px;
}

.premium-band .eyebrow {
  font-size:9px;
  letter-spacing:.12em;
  color:#74521f;
  margin-bottom:6px;
}

.premium-band h3 {
  font-size:27px;
}

.premium-band p:not(.eyebrow) {
  margin-top:9px;
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
  max-width:630px;
}

.premium-band>.text-link {
  margin-left:auto;
  white-space:nowrap;
}

.faq-section {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:90px;
}

.faq-heading .text-link {
  margin-top:26px;
}

.faq-list {
  border-top:1px solid var(--line);
}

.faq-list details {
  border-bottom:1px solid var(--line);
}

.faq-list summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:15px;
  font-weight:650;
  line-height:1.6;
  padding:24px 0;
  list-style:none;
  cursor:pointer;
}

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

.faq-list summary .icon {
  width:18px;
  height:18px;
  color:var(--teal);
  transition:transform .2s;
}

.faq-list details[open] summary .icon {
  transform:rotate(45deg);
}

.faq-list details>p {
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
  padding:0 35px 26px 0;
}

.download-section {
  position:relative;
  overflow:hidden;
  margin-top:112px;
  text-align:center;
  background:var(--mint);
  border-radius:40px;
  padding:64px 24px 50px;
  isolation:isolate;
}

.download-section .app-icon {
  margin-inline:auto;
  width:86px;
  height:86px;
  border-radius:22px;
  box-shadow:0 10px 22px #09253029;
  margin-bottom:24px;
}

.download-section .eyebrow {
  font-size:10px;
  color:var(--teal);
  margin-bottom:14px;
}

.download-section h2 {
  font-size:58px;
}

.download-section>p:not(.eyebrow):not(.download-devices) {
  font-size:15px;
  color:#456c68;
  margin-top:18px;
}

.download-section .store-badge {
  margin-top:27px;
}

.download-devices {
  font-size:11px;
  color:#456c68;
  margin-top:17px;
}

.download-track {
  position:absolute;
  z-index:-1;
  width:700px;
  height:700px;
  border:1px solid #badfce;
  border-radius:50%;
  right:-420px;
  top:-90px;
  box-shadow:0 0 0 65px #c9eadd66,0 0 0 130px #c9eadd44;
}

.download-track>span {
  position:absolute;
  width:16px;
  height:16px;
  border-radius:50%;
  border:3px solid #91caba;
  background:var(--mint);
  top:90px;
  left:111px;
}

.download-track>span:nth-child(2) {
  left:-7px;
  top:345px;
}

.download-track>span:nth-child(3) {
  left:68px;
  top:555px;
  background:var(--amber);
  border-color:var(--amber);
}

.site-footer {
  padding-top:62px;
  padding-bottom:30px;
}

.footer-top {
  display:flex;
  align-items:center;
  gap:28px;
  padding-bottom:34px;
  border-bottom:1px solid var(--line);
}

.footer-top .brand img {
  width:100px;
}

.footer-top>p {
  font-size:12px;
  color:var(--muted);
}

.footer-top nav {
  margin-left:auto;
  display:flex;
  gap:26px;
  font-size:12px;
}

.site-footer a:hover {
  color:var(--teal);
}

.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding-top:24px;
  font-size:10px;
  color:#61746f;
  line-height:1.6;
}

.data-credit {
  display:flex;
  align-items:center;
  gap:20px;
}

.data-credit img {
  width:115px;
  height:auto;
}

.data-credit>span {
  max-width:170px;
}

.screenshot-dialog {
  border:0;
  background:#f7f9f5;
  border-radius:22px;
  width:min(650px,calc(100% - 24px));
  max-height:calc(100dvh - 32px);
  padding:0;
  color:var(--ink);
  box-shadow:0 25px 100px #0005;
  overflow:auto;
}

.screenshot-dialog::backdrop {
  background:#061e29d9;
  backdrop-filter:blur(12px);
}

.dialog-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:12px 20px;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  background:var(--paper);
  z-index:1;
}

.dialog-toolbar p {
  font-size:14px;
  font-weight:600;
}

.dialog-image-wrap {
  display:flex;
  justify-content:center;
  padding:20px 20px 0;
}

.dialog-image-wrap img {
  height:calc(100dvh - 200px);
  width:auto;
  max-width:100%;
  object-fit:contain;
  border-radius:12px;
}

.dialog-controls {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  padding:14px 20px;
}

.dialog-controls span {
  font-size:12px;
}

.screenshot-dialog:not([open]) {
  display:none;
}

.legal-page .site-header {
  position:static;
}

.legal-nav {
  font-size:13px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:12px;
}

.legal-main {
  max-width:780px;
  padding:70px 0 40px;
  margin-inline:auto;
}

.legal-main h1 {
  font-size:56px;
  margin:20px 0 35px;
}

.legal-main h2 {
  font-size:25px;
  letter-spacing:-.025em;
  margin:35px 0 14px;
}

.legal-main p,.legal-main li {
  color:var(--muted);
  font-size:16px;
  line-height:1.9;
}

.legal-main p+p {
  margin-top:18px;
}

.legal-main ul {
  padding-left:22px;
}

.legal-main a {
  color:var(--teal);
  text-decoration:underline;
  text-underline-offset:3px;
}

.legal-main img.logo {
  width:180px;
  margin-block:22px;
}

.legal-main strong {
  color:var(--ink);
}

@media(min-width:1440px) {
  .hero-art .phone {
    width:265px;
  }
  .phone-front {
    left:35px;
  }
  .phone-back {
    right:35px;
  }
  .hero {
    min-height:790px;
  }
  .hero-art {
    height:660px;
  }
  .label-bottom {
    right:20px;
  }
}

@media(max-width:1100px) {
  .container {
    width:calc(100% - 64px);
  }
  #main-nav {
    gap:22px;
  }
  .hero {
    gap:12px;
    min-height:700px;
  }
  .hero-art {
    height:570px;
  }
  .hero-art .phone {
    width:215px;
    border-radius:34px;
  }
  .phone-front {
    left:5px;
    top:100px;
  }
  .phone-back {
    right:4px;
    top:30px;
  }
  .orbit {
    width:430px;
    height:480px;
    left:-8px;
  }
  .orbit-two {
    width:470px;
    height:430px;
    left:-15px;
  }
  .label-bottom {
    bottom:12px;
    right:-8px;
    font-size:10px;
  }
  .label-top {
    left:0;
  }
  .hero-description {
    font-size:16px;
    max-width:360px;
  }
  .hero-actions {
    gap:18px;
  }
  .hero-actions .text-link {
    font-size:12px;
  }
  .feature-grid {
    grid-template-rows:390px 310px;
  }
  .map-card {
    padding:30px;
  }
  .map-card h3 {
    font-size:37px;
  }
  .map-phone {
    width:220px;
    right:35px;
    top:325px;
  }
  .platform-card,.updates-card {
    padding:26px;
  }
  .platform-card h3,.updates-card h3 {
    font-size:27px;
  }
  .feature-copy>p {
    font-size:13px;
  }
  .platform-card .feature-copy {
    max-width:65%;
  }
  .platform-scene {
    top:130px;
    width:50%;
    right:-20px;
  }
  .platform-card .feature-footnote {
    max-width:220px;
  }
  .updates-card {
    gap:12px;
  }
  .updates-card .feature-copy {
    width:55%;
  }
  .update-visual {
    width:62%;
  }
  .device-card {
    padding:28px;
    min-height:530px;
  }
  .device-card h3 {
    font-size:31px;
  }
  .watch-main {
    width:158px;
    left:0;
  }
  .watch-secondary {
    width:142px;
    right:0;
    top:53px;
  }
  .watch-case {
    border-radius:40px;
  }
  .watch-case img {
    border-radius:32px;
  }
  .premium-band {
    gap:18px;
  }
  .premium-band p:not(.eyebrow) {
    max-width:480px;
  }
  .faq-section {
    gap:45px;
  }
  .gallery {
    padding-inline:32px;
    scroll-padding-inline:32px;
  }
}

@media(max-width:800px) {
  html {
    scroll-padding-top:92px;
  }
  .container {
    width:calc(100% - 40px);
  }
  .nav-wrap {
    min-height:76px;
  }
  .brand img {
    width:114px;
  }
  .js .menu-toggle {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-width:88px;
    min-height:44px;
    padding:9px 11px;
    background:none;
    border:1px solid var(--line);
    border-radius:30px;
    font-size:12px;
    font-weight:600;
  }
  .menu-lines {
    width:14px;
    height:8px;
    border-block:1.5px solid;
  }
  .menu-toggle[aria-expanded=true] .menu-lines {
    transform:rotate(-45deg);
  }
  #main-nav {
    gap:18px;
    font-size:12px;
  }
  .js #main-nav {
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:76px;
    background:var(--paper);
    padding:20px;
    border-bottom:1px solid var(--line);
    box-shadow:0 15px 20px #09253008;
  }
  .js #main-nav.is-open {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }
  #main-nav .nav-download {
    justify-content:center;
  }
  .no-js .nav-wrap {
    flex-wrap:wrap;
    padding-block:16px;
  }
  .no-js #main-nav {
    flex-wrap:wrap;
    justify-content:space-between;
    width:100%;
  }
  .hero {
    grid-template-columns:1fr;
    padding-top:44px;
    padding-bottom:40px;
    gap:18px;
    min-height:0;
  }
  .hero-copy {
    text-align:center;
    padding-bottom:0;
  }
  .hero .eyebrow {
    justify-content:center;
    font-size:10px;
  }
  h1 {
    font-size:76px;
    letter-spacing:-.065em;
    margin-top:20px;
  }
  .hero-description {
    max-width:440px;
    margin:22px auto 0;
    font-size:16px;
    line-height:1.7;
  }
  .hero-actions {
    justify-content:center;
    margin-top:26px;
    gap:24px;
  }
  .hero-actions .text-link {
    font-size:13px;
  }
  .device-note {
    margin-top:16px;
  }
  .hero-art {
    height:600px;
    width:min(510px,100%);
    margin-inline:auto;
  }
  .hero-art .phone {
    width:235px;
    border-radius:36px;
  }
  .phone-back {
    right:30px;
    top:18px;
  }
  .phone-front {
    left:35px;
    top:75px;
  }
  .orbit {
    width:450px;
    height:500px;
    left:25px;
    top:35px;
  }
  .orbit-two {
    width:490px;
    height:470px;
    left:0;
    top:70px;
  }
  .label-top {
    left:12px;
    top:0;
  }
  .label-bottom {
    right:5px;
    bottom:5px;
    font-size:11px;
  }
  .hero-rail {
    bottom:14px;
    left:55px;
  }
  .capabilities {
    grid-template-columns:1fr 1fr;
    gap:23px 10px;
    padding:26px 0;
  }
  .capabilities>span {
    font-size:12px;
    justify-content:flex-start;
    padding-left:12px;
  }
  .section {
    padding-top:76px;
  }
  .section-heading {
    gap:24px;
    margin-bottom:28px;
  }
  .section-heading>p,.gallery-intro>p {
    font-size:13px;
    max-width:270px;
  }
  h2 {
    font-size:40px;
  }
  .feature-grid {
    grid-template-rows:430px 300px;
    gap:16px;
  }
  .map-card {
    grid-column:span 2;
    grid-row:auto;
    padding:35px;
  }
  .map-card .feature-copy {
    max-width:47%;
  }
  .map-card h3 {
    font-size:38px;
  }
  .map-phone {
    width:210px;
    top:48px;
    right:60px;
    transform:rotate(9deg);
  }
  .map-card .feature-footnote {
    max-width:230px;
  }
  .platform-card {
    height:480px;
    grid-column:span 2;
    padding:32px;
  }
  .platform-card .feature-copy {
    max-width:48%;
    padding-top:35px;
  }
  .platform-card h3 {
    font-size:34px;
  }
  .platform-scene {
    top:32px;
    right:16px;
    width:49%;
    transform:rotate(-5deg);
  }
  .platform-card .feature-footnote {
    max-width:42%;
    bottom:35px;
  }
  .feature-grid {
    grid-template-rows:430px 400px auto;
  }
  .updates-card {
    grid-column:span 2;
    padding:32px;
    min-height:260px;
    gap:25px;
  }
  .updates-card .feature-copy {
    width:45%;
  }
  .updates-card h3 {
    font-size:32px;
  }
  .update-visual {
    width:50%;
  }
  .screens-section {
    margin-top:76px;
  }
  .screens-section.section {
    padding-top:60px;
  }
  .gallery {
    padding-inline:20px;
    scroll-padding-inline:20px;
  }
  .gallery-item {
    flex-basis:240px;
  }
  .everyday-grid {
    gap:16px;
  }
  .device-card {
    padding:25px;
    min-height:510px;
  }
  .device-card h3 {
    font-size:29px;
  }
  .device-card .feature-copy>p {
    font-size:13px;
  }
  .widget-wide {
    width:110%;
    left:-8px;
  }
  .widget-small {
    width:55%;
    top:80px;
    right:0;
  }
  .watch-main {
    width:145px;
    left:2px;
    top:12px;
  }
  .watch-secondary {
    width:126px;
    right:-20px;
    top:95px;
  }
  .watch-case {
    border-width:5px;
  }
  .watch-art {
    margin-top:20px;
  }
  .premium-band {
    flex-wrap:wrap;
    padding:26px;
    gap:18px;
  }
  .premium-icon {
    width:50px;
    height:50px;
    border-radius:16px;
  }
  .premium-band>div {
    flex:1;
  }
  .premium-band>.text-link {
    margin-left:68px;
  }
  .faq-section {
    gap:35px;
    grid-template-columns:.8fr 1.2fr;
  }
  .faq-list summary {
    font-size:13px;
    padding:21px 0;
  }
  .faq-list details>p {
    font-size:13px;
    padding-right:10px;
  }
  .download-section {
    margin-top:76px;
  }
  .download-section h2 {
    font-size:50px;
  }
  .footer-top {
    flex-wrap:wrap;
    gap:20px;
  }
  .footer-top nav {
    gap:20px;
  }
  .footer-bottom {
    align-items:flex-start;
  }
  .data-credit {
    gap:12px;
    flex-direction:column;
    align-items:flex-start;
  }
  .legal-main {
    padding-top:45px;
    max-width:calc(100% - 40px);
  }
  .legal-main h1 {
    font-size:44px;
  }
}

@media(max-width:540px) {
  .hero {
    padding-top:36px;
    gap:30px;
  }
  .hero .eyebrow {
    font-size:8px;
    letter-spacing:.1em;
  }
  .hero .small-track {
    width:16px;
    height:10px;
  }
  .small-track:after {
    height:4px;
    width:7px;
    left:4px;
  }
  h1 {
    font-size:clamp(49px,13.6vw,73px);
    line-height:1.05;
    margin-top:18px;
  }
  .hero-description {
    font-size:15px;
    max-width:340px;
    margin-top:20px;
  }
  .hero-actions {
    gap:20px;
  }
  .store-badge img {
    width:145px;
    height:48px;
  }
  .hero-actions .text-link {
    font-size:12px;
    gap:7px;
  }
  .device-note {
    font-size:10px;
  }
  .hero-art {
    height:440px;
    width:350px;
    max-width:100%;
  }
  .hero-art .phone {
    width:170px;
    border-width:4px;
    border-radius:27px;
  }
  .phone:after {
    border-radius:23px;
  }
  .phone-back {
    right:18px;
    top:25px;
    transform:rotate(9deg);
  }
  .phone-front {
    left:18px;
    top:64px;
    transform:rotate(-9deg);
  }
  .hero-art:before {
    inset:15px -10px 20px -10px;
  }
  .orbit {
    width:310px;
    height:360px;
    left:20px;
    top:30px;
  }
  .orbit-two {
    width:350px;
    height:320px;
    left:0;
    top:85px;
  }
  .label-top {
    font-size:9px;
    top:0;
    left:0;
    gap:4px;
  }
  .label-top>span {
    font-size:18px;
  }
  .label-bottom {
    font-size:9px;
    padding:11px 12px;
    bottom:3px;
    right:-2px;
  }
  .hero-rail {
    left:28px;
    right:35px;
    bottom:20px;
  }
  .capabilities {
    gap:22px 9px;
    padding:24px 0;
  }
  .capabilities>span {
    padding:0;
    font-size:11px;
    gap:10px;
  }
  .capabilities .icon {
    width:20px;
    height:20px;
  }
  .section {
    padding-top:62px;
  }
  .section-heading {
    display:block;
    margin-bottom:26px;
  }
  .section-heading>p {
    margin-top:20px;
    max-width:350px;
    font-size:14px;
  }
  .eyebrow {
    font-size:9px;
    letter-spacing:.13em;
  }
  .section-heading .eyebrow,.faq-heading .eyebrow {
    margin-bottom:12px;
  }
  h2 {
    font-size:36px;
    letter-spacing:-.05em;
  }
  .feature-grid {
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .feature-card {
    border-radius:26px;
  }
  .map-card {
    height:655px;
    padding:28px;
  }
  .map-card .feature-copy {
    max-width:100%;
  }
  .map-card h3 {
    font-size:36px;
  }
  .feature-copy>p {
    font-size:13px;
  }
  .map-card .feature-copy>p {
    max-width:280px;
  }
  .feature-number {
    font-size:9px;
    margin-bottom:13px;
  }
  .pill {
    font-size:10px;
    padding:9px 13px;
    margin-top:18px;
  }
  .map-phone {
    width:205px;
    right:34px;
    top:300px;
    transform:rotate(10deg);
  }
  .map-card .feature-footnote {
    max-width:140px;
    left:26px;
    bottom:23px;
    font-size:9px;
  }
  .platform-card {
    height:565px;
    padding:28px;
  }
  .platform-card .feature-copy {
    max-width:100%;
    padding:0;
  }
  .platform-card h3 {
    font-size:31px;
  }
  .platform-card .feature-copy>p {
    max-width:275px;
  }
  .platform-scene {
    top:225px;
    right:5%;
    width:70%;
    max-width:285px;
    transform:rotate(-6deg);
  }
  .platform-card .feature-footnote {
    bottom:20px;
    left:27px;
    max-width:90%;
    font-size:9px;
  }
  .updates-card {
    min-height:380px;
    padding:28px;
    display:block;
  }
  .updates-card .feature-copy {
    width:100%;
  }
  .updates-card h3 {
    font-size:31px;
  }
  .updates-card .feature-copy>p {
    max-width:280px;
  }
  .update-visual {
    width:92%;
    margin:26px auto 0;
    transform:rotate(-3deg);
  }
  .preview-label {
    display:none;
  }
  .screens-section {
    margin-top:62px;
    padding-bottom:38px;
  }
  .screens-section.section {
    padding-top:46px;
  }
  .gallery-intro {
    margin-top:20px;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:20px;
  }
  .gallery-intro>p {
    font-size:12px;
    max-width:200px;
    padding:0;
  }
  .carousel-controls {
    gap:8px;
  }
  .carousel-controls .round-button {
    width:40px;
    height:40px;
  }
  .gallery {
    gap:18px;
  }
  .gallery-item {
    flex-basis:244px;
  }
  .gallery-item figcaption {
    font-size:11px;
    gap:9px;
  }
  .gallery-note {
    font-size:10px;
    margin-top:12px;
  }
  .everyday-grid {
    grid-template-columns:1fr;
    gap:16px;
  }
  .device-card {
    min-height:540px;
    padding:28px;
    border-radius:26px;
  }
  .device-card h3 {
    font-size:33px;
  }
  .device-card .feature-copy>p {
    max-width:275px;
  }
  .widget-art {
    height:240px;
    margin-top:32px;
  }
  .widget-wide {
    width:92%;
    left:-3px;
    border-radius:22px;
  }
  .widget-small {
    width:43%;
    top:100px;
    right:5px;
    border-radius:22px;
  }
  .watch-art {
    margin:28px auto 0;
    width:300px;
    max-width:100%;
  }
  .watch-main {
    width:164px;
    left:4px;
    top:5px;
  }
  .watch-secondary {
    width:145px;
    right:0;
    top:48px;
  }
  .watch-case {
    border-width:6px;
    border-radius:44px;
  }
  .watch-case img {
    border-radius:36px;
  }
  .premium-band {
    padding:24px;
    align-items:flex-start;
    gap:15px;
    border-radius:26px;
  }
  .premium-icon {
    width:42px;
    height:42px;
    border-radius:14px;
  }
  .premium-icon .icon {
    width:22px;
    height:22px;
  }
  .premium-band h3 {
    font-size:23px;
  }
  .premium-band .eyebrow {
    font-size:8px;
  }
  .premium-band p:not(.eyebrow) {
    font-size:12px;
    margin-left:-57px;
    margin-top:18px;
  }
  .premium-band>.text-link {
    margin-left:0;
    font-size:12px;
  }
  .faq-section {
    display:block;
  }
  .faq-heading .text-link {
    font-size:12px;
    margin-top:20px;
  }
  .faq-list {
    margin-top:30px;
  }
  .faq-list summary {
    font-size:14px;
    padding:22px 0;
  }
  .faq-list details>p {
    font-size:13px;
  }
  .download-section {
    margin-top:62px;
    padding:44px 22px 36px;
    border-radius:28px;
  }
  .download-section .app-icon {
    width:74px;
    height:74px;
    border-radius:19px;
    margin-bottom:21px;
  }
  .download-section .eyebrow {
    font-size:8px;
  }
  .download-section h2 {
    font-size:38px;
  }
  .download-section>p:not(.eyebrow):not(.download-devices) {
    font-size:13px;
    line-height:1.6;
    margin-top:16px;
  }
  .download-track {
    right:-545px;
    top:-50px;
  }
  .download-devices {
    font-size:10px;
  }
  .site-footer {
    padding-top:42px;
    padding-bottom:24px;
  }
  .footer-top {
    gap:18px;
    padding-bottom:24px;
  }
  .footer-top .brand img {
    width:95px;
  }
  .footer-top>p {
    margin-left:auto;
    font-size:10px;
  }
  .footer-top nav {
    width:100%;
    margin-left:0;
    font-size:12px;
    gap:25px;
  }
  .footer-bottom {
    flex-direction:column;
    gap:22px;
    font-size:10px;
  }
  .data-credit {
    flex-direction:row;
    align-items:center;
    gap:18px;
  }
  .data-credit img {
    width:105px;
  }
  .data-credit>span {
    max-width:150px;
    font-size:9px;
  }
  .legal-main h1 {
    font-size:38px;
  }
  .legal-main h2 {
    font-size:23px;
  }
  .legal-main p,.legal-main li {
    font-size:15px;
  }
  .legal-nav {
    font-size:12px;
  }
  .dialog-toolbar {
    padding:10px 14px;
  }
  .dialog-toolbar p {
    font-size:12px;
  }
}

.hero-copy,.hero-art {
  min-width:0;
}

.hero {
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
}

@media(max-width:1100px) and (min-width:801px) {
  .phone-back {
    right:30px;
  }
}

@media(max-width:800px) {
  .hero {
    grid-template-columns:minmax(0,1fr);
  }
}

.hero-orbits {
  position:absolute;
  inset:-20px;
  overflow:hidden;
  z-index:-1;
  pointer-events:none;
}

.map-phone {
  width:175px;
  top:295px;
}

@media(max-width:1100px) and (min-width:801px) {
  .map-phone {
    width:170px;
    top:300px;
    right:28px;
  }
  .map-card .feature-footnote {
    max-width:150px;
  }
}

@media(max-width:800px) and (min-width:541px) {
  .map-phone {
    width:165px;
    top:38px;
    right:48px;
  }
}

@media(max-width:540px) {
  .hero-art .phone {
    width:clamp(142px,43.5vw,170px);
  }
  .map-phone {
    width:145px;
    top:302px;
    right:34px;
  }
}

/* Duo: a scroll-led layout preview with static and reduced-motion fallbacks. */
.duo-section {
  margin-top:112px;
  background:#092530;
  color:#f2fcf8;
  position:relative;
  min-height:1320px;
  height:170svh;
  isolation:isolate;
}
.duo-pin {
  position:sticky;
  top:88px;
  height:calc(100svh - 88px);
  min-height:670px;
  overflow:clip;
}
.duo-grid {
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:center;
  gap:50px;
  padding-block:45px;
}
.duo-copy {
  position:relative;
  z-index:3;
}
.duo-copy>.eyebrow {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  color:#b6dbd3;
  font-size:9px;
  letter-spacing:.11em;
  margin-bottom:27px;
}
.duo-badge {
  padding:7px 10px;
  border:1px solid #41665f;
  border-radius:30px;
  color:#d9faef;
}
.duo-copy h2 {
  font-size:clamp(40px,4.7vw,67px);
  line-height:1.07;
}
.duo-copy h2>span {
  color:#a4ead5;
}
.duo-description {
  max-width:350px;
  font-size:15px;
  line-height:1.8;
  color:#c1d7d7;
  margin-top:24px;
}
.duo-modes {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:9px;
  margin-top:28px;
}
.duo-modes button {
  display:flex;
  align-items:center;
  gap:13px;
  min-height:44px;
  padding:9px 15px 9px 10px;
  border:1px solid transparent;
  border-radius:30px;
  background:transparent;
  color:#a8c6c6;
  font-size:12px;
  font-weight:600;
  text-align:left;
}
.duo-modes button>span {
  color:#8ac8b9;
  font-size:10px;
  font-variant-numeric:tabular-nums;
}
.duo-modes button[aria-pressed=true] {
  border-color:#476c66;
  color:#fff;
  background:#143b42;
}
.duo-modes button[aria-pressed=true]>span {
  color:#ffbe6f;
}
.duo-section :focus-visible {
  outline-color:#a4ead5;
}
.duo-scroll-hint {
  display:flex;
  align-items:center;
  gap:10px;
  color:#c0dad2;
  font-size:11px;
  margin-top:25px;
}
.duo-scroll-hint>span {
  display:grid;
  place-items:center;
  width:25px;
  height:32px;
  border:1px solid #56786e;
  border-radius:20px;
}
.duo-disclaimer {
  max-width:325px;
  font-size:10px;
  line-height:1.7;
  color:#b4cbca;
  margin-top:22px;
}
.duo-art {
  position:relative;
  height:640px;
  perspective:1200px;
  perspective-origin:45% 45%;
  isolation:isolate;
  --duo-turn:0deg;
  --duo-offset:0px;
  --duo-scale:1;
  --duo-cover-x:0px;
  --duo-cover-scale:1;
  --duo-open-opacity:1;
  --duo-shade:0;
}
.duo-glow {
  position:absolute;
  inset:-55px -90px;
  z-index:-2;
  background:radial-gradient(ellipse at 60% 45%,#247d6c50,transparent 67%);
}
.duo-rings {
  position:absolute;
  top:110px;
  left:30px;
  width:540px;
  height:430px;
  border:1px solid #9cd2be15;
  border-radius:50%;
  transform:rotate(-20deg);
  box-shadow:0 0 0 50px #9cd2be04,0 0 0 100px #9cd2be03;
  z-index:-1;
}
.duo-device {
  position:absolute;
  margin:0;
}
.duo-screen {
  border:7px solid #7d9192;
  border-radius:30px;
  box-shadow:0 0 0 1px #d7e4df77,0 24px 40px #0006;
  background:#eef0f4;
  position:relative;
}
.duo-screen:after {
  content:"";
  position:absolute;
  inset:0;
  border:1px solid #ffffff70;
  border-radius:23px;
  pointer-events:none;
}
.duo-screen>img {
  display:block;
  width:100%;
  height:auto;
}
.duo-compact {
  width:215px;
  left:10px;
  top:218px;
  z-index:2;
  transform:translateX(var(--duo-cover-x)) scale(var(--duo-cover-scale)) rotate(-8deg);
  transform-origin:center;
}
.duo-compact .duo-screen {
  border-color:#a4b0ac;
}
.duo-expanded {
  width:312px;
  right:5px;
  top:38px;
  transform:translateX(var(--duo-offset)) rotateY(var(--duo-turn)) scale(var(--duo-scale)) rotate(5deg);
  transform-origin:left center;
  opacity:var(--duo-open-opacity);
}
.duo-expanded:before {
  content:"";
  position:absolute;
  top:9%;
  left:-4px;
  bottom:14%;
  width:5px;
  background:linear-gradient(90deg,#9caeab,#334f51,#95aaa3);
  border-radius:4px;
}
.duo-fold-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#061e2a,transparent 90%);
  opacity:var(--duo-shade);
  pointer-events:none;
}
.duo-device figcaption {
  padding:16px 8px 0;
  font-size:11px;
  line-height:1.6;
  color:#e4f7ee;
}
.duo-device figcaption>span {
  display:block;
  font-size:8px;
  letter-spacing:.1em;
  color:#a4d2c8;
  margin-bottom:4px;
}
.duo-device figcaption>small {
  display:block;
  font-size:9px;
  color:#b9d4ce;
  margin-top:3px;
}
.duo-art-caption {
  position:absolute;
  bottom:3px;
  right:27px;
  font-size:10px;
  color:#add9ca;
  letter-spacing:.07em;
}
.duo-section+.screens-section {
  margin-top:0;
}
.no-js .duo-section {
  height:auto;
  min-height:0;
}
.no-js .duo-pin {
  position:relative;
  top:0;
  height:auto;
}
.no-js .duo-modes,.no-js .duo-scroll-hint {
  display:none;
}
@media(max-width:1100px) {
  .duo-grid {
    gap:25px;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  }
  .duo-art {
    height:560px;
  }
  .duo-expanded {
    width:255px;
    top:40px;
  }
  .duo-compact {
    width:180px;
    left:-5px;
    top:225px;
  }
  .duo-rings {
    left:-40px;
    width:460px;
  }
  .duo-copy>.eyebrow {
    font-size:8px;
    gap:7px;
  }
}
@media(max-width:800px) {
  .duo-section {
    margin-top:76px;
    min-height:1500px;
    height:180svh;
  }
  .duo-pin {
    top:76px;
    height:calc(100svh - 76px);
    min-height:880px;
  }
  .duo-grid {
    grid-template-columns:minmax(0,1fr);
    gap:12px;
    padding-block:36px 25px;
    align-content:center;
  }
  .duo-copy {
    text-align:center;
  }
  .duo-copy>.eyebrow {
    justify-content:center;
    margin-bottom:16px;
    font-size:9px;
  }
  .duo-copy h2 {
    font-size:44px;
  }
  .duo-copy h2>span>br {
    display:none;
  }
  .duo-description {
    margin:16px auto 0;
    max-width:410px;
    font-size:13px;
    line-height:1.7;
  }
  .duo-modes {
    flex-direction:row;
    justify-content:center;
    margin-top:15px;
    gap:10px;
  }
  .duo-scroll-hint {
    display:none;
  }
  .duo-disclaimer {
    max-width:430px;
    margin:14px auto 0;
    font-size:9px;
  }
  .duo-art {
    width:min(570px,100%);
    margin:auto;
    height:530px;
  }
  .duo-expanded {
    width:265px;
    right:25px;
    top:15px;
  }
  .duo-compact {
    width:195px;
    left:38px;
    top:170px;
  }
  .duo-art-caption {
    bottom:12px;
    right:40px;
  }
  .duo-rings {
    width:440px;
    height:380px;
    left:30px;
    top:80px;
  }
}
@media(max-width:540px) {
  .duo-section {
    margin-top:62px;
    min-height:1210px;
    height:170svh;
  }
  .duo-pin {
    min-height:790px;
  }
  .duo-grid {
    padding-block:35px 22px;
    gap:16px;
  }
  .duo-copy>.eyebrow {
    font-size:8px;
    gap:8px;
  }
  .duo-copy h2 {
    font-size:37px;
  }
  .duo-description {
    max-width:315px;
    font-size:12px;
    margin-top:16px;
  }
  .duo-modes {
    gap:3px;
  }
  .duo-modes button {
    font-size:10px;
    padding:9px 10px;
    gap:9px;
  }
  .duo-disclaimer {
    max-width:310px;
    font-size:10px;
  }
  .duo-art {
    height:390px;
    width:350px;
    max-width:100%;
    --duo-cover-x:0px;
  }
  .duo-expanded {
    width:190px;
    right:7px;
    top:5px;
  }
  .duo-compact {
    width:143px;
    left:4px;
    top:125px;
  }
  .duo-screen {
    border-width:5px;
    border-radius:22px;
  }
  .duo-screen:after {
    border-radius:17px;
  }
  .duo-device figcaption {
    padding:13px 4px 0;
    font-size:9px;
  }
  .duo-device figcaption>span {
    font-size:6px;
  }
  .duo-device figcaption>small {
    font-size:7px;
  }
  .duo-art-caption {
    bottom:1px;
    right:13px;
    font-size:8px;
  }
  .duo-rings {
    left:-20px;
    top:50px;
    width:370px;
    height:300px;
  }
}
@media(max-width:360px) {
  .duo-copy h2 {
    font-size:32px;
  }
  .duo-expanded {
    width:165px;
    right:0;
  }
  .duo-compact {
    width:123px;
    left:-2px;
    top:130px;
  }
  .duo-art {
    height:350px;
  }
}
@media(max-width:800px) {
  .duo-section {
    height:auto;
    min-height:0;
  }
  .duo-pin {
    position:relative;
    top:0;
    height:auto;
    min-height:0;
  }
}
@media(min-width:801px) and (max-height:760px) {
  .duo-pin {
    position:relative;
    top:0;
    height:auto;
    min-height:0;
  }
  .duo-section {
    height:auto;
    min-height:0;
  }
}
@media(prefers-reduced-motion:reduce) {
  .duo-section {
    height:auto;
    min-height:0;
  }
  .duo-pin {
    position:relative;
    top:0;
    height:auto;
    min-height:0;
  }
  .duo-scroll-hint {
    display:none;
  }
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}