/* Phones and tablets share this layout in every orientation. Size only scales it. */

:where(html[data-device="phone"],html[data-device="tablet"]) .site{--mobile-page-width:min(100vw,1280px);--mobile-page-u:calc(var(--mobile-page-width) / 1366);--mobile-demo-width:calc(var(--mobile-page-width) - 96 * var(--mobile-page-u));width:100%;max-width:1280px}
:where(html[data-device="phone"],html[data-device="tablet"]) .site main{padding:0 calc(48 * var(--mobile-page-u))}

:where(html[data-device="phone"],html[data-device="tablet"]) .site .topbar{display:grid;grid-template-columns:minmax(clamp(64px,18vw,100px),1fr) minmax(0,160px) 44px;grid-template-rows:44px 40px;height:auto;min-height:0;padding:10px 12px 8px;column-gap:8px;row-gap:8px;align-items:center;box-shadow:0 4px 16px #0004}
:where(html[data-device="phone"],html[data-device="tablet"]) .site .small-logo{grid-column:1;grid-row:1;width:clamp(64px,18vw,100px);height:auto;aspect-ratio:213 / 65;transform:none}
:where(html[data-device="phone"],html[data-device="tablet"]) .site .topbar nav{display:grid;grid-row:2;grid-column:1 / -1;grid-template-columns:1fr 1.3fr 1fr;width:100%;min-width:0;gap:4px;padding-top:3px;border-top:1px solid #ffffff12;font-size:clamp(12px,3.2vw,14px);letter-spacing:0}
:where(html[data-device="phone"],html[data-device="tablet"]) .site .topbar nav [data-nav]{justify-content:center;width:100%;min-width:0;min-height:36px;height:36px;white-space:nowrap;text-transform:capitalize}
:where(html[data-device="phone"],html[data-device="tablet"]) .site .topbar nav [data-nav]:not([aria-current]){color:#c4c4c4;font-weight:500}
:where(html[data-device="phone"],html[data-device="tablet"]) .site .topbar nav [data-nav]::after{left:8px;right:8px;bottom:1px;height:2px;border-radius:2px}
:where(html[data-device="phone"],html[data-device="tablet"]) .site .topbar .learn-more,
:where(html[data-device="phone"],html[data-device="tablet"]) .site .topbar .mobile-apk-download{grid-row:1;width:100%;height:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 7px;font-family:Quicksand,Montserrat,sans-serif;font-size:clamp(12px,2.8vw,14px);font-weight:700;line-height:1;border-radius:8px;white-space:nowrap}
:where(html[data-device="phone"],html[data-device="tablet"]) .site .topbar .learn-more{grid-column:2;width:max-content;max-width:100%;justify-self:end;justify-content:space-between;gap:14px;padding:0 12px}
:where(html[data-device="phone"],html[data-device="tablet"]) .site .learn-more-arrow{font-size:18px}
:where(html[data-device="phone"],html[data-device="tablet"]) .site .topbar .mobile-apk-download{grid-column:3;width:44px;aspect-ratio:1;padding:0;background:linear-gradient(105deg,#00bced,#0050ff);color:#fff}
:where(html[data-device="phone"],html[data-device="tablet"]) .site .topbar .mobile-apk-download[aria-disabled="true"]{opacity:.7;cursor:default}
:where(html[data-device="phone"],html[data-device="tablet"]) .site .mobile-apk-download svg{display:block;width:22px;height:22px;flex:none}
:where(html[data-device="phone"],html[data-device="tablet"]) .site .topbar:has(.mobile-apk-download[hidden]){grid-template-columns:minmax(0,1fr) minmax(0,160px)}
:where(html[data-device="phone"],html[data-device="tablet"]) .site .topbar .apk-download-status{display:block;grid-column:1 / -1;grid-row:3;margin:0;padding:8px 10px;background:#292929;color:#eee;border-radius:6px;font-size:12px;line-height:1.4;letter-spacing:0}

:where(html[data-device="phone"],html[data-device="tablet"]) .site .hero{height:calc(608 * var(--mobile-page-u));min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(52 * var(--mobile-page-u));padding:calc(77 * var(--mobile-page-u)) calc(25 * var(--mobile-page-u)) 0}
:where(html[data-device="phone"],html[data-device="tablet"]) .site .brand{width:calc(587 * var(--mobile-page-u));max-width:100%;height:calc(173 * var(--mobile-page-u));transform:translateX(calc(-4 * var(--mobile-page-u)))}
:where(html[data-device="phone"],html[data-device="tablet"]) .site .hero h1{margin:calc(32 * var(--mobile-page-u)) 0 0;font-size:calc(42 * var(--mobile-page-u));line-height:1.46;letter-spacing:calc(11 * var(--mobile-page-u))}
:where(html[data-device="phone"],html[data-device="tablet"]) .site .video-card{width:100%;height:calc(410 * var(--mobile-page-u));max-width:none;aspect-ratio:auto;margin-top:calc(17 * var(--mobile-page-u));align-self:start;border-radius:calc(25 * var(--mobile-page-u));border-width:calc(3 * var(--mobile-page-u))}
:where(html[data-device="phone"],html[data-device="tablet"]) .site .play{width:calc(128 * var(--mobile-page-u));height:calc(128 * var(--mobile-page-u))}
:where(html[data-device="phone"],html[data-device="tablet"]) .site .benefits{display:flex;flex-wrap:nowrap;justify-content:space-around;height:calc(126 * var(--mobile-page-u));min-height:0;padding:0;gap:calc(20 * var(--mobile-page-u));font-size:calc(34 * var(--mobile-page-u));line-height:1.5;white-space:nowrap;border-width:calc(3 * var(--mobile-page-u));color:#707070}

:where(html[data-device="phone"],html[data-device="tablet"]) .site main .feature,
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .feature.reverse{grid-template-columns:minmax(0,1fr);height:auto;min-height:0;gap:16px;padding:24px 0;border-bottom-width:calc(3 * var(--mobile-page-u));align-items:start}
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .feature>p,
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .feature.reverse>p,
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .feature.feature-treatment>p,
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .feature.feature-tryon>p,
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .feature.feature-vr>p{order:-1;width:100%;max-width:none;margin:0;white-space:normal;font-size:clamp(16px,4.4vw,18px);line-height:1.45;letter-spacing:0;text-wrap:pretty;transform:none}
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .feature.feature-thickness>p{text-align:left;text-wrap:balance}
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .feature-thickness .mobile-inline-ending{display:contents;white-space:normal}
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .feature>p .text-ending{white-space:normal}
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .mobile-copy-break{display:none}
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .feature>.demo-card{width:100%;height:auto;max-width:none;aspect-ratio:var(--demo-ratio,817 / 464);justify-self:stretch;border-radius:calc(24 * var(--mobile-demo-width) / 817);box-shadow:inset 0 0 0 calc(3 * var(--mobile-demo-width) / 817) #4a4a4a;transform:none}
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .feature>.thickness-card{border-radius:var(--thickness-radius)}
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .feature>.vr-image{object-fit:contain}

:where(html[data-device="phone"],html[data-device="tablet"]) .site main h2,
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .included-section h2,
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .customer-section h2{font-size:calc(60 * var(--mobile-page-u));line-height:1.3;white-space:nowrap;text-wrap:nowrap;color:#707070}
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .tools-section,
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .hardware-section,
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .included-section,
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .customer-section{padding-inline:0;padding-bottom:0;border-bottom-width:calc(3 * var(--mobile-page-u))}
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .tools-section{height:calc(701 * var(--mobile-page-u));padding-top:calc(36 * var(--mobile-page-u))}
:where(html[data-device="phone"],html[data-device="tablet"]) .site .tools-honeycomb{width:calc(1151 * var(--mobile-page-u));height:calc(476 * var(--mobile-page-u));aspect-ratio:auto;margin:calc(23.7 * var(--mobile-page-u)) auto 0}
:where(html[data-device="phone"],html[data-device="tablet"]) .site .hex-row{gap:calc(20 * var(--mobile-page-u));margin-top:calc(-1 * var(--mobile-page-u))}
:where(html[data-device="phone"],html[data-device="tablet"]) .site .hex-row span{width:calc(145 * var(--mobile-page-u));height:calc(161 * var(--mobile-page-u))}
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .hardware-section{height:calc(700 * var(--mobile-page-u));padding-top:calc(26 * var(--mobile-page-u))}
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .hardware-section img{width:calc(1193 * var(--mobile-page-u));height:calc(480 * var(--mobile-page-u));max-width:none;object-fit:contain;margin:calc(16 * var(--mobile-page-u)) auto 0}
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .included-section{height:calc(854 * var(--mobile-page-u));padding-top:calc(48 * var(--mobile-page-u))}
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .included-section h2{color:var(--blue);font-weight:700}
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .included-section img{width:calc(1170 * var(--mobile-page-u));height:calc(633 * var(--mobile-page-u));max-width:none;object-fit:contain;margin:calc(50 * var(--mobile-page-u)) auto 0}
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .customer-section{height:calc(1176 * var(--mobile-page-u));padding-top:calc(59 * var(--mobile-page-u))}
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .customer-section img{width:calc(1197 * var(--mobile-page-u));height:calc(875 * var(--mobile-page-u));max-width:none;object-fit:contain;margin:calc(45 * var(--mobile-page-u)) auto 0;border-radius:calc(25 * var(--mobile-page-u))}
:where(html[data-device="phone"],html[data-device="tablet"]) .site main .cta-section{height:calc(425 * var(--mobile-page-u));padding:calc(91 * var(--mobile-page-u)) calc(27 * var(--mobile-page-u)) 0}
:where(html[data-device="phone"],html[data-device="tablet"]) .site .budget-cta{height:calc(237 * var(--mobile-page-u));font-size:calc(69 * var(--mobile-page-u));border-radius:calc(30 * var(--mobile-page-u));padding:0 0 calc(4 * var(--mobile-page-u))}
