@font-face {
font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url(/fonts/inter-v20-cyrillic-ext.woff2) format("woff2");
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url(/fonts/inter-v20-cyrillic.woff2) format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url(/fonts/inter-v20-greek-ext.woff2) format("woff2");
unicode-range: U+1F00-1FFF;
}
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url(/fonts/inter-v20-greek.woff2) format("woff2");
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url(/fonts/inter-v20-vietnamese.woff2) format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url(/fonts/inter-v20-latin-ext.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B8, U+20BA-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url(/fonts/inter-v20-rupee.woff2) format("woff2");
unicode-range: U+20B9;
}
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url(/fonts/inter-v20-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--er-white:     #ffffff;
--er-gray-02:   #fafafa;
--er-gray-05:   #f5f5f5;
--er-gray-10:   #e6e6e6;
--er-gray-20:   #d4d4d4;
--er-gray-30:   #c4c4c4;
--er-gray-50:   #919191;
--er-gray-70:   #5c5c5c;
--er-gray-80:   #404040;
--er-gray-90:   #232323;
--er-gray-92:   #333333;
--beige:        #efe8dc;
--app:          var(--er-gray-05);
--hud:          #b8f5cf;
--hud-dim:      rgba(184, 245, 207, .55);
--hud-bg:       #12161a;
--bg:              var(--er-white);
--fg:              var(--er-gray-90);
--fg-muted:        var(--er-gray-50);
--rule:            var(--er-gray-10);
--header-height:   3rem;
--header-bg:       rgba(255, 255, 255, .91);
--font-body: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
--section-y:       clamp(2.75rem, 5vw, 5.5rem);
--gutter:          clamp(1rem, 1.45vw, 1.3125rem);
--maxw:            90rem;
--gutter-wide:     clamp(1rem, 1.45vw, 2.25rem);
--ease:            cubic-bezier(.22, .61, .36, 1);
--ease-out:        cubic-bezier(.16, 1, .3, 1);
--glass-blur:      blur(24px) saturate(180%);
--glass-radius:    16px;
--glass-clear-fill: linear-gradient(rgba(255, 255, 255, .12),
rgba(255, 255, 255, .05));
--glass-clear-rim:  1px solid rgba(255, 255, 255, .45);
--glass-clear-lift: inset 0 1px 0 rgba(255, 255, 255, .38);
--glass-paper-fill: linear-gradient(rgba(255, 255, 255, .55),
rgba(255, 255, 255, .25));
--glass-paper-rim:  1px solid rgba(16, 20, 26, .13);
--glass-paper-lift: inset 0 1px 0 rgba(255, 255, 255, .9),
0 6px 18px -14px rgba(12, 16, 22, .35);
--glass-veil-fill:  linear-gradient(rgba(255, 255, 255, .57),
rgba(255, 255, 255, .46));
--glass-veil-rim:   1px solid rgba(255, 255, 255, .62);
--glass-veil-lift:  inset 0 1px 0 rgba(255, 255, 255, .8),
0 8px 22px -16px rgba(12, 16, 22, .35);
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: var(--header-height);
overflow-x: clip;
}
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
font-weight: 400;
font-size: 1rem;
line-height: 1.6;
letter-spacing: -.01em;
font-synthesis: weight small-caps;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip;
}
@supports not (overflow-x: clip) {
html { overflow-x: hidden; }
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, blockquote, figure { margin: 0; }
p, li, dd, blockquote, figcaption, .o1-tag-sub { text-wrap: pretty; }
i, em, cite, var, dfn, address, q, blockquote { font-style: normal; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.u-display {
font-style: normal;
font-weight: 500;
letter-spacing: .01em;
font-synthesis: none;
}
.skip-link {
position: absolute; top: -100%; left: 1rem; z-index: 200;
background: var(--fg); color: var(--er-white);
padding: .625rem 1rem; font-size: .8125rem;
}
.skip-link:focus { top: .5rem; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 2px; }
.container {
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-left: max(var(--gutter), env(safe-area-inset-left));
padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.d-h1 {
font-size: clamp(1.875rem, 5.6vw, 5rem);
font-weight: 300;
line-height: 1.06;
letter-spacing: -.05em;
}
.d-h2 {
font-size: clamp(1.875rem, 4.4vw, 4rem);
font-weight: 300;
line-height: 1.07;
letter-spacing: -.048em;
}
.d-h3 {
font-size: clamp(1.25rem, 1.9vw, 1.875rem);
font-weight: 300;
line-height: 1.15;
letter-spacing: -.035em;
}
.lede {
font-size: clamp(.9375rem, 1.15vw, 1.125rem);
font-weight: 400;
line-height: 1.65;
letter-spacing: -.012em;
color: var(--er-gray-70);
max-width: 34em;
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
width: 100%;
height: var(--header-height);
background: var(--header-bg);
backdrop-filter: saturate(180%) blur(18px);
-webkit-backdrop-filter: saturate(180%) blur(18px);
border-bottom: 1px solid transparent;
transition: border-color .3s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--rule); }
.header-inner {
display: flex;
align-items: center;
gap: clamp(1rem, 3vw, 3rem);
height: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-left: max(var(--gutter), env(safe-area-inset-left));
padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.brand {
display: flex;
align-items: center;
flex: 0 1 auto;
min-width: 0;
--brand-h: 1.0551rem;
gap: calc(var(--brand-h) * .557);
min-height: 44px;
}
.brand-logo {
height: var(--brand-h);
width: auto;
flex: none;
aspect-ratio: 202.78882 / 100.222599;
fill: currentColor;
color: var(--fg);
stroke: currentColor;
stroke-width: 5;
stroke-linejoin: round;
stroke-linecap: round;
transition: opacity .25s var(--ease);
}
.brand:hover .brand-logo,
.brand:hover .brand-word { opacity: .62; }
.brand-word {
height: var(--brand-h);
width: auto;
flex: 0 1 auto;
min-width: 0;
aspect-ratio: 368.585 / 68.3;
fill: currentColor;
color: var(--fg);
transition: opacity .25s var(--ease);
}
.nav-primary {
display: flex;
align-items: center;
gap: clamp(.875rem, 1.9vw, 1.875rem);
margin-inline: auto;
}
.nav-primary a {
position: relative;
font-size: .8125rem;
font-weight: 400;
letter-spacing: -.005em;
color: var(--fg);
padding-block: .25rem;
transition: color .25s var(--ease);
}
.nav-primary a::after {
content: "";
position: absolute; left: 0; bottom: 0;
width: 100%; height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform .35s var(--ease);
}
.nav-primary a:hover { color: var(--fg-muted); }
.nav-primary a:hover::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: .75rem; flex: none; }
.cart-link { display: flex; align-items: center; gap: .3125rem; }
.cart-link svg {
width: 18px; height: 18px;
fill: none; stroke: var(--fg); stroke-width: 1.2;
stroke-linecap: round; stroke-linejoin: round;
}
.cart-count { font-size: .75rem; color: var(--fg-muted); }
.menu-toggle {
display: none;
box-sizing: border-box;
width: 44px; height: 44px;
padding: 13px 10px;
margin-right: -10px;
flex-direction: column; justify-content: center; gap: 5px;
}
.menu-toggle span {
display: block; height: 1px; width: 100%;
background: var(--fg);
transition: transform .3s var(--ease), opacity .2s;
}
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3px) rotate(-45deg); }
.mobile-menu {
position: fixed;
inset: var(--header-height) 0 auto 0;
z-index: 49;
background: var(--er-white);
border-bottom: 1px solid var(--rule);
padding: 1rem max(var(--gutter), env(safe-area-inset-right))
calc(2rem + env(safe-area-inset-bottom))
max(var(--gutter), env(safe-area-inset-left));
animation: menuIn .35s var(--ease-out);
}
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu a {
padding: .875rem 0;
font-size: 1.125rem;
letter-spacing: -.03em;
border-bottom: 1px solid var(--rule);
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 2.75rem;
padding-inline: 1.75rem;
border-radius: 999px;
font-size: .875rem;
font-weight: 400;
letter-spacing: -.015em;
white-space: nowrap;
transition: background-color .3s var(--ease), color .3s var(--ease),
border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn-solid { background: var(--fg); color: var(--er-white); }
.btn-solid:hover { background: var(--er-gray-92); }
.btn-ghost { border: 1px solid var(--er-gray-20); color: var(--fg); }
.btn-ghost:hover { border-color: var(--fg); background: var(--er-gray-05); }
.btn[href="/preorder"],
.buy-button,
.po-proceed {
background: #0071e3;
border-color: #0071e3;
color: #fff;
}
.btn[href="/preorder"]:hover,
.buy-button:hover,
.po-proceed:hover { background: #0076df; border-color: #0076df; }
.btn[href="/preorder"]:active,
.buy-button:active,
.po-proceed:active { background: #006edb; border-color: #006edb; }
.section {
position: relative;
width: 100%;
padding-block: var(--section-y);
}
.section-full {
min-height: calc(100svh - var(--header-height));
display: flex;
flex-direction: column;
justify-content: center;
}
.hero {
position: relative;
display: flex;
flex-direction: column;
min-height: calc(100svh - var(--header-height));
overflow: hidden;
padding-bottom: clamp(1rem, 2vw, 1.75rem);
}
@keyframes ticker { to { transform: translateX(-50%); } }
.hero-stage {
position: relative;
flex: 1 1 auto;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
align-items: center;
justify-items: center;
gap: clamp(1rem, 3vw, 3rem);
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
min-height: 0;
padding: clamp(.5rem, 1.4vw, 1.125rem) var(--gutter);
}
.hero-glow {
position: absolute;
width: min(120vw, 1400px);
aspect-ratio: 2 / 1;
background: radial-gradient(ellipse at center,
rgba(35, 35, 35, .055) 0%,
rgba(35, 35, 35, .02) 42%,
transparent 68%);
filter: blur(6px);
pointer-events: none;
}
.hero:has(.has-video) { padding-bottom: 0; }
.hero-carousel { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; }
.hero-track {
display: flex;
flex: 1 1 auto;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
overscroll-behavior-x: contain;
scrollbar-width: none;
-ms-overflow-style: none;
}
.hero-track::-webkit-scrollbar { display: none; }
.hero-slide {
flex: 0 0 100%;
min-width: 100%;
scroll-snap-align: start;
scroll-snap-stop: always;
display: flex;
flex-direction: column;
justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
.hero-track { scroll-behavior: auto; }}
.hero-stage.has-video {
display: block;
padding: 0;
width: 100%;
max-width: none;
position: relative;
flex: 0 0 auto;
}
.hero-video {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: contain;
display: block;
background: #e9e7e3;
}
.hero .d-h1 { font-size: clamp(1.875rem, min(5.6vw, 8svh), 5rem); }
.hero .hero-copy { container-type: inline-size; }
.hero .d-h1 { color: var(--er-white); }
@media (min-width: 60rem) {
.hero-stage.has-video { height: calc(100svh - var(--header-height)); }
.hero-stage.has-video .hero-video {
aspect-ratio: auto;
width: 100%;
height: 100%;
max-height: none;
object-fit: cover;
object-position: center 28%;
}
.hero .hero-copy {
position: absolute;
left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
right: auto;
top: auto;
bottom: clamp(2rem, 4.5vw, 3.25rem);
transform: none;
width: min(52%, 50rem);
max-width: none;
padding-inline: 0;
z-index: 3;
}
.hero .d-h1 { font-size: min(clamp(2.5rem, 4.9vw, 4.75rem), 9.6cqi); }}
@media (max-width: 59.9375rem) {
.hero { min-height: 0; }
.hero-stage.has-video {
height: auto;
aspect-ratio: 9 / 16;
}
.hero-stage.has-video .hero-video {
aspect-ratio: auto;
width: 100%;
height: 100%;
max-height: none;
object-fit: contain;
object-position: center;
}
.hero .d-h1 { font-size: min(clamp(2.375rem, 11.2vw, 3.75rem), 10.1cqi); }
@supports (font: -apple-system-body) {
.hero .d-h1 { font-size: min(clamp(2.375rem, 11.2vw, 3.75rem), 10.4cqi); }
}
.hero .hero-copy {
position: absolute;
left: var(--gutter);
right: var(--gutter);
bottom: clamp(5.5rem, 15vw, 6.5rem);
width: auto;
max-width: 30rem;
margin-top: 0;
padding-inline: 0;
z-index: 3;
}
.hero .hero-copy { margin-top: clamp(2.25rem, 8vw, 3.5rem); }}
@media (max-width: 59.9375rem) {
.hero .hero-copy { bottom: max(clamp(5.5rem, 15vw, 6.5rem), calc(100vw * 16 / 9 - 100svh + var(--header-height) + 2.5rem)); }
}
@media (min-width: 60rem) {
.hero .hero-copy {
width: min(70%, 60rem);
bottom: clamp(2.25rem, 3.4vw, 3.5rem);
}
.hero .d-h1 { font-size: min(clamp(2.75rem, 4.4vw, 4.75rem), 8.2cqi); }
}
@media (max-width: 59.9375rem) {
.hero .hero-copy {
margin-inline: 0;
bottom: max(clamp(1rem, 4.5vw, 1.75rem), calc(100vw * 16 / 9 - 100svh + var(--header-height) + 1rem));
}
.hero .d-h1 { font-size: min(clamp(1.5rem, 11.6vw, 3.75rem), 8.6cqi); letter-spacing: -.012em !important; }
@supports (font: -apple-system-body) {
.hero .d-h1 { font-size: min(clamp(1.5rem, 11.6vw, 3.75rem), 8.6cqi); }
}
.hero .hero-name { font-size: 1.45em; }
}
.hero .hero-name { display: inline-block; margin-bottom: .28em; }
.glasses { width: 100%; height: auto; }
.glasses-lines {
fill: none;
stroke: var(--fg);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.glasses .lens   { stroke-width: 2.2; }
.glasses .temple { stroke: var(--er-gray-50); }
.glasses .module { fill: var(--er-gray-10); stroke: var(--er-gray-30); stroke-width: 1; }
.glasses.sm .glasses-lines { stroke-width: 1.8; }
.hero-art .glasses-lines > * {
stroke-dasharray: 1400;
stroke-dashoffset: 1400;
animation: draw 2.2s var(--ease-out) forwards;
}
.hero-art .glasses-lines > *:nth-child(2) { animation-delay: .08s; }
.hero-art .glasses-lines > *:nth-child(3) { animation-delay: .16s; }
.hero-art .glasses-lines > *:nth-child(4) { animation-delay: .24s; }
.hero-art .glasses-lines > *:nth-child(5) { animation-delay: .32s; }
.hero-art .glasses-lines > .module { stroke-dasharray: none; stroke-dashoffset: 0; animation: fadeIn .8s .9s backwards; }
@keyframes draw   { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.hero-hud {
position: absolute;
left: 12%;
top: 24%;
display: flex;
flex-direction: column;
gap: .25rem;
font-size: clamp(.625rem, .95vw, .8125rem);
letter-spacing: -.005em;
color: var(--er-gray-70);
opacity: 0;
animation: fadeIn .9s 1.5s forwards;
}
.hero-hud .hud-line b { font-weight: 500; }
.hero-hud .dim { color: var(--er-gray-30); }
.hero-copy {
display: flex;
flex-direction: column;
gap: clamp(1.5rem, 3.5vw, 2rem);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.closer-head {
margin-top: clamp(3.5rem, 7vw, 5.625rem);
margin-bottom: 5rem;
}
@media (max-width: 66.75rem) { .closer-head { margin-bottom: 4rem; } }
@media (max-width: 45.875rem) { .closer-head { margin-bottom: 4.125rem; } }
.section-hardware .closer-head .d-h2 { margin-bottom: 0; }
.closer-head.container {
width: 87.5%;
max-width: 78.75rem;
padding-inline: 0;
}
.closer-h {
margin: 0 auto 0 0;
max-width: 20ch;
font-weight: 600;
text-align: left;
font-size: 3.5rem;
}
@media (max-width: 66.75rem) { .closer-h { font-size: 3rem; } }
@media (max-width: 45.875rem) { .closer-h { font-size: 1.75rem; } }
.closer-film {
display: none;
--closer-pad: clamp(1.25rem, 5.5vw, 2rem);
margin-bottom: clamp(2.25rem, 9vw, 3.25rem);
}
.closer-stage {
margin-inline: var(--gutter);
padding: var(--closer-pad);
background: #f5f5f7;
border-radius: clamp(1.25rem, 2.4vw, 2rem);
display: grid;
grid-template-rows: 1fr auto;
gap: clamp(.875rem, 3.5vw, 1.25rem);
}
.closer-stills {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: clamp(2.25rem, 9vw, 3.25rem);
}
.closer-still {
mix-blend-mode: multiply;
}
.closer-still img {
display: block;
width: 100%;
height: auto;
}
.closer-lead {
margin: 0;
font-size: 1.1875rem;
font-weight: 500;
line-height: 1.35;
letter-spacing: -.018em;
color: var(--er-gray-90);
}
.closer-sub {
margin: .25rem 0 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.55;
color: var(--er-gray-70);
}
.closer-cap { margin-top: clamp(.875rem, 3.5vw, 1.25rem); }
.closer-nav {
position: absolute;
left: 50%;
bottom: 2rem;
transform: translateX(-50%);
z-index: 3;
display: flex;
align-items: center;
gap: 1rem;
}
.closer-nav-pill,
.closer-play {
height: 3.5rem;
border-radius: 1.75rem;
background: rgba(232, 232, 237, .72);
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
}
.closer-nav-pill {
display: flex;
align-items: stretch;
padding: 0 1rem;
}
.closer-dot {
display: flex;
align-items: center;
margin: 0;
padding: 0 .5rem;
border: 0;
background: none;
color: inherit;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.closer-dot-bar {
position: relative;
display: block;
width: .5rem;
height: .5rem;
border-radius: 10px;
background: rgba(29, 29, 31, .6);
overflow: hidden;
transition: width .3s cubic-bezier(.4, 0, .25, 1), background-color .25s linear;
}
.closer-dot[aria-current="true"] .closer-dot-bar { width: 3rem; }
.closer-dot-fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 15%;
border-radius: 10px;
background: rgb(41, 41, 42);
visibility: hidden;
}
.closer-dot[aria-current="true"] .closer-dot-fill { visibility: visible; }
.closer-play {
display: grid;
place-items: center;
width: 3.5rem;
margin: 0;
padding: 0;
border: 0;
color: rgb(29, 29, 31);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.closer-icon {
grid-area: 1 / 1;
display: none;
width: 3.5rem;
height: 3.5rem;
fill: currentColor;
}
.closer-play[data-state="paused"] .closer-icon-play,
.closer-play[data-state="playing"] .closer-icon-pause,
.closer-play[data-state="ended"] .closer-icon-replay { display: block; }
.closer-stage .closer-nav { display: none; }
.closer-gallery {
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
container-type: inline-size;
}
.closer-gallery::-webkit-scrollbar { display: none; }
.closer-gallery:focus-visible { outline: none; }
.closer-gallery:focus-visible .closer-slide.is-current .closer-tile {
outline: 2px solid var(--fg);
outline-offset: 3px;
}
.closer-track {
--closer-tile-w: min(87.5cqw, 78.75rem);
display: grid;
grid-auto-flow: column;
grid-auto-columns: var(--closer-tile-w);
gap: 1.25rem;
width: max-content;
margin: 0;
padding: 0 calc((100cqw - var(--closer-tile-w)) / 2);
list-style: none;
}
.closer-slide {
scroll-snap-align: center;
scroll-snap-stop: always;
}
.closer-slide:not(.is-current) { cursor: pointer; }
.closer-tile {
position: relative;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
height: min(calc(var(--closer-tile-w) / 1.4), calc(100svh - 6.5rem));
min-height: 22rem;
background: #f5f5f7;
border-radius: 1.75rem;
overflow: hidden;
}
.closer-caption {
margin: 0;
padding: clamp(1.75rem, 3.4vw, 3rem) clamp(1.25rem, 5vw, 4rem) 0;
text-align: center;
}
.closer-caption-lead {
display: block;
font-size: clamp(1.375rem, 2vw, 1.75rem);
font-weight: 600;
line-height: 1.2;
letter-spacing: -.02em;
color: var(--er-gray-90);
text-wrap: balance;
}
.closer-caption-sub {
display: block;
max-width: 34em;
margin: .5rem auto 0;
font-size: clamp(1rem, 1.35vw, 1.1875rem);
font-weight: 400;
line-height: 1.45;
color: var(--er-gray-70);
text-wrap: balance;
}
.closer-caption-sub + .closer-caption-sub { margin-top: .125rem; }
.closer-media {
display: flex;
justify-content: center;
align-items: center;
min-height: 0;
padding: clamp(.75rem, 2vw, 1.5rem) clamp(1rem, 3vw, 2.5rem) clamp(1rem, 2.6vw, 2rem);
}
.closer-media img {
display: block;
width: auto;
height: 100%;
max-width: 100%;
object-fit: contain;
}
.closer-tile.is-still .closer-media img { mix-blend-mode: multiply; }
@media (width > 45.875rem) {
.closer-tile.is-portrait { display: block; }
.closer-tile.is-portrait .closer-media {
position: absolute;
inset: 0;
display: block;
padding: 0;
}
.closer-tile.is-portrait .closer-media img {
position: absolute;
bottom: 0;
left: 50%;
width: auto;
height: 92%;
max-width: none;
transform: translateX(-42.26%);
}
.closer-tile.is-portrait .closer-caption {
position: absolute;
z-index: 1;
top: clamp(2rem, 4.3vw, 3rem);
left: clamp(2rem, 4.3vw, 3rem);
width: min(423px, 27%);
text-align: start;
}
.closer-tile.is-portrait .closer-caption-sub { margin-inline: 0; }
}
.closer-tile.is-portrait .closer-caption,
.closer-tile.is-speaker .closer-caption {
padding: 28px;
font-size: 17px;
line-height: 25px;
letter-spacing: -.022em;
color: #1d1d1f;
}
.closer-tile.is-portrait .closer-caption-lead,
.closer-tile.is-portrait .closer-caption-sub,
.closer-tile.is-speaker .closer-caption-lead,
.closer-tile.is-speaker .closer-caption-sub,
.closer-tile.is-bone .closer-caption-lead,
.closer-tile.is-bone .closer-caption-sub {
display: inline;
max-width: none;
margin: 0;
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
text-wrap: pretty;
}
.closer-tile.is-portrait .closer-caption-lead,
.closer-tile.is-speaker .closer-caption-lead,
.closer-tile.is-bone .closer-caption-lead { font-weight: 600; }
.closer-tile.is-portrait .closer-caption-sub,
.closer-tile.is-speaker .closer-caption-sub,
.closer-tile.is-bone .closer-caption-sub { font-weight: 400; }
.closer-tile.is-touch {
display: block;
--touch-m: clamp(2rem, 4.3vw, 3rem);
}
.closer-tile.is-touch .closer-caption {
position: absolute;
z-index: 1;
top: var(--touch-m);
left: calc(60% + var(--touch-m));
box-sizing: border-box;
width: min(367px, calc(40% - 2 * var(--touch-m)));
padding: 0;
font-size: 17px;
line-height: 25px;
letter-spacing: -.022em;
color: #1d1d1f;
text-align: start;
}
.closer-tile.is-touch .closer-caption-lead,
.closer-tile.is-touch .closer-caption-sub {
display: inline;
max-width: none;
margin: 0;
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
text-wrap: pretty;
}
.closer-tile.is-touch .closer-caption-lead { font-weight: 600; }
.closer-tile.is-touch .closer-caption-sub { font-weight: 400; }
.closer-tile.is-touch .closer-media {
position: absolute;
inset: 0;
display: block;
padding: 0;
}
.closer-tile.is-touch .closer-media img {
position: absolute;
top: 24px;
left: 0;
width: 100%;
height: auto;
max-width: none;
mix-blend-mode: multiply;
}
@media (max-width: 45.875rem) {
.closer-tile.is-touch { --touch-m: 1.5rem; }
.closer-tile.is-touch .closer-caption {
top: var(--touch-m);
left: var(--touch-m);
right: var(--touch-m);
width: auto;
translate: none;
font-size: 14px;
line-height: 20px;
letter-spacing: -.016em;
}
.closer-tile.is-touch .closer-media img {
top: auto;
bottom: 0;
width: 160%;
translate: 0 8%;
-webkit-mask-image: none;
mask-image: none;
}
}
.closer-tile.is-tap {
display: block;
--tap-m: clamp(2rem, 4.3vw, 3rem);
}
.closer-tile.is-tap .closer-caption {
position: absolute;
z-index: 1;
top: var(--tap-m);
left: var(--tap-m);
box-sizing: border-box;
width: min(300px, 27%);
padding: 0;
font-size: 17px;
line-height: 25px;
letter-spacing: -.022em;
color: #1d1d1f;
text-align: start;
}
.closer-tile.is-tap .closer-caption-lead,
.closer-tile.is-tap .closer-caption-sub {
display: inline;
max-width: none;
margin: 0;
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
text-wrap: pretty;
}
.closer-tile.is-tap .closer-caption-lead { font-weight: 600; }
.closer-tile.is-tap .closer-caption-sub { font-weight: 400; }
.closer-tile.is-tap .closer-media {
position: absolute;
inset: 0;
display: block;
padding: 0;
}
.closer-tile.is-tap .closer-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
mix-blend-mode: multiply;
}
@media (width > 45.875rem) {
.closer-tile.is-tap .closer-media img {
inset: auto;
top: 4.1%;
left: 55%;
width: auto;
height: 98.6%;
transform: translateX(-55.2%);
}
}
@media (max-width: 45.875rem) {
.closer-tile.is-tap { --tap-m: 1.5rem; }
.closer-tile.is-tap .closer-caption {
right: var(--tap-m);
width: auto;
font-size: 14px;
line-height: 20px;
letter-spacing: -.016em;
}
.closer-tile.is-tap .closer-media img {
inset: auto;
top: calc(max(4.9rem, 100% - var(--closer-tile-w) * 1.5622) + var(--closer-tile-w) * .0859);
left: calc(var(--closer-tile-w) * -.84);
width: calc(var(--closer-tile-w) * 2.657);
height: auto;
}
}
.closer-tile.is-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
--split-pad: clamp(1.5rem, 4vw, 3rem);
}
.closer-tile.is-split .closer-media {
grid-column: 1;
grid-row: 1;
position: relative;
display: block;
min-height: 0;
padding: 0;
}
.closer-tile.is-split .closer-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 100% 50%;
mix-blend-mode: multiply;
}
.closer-tile.is-split .closer-caption {
grid-column: 2;
grid-row: 1;
align-self: center;
justify-self: start;
box-sizing: content-box;
max-width: 367px;
padding: 0 var(--split-pad);
text-align: start;
font-size: 17px;
line-height: 25px;
letter-spacing: -.022em;
color: #1d1d1f;
}
.closer-tile.is-split .closer-caption-lead,
.closer-tile.is-split .closer-caption-sub {
display: inline;
max-width: none;
margin: 0;
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
text-wrap: pretty;
}
.closer-tile.is-split .closer-caption-lead { font-weight: 600; }
.closer-tile.is-split .closer-caption-sub { font-weight: 400; }
.closer-tile.is-camera {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
}
.closer-tile.is-camera .closer-caption {
grid-column: 1;
grid-row: 1;
align-self: start;
justify-self: center;
box-sizing: border-box;
width: min(560px, 90%);
max-width: none;
padding: 40px 0 0;
text-align: center;
}
.closer-tile.is-camera .closer-media { grid-column: 1; grid-row: 2; overflow: visible; }
.closer-tile.is-camera .closer-media img {
inset: auto;
top: 24px;
left: 50%;
width: auto;
height: 150%;
max-width: none;
object-fit: fill;
transform: translateX(-52%);
rotate: 32deg;
mix-blend-mode: multiply;
}
@media (width > 45.875rem) {
.closer-tile.is-camera .closer-caption {
grid-row: 1 / -1;
align-self: start;
justify-self: start;
box-sizing: border-box;
width: min(447px, 33%);
max-width: none;
margin: 0;
padding: 40px;
text-align: start;
z-index: 1;
}
.closer-tile.is-camera .closer-media {
grid-row: 1 / -1;
position: absolute;
inset: 0;
}
.closer-tile.is-camera .closer-media img {
top: 12px;
left: 31%;
height: 158%;
transform: none;
}
}
.closer-face.is-m05 { --face-h: 132.3%; --face-w: 2.719; --face-top: .056; --face-cx: .4998; --face-hair-w: .0494; }
.closer-face.is-m03 { --face-h: 121.1%; --face-w: 2.29; --face-top: .066; --face-cx: .4981; --face-hair-w: .0501; }
.closer-face.is-m04 { --face-h: 112%; --face-w: 2.4; --face-top: .042; --face-cx: .5074; --face-hair-w: .0843; }
#closerFaces img { transition: opacity .18s var(--ease-out); }
#closerFaces img:not(.is-on) { opacity: 0; }
@media (width > 45.875rem) {
.closer-tile.is-portrait .closer-media img.closer-face {
top: calc(var(--face-y, 5.5%) - var(--face-top) * var(--face-h));
bottom: auto;
height: var(--face-h);
transform: translateX(calc(var(--face-cx) * -100%));
}
}
#o1-closer {
--closer-nav-lift: 2rem;
--closer-nav-room: calc(3.5rem + var(--closer-nav-lift) + 1rem);
}
#o1-closer > .closer-nav {
position: relative;
left: auto;
bottom: auto;
transform: none;
width: max-content;
margin: calc(-3.5rem - var(--closer-nav-lift)) auto calc(var(--closer-nav-lift) + clamp(2rem, 4vw, 3rem));
}
.closer-tile.is-still .closer-media { padding-bottom: var(--closer-nav-room); }
.closer-more { display: flex; justify-content: center; margin-top: clamp(1.5rem, 2.5vw, 2rem); }
.closer-tile.is-speaker {
--speaker-m: clamp(2rem, 4.3vw, 3rem);
container-type: size;
}
.closer-tile.is-speaker .closer-caption {
position: absolute;
z-index: 1;
top: var(--speaker-m);
left: var(--speaker-m);
width: min(423px, 27%);
text-align: start;
}
.closer-tile.is-speaker .closer-caption-sub { margin-inline: 0; }
.closer-tile.is-speaker .closer-media {
position: absolute;
inset: 0;
display: block;
padding: 0;
}
.closer-spk-art {
--spk-h: min(calc((100cqh - var(--speaker-m)) * 1.02404), calc((100cqw - 2 * var(--speaker-m)) * .72188));
position: absolute;
bottom: 0;
left: calc(50% - var(--spk-h) * 1.0523);
width: calc(var(--spk-h) * 1679 / 937);
height: var(--spk-h);
}
.closer-tile.is-speaker .closer-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
mix-blend-mode: normal;
}
.closer-spk-wave {
position: absolute;
left: 61.99%;
top: 33.22%;
width: 11.7%;
aspect-ratio: 1;
translate: -50% -50%;
pointer-events: none;
}
.closer-spk-wave i,
.closer-bone-wave i {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid rgba(35, 35, 35, .55);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .6);
opacity: 0;
scale: .28;
}
.closer-slide.is-current :is(.closer-spk-wave, .closer-bone-wave) i { animation: bonePing 3.2s cubic-bezier(.16, .7, .3, 1) infinite; }
.closer-slide.is-current :is(.closer-spk-wave, .closer-bone-wave) i:nth-child(2) { animation-delay: 1.067s; }
.closer-slide.is-current :is(.closer-spk-wave, .closer-bone-wave) i:nth-child(3) { animation-delay: 2.133s; }
@media (prefers-reduced-motion: reduce) {
.closer-slide :is(.closer-spk-wave, .closer-bone-wave) i { animation: none; opacity: .8; scale: .36; }
.closer-slide :is(.closer-spk-wave, .closer-bone-wave) i:nth-child(2) { opacity: .5; scale: .68; }
.closer-slide :is(.closer-spk-wave, .closer-bone-wave) i:nth-child(3) { opacity: .28; scale: 1; }
}
.closer-tile.is-bone { container-type: size; }
.closer-tile.is-bone .closer-caption {
position: absolute;
z-index: 1;
top: 50%;
left: clamp(1.5rem, 4vw, 3rem);
translate: 0 -50%;
width: min(367px, 34%);
padding: 0;
text-align: start;
font-size: 17px;
line-height: 25px;
letter-spacing: -.022em;
color: #1d1d1f;
}
.closer-tile.is-bone .closer-media {
position: absolute;
inset: 0;
display: block;
padding: 0;
}
.closer-bone-art {
position: absolute;
left: 21cqw;
top: calc(54cqh - 22.33cqw);
width: 80cqw;
height: 44.66cqw;
}
.closer-tile.is-bone .closer-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
}
.closer-bone-wave {
position: absolute;
left: 59.6%;
top: 15.5%;
width: 18%;
aspect-ratio: 2.2 / 1;
translate: -50% -50%;
pointer-events: none;
}
@media (max-width: 45.875rem) {
.closer-track { --closer-tile-w: 87.5cqw; gap: .75rem; }
.closer-tile {
height: min(40rem, calc(100svh - 7rem));
border-radius: 1.75rem;
}
.closer-caption-lead { font-size: 1.1875rem; }
.closer-caption-sub { margin-top: .375rem; font-size: .875rem; }
#o1-closer { --closer-nav-room: clamp(1rem, 2.6vw, 2rem); }
#o1-closer > .closer-nav { margin: 1.5rem auto 2rem; }
.closer-tile.is-still .closer-media { padding-inline: 0; }
.closer-tile.is-speaker { --speaker-m: 1.5rem; }
.closer-spk-art {
left: calc(-85.05cqw - 1.5rem);
top: calc(2.5rem + 50cqh - 40.86cqw);
bottom: auto;
width: 190.03cqw;
height: 106.04cqw;
}
.closer-tile.is-bone .closer-caption {
top: 1.5rem;
right: 1.5rem;
left: 1.5rem;
width: auto;
translate: none;
font-size: 14px;
line-height: 20px;
letter-spacing: -.016em;
}
.closer-bone-art {
left: -57.05cqw;
top: max(calc(8.75rem - 2.4cqw), calc(2.5rem + 50cqh - 52.7cqw));
width: 175.7cqw;
height: 98.07cqw;
}
.closer-bone-wave { width: 24%; }
.closer-tile.is-speaker .closer-caption {
right: var(--speaker-m);
width: auto;
padding: 0;
font-size: 14px;
line-height: 20px;
letter-spacing: -.016em;
}
.closer-tile.is-portrait { display: block; }
.closer-tile.is-portrait .closer-media {
position: absolute;
inset: 0;
display: block;
padding: 0;
}
.closer-tile.is-portrait .closer-media img {
position: absolute;
top: max(4.9rem, calc(100% - var(--closer-tile-w) * 1.5622));
left: 0;
width: 100%;
height: auto;
max-width: none;
}
.closer-tile.is-portrait .closer-caption {
position: absolute;
z-index: 1;
top: 1.5rem;
right: 1.5rem;
bottom: auto;
left: 1.5rem;
width: auto;
padding: 0;
font-size: 14px;
line-height: 20px;
letter-spacing: -.016em;
text-align: start;
}
.closer-tile.is-portrait .closer-media img.closer-face {
top: calc(max(4.9rem, 100% - var(--closer-tile-w) * 1.5622) + var(--closer-tile-w) * var(--face-hair-w));
left: 50%;
width: calc(var(--closer-tile-w) * var(--face-w));
transform: translateX(calc(var(--face-cx) * -100%));
}
.closer-tile .hw-model-arrow { top: auto; bottom: 1.25rem; }
.closer-tile.is-split { --split-pad: 1rem; }
.closer-tile.is-split .closer-caption {
font-size: 14px;
line-height: 20px;
letter-spacing: -.016em;
}
.closer-tile.is-camera .closer-caption {
justify-self: start;
width: auto;
margin: 0;
padding: 24px 24px 0;
text-align: start;
position: relative;
z-index: 1;
}
.closer-tile.is-camera .closer-media {
grid-row: 1 / -1;
position: absolute;
inset: 0;
}
.closer-tile.is-camera .closer-media img {
top: 188px;
left: -159px;
width: auto;
height: 140%;
transform: none;
}
}
@media (min-width: 45.9375rem) and (max-width: 66.75rem) {
#o1-closer { --closer-nav-room: 0px; --cap-room: 10rem; }
#o1-closer > .closer-nav { margin: 1.5rem auto 2.5rem; }
.closer-tile { height: min(calc(var(--closer-tile-w) / 1.16), calc(100svh - 10rem)); }
.closer-tile:not(.is-split) .closer-caption,
.closer-tile.is-camera .closer-caption {
position: absolute;
z-index: 1;
inset: 28px auto auto 28px;
box-sizing: border-box;
width: min(26.5rem, calc(100% - 56px));
max-width: none;
margin: 0;
padding: 0;
translate: none;
font-size: 17px;
line-height: 25px;
letter-spacing: -.022em;
color: #1d1d1f;
text-align: start;
}
.closer-tile.is-portrait .closer-media img.closer-face {
--fh: calc((100% - var(--cap-room)) * 1.3);
top: calc(var(--cap-room) - var(--face-top) * var(--fh));
height: var(--fh);
}
.closer-tile.is-camera .closer-media img {
top: calc(var(--cap-room) - 2rem);
left: 22%;
height: 132%;
}
.closer-bone-art {
left: 10cqw;
top: calc(var(--cap-room) + (100cqh - var(--cap-room) - 44.66cqw) / 2);
width: 80cqw;
height: 44.66cqw;
}
.closer-tile.is-tap .closer-media img {
--th: calc((100% - var(--cap-room)) * 1.12);
top: calc(var(--cap-room) - .045 * var(--th));
left: 56%;
height: var(--th);
}
.closer-tile.is-touch .closer-media img {
top: calc(var(--cap-room) - 1.25rem);
left: -4%;
width: 112%;
}
.closer-spk-art {
--spk-h: min(calc((100cqh - var(--cap-room)) * 1.02404), calc((100cqw - 2 * var(--speaker-m)) * .72188));
}
}
@media (prefers-reduced-motion: reduce) {
.closer-gallery { scroll-behavior: auto; }
}
@media (max-width: 47.99rem), (prefers-reduced-motion: reduce) {
.closer-film { display: block; }
.closer-stills { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
}
@media (max-width: 47.99rem) and (prefers-reduced-motion: no-preference) {
.closer-film {
--closer-gap: .75rem;
--closer-top: calc(3.25rem + var(--closer-gap));
--closer-h: calc(100svh - var(--closer-top) - var(--closer-gap));
height: calc(var(--closer-h) + 360svh);
}
.closer-stage {
position: sticky;
top: var(--closer-top);
height: var(--closer-h);
grid-template-rows: auto;
align-content: center;
padding-bottom: 6.5rem;
}
.closer-stage .closer-nav { display: flex; }
.closer-stills { grid-template-columns: minmax(0, 1fr); }
.closer-still {
grid-area: 1 / 1;
display: grid;
grid-template-rows: auto auto;
align-content: center;
opacity: 0;
transition: opacity .4s var(--ease-out);
}
.closer-still.is-on { opacity: 1; }
.closer-still img {
width: calc(100% + var(--closer-pad) * 2);
margin-inline: calc(var(--closer-pad) * -1);
max-width: none;
max-height: 100%;
object-fit: contain;
}
.closer-cap {
min-height: 5rem;
margin-top: clamp(1.25rem, 5vw, 1.75rem);
}
@media (max-width: 22.4375rem) {
.closer-nav { gap: .75rem; }
.closer-nav-pill { padding: 0 .75rem; }
.closer-dot { padding: 0 .375rem; }
}
}
.section-features .d-h2 { margin-bottom: 0; }
.feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.5rem, 3vw, 3rem);
}
.feature { display: flex; flex-direction: column; gap: 1.125rem; }
.feature-visual {
border-radius: 4px;
background: linear-gradient(168deg, #f7f8f8 0%, #eceeef 100%);
border: 1px solid var(--rule);
display: grid;
place-items: center;
padding: clamp(1.5rem, 3vw, 2.25rem);
margin-bottom: .5rem;
}
.app-screen {
width: 100%;
max-width: 11.5rem;
aspect-ratio: 9 / 15;
background: var(--hud-bg);
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, .08);
padding: .875rem .875rem 1rem;
display: flex;
flex-direction: column;
gap: .5rem;
box-shadow: 0 16px 40px -18px rgba(20, 24, 28, .6);
}
.app-screen-top {
display: flex;
align-items: center;
gap: .375rem;
font-size: .625rem;
letter-spacing: .09em;
text-transform: uppercase;
color: rgba(255, 255, 255, .78);
padding-bottom: .5rem;
margin-bottom: .125rem;
border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.rec-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #ff5a4d; flex: none;
box-shadow: 0 0 0 3px rgba(255, 90, 77, .18);
}
.app-row {
font-size: .6875rem;
line-height: 1.4;
letter-spacing: -.005em;
color: rgba(255, 255, 255, .9);
}
.app-row.dim { color: rgba(255, 255, 255, .42); }
.app-row.accent {
color: var(--hud);
font-size: 1.125rem;
letter-spacing: -.03em;
margin-block: .125rem;
}
.feature p { font-size: .9375rem; line-height: 1.65; color: var(--er-gray-70); }
.memory-lede {
margin-top: 1.5rem;
margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.feature-grid { list-style: none; }
.feature-step {
display: flex;
align-items: baseline;
gap: .625rem;
font-style: normal;
font-weight: 500;
font-size: .6875rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--fg-muted);
}
.feature-step span {
font-size: .8125rem;
color: var(--fg);
padding-right: .625rem;
border-right: 1px solid var(--rule);
}
.feature-flow {
margin: .75rem 0 0;
border-top: 1px solid var(--rule);
}
.feature-flow > div {
display: grid;
grid-template-columns: 3.75rem 1fr;
gap: .75rem;
padding: .75rem 0;
border-bottom: 1px solid var(--rule);
}
.feature-flow dt {
font-size: .6875rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--fg-muted);
padding-top: .1875rem;
}
.feature-flow dd {
margin: 0;
font-size: .875rem;
line-height: 1.55;
color: var(--er-gray-70);
}
.store-head { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
.aira-flow {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr);
align-items: center;
gap: clamp(1.5rem, 3.5vw, 3.5rem);
margin-top: clamp(2.5rem, 5vw, 4rem);
}
.af-label {
font-style: normal;
font-weight: 500;
font-size: .6875rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--fg-muted);
margin-bottom: .625rem;
}
.af-quote {
font-size: clamp(1rem, 1.6vw, 1.375rem);
font-weight: 300;
line-height: 1.35;
letter-spacing: -.03em;
color: var(--fg);
}
.af-hub {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: .25rem;
padding: 1rem .875rem;
border: 1px solid var(--rule);
border-radius: 10px;
background: var(--er-white);
}
.af-hub::before,
.af-hub::after {
content: "";
position: absolute;
top: 50%;
width: clamp(.75rem, 1.75vw, 1.75rem);
height: 1px;
background: var(--er-gray-20);
}
.af-hub::before { right: 100%; }
.af-hub::after { left: 100%; }
.af-hub-mark {
display: grid;
place-items: center;
width: 2rem; height: 2rem;
border-radius: 50%;
background: var(--er-gray-90);
}
.af-hub-mark svg { width: 15px; height: 8px; fill: var(--er-white); }
.af-hub-name {
font-size: .9375rem;
font-weight: 400;
letter-spacing: -.02em;
margin-top: .25rem;
}
.af-hub-sub { font-size: .6875rem; color: var(--fg-muted); }
.af-out {
display: flex;
flex-direction: column;
gap: .625rem;
padding-left: clamp(.75rem, 1.75vw, 1.75rem);
border-left: 1px solid var(--er-gray-20);
}
.af-out li {
position: relative;
display: grid;
grid-template-columns: 5.25rem 1fr auto;
align-items: center;
gap: .75rem;
padding: .625rem .875rem;
border: 1px solid var(--rule);
border-radius: 8px;
background: var(--er-white);
}
.af-out li::before {
content: "";
position: absolute;
right: 100%;
top: 50%;
width: clamp(.75rem, 1.75vw, 1.75rem);
height: 1px;
background: var(--er-gray-20);
}
.af-agent {
font-style: normal;
font-weight: 500;
font-size: .6875rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--fg-muted);
}
.af-did {
font-size: .875rem;
line-height: 1.4;
letter-spacing: -.01em;
color: var(--er-gray-70);
}
.af-state {
font-style: normal;
font-size: .75rem;
color: var(--er-gray-30);
}
.af-state.is-done { color: #2fbf71; }
.af-rail-label {
font-style: normal;
font-weight: 500;
font-size: .6875rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--fg-muted);
margin-top: clamp(2.5rem, 5vw, 4rem);
}
.app-rail {
margin-top: clamp(2.5rem, 6vw, 4.5rem);
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.app-rail-track {
display: flex;
gap: 1rem;
width: max-content;
animation: ticker 46s linear infinite;
}
.app-rail:hover .app-rail-track { animation-play-state: paused; }
.app-tile {
width: clamp(9rem, 14vw, 12rem);
aspect-ratio: 1 / 1.12;
border: 1px solid var(--rule);
border-radius: 6px;
background: linear-gradient(168deg, #fbfbfb, #f1f2f2);
padding: 1.125rem;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.app-tile:hover { border-color: var(--er-gray-30); transform: translateY(-4px); }
.app-glyph { font-size: 1.5rem; line-height: 1; color: var(--er-gray-70); }
.app-tile b { font-size: .9375rem; font-weight: 400; letter-spacing: -.02em; }
.app-tile em { font-style: normal; font-size: .75rem; color: var(--fg-muted); display: block; margin-top: .125rem; }
.section-tech { gap: clamp(2.5rem, 5vw, 4rem); }
.tech-stage {
display: grid;
place-items: center;
padding: clamp(1.5rem, 4vw, 3rem) var(--gutter);
}
.tech-lens {
position: relative;
width: min(100%, 48rem);
aspect-ratio: 16 / 8;
border-radius: 999px / 220px;
background:
radial-gradient(130% 120% at 30% 20%, #2c3238 0%, #1b1f23 55%, #101214 100%);
display: grid;
place-items: center;
overflow: hidden;
box-shadow: 0 40px 90px -50px rgba(16,18,20,.7);
}
.tech-lens::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.07) 50%, transparent 62%);
}
.tech-hud {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: .5rem;
text-align: center;
color: var(--hud);
font-size: clamp(.75rem, 1.3vw, 1rem);
letter-spacing: -.01em;
text-shadow: 0 0 14px rgba(184,245,207,.35);
}
.tech-hud-time { font-size: clamp(1.75rem, 4vw, 3.25rem); font-weight: 200; letter-spacing: -.05em; line-height: 1; }
.tech-hud-row.dim, .tech-hud .dim { color: var(--hud-dim); }
.tech-hud-divider { height: 1px; background: var(--hud-dim); opacity: .4; margin: .375rem auto; width: 60%; }
.tech-copy { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
.loop-stage { display: grid; place-items: center; padding: clamp(2rem, 5vw, 4rem) var(--gutter); }
.ring {
position: relative;
width: clamp(11rem, 26vw, 20rem);
aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient(from 210deg, #f2f3f3, #cfd3d5, #8f9599, #d8dcde, #f2f3f3);
display: grid;
place-items: center;
box-shadow: 0 40px 80px -46px rgba(35,35,35,.55);
animation: ringSpin 26s linear infinite;
}
.ring-band {
width: 62%; aspect-ratio: 1; border-radius: 50%;
background: var(--er-white);
box-shadow: inset 0 2px 14px rgba(35,35,35,.14);
}
.ring-sheen {
position: absolute; inset: 0; border-radius: 50%;
background: linear-gradient(140deg, rgba(255,255,255,.85) 0%, transparent 38%, transparent 62%, rgba(255,255,255,.4) 100%);
mix-blend-mode: screen;
}
@keyframes ringSpin { to { transform: rotate(360deg); } }
.loop-copy { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
.section-voices { background: var(--er-white); }
.section-voices .d-h2 { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.voices { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.voices-viewport { overflow: hidden; }
.voices-track {
display: flex;
transition: transform .7s var(--ease-out);
will-change: transform;
}
.voice {
flex: 0 0 100%;
display: grid;
grid-template-columns: minmax(0, 22rem) 1fr;
gap: clamp(1.5rem, 4vw, 4rem);
align-items: center;
opacity: .35;
transition: opacity .6s var(--ease);
}
.voice.is-active { opacity: 1; }
.voice-portrait {
aspect-ratio: 4 / 5;
border-radius: 4px;
background: linear-gradient(168deg, #eef0f1 0%, #d9dcde 100%);
display: grid;
place-items: center;
border: 1px solid var(--rule);
}
.voice-portrait span {
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 200;
letter-spacing: -.05em;
color: var(--er-gray-30);
}
.voice-body { display: flex; flex-direction: column; gap: .75rem; max-width: 40em; }
.voice-role { font-size: .8125rem; color: var(--fg-muted); letter-spacing: .01em; }
.voice-body > p:last-child { font-size: clamp(.9375rem, 1.05vw, 1.0625rem); line-height: 1.7; color: var(--er-gray-70); }
.voices-controls {
display: flex;
align-items: center;
gap: 1rem;
margin-top: clamp(1.75rem, 4vw, 3rem);
}
.voice-nav {
width: 2.5rem; height: 2.5rem;
border: 1px solid var(--er-gray-20);
border-radius: 50%;
display: grid; place-items: center;
transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.voice-nav svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.voice-nav:hover { border-color: var(--fg); background: var(--er-gray-05); }
.voice-dots { display: flex; gap: .5rem; margin-inline: auto 0; }
.voice-dot {
width: 1.75rem; height: 2px;
background: var(--er-gray-20);
transition: background-color .35s var(--ease);
}
.voice-dot.is-active { background: var(--fg); }
.section-press { background: var(--er-white); }
.section-press .d-h2 { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.press-marquee {
overflow: hidden;
border-block: 1px solid var(--rule);
padding-block: clamp(1.25rem, 2.5vw, 2rem);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.press-track {
display: flex;
align-items: center;
gap: clamp(1.5rem, 4vw, 3.5rem);
width: max-content;
animation: ticker 40s linear infinite;
}
.press-logo {
font-size: clamp(1rem, 1.8vw, 1.625rem);
font-weight: 300;
letter-spacing: -.035em;
color: var(--er-gray-30);
white-space: nowrap;
transition: color .3s var(--ease);
}
.press-logo:hover { color: var(--fg); }
.press-dot { color: var(--er-gray-20); }
.press-quotes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.5rem, 3vw, 3rem);
margin-top: clamp(2.5rem, 5vw, 4rem);
}
.press-quote { display: flex; flex-direction: column; gap: 1rem; }
.press-quote p {
font-size: clamp(.9375rem, 1.15vw, 1.125rem);
line-height: 1.6;
letter-spacing: -.02em;
color: var(--fg);
}
.press-quote cite { font-style: normal; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.site-footer {
background: #f5f5f7;
color: rgba(0, 0, 0, .56);
padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2rem, 4vw, 3rem);
}
.footer-brand {
margin-bottom: clamp(2.5rem, 5vw, 4rem);
padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
border-bottom: 1px solid rgba(0, 0, 0, .16);
}
.footer-logo {
height: clamp(1.375rem, 2.6vw, 2.125rem);
width: auto;
aspect-ratio: 539.185 / 68.3;
fill: currentColor;
color: var(--fg);
transition: opacity .25s var(--ease);
}
.footer-brand a:hover .footer-logo { opacity: .7; }
.footer-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: clamp(1.5rem, 2.5vw, 2.5rem);
}
.footer-col { display: flex; flex-direction: column; gap: .625rem; }
.footer-col h3 {
font-size: .75rem;
font-weight: 400;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(0, 0, 0, .88);
margin-bottom: .375rem;
}
.footer-col a {
font-size: .875rem;
font-weight: 400;
letter-spacing: -.015em;
color: rgba(0, 0, 0, .72);
transition: color .25s var(--ease);
}
.footer-col a:hover { color: rgba(0, 0, 0, .88); }
.footer-bottom-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
gap: 2rem;
margin-top: clamp(2.5rem, 5vw, 4rem);
padding-top: clamp(1.5rem, 3vw, 2.5rem);
border-top: 1px solid rgba(0, 0, 0, .16);
}
.footer-social h3, .footer-region h3 {
font-size: .75rem; font-weight: 400; letter-spacing: .1em;
text-transform: uppercase; color: rgba(0, 0, 0, .88); margin-bottom: .75rem;
}
.footer-bottom-row { align-items: flex-start; }
.footer-region p {
margin: 0;
font-size: .875rem;
font-weight: 400;
letter-spacing: -.015em;
color: rgba(0, 0, 0, .72);
}
.picker { position: relative; }
.picker-trigger {
display: flex;
align-items: center;
gap: .5rem;
padding: .6875rem .625rem;
margin: -.6875rem -.625rem;
border: 0;
background: none;
cursor: pointer;
font: inherit;
font-size: .875rem;
font-weight: 400;
letter-spacing: -.015em;
color: rgba(0, 0, 0, .72);
transition: color .25s var(--ease);
}
.picker-trigger:hover { color: rgba(0, 0, 0, .88); }
.picker-code {
font-size: .6875rem;
letter-spacing: .08em;
color: rgba(0, 0, 0, .56);
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 3px;
padding: .0625rem .3125rem;
}
.picker-chev {
width: 13px;
height: 13px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform .22s var(--ease);
}
.picker.is-open .picker-chev { transform: rotate(180deg); }
.picker-menu.is-flipped { left: auto; right: 0; }
.picker-menu {
position: absolute;
bottom: calc(100% + .5rem);
left: 0;
z-index: 20;
min-width: 12.5rem;
max-height: 12.5rem;
overflow-y: auto;
overscroll-behavior: contain;
margin: 0;
padding: .3125rem 0;
list-style: none;
background: #fff;
border: 1px solid rgba(0, 0, 0, .16);
border-radius: .5rem;
box-shadow: 0 14px 34px rgba(0, 0, 0, .12);
font-family: -apple-system, BlinkMacSystemFont, "Inter", "Noto Sans Devanagari", "Noto Sans SC",
"PingFang SC", "Microsoft YaHei", "Noto Sans KR", system-ui, sans-serif;
}
.picker-menu li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
padding: .5rem .75rem;
font-size: .875rem;
font-weight: 400;
color: rgba(0, 0, 0, .72);
cursor: pointer;
}
.picker-menu li[aria-selected="true"] { color: rgba(0, 0, 0, .88); }
.picker-menu li[aria-disabled="true"] { color: rgba(0, 0, 0, .32); cursor: default; }
.picker-menu li:not([aria-disabled="true"]):hover,
.picker-menu li.is-active { background: rgba(0, 0, 0, .05); }
.picker-tag {
font-size: .625rem;
letter-spacing: .09em;
text-transform: uppercase;
color: rgba(0, 0, 0, .4);
}
.picker-menu { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.22) transparent; }
.picker-menu::-webkit-scrollbar { width: 8px; }
.picker-menu::-webkit-scrollbar-track { background: transparent; }
.picker-menu::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, .18);
border-radius: 4px;
border: 2px solid transparent;
background-clip: content-box;
}
.picker-trigger:focus-visible,
.picker-menu li:focus-visible { outline: 2px solid rgba(0, 0, 0, .88); outline-offset: 2px; }
.pay-cards {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr));
gap: .5rem;
max-width: 21rem;
}
.pay-card {
display: grid;
place-items: center;
min-height: 2.5rem;
padding: .375rem .5rem;
background: #fff;
border-radius: .5rem;
font-size: .6875rem;
line-height: 1.2;
letter-spacing: .01em;
text-align: center;
color: var(--er-gray-90);
}
.pay-card img {
display: block;
max-width: 100%;
max-height: 1.375rem;
width: auto;
height: auto;
}
.footer-region { min-width: 0; }
@media (max-width: 48rem) {
.pay-cards { grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); }}
.social-icons { display: flex; gap: .875rem; }
.social-icons a {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, .16);
color: rgba(0, 0, 0, .72);
transition: border-color .25s var(--ease), background-color .25s var(--ease),
color .25s var(--ease);
}
.social-icons a:hover {
border-color: rgba(0, 0, 0, .38);
background: rgba(0, 0, 0, .05);
color: rgba(0, 0, 0, .88);
}
.social-icons a:focus-visible {
outline: 2px solid rgba(0, 0, 0, .88);
outline-offset: 2px;
}
.social-icons a svg {
width: 19px; height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.social-icons a svg.is-solid { fill: currentColor; stroke: none; }
.region-select {
appearance: none;
background: transparent;
color: rgba(0, 0, 0, .72);
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 3px;
padding: .5rem 2.25rem .5rem .75rem;
font-size: .8125rem;
font-weight: 300;
letter-spacing: -.01em;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5l4-4' fill='none' stroke='%23000000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .625rem center;
background-size: 12px;
}
.region-select option { color: var(--fg); }
.legal-bar {
background: #f5f5f7;
color: rgba(0, 0, 0, .56);
min-height: 3.5rem;
display: flex;
align-items: center;
}
.legal-inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 1rem;
font-size: .75rem;
letter-spacing: -.005em;
}
.legal-inner { border-top: 1px solid rgba(0, 0, 0, .16); min-height: 3.5rem; }
.legal-inner nav { display: flex; gap: 1.25rem; }
.legal-inner a { color: rgba(0, 0, 0, .72); }
.legal-inner a:hover { color: rgba(0, 0, 0, .88); }
.voice-role,
.app-tile b,
.press-quote cite,
.footer-col h3,
.footer-social h3,
.footer-region h3 {
font-style: normal;
font-weight: 500;
font-synthesis: none;
}
.press-quote cite,
.footer-col h3,
.footer-social h3,
.footer-region h3 {
letter-spacing: .12em;
}
.eyebrow {
font-style: normal;
font-weight: 500;
font-size: .75rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--fg-muted);
margin-bottom: .875rem;
}
.hero-art img {
width: 100%;
height: auto;
border-radius: 4px;
}
.btn-sm {
height: 2.125rem;
padding-inline: 1.125rem;
font-size: .8125rem;
}
.btn-lg {
height: 3.25rem;
padding-inline: 2.25rem;
font-size: 1rem;
}
.cases {
position: relative;
max-width: var(--maxw);
margin: clamp(2.25rem, 4.5vw, 3.5rem) auto 0;
padding-inline: var(--gutter);
}
.case-track {
list-style: none;
margin: 0;
padding: 0;
display: grid;
}
.case {
grid-area: 1 / 1;
opacity: 0;
visibility: hidden;
transition: opacity .6s var(--ease-out), visibility 0s linear .6s;
}
.case.is-active {
opacity: 1;
visibility: visible;
transition: opacity .6s var(--ease-out), visibility 0s;
}
.case-media {
position: relative;
margin: 0;
overflow: hidden;
aspect-ratio: 2 / 1;
border-radius: clamp(8px, 1vw, 14px);
background: var(--er-gray-05);
}
.case-media img,
.case-media .case-video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.case-scrim {
position: absolute;
inset: 0;
background:
linear-gradient(to top, rgba(16, 18, 20, .88) 0%, rgba(16, 18, 20, .74) 26%,
rgba(16, 18, 20, 0) 58%),
linear-gradient(to right, rgba(16, 18, 20, .5) 0%, rgba(16, 18, 20, 0) 46%);
}
.case-overlay {
position: absolute;
left: clamp(1.25rem, 3.5vw, 3rem);
bottom: clamp(1.25rem, 3.5vw, 2.75rem);
right: clamp(1.25rem, 3.5vw, 3rem);
max-width: 30rem;
color: var(--er-white);
}
.cases-split .cases { max-width: none; margin: 0; padding-inline: 0; }
.cases-split {
display: block;
max-width: min(100%, 78rem, calc((100svh - 11.5rem) * 2));
margin-inline: auto;
}
.cases-copy { margin: 0; }
.section-cases .d-h2 {
margin: 0;
font-size: clamp(1.0625rem, 2.05vw, 1.875rem);
line-height: 1.3;
}
.section-cases { padding-block: clamp(2rem, 4vw, 3.5rem); }
.cases-split .cases { margin-top: clamp(1rem, 2vw, 1.75rem); }
.case-say,
.case-did {
display: inline-block;
max-width: 100%;
padding: .5rem .8125rem;
font-size: clamp(.875rem, 1.1vw, 1rem);
font-weight: 400;
line-height: 1.4;
letter-spacing: -.012em;
}
.case-say {
border-radius: var(--glass-radius) var(--glass-radius) var(--glass-radius) 5px;
background: var(--glass-clear-fill);
border: var(--glass-clear-rim);
color: var(--er-white);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
box-shadow: var(--glass-clear-lift);
}
.case-did {
border-radius: var(--glass-radius) var(--glass-radius) 5px var(--glass-radius);
background: var(--glass-clear-fill);
color: rgba(255, 255, 255, .88);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border: var(--glass-clear-rim);
box-shadow: var(--glass-clear-lift);
}
.case-did b { font-weight: 500; color: var(--er-white); }
.case-reply {
display: grid;
justify-items: start;
align-items: start;
margin-top: .4375rem;
}
.case-reply > * { grid-area: 1 / 1; }
.case-typing {
display: inline-flex;
gap: .25rem;
padding: .6875rem .8125rem;
border-radius: var(--glass-radius) var(--glass-radius) 5px var(--glass-radius);
background: var(--glass-clear-fill);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border: var(--glass-clear-rim);
box-shadow: var(--glass-clear-lift);
}
.case-typing i {
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(255, 255, 255, .7);
}
.case-mic {
width: .82em;
height: .82em;
margin-right: .38em;
vertical-align: -.04em;
fill: none;
stroke: currentColor;
stroke-width: 1.4;
stroke-linecap: round;
opacity: .78;
}
@media (max-width: 40rem) {
.case-media { aspect-ratio: auto; overflow: visible; }
.case-media img,
.case-media .case-video { border-radius: 10px; height: auto; object-fit: fill; }
.case-scrim { display: none; }
.case-overlay {
position: static;
max-width: none;
margin-top: 1rem;
color: var(--er-gray-90);
}
.case-say {
background: var(--glass-paper-fill);
border: var(--glass-paper-rim);
color: var(--er-gray-70);
box-shadow: var(--glass-paper-lift);
}
.case-did,
.case-typing {
background: var(--glass-paper-fill);
border: var(--glass-paper-rim);
box-shadow: var(--glass-paper-lift);
}
.case-did { color: var(--er-gray-70); }
.case-did b { color: var(--er-gray-90); }
.case-typing i { background: var(--er-gray-50); }}
.case-say, .case-did, .case-typing { opacity: 0; }
.cases.is-playing .case.is-active .case-say {
animation: caseBubble .45s var(--ease-out) .25s both;
}
.cases.is-playing .case.is-active .case-typing {
animation: caseThinking 1.35s linear 1s both;
}
.cases.is-playing .case.is-active .case-typing i {
animation: caseDot 1.1s ease-in-out 1s 2;
}
.cases.is-playing .case.is-active .case-typing i:nth-child(2) { animation-delay: 1.15s; }
.cases.is-playing .case.is-active .case-typing i:nth-child(3) { animation-delay: 1.3s; }
.cases.is-playing .case.is-active .case-did {
animation: caseBubble .45s var(--ease-out) 2.35s both;
}
@keyframes chatOpen { from { grid-template-rows: 0fr; } to { grid-template-rows: 1fr; } }
@keyframes caseBubble {
from { opacity: 0; transform: translateY(8px) scale(.97); }
to   { opacity: 1; transform: none; }
}
@keyframes caseThinking {
0%   { opacity: 0; transform: translateY(8px); }
14%  { opacity: 1; transform: none; }
86%  { opacity: 1; transform: none; }
100% { opacity: 0; transform: none; }
}
@keyframes caseDot {
0%, 60%, 100% { opacity: .3; transform: translateY(0); }
30%           { opacity: 1;  transform: translateY(-2px); }
}
.section-recall { background: var(--er-white); color: var(--er-gray-90); }
.section-recall .eyebrow { color: var(--er-gray-70); }
.section-recall .d-h2 { color: var(--er-gray-90); }
.section-recall .case-say,
.act-copy .case-say {
background: var(--glass-paper-fill);
border: var(--glass-paper-rim);
color: var(--er-gray-70);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
box-shadow: var(--glass-paper-lift);
}
.section-recall .case-did,
.section-recall .case-typing,
.act-copy .case-did,
.act-copy .case-typing {
background: var(--glass-paper-fill);
border: var(--glass-paper-rim);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
box-shadow: var(--glass-paper-lift);
}
.section-recall .case-did,
.act-copy .case-did { color: var(--er-gray-70); }
.section-recall .case-did b,
.act-copy .case-did b { color: var(--er-gray-90); }
.section-recall .case-typing i,
.act-copy .case-typing i { background: var(--er-gray-50); }
.recall-grid {
display: grid;
grid-template-columns: 1.35fr 1fr;
align-items: center;
gap: clamp(1.5rem, 3.5vw, 3.25rem);
margin-top: clamp(1rem, 2vw, 1.75rem);
}
.recall-media { margin: 0; border-radius: 6px; overflow: hidden; }
.recall-video { display: block; width: 100%; height: auto; }
.recall-copy { max-width: 26rem; }
.recall-found {
display: flex;
align-items: center;
gap: .5rem;
margin: .625rem 0 0;
font-size: .8125rem;
line-height: 1.4;
color: var(--er-gray-70);
opacity: 0;
}
.recall-found b { font-weight: 500; color: var(--er-gray-90); }
.recall-found-icon {
flex: none;
width: .875rem; height: .875rem;
fill: none;
stroke: currentColor;
stroke-width: 1.4;
stroke-linecap: round;
opacity: .7;
}
.recall-panel.is-playing .case-say,
.recall-grid.is-playing .case-say {
animation: caseBubble .45s var(--ease-out) .15s both;
}
.recall-grid.is-playing .recall-found {
animation: caseBubble .45s var(--ease-out) .9s both;
}
.recall-grid.is-playing .case-typing {
animation: caseThinking 1.35s linear 1.65s both;
}
.recall-grid.is-playing .case-typing i {
animation: caseDot 1.1s ease-in-out 1.65s 2;
}
.recall-grid.is-playing .case-typing i:nth-child(2) { animation-delay: 1.8s; }
.recall-grid.is-playing .case-typing i:nth-child(3) { animation-delay: 1.95s; }
.recall-grid.is-playing .case-did {
animation: caseBubble .45s var(--ease-out) 3s both;
}
@media (max-width: 60rem) {
.recall-grid { grid-template-columns: minmax(0, 1fr); }
.recall-copy { max-width: none; }}
.act-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
align-items: center;
gap: clamp(1.5rem, 3.5vw, 3.25rem);
margin-top: clamp(2rem, 4vw, 3rem);
}
.act-media { margin: 0; border-radius: 6px; overflow: hidden; }
.act-media img,
.act-video {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.act-steps {
list-style: none;
margin: .625rem 0 .5rem;
display: grid;
gap: .4375rem;
}
.act-steps li {
display: flex;
align-items: flex-start;
gap: .5rem;
font-size: .8125rem;
line-height: 1.45;
color: var(--er-gray-70);
opacity: 0;
}
.act-steps li::before {
content: "";
flex: none;
width: 14px;
height: 14px;
margin-top: 2.5px;
border-radius: 50%;
background: var(--er-gray-90);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2.1 2.1L10 5.4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='7' cy='7' r='6.4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2.1 2.1L10 5.4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='7' cy='7' r='6.4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.act-steps b { font-weight: 500; color: var(--er-gray-90); }
.act-copy .case-typing { display: none; }
.act-grid.is-playing .act-steps li {
animation: caseBubble .4s var(--ease-out) both;
animation-delay: calc(2.85s + var(--n) * .7s);
}
.act-note {
opacity: 0;
margin-top: 1rem;
font-size: .75rem;
letter-spacing: .01em;
color: var(--fg-muted);
}
.act-copy .case-say, .act-copy .case-did, .act-copy .case-typing { opacity: 0; }
.act-grid.is-playing .case-say {
animation: caseBubble .45s var(--ease-out) 1.65s both;
}
.act-grid.is-playing .case-typing {
animation: caseThinking 1.35s linear 2.85s both;
}
.act-grid.is-playing .case-typing i {
animation: caseDot 1.1s ease-in-out 2.85s 2;
}
.act-grid.is-playing .case-typing i:nth-child(2) { animation-delay: 3s; }
.act-grid.is-playing .case-typing i:nth-child(3) { animation-delay: 3.15s; }
.act-grid.is-playing .act-note {
animation: caseBubble .45s var(--ease-out) 5s both;
}
.act-grid.is-playing .case-did {
animation: caseBubble .45s var(--ease-out) 4.4s both;
}
@media (max-width: 60rem) {
.act-grid { grid-template-columns: minmax(0, 1fr); }}
.cx {
--p: .1cqw;
container-type: inline-size;
width: min(100%, 1000px);
margin: clamp(2.25rem, 4.4vw, 3.5rem) auto 0;
}
.cx-top { position: relative; height: calc(67.125 * var(--p)); }
.cx-pill {
display: inline-flex;
align-items: center;
box-sizing: border-box;
height: calc(39.4 * var(--p));
padding: 0 calc(16 * var(--p));
border-radius: calc(8 * var(--p));
background: rgba(0, 0, 0, .07);
font-size: calc(18 * var(--p));
line-height: 1.3;
font-weight: 400;
letter-spacing: 0;
color: #000;
white-space: nowrap;
}
.cx-top > .cx-pill { position: absolute; left: 0; top: calc(-6.3 * var(--p)); }
.cx-live {
display: inline-flex;
align-items: center;
gap: calc(8 * var(--p));
box-sizing: border-box;
height: calc(26.2 * var(--p));
padding: 0 calc(7 * var(--p));
border-radius: calc(8 * var(--p));
background: rgba(0, 0, 0, .03);
font-size: calc(14 * var(--p));
line-height: 1.3;
letter-spacing: 0;
color: #808080;
white-space: nowrap;
}
.cx-live i { flex: none; width: calc(7 * var(--p)); height: calc(7 * var(--p)); border-radius: 50%; background: #3be340; }
.cx-live.is-top { position: absolute; right: 0; top: 0; }
.cx-apps {
position: absolute;
top: 0;
left: 50%;
width: calc(418.7 * var(--p));
height: 100%;
transform: translateX(-50%);
}
.cx-icons {
position: absolute;
left: 0;
top: calc(1 * var(--p));
display: flex;
gap: calc(15.14 * var(--p));
margin: 0;
padding: 0;
list-style: none;
}
.cx-icons li { display: grid; place-items: center; width: calc(24.3 * var(--p)); height: calc(24 * var(--p)); }
.cx-icons img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cx-lines {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
overflow: visible;
fill: none;
stroke: #dfdfdf;
stroke-width: 2;
}
.cx-lines.is-narrow { display: none; }
.cx-win {
--k: .5945;
position: relative;
z-index: 1;
aspect-ratio: 1682 / 1080;
overflow: hidden;
isolation: isolate;
border-radius: calc(8 * var(--p));
background: radial-gradient(ellipse 72% 78% at 50% 55%, #f3f3f3 0%, #ececec 52%, #e4e4e4 100%);
box-shadow: 0 170px 48px 0 rgba(0, 0, 0, 0), 0 109px 44px 0 rgba(0, 0, 0, .01),
0 61px 37px 0 rgba(0, 0, 0, .05), 0 27px 27px 0 rgba(0, 0, 0, .09),
0 7px 15px 0 rgba(0, 0, 0, .1);
}
.cx-canvas {
position: absolute;
left: 0;
top: 4.6296%;
display: block;
width: 100%;
height: 95.3704%;
transition: opacity .5s var(--ease);
}
.cx-win.is-connect .cx-canvas { opacity: 0; }
.cx-ui {
position: absolute;
left: 0;
top: 0;
width: 1682px;
height: 1080px;
transform: scale(var(--k));
transform-origin: 0 0;
pointer-events: none;
font-size: 15px;
line-height: 1.4;
letter-spacing: 0;
color: #111;
}
.cx-ui svg {
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.cx-bar { position: absolute; left: 0; top: 0; width: 100%; height: 50px; background: #fcfcfc; color: #7d7d7d; }
.cx-bar > * { position: absolute; top: 50%; transform: translateY(-50%); }
.cx-ui .cx-logo { left: 22px; width: 23px; height: 11.5px; fill: #1d1d1f; stroke: none; }
.cx-space { left: 53px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: #1a1a1a; white-space: nowrap; }
.cx-bi { width: 17px; height: 17px; }
.cx-bi.is-clock { left: 192px; }
.cx-bi.is-side { left: 224px; }
.cx-bi.is-bin { left: 340px; }
.cx-seg { left: 263px; display: flex; gap: 2px; padding: 2px; border-radius: 7px; background: #f0f0f0; }
.cx-seg i { display: grid; place-items: center; width: 24px; height: 22px; border-radius: 5px; }
.cx-seg i.on { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); color: #333; }
.cx-seg svg { width: 14px; height: 14px; }
.cx-search {
left: 373px;
display: flex;
align-items: center;
gap: 7px;
box-sizing: border-box;
width: 136px;
height: 27px;
padding: 0 9px;
overflow: hidden;
border-radius: 7px;
background: #f3f3f3;
color: #adadad;
font-size: 13px;
white-space: nowrap;
}
.cx-search svg { flex: none; width: 13px; height: 13px; }
.cx-bright { right: 20px; display: flex; align-items: center; gap: 3px; }
.cx-bright svg { width: 15px; height: 15px; margin-right: 5px; color: #222; stroke-width: 2; }
.cx-bright img { width: 12px; height: 12px; object-fit: contain; }
.cx-me { width: 22px; height: 22px; margin-left: 15px; border-radius: 50%; background: #f2f2f2; box-shadow: inset 0 0 0 1px #dcdcdc; }
.cx-chat {
position: absolute;
left: 14px;
top: 62px;
display: grid;
place-items: center;
width: 56px;
height: 37px;
border-radius: 19px;
background: #ebebeb;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .08);
color: #555;
}
.cx-chat svg { width: 20px; height: 20px; }
.cx-tools {
position: absolute;
left: 1639px;
top: 0;
width: 32px;
height: 350px;
color: #8a8a8a;
transition: left .8s cubic-bezier(.65, 0, .35, 1);
}
.cx-win.is-card .cx-tools { left: 1104px; }
.cx-tools i { position: absolute; left: 0; z-index: 1; display: grid; place-items: center; width: 32px; height: 26px; }
.cx-tools svg { width: 16px; height: 16px; }
.cx-tools .t1 { top: 64px; }
.cx-tools .t2 { top: 98px; }
.cx-tools .t3 { top: 144px; }
.cx-tools .t4 { top: 177px; }
.cx-tools .t5 { top: 228px; }
.cx-tools .t6 { top: 259px; }
.cx-tools .t7 { top: 310px; }
.cx-tools .g1,
.cx-tools .g2 {
position: absolute;
left: 0;
width: 32px;
border-radius: 16px;
background: rgba(255, 255, 255, .55);
box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.cx-tools .g1 { top: 138px; height: 72px; }
.cx-tools .g2 { top: 222px; height: 70px; }
.cx-card {
position: absolute;
left: 1140px;
top: 50px;
width: 542px;
height: 1030px;
background: rgba(250, 250, 250, .9);
-webkit-backdrop-filter: blur(22px) saturate(1.1);
backdrop-filter: blur(22px) saturate(1.1);
box-shadow: -1px 0 0 rgba(0, 0, 0, .04), -30px 0 60px -34px rgba(0, 0, 0, .18);
transform: translateX(580px);
transition: transform .8s cubic-bezier(.65, 0, .35, 1);
}
.cx-win.is-card .cx-card { transform: none; }
.cx-close { position: absolute; top: 24px; right: 26px; width: 17px; height: 17px; color: #9a9a9a; }
.cx-mems {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 52px;
overflow: hidden;
-webkit-mask-image: linear-gradient(#000 calc(100% - 48px), transparent);
mask-image: linear-gradient(#000 calc(100% - 48px), transparent);
}
.cx-mem {
position: absolute;
inset: 0;
padding: 62px 30px 0;
opacity: 0;
transform: translateY(10px);
transition: opacity .5s var(--ease), transform .7s var(--ease-out);
}
.cx-mem.is-on { opacity: 1; transform: none; }
.cx-mem p { margin: 0; }
.cx-clu { position: relative; display: block; width: 78px; height: 78px; }
.cx-clu img {
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.cx-clu img:nth-child(1) { left: 25px; top: 25px; width: 32px; height: 32px; z-index: 1; }
.cx-clu img:nth-child(2) { left: 27px; top: 0; width: 24px; height: 24px; }
.cx-clu img:nth-child(3) { left: 52px; top: 12px; width: 24px; height: 24px; }
.cx-clu img:nth-child(4) { left: 53px; top: 42px; width: 22px; height: 22px; }
.cx-clu img:nth-child(5) { left: 28px; top: 56px; width: 22px; height: 22px; }
.cx-clu img:nth-child(6) { left: 2px; top: 42px; width: 24px; height: 24px; }
.cx-clu img:nth-child(7) { left: 3px; top: 13px; width: 22px; height: 22px; }
.cx-face { display: block; width: 78px; height: 78px; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .3); }
.cx-mt { max-width: 220px; margin-top: 26px !important; font-size: 21px; line-height: 28px; font-weight: 500; color: #111; }
.cx-mm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; margin-top: 12px !important; font-size: 14px; color: #9b9b9b; }
.cx-mm > * + *::before { content: "\00b7"; margin-right: 9px; }
.cx-mm img { width: 16px; height: 16px; object-fit: contain; margin-left: 2px; }
.cx-mh2 { margin-top: 30px !important; font-size: 15px; line-height: 22px; font-weight: 600; color: #222; }
.cx-mb { margin-top: 20px !important; font-size: 15px; line-height: 25px; color: #333; }
.cx-ml { display: flex; gap: 8px; margin-top: 34px !important; font-size: 14px; color: #666; }
.cx-ml b { font-weight: 400; color: #b0b0b0; }
.cx-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 8px;
margin: 12px 0 0;
padding: 0;
list-style: none;
}
.cx-links li { min-width: 0; }
.cx-links img,
.cx-glass { display: block; width: 100%; aspect-ratio: 240 / 134; border-radius: 6px; object-fit: cover; }
.cx-glass { position: relative; background: #ececee; }
.cx-glass::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 34%;
aspect-ratio: 1;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle at 34% 30%, #fff, #dfe3e9 55%, #b9c0ca);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 6px 14px -6px rgba(0, 0, 0, .3);
}
.cx-links b { display: block; margin-top: 10px; font-size: 14px; line-height: 19px; font-weight: 600; color: #111; }
.cx-links em { display: block; margin-top: 2px; font-style: normal; font-size: 13px; line-height: 17px; color: #9b9b9b; }
.cx-cfoot {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
gap: 16px;
height: 52px;
padding: 0 30px;
color: #777;
}
.cx-cfoot span { flex: 1; }
.cx-cfoot svg { width: 18px; height: 18px; }
.cx-chatp {
position: absolute;
z-index: 3;
left: 0;
top: 50px;
bottom: 0;
width: 540px;
display: flex;
flex-direction: column;
background: #fbfbfb;
box-shadow: 1px 0 0 rgba(0, 0, 0, .06), 30px 0 60px -34px rgba(0, 0, 0, .2);
color: #1d1d1f;
font-size: 17px;
line-height: 1.45;
transform: translateX(-580px);
transition: transform .8s cubic-bezier(.65, 0, .35, 1);
}
.cx-win.is-chat .cx-chatp { transform: none; }
.cx-cthread {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 22px;
padding: 28px 32px 18px;
}
.cx-cthread p { margin: 0; }
.cx-cyou { align-self: flex-end; max-width: 84%; padding: 12px 18px; border-radius: 20px; background: #ececee; }
.cx-cthk { position: relative; padding-left: 42px; font-size: 15px; line-height: 1.4; color: #8e8e93; }
.cx-cthk > .aira-orb { position: absolute; left: 2px; top: -3px; width: 26px; height: 26px; }
.cx-cthk-h { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.cx-cthk-h b { font-weight: 600; color: #6e6e73; }
.cx-cthk-h svg { width: 14px; height: 14px; margin-right: 8px; }
.cx-cthk ul { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.cx-cthk li { display: flex; align-items: center; gap: 10px; }
.cx-cthk li > img,
.cx-cthk li > i { flex: none; width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.cx-cthk li > img { opacity: .8; }
.cx-cthk li > i { background: radial-gradient(circle at 34% 30%, #fff, #dfe3e9 55%, #b9c0ca); box-shadow: inset 0 0 0 1px rgba(16, 20, 26, .08); }
.cx-cai { position: relative; padding-left: 42px; }
.cx-cai > .aira-orb { position: absolute; left: 0; top: -2px; width: 30px; height: 30px; }
.cx-li {
margin: 14px 0 0 -42px;
padding: 18px 20px 16px;
border-radius: 14px;
background: #fff;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 10px 26px -14px rgba(0, 0, 0, .22);
}
.cx-li-h { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #8e8e93; }
.cx-li-h img { width: 18px; height: 18px; object-fit: contain; }
.cx-li-h b { font-weight: 600; color: #0a66c2; }
.cx-li-h b + span::before { content: "\00b7"; margin-right: 8px; }
.cx-li-me { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.cx-li-me img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.cx-li-me b { display: block; font-size: 15px; line-height: 1.3; }
.cx-li-me em { display: block; font-style: normal; font-size: 13px; line-height: 1.3; color: #8e8e93; }
.cx-cthread .cx-li-t { margin-top: 12px; font-size: 15px; line-height: 1.5; }
.cx-li-img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; margin-top: 12px; border-radius: 8px; object-fit: cover; }
.cx-cthread .cx-li-b { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.cx-li-b > span { position: relative; padding: 8px 20px; border-radius: 999px; background: #f0f0f2; font-size: 15px; font-weight: 600; }
.cx-li-b > .is-post { background: #0a66c2; color: #fff; transition: background-color .3s var(--ease); }
.cx-win.is-ready .cx-li-b > .is-post { background: #004182; }
.cx-li-b > .is-post::before {
content: "";
position: absolute;
inset: -6px;
border-radius: 999px;
border: 2px solid rgba(10, 102, 194, .5);
opacity: 0;
}
.cx-win.is-ready .cx-li-b > .is-post::before { animation: cxReady 1.6s var(--ease-out) 3; }
@keyframes cxReady {
0% { opacity: .9; transform: scale(.92); }
100% { opacity: 0; transform: scale(1.28); }
}
.cx-ui .cx-cursor {
position: absolute;
right: 6px;
bottom: -24px;
width: 23px;
height: 34px;
fill: #000;
stroke: #fff;
stroke-width: 2.6;
stroke-linejoin: round;
paint-order: stroke fill;
filter: drop-shadow(0 1.5px 2px rgba(0, 0, 0, .35));
opacity: 0;
transform: translate(90px, 70px);
transition: opacity .3s var(--ease), transform 1s cubic-bezier(.22, .61, .36, 1);
}
.cx-win.is-ready .cx-cursor { opacity: 1; transform: none; }
.cx-cthread .cx-cnote { margin-top: 10px; font-size: 13px; color: #8e8e93; }
.cx-ccomp {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
min-height: 62px;
margin: 0 24px 24px;
padding: 0 12px 0 18px;
border-radius: 14px;
border: 1px solid rgba(16, 20, 26, .09);
background: #fff;
font-size: 15px;
color: #a1a1a6;
}
.cx-ccomp i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #1d1d1f; color: #fff; }
.cx-ccomp svg { width: 16px; height: 16px; stroke-width: 2 !important; }
.cx-cyou,
.cx-cthk,
.cx-cthk li,
.cx-cai {
opacity: 0;
transform: translateY(10px);
transition: opacity .45s var(--ease), transform .6s var(--ease-out);
}
.cx-cyou.is-in,
.cx-cthk.is-in,
.cx-cthk li.is-in,
.cx-cai.is-in { opacity: 1; transform: none; }
.cx-win.is-snap .cx-chatp,
.cx-win.is-snap .cx-cyou,
.cx-win.is-snap .cx-cthk,
.cx-win.is-snap .cx-cthk li,
.cx-win.is-snap .cx-cai,
.cx-win.is-snap .cx-cursor { transition: none; }
@media (prefers-reduced-motion: reduce) {
.cx-chatp,
.cx-cyou,
.cx-cthk,
.cx-cthk li,
.cx-cai,
.cx-cursor { transition: none; }
.cx-win.is-ready .cx-li-b > .is-post::before { animation: none; }
}
.cx-modal {
position: absolute;
left: 235px;
top: 215px;
width: 1211px;
height: 701px;
box-sizing: border-box;
padding: 40px 34px 0;
border-radius: 22px;
background: #fcfcfc;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 30px 80px -24px rgba(0, 0, 0, .22);
opacity: 0;
visibility: hidden;
transform: scale(.985);
transition: opacity .4s var(--ease), transform .5s var(--ease-out), visibility 0s linear .4s;
}
.cx-win.is-connect .cx-modal {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity .4s var(--ease), transform .5s var(--ease-out), visibility 0s;
}
.cx-mtitle { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -.015em; color: #151515; }
.cx-mdesc { max-width: 700px; margin: 10px 0 0; font-size: 14.5px; line-height: 19.5px; color: #6b6b6b; }
.cx-mx { position: absolute; top: 32px; right: 34px; width: 17px; height: 17px; color: #222; stroke-width: 1.8 !important; }
.cx-mlist { position: absolute; left: 30px; right: 30px; top: 127px; bottom: 42px; overflow: hidden; }
.cx-srcs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 19px 17px;
margin: 0;
padding: 0 18px 0 0;
list-style: none;
transition: transform 1.7s cubic-bezier(.45, 0, .25, 1);
}
.cx-win.is-scrolled .cx-srcs { transform: translateY(-196px); }
.cx-srcs li {
position: relative;
box-sizing: border-box;
height: 177px;
padding: 17px 17px 15px;
border-radius: 12px;
background: #fcfcfc;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .075);
}
.cx-srcs p { margin: 0; }
.cx-sh { display: flex; align-items: center; gap: 10px; height: 24px; }
.cx-sh img { width: 18px; height: 18px; object-fit: contain; }
.cx-sh b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: #222; white-space: nowrap; }
.cx-sd { margin-top: 12px !important; font-size: 14px; line-height: 17px; color: #585858; }
.cx-ss {
display: grid;
gap: 2px;
margin-top: 14px !important;
padding: 8px 12px;
border-radius: 8px;
background: #f6f6f6;
font-size: 13px;
line-height: 20px;
color: #555;
}
.cx-ss > span { display: flex; align-items: center; gap: 8px; }
.cx-ss b { margin-left: auto; font-weight: 600; color: #111; }
.cx-ss i { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #c6cad1 70%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.cx-ss i.is-t { border-radius: 2px; background: linear-gradient(#9a9a9a, #9a9a9a) center / 2px 100% no-repeat, linear-gradient(#9a9a9a, #9a9a9a) top / 100% 2px no-repeat, linear-gradient(#9a9a9a, #9a9a9a) bottom / 100% 2px no-repeat; box-shadow: none; }
.cx-so1 { display: block; width: 150px; height: auto; margin: 12px auto 0; }
.cx-btn {
position: absolute;
top: 16px;
right: 16px;
display: inline-grid;
place-items: center;
height: 25px;
padding: 0 12px;
border-radius: 5px;
background: #0f0f0f;
color: #fff;
font-size: 12.5px;
font-weight: 500;
line-height: 1;
transition: background-color .3s var(--ease), color .3s var(--ease);
}
.cx-btn > * { grid-area: 1 / 1; transition: opacity .25s var(--ease), transform .35s var(--ease-out); }
.cx-btn svg { width: 15px; height: 15px; stroke-width: 2.2 !important; opacity: 0; transform: scale(.6); }
.cx-srcs li.is-on .cx-btn { background: #ececec; color: #34c759; }
.cx-srcs li.is-on .cx-btn span { opacity: 0; }
.cx-srcs li.is-on .cx-btn svg { opacity: 1; transform: none; }
.cx-mbar { position: absolute; top: 24px; right: 2px; width: 5px; height: 300px; border-radius: 3px; background: #d2d2d2; transition: transform 1.7s cubic-bezier(.45, 0, .25, 1); }
.cx-win.is-scrolled .cx-mbar { transform: translateY(160px); }
.cx-win.is-snap .cx-btn,
.cx-win.is-snap .cx-btn > *,
.cx-win.is-snap .cx-srcs,
.cx-win.is-snap .cx-mbar { transition: none; }
.cx-foot { position: relative; height: calc(81 * var(--p)); }
.cx-foot .cx-lines.is-wide { height: calc(44 * var(--p)); }
.cx-files > .cx-pill { position: absolute; left: 0; top: calc(37 * var(--p)); }
.cx-docs {
position: absolute;
left: calc(113 * var(--p));
top: calc(40.2 * var(--p));
display: flex;
gap: calc(30 * var(--p));
margin: 0;
padding: 0;
list-style: none;
}
.cx-docs li { width: calc(26 * var(--p)); height: calc(33 * var(--p)); }
.cx-docs svg { display: block; width: 100%; height: 100%; }
.cx-device > .cx-pill { position: absolute; left: calc(439.6 * var(--p)); top: calc(35.6 * var(--p)); }
.cx-glasses {
position: absolute;
left: calc(543 * var(--p));
top: calc(37 * var(--p));
width: calc(112 * var(--p));
height: calc(44 * var(--p));
object-fit: contain;
}
.cx-live.is-foot { position: absolute; right: 0; top: calc(46 * var(--p)); }
@media (prefers-reduced-motion: reduce) {
.cx-canvas,
.cx-tools,
.cx-card,
.cx-mem,
.cx-modal,
.cx-srcs,
.cx-mbar,
.cx-btn,
.cx-btn > * { transition: none; }
}
@media (max-width: 47.9375rem) {
.cx { --p: calc(100cqw / 353); width: 100%; margin-top: 1.75rem; }
.cx-top { height: calc(89 * var(--p)); }
.cx-pill { height: calc(26 * var(--p)); padding: 0 calc(10.5 * var(--p)); border-radius: calc(7 * var(--p)); font-size: calc(13.5 * var(--p)); }
.cx-top > .cx-pill { top: 0; }
.cx-live { height: calc(24 * var(--p)); gap: calc(6 * var(--p)); padding: 0 calc(8 * var(--p)); border-radius: calc(7 * var(--p)); font-size: calc(12 * var(--p)); }
.cx-live i { width: calc(6 * var(--p)); height: calc(6 * var(--p)); }
.cx-live.is-top { top: calc(1 * var(--p)); }
.cx-apps { left: 0; width: 100%; transform: none; }
.cx-icons { left: 0; top: calc(36.95 * var(--p)); gap: calc(11.76 * var(--p)); }
.cx-icons li { width: calc(21.4 * var(--p)); height: calc(21.4 * var(--p)); }
.cx-lines { stroke: #c7c7cc; stroke-width: 1.8; }
.cx-lines.is-wide { display: none; }
.cx-lines.is-narrow { display: block; }
.cx-top .cx-lines.is-narrow { top: calc(6 * var(--p)); height: calc(83 * var(--p)); }
.cx-foot { height: calc(108 * var(--p)); }
.cx-foot .cx-lines.is-narrow { height: calc(100 * var(--p)); }
.cx-files > .cx-pill { top: calc(35.5 * var(--p)); }
.cx-docs { left: calc(84.7 * var(--p)); top: calc(36.5 * var(--p)); gap: calc(8.9 * var(--p)); }
.cx-docs li { width: calc(19 * var(--p)); height: calc(24 * var(--p)); }
.cx-device > .cx-pill { left: 0; top: calc(77.35 * var(--p)); }
.cx-glasses { left: calc(97 * var(--p)); top: calc(78 * var(--p)); width: calc(56 * var(--p)); height: calc(24.7 * var(--p)); }
.cx-live.is-foot { top: calc(78.35 * var(--p)); }
}
@media (max-width: 47.9375rem) {
.cx-win { aspect-ratio: 720 / 900; }
.cx-canvas { top: 7.1111%; height: 92.8889%; }
.cx-ui { width: 720px; height: 900px; }
.cx-bar { height: 64px; }
.cx-ui .cx-logo { left: 28px; width: 34px; height: 17px; }
.cx-space { left: 74px; font-size: 26px; }
.cx-bi,
.cx-seg,
.cx-search,
.cx-bright > svg,
.cx-bright > img,
.cx-chat,
.cx-tools { display: none; }
.cx-bright { right: 26px; }
.cx-me { width: 36px; height: 36px; margin-left: 0; }
.cx-modal { left: 20px; right: 20px; top: 84px; bottom: 20px; width: auto; height: auto; padding: 32px 28px 0; border-radius: 30px; }
.cx-mtitle { font-size: 34px; }
.cx-mdesc { max-width: none; margin-top: 10px; font-size: 21px; line-height: 29px; }
.cx-mx { top: 32px; right: 30px; width: 26px; height: 26px; }
.cx-mlist { left: 22px; right: 22px; top: 176px; bottom: 22px; }
.cx-srcs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; }
.cx-win.is-scrolled .cx-srcs { transform: none; }
.cx-srcs li { height: auto; padding: 14px 14px 14px 16px; border-radius: 18px; }
.cx-sh { height: 44px; gap: 12px; padding-right: 96px; }
.cx-sh img { width: 30px; height: 30px; }
.cx-sh b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 22px; }
.cx-sd,
.cx-ss,
.cx-so1,
.cx-mbar { display: none; }
.cx-btn { top: 50%; right: 14px; height: 38px; padding: 0 14px; border-radius: 10px; font-size: 18px; transform: translateY(-50%); }
.cx-btn svg { width: 24px; height: 24px; }
.cx-card { left: 20px; right: 20px; top: auto; bottom: 20px; width: auto; height: 520px; border-radius: 30px; transform: translateY(580px);
box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 20px 50px -20px rgba(0, 0, 0, .3); }
.cx-win.is-card .cx-card { transform: none; }
.cx-close { top: 28px; right: 30px; width: 26px; height: 26px; }
.cx-cfoot,
.cx-mh2 { display: none; }
.cx-mems { bottom: 0; -webkit-mask-image: none; mask-image: none; }
.cx-mem { padding: 30px 36px 0; }
.cx-mt { max-width: none; margin-top: 16px !important; font-size: 32px; line-height: 40px; }
.cx-mm { margin-top: 6px !important; gap: 6px 12px; font-size: 21px; }
.cx-mm > * + *::before { margin-right: 12px; }
.cx-mm img { width: 24px; height: 24px; }
.cx-mb { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: 14px !important; font-size: 23px; line-height: 33px; }
.cx-ml { margin-top: 20px !important; font-size: 21px; }
.cx-links { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.cx-links img,
.cx-glass { aspect-ratio: 1; border-radius: 16px; }
.cx-links b,
.cx-links em { display: none; }
.cx-chatp { right: 0; top: 64px; width: auto; font-size: 26px; transform: translateX(-104%); }
.cx-win.is-chat .cx-chatp { transform: none; }
.cx-cthread { gap: 18px; padding: 22px 30px 12px; }
.cx-cyou { max-width: 88%; padding: 14px 22px; border-radius: 26px; }
.cx-cthk { padding-left: 54px; font-size: 21px; }
.cx-cthk > .aira-orb { top: -4px; width: 36px; height: 36px; }
.cx-cthk-h svg { width: 20px; height: 20px; }
.cx-cthk ul { gap: 8px; margin-top: 10px; }
.cx-cthk li > img,
.cx-cthk li > i { width: 26px; height: 26px; }
.cx-cai { padding-left: 54px; }
.cx-cai > .aira-orb { top: -3px; width: 40px; height: 40px; }
.cx-li { margin: 14px 0 0 -54px; padding: 22px 24px 20px; border-radius: 22px; }
.cx-li-h { gap: 10px; font-size: 20px; }
.cx-li-h img { width: 26px; height: 26px; }
.cx-li-me { gap: 14px; margin-top: 14px; }
.cx-li-me img { width: 54px; height: 54px; }
.cx-li-me b { font-size: 22px; }
.cx-li-me em { font-size: 18px; }
.cx-cthread .cx-li-t { margin-top: 12px; font-size: 22px; line-height: 1.45; }
.cx-li-img { display: none; }
.cx-cthread .cx-li-b { margin-top: 16px; gap: 12px; }
.cx-li-b > span { padding: 11px 28px; font-size: 22px; }
.cx-ui .cx-cursor { right: 10px; bottom: -34px; width: 32px; height: 47px; }
.cx-cthread .cx-cnote { margin-top: 10px; font-size: 18px; }
.cx-ccomp { min-height: 78px; margin: 0 22px 22px; padding: 0 14px 0 24px; border-radius: 22px; font-size: 22px; }
.cx-ccomp i { width: 48px; height: 48px; }
.cx-ccomp svg { width: 22px; height: 22px; }
}
.section-connect {
background: var(--er-white);
padding-block: clamp(1.125rem, 2.2vw, 1.625rem);
}
.connect-inner { display: block; }
.connect-head {
margin-inline: auto;
text-align: center;
}
.connect-blue { color: #0071e3; }
.section-connect .d-h2 {
font-size: clamp(1.875rem, 4vw, 2.75rem);
line-height: 1.15;
}
.hw-model-arrow {
position: absolute;
top: calc(50% - 1.375rem);
z-index: 2;
width: 2.75rem;
height: 2.75rem;
display: grid;
place-items: center;
padding: 0;
border: 1px solid rgba(16, 18, 20, .1);
border-radius: 50%;
background: rgba(255, 255, 255, .88);
color: var(--fg);
cursor: pointer;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.hw-model-arrow.is-prev { left: clamp(.5rem, 1.5vw, 1.25rem); }
.hw-model-arrow.is-next { right: clamp(.5rem, 1.5vw, 1.25rem); }
.hw-model-arrow svg {
width: 1.125rem;
height: 1.125rem;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.hw-model-arrow:hover { background: #fff; }
.hw-model-arrow:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.connect-sub {
margin: clamp(1rem, 1.8vw, 1.5rem) auto 0;
max-width: 46rem;
font-size: clamp(1rem, 1.35vw, 1.1875rem);
line-height: 1.45;
color: var(--er-gray-70);
text-wrap: balance;
}
}
.section-hardware .d-h2 { margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.hw-card {
display: flex;
flex-direction: column;
background: none;
border-radius: 0;
overflow: visible;
padding-bottom: 0;
}
.hw-card-art {
margin: 0 0 clamp(.75rem, 1vw, 1rem);
aspect-ratio: 3 / 4;
background: var(--er-gray-05);
border-radius: clamp(12px, 1.4vw, 18px);
overflow: hidden;
position: relative;
}
.hw-card-art picture { display: contents; }
.hw-card-art source { display: none; }
.hw-card-art img,
.hw-card-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--focus, 50%) center;
display: block;
}
.section-hardware { padding-top: clamp(3.5rem, 6.2vw, 6rem); }
.section-privacy + .section-hardware { padding-top: 0; }
.section-privacy + .section-hardware .closer-head { margin-top: clamp(1rem, 2vw, 1.5rem); }
.o1-scroll {
position: relative;
height: 620vh;
margin-inline: var(--gutter);
--o1-inset: clamp(1rem, 2.5vw, 2.5rem);
--o1-stage-h: calc(100svh - var(--header-height) - var(--o1-inset) * 2);
}
.o1-scroll-stage {
position: sticky;
top: calc(var(--header-height) + var(--o1-inset));
height: var(--o1-stage-h);
background: #f5f5f7;
border-radius: clamp(1.25rem, 2.4vw, 2rem);
display: grid;
grid-template-columns: minmax(12rem, 0.62fr) 1.38fr;
align-items: center;
gap: clamp(1.5rem, 3vw, 3.5rem);
padding-left: clamp(1.25rem, 4vw, 4rem);
padding-bottom: 6.5rem;
}
.o1-scroll-copy {
display: grid;
align-content: center;
}
.o1-scroll-copy > .o1-scroll-tag { grid-area: 1 / 1; }
.o1-scroll-frame {
position: relative;
width: min(100%, calc((var(--o1-stage-h) - 6.5rem) * 16 / 9));
aspect-ratio: 16 / 9;
mix-blend-mode: multiply;
margin-left: auto;
}
.o1-scroll-video {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
background: #fff;
}
.o1-scroll-tag {
margin: 0;
letter-spacing: -.03em;
color: var(--er-gray-90);
opacity: 0;
transform: translateY(8px);
transform: none;
transition: none;
pointer-events: none;
}
.o1-scroll-tag.is-on {
opacity: 1;
}
.o1-bridge-wave {
position: absolute;
left: 50%;
top: var(--wave-y, 39%);
width: calc(14% * var(--wave-scale, 1));
aspect-ratio: 1;
translate: -50% -50%;
pointer-events: none;
opacity: 0;
transition: opacity .45s var(--ease-out);
}
.o1-bridge-wave.is-on { opacity: 1; }
.o1-bridge-wave i {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid rgba(35, 35, 35, .55);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .6);
opacity: 0;
scale: .28;
}
.o1-bridge-wave.is-on i { animation: bonePing 3.2s cubic-bezier(.16, .7, .3, 1) infinite; }
.o1-bridge-wave.is-on i:nth-child(2) { animation-delay: 1.067s; }
.o1-bridge-wave.is-on i:nth-child(3) { animation-delay: 2.133s; }
@media (prefers-reduced-motion: reduce) {
.o1-bridge-wave { display: none; }}
.o1-touch,
.o1-action,
.o1-speaker-wave,
.o1-led-ring {
position: absolute;
left: var(--mx, 50%);
top: var(--my, 50%);
width: var(--mw, 10%);
pointer-events: none;
opacity: 0;
transition: opacity .4s var(--ease-out);
}
.o1-touch.is-on,
.o1-action.is-on,
.o1-speaker-wave.is-on,
.o1-led-ring.is-on { opacity: 1; }
.o1-led-ring {
aspect-ratio: 1;
translate: -50% -50%;
}
.o1-led-ring i {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid rgba(35, 35, 35, .55);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .6);
opacity: 0;
scale: .28;
}
.o1-led-ring.is-on i { animation: bonePing 3.2s cubic-bezier(.16, .7, .3, 1) infinite; }
.o1-led-ring.is-on i:nth-child(2) { animation-delay: 1.067s; }
.o1-led-ring.is-on i:nth-child(3) { animation-delay: 2.133s; }
.o1-speaker-wave {
aspect-ratio: 1;
translate: -50% -50%;
}
.o1-speaker-wave i {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid rgba(35, 35, 35, .55);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .6);
opacity: 0;
scale: .28;
}
.o1-speaker-wave.is-on i { animation: bonePing 3.2s cubic-bezier(.16, .7, .3, 1) infinite; }
.o1-speaker-wave.is-on i:nth-child(2) { animation-delay: 1.067s; }
.o1-speaker-wave.is-on i:nth-child(3) { animation-delay: 2.133s; }
.o1-touch {
aspect-ratio: 2.375;
translate: -50% -50%;
rotate: var(--ma, 0deg);
border-radius: 999px;
border: 2px solid rgba(255, 255, 255, .72);
box-shadow: 0 0 0 1px rgba(35, 35, 35, .35);
}
.o1-touch i {
position: absolute;
top: 50%;
width: 33%;
aspect-ratio: 1;
translate: -50% -50%;
border-radius: 50%;
background: rgba(255, 255, 255, .92);
left: 26%;
}
.o1-touch.is-on i { animation: o1Swipe 2.6s cubic-bezier(.5, 0, .3, 1) infinite; }
.o1-bridge-wave.is-on i,
.o1-led-ring.is-on i,
.o1-speaker-wave.is-on i { animation: none; scale: .36; opacity: .8; }
.o1-bridge-wave.is-on i:nth-child(2),
.o1-led-ring.is-on i:nth-child(2),
.o1-speaker-wave.is-on i:nth-child(2) { scale: .68; opacity: .5; }
.o1-bridge-wave.is-on i:nth-child(3),
.o1-led-ring.is-on i:nth-child(3),
.o1-speaker-wave.is-on i:nth-child(3) { scale: 1; opacity: .28; }
.o1-touch.is-on i { animation: none; }
@keyframes o1Swipe {
0%, 8% { transform: translateX(0); opacity: 0; }
16% { transform: translateX(0); opacity: 1; }
56% { transform: translateX(145.45%); opacity: 1; }
70%, 100% { transform: translateX(145.45%); opacity: 0; }
}
.o1-action {
aspect-ratio: 1;
translate: -50% -50%;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, .72);
box-shadow: 0 0 0 1px rgba(35, 35, 35, .35);
}
.o1-action::after {
content: "";
position: absolute;
inset: 24%;
border-radius: 50%;
background: rgba(255, 255, 255, .92);
}
.o1-action.is-on::after { animation: o1Press 2.6s cubic-bezier(.4, 0, .3, 1) infinite; }
@keyframes o1Press {
0%, 62%, 100% { scale: 1; opacity: .92; }
74% { scale: .62; opacity: 1; }
86% { scale: 1; opacity: .92; }
}
@media (prefers-reduced-motion: reduce) {
.o1-touch, .o1-action, .o1-speaker-wave, .o1-led-ring { display: none; }}
.o1-scroll.is-offscreen .o1-bridge-wave i,
.o1-scroll.is-offscreen .o1-led-ring i,
.o1-scroll.is-offscreen .o1-speaker-wave i,
.o1-scroll.is-offscreen .o1-touch i,
.o1-scroll.is-offscreen .o1-action::after { animation-play-state: paused; }
.o1-tag-lead {
display: block;
font-size: clamp(1.25rem, 2.5vw, 2.125rem);
font-weight: 300;
line-height: 1.15;
}
.o1-scroll-copy .o1-tag-bone .eyebrow,
.o1-scroll-copy .o1-tag-speaker .eyebrow,
.o1-scroll-copy .o1-scroll-tag .o1-tag-lead {
font-size: clamp(1.375rem, 2.9vw, 2.625rem);
letter-spacing: -.048em;
line-height: 1.07;
}
.o1-scroll-copy .o1-scroll-tag .bone-h,
.o1-scroll-copy .o1-scroll-tag .audio-h,
.o1-scroll-copy .o1-scroll-tag .o1-tag-sub {
font-size: clamp(1rem, 1.53vw, 1.375rem);
letter-spacing: -.048em;
line-height: 1.2;
}
.o1-scroll-copy .o1-tag-lead + .o1-tag-sub {
margin-top: clamp(1rem, 1.5vw, 1.375rem);
}
.o1-scroll-copy .o1-scroll-tag .bone-p,
.o1-scroll-copy .o1-scroll-tag .speaker-p,
.o1-scroll-copy .o1-scroll-tag .o1-tag-body {
font-size: clamp(.875rem, 1.2vw, 1.08rem);
}
.o1-tag-sub {
display: block;
margin-top: .35em;
max-width: 20ch;
font-size: clamp(.9375rem, 1.5vw, 1.3125rem);
font-weight: 400;
line-height: 1.3;
color: var(--er-gray-70);
letter-spacing: -.01em;
}
@media (max-width: 47.99rem), (prefers-reduced-motion: reduce) {
.o1-scroll { display: none; }}
@media (max-width: 47.99rem) {
.o1-scroll { height: 370vh; }}
@media (max-width: 61.99rem) {
.o1-scroll-stage {
grid-template-columns: 1fr;
align-content: center;
padding-left: 0;
gap: clamp(.75rem, 4vw, 1.5rem);
}
.o1-scroll-frame {
order: 1;
width: min(100%, calc((var(--o1-stage-h) - 26.5rem) * 16 / 9));
margin-inline: auto;
}
.o1-scroll-copy {
order: 2;
padding-inline: clamp(1rem, 5vw, 2rem);
}
.o1-tag-sub { max-width: none; }}
.o1-welcome {
position: relative;
display: flex;
flex-direction: column;
padding-block: 0;
background: #f5f5f7;
color: #1d1d1f;
overflow: hidden;
}
.o1w-media {
position: relative;
z-index: 1;
flex: none;
margin: 0;
display: flex;
justify-content: center;
align-items: flex-start;
padding: clamp(24px, 5svh, 44px) 0 24px;
container-type: inline-size;
}
.o1w-stage {
position: relative;
width: min(60cqw, 1080px);
aspect-ratio: 2 / 1;
container-type: inline-size;
}
.o1w-win {
position: absolute;
left: 0;
top: 0;
width: 75cqw;
height: 46.5cqw;
overflow: hidden;
border-radius: 1.1cqw;
background: #fff;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .045), 0 .2cqw .5cqw rgba(0, 0, 0, .04),
0 2.6cqw 5.2cqw -1.4cqw rgba(0, 0, 0, .16);
}
.o1w-bar {
display: flex;
align-items: center;
gap: .85cqw;
height: 3.4cqw;
padding: 0 1.1cqw 0 1.2cqw;
border-bottom: 1px solid #efeff2;
font-size: max(9px, 1.02cqw);
line-height: 1;
letter-spacing: -.01em;
color: #86868b;
white-space: nowrap;
}
.o1w-bar svg, .o1w-tools svg {
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.o1w-ic { width: 1.45cqw; height: 1.45cqw; flex: none; }
.o1w-title { display: inline-flex; align-items: center; gap: .2cqw; color: #1d1d1f; }
.o1w-title b { font-weight: 600; }
.o1w-title svg { width: 1.1cqw; height: 1.1cqw; color: #86868b; }
.o1w-count { padding-left: .85cqw; border-left: 1px solid #e6e6ea; }
.o1w-sp { flex: 1 1 auto; }
.o1w-search {
display: inline-flex;
align-items: center;
gap: .45cqw;
width: 15cqw;
height: 2.1cqw;
padding: 0 .8cqw;
border-radius: 100vmax;
background: #f2f2f4;
}
.o1w-search svg { width: 1.15cqw; height: 1.15cqw; flex: none; }
.o1w-apps { display: inline-flex; gap: .45cqw; }
.o1w-apps img { display: block; width: 1.4cqw; height: 1.4cqw; object-fit: contain; }
.o1w-me {
width: 1.9cqw;
height: 1.9cqw;
flex: none;
border-radius: 50%;
background: linear-gradient(145deg, #d9dce3, #aeb4bf);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.o1w-sphere {
position: absolute;
left: calc(50% - 15cqw);
top: 10.4cqw;
display: block;
width: 30cqw;
height: 30cqw;
}
.o1w-tools {
position: absolute;
right: 1.1cqw;
top: 4.6cqw;
display: grid;
gap: .45cqw;
color: #6e6e73;
}
.o1w-tools i {
display: grid;
place-items: center;
width: 2.3cqw;
height: 2.3cqw;
border-radius: .6cqw;
background: #fff;
box-shadow: 0 0 0 1px #ececef;
}
.o1w-tools svg { width: 1.3cqw; height: 1.3cqw; }
.o1w-glasses {
position: absolute;
left: 47cqw;
top: 13.4cqw;
display: block;
width: 58cqw;
height: auto;
filter: drop-shadow(0 1.4cqw 1.6cqw rgba(0, 0, 0, .16));
}
@media (orientation: portrait) {
.o1w-stage { width: min(87.5cqw, 640px); aspect-ratio: 100 / 90; }
.o1w-win { width: 100cqw; height: 64cqw; border-radius: 2.8cqw; }
.o1w-bar { gap: 2cqw; height: 8.6cqw; padding: 0 3cqw 0 3.2cqw; font-size: max(10px, 3.1cqw); }
.o1w-ic { width: 4.4cqw; height: 4.4cqw; }
.o1w-title svg { width: 3.4cqw; height: 3.4cqw; }
.o1w-count, .o1w-search span { display: none; }
.o1w-search { width: auto; height: auto; padding: 0; background: none; }
.o1w-search svg { width: 4.4cqw; height: 4.4cqw; }
.o1w-apps { gap: 1.4cqw; }
.o1w-apps img { width: 4.2cqw; height: 4.2cqw; }
.o1w-me { width: 5.6cqw; height: 5.6cqw; }
.o1w-sphere { left: calc(50% - 20cqw); top: 14.8cqw; width: 40cqw; height: 40cqw; }
.o1w-tools { right: 2.6cqw; top: 11.4cqw; gap: 1.2cqw; }
.o1w-tools i { width: 5.8cqw; height: 5.8cqw; border-radius: 1.6cqw; }
.o1w-tools svg { width: 3.4cqw; height: 3.4cqw; }
.o1w-glasses { left: 43cqw; top: 51cqw; width: 60cqw;
filter: drop-shadow(0 2.4cqw 2.8cqw rgba(0, 0, 0, .16)); }
}
.o1w-header {
box-sizing: border-box;
width: 87.5%;
max-width: 1060px;
margin: 0 auto;
padding-top: clamp(48px, 8svh, 72px);
text-align: center;
}
.o1w-name {
margin: 0;
font-size: 21px;
color: #1d1d1f;
}
.o1w-intro { font-weight: 400; color: #86868b; }
.o1w-headline {
margin: 0;
padding-top: 8px;
font-size: 56px;
color: #1d1d1f;
text-wrap: balance;
}
.o1w-foot {
display: flex;
justify-content: center;
padding: 8px 0 clamp(48px, 7vw, 80px);
}
.o1w-detail {
position: relative;
flex: none;
}
.o1w-detail-inner {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
column-gap: 34px;
font-size: 17px;
line-height: 1.23536;
font-weight: 400;
letter-spacing: var(--heading-tracking);
}
.o1w-buy {
display: flex;
justify-content: center;
align-items: center;
padding: 8px 15px;
border-radius: 980px;
background: #0071e3;
color: #fff;
white-space: nowrap;
transition: background-color .2s var(--ease);
}
.o1w-buy:hover { background: #0077ed; }
.o1w-buy:focus-visible { outline: 2px solid #0071e3; outline-offset: 3px; }
.o1w-sub {
margin: 0;
padding-top: 10px;
font-size: 24px;
line-height: 1.25;
font-weight: 400;
letter-spacing: var(--heading-tracking);
color: #6e6e73;
text-wrap: balance;
}
@media (max-width: 66.75rem) {
.o1w-headline { padding-top: 6px; font-size: 48px; }
.o1w-sub { font-size: 21px; }
}
@media (max-width: 45.875rem) {
.o1w-header { padding-top: 48px; }
.o1w-headline { padding-top: 6px; font-size: 32px; }
.o1w-sub { padding-top: 8px; font-size: 17px; }
.o1w-media { padding-bottom: 16px; }
.o1w-foot { padding: 4px 0 44px; }
.o1w-detail-inner {
column-gap: 28px;
font-size: 14px;
line-height: 1.28577;
}
}
.section-hardware .d-h2 { margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.hw-card {
display: flex;
flex-direction: column;
background: none;
border-radius: 0;
overflow: visible;
padding-bottom: 0;
}
.hw-card-art {
margin: 0 0 clamp(.75rem, 1vw, 1rem);
aspect-ratio: 3 / 4;
background: var(--er-gray-05);
border-radius: clamp(12px, 1.4vw, 18px);
overflow: hidden;
position: relative;
}
.hw-card-art picture { display: contents; }
.hw-card-art source { display: none; }
.hw-card-art img,
.hw-card-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--focus, 50%) center;
display: block;
}
.hw-card h3,
.hw-card p { padding-inline: 0; }
.hw-card h3 {
font-size: clamp(1.125rem, 1.35vw, 1.25rem);
font-weight: 500;
line-height: 1.35;
letter-spacing: -.018em;
color: var(--er-gray-90);
margin-bottom: .1875rem;
}
.hw-card p {
font-size: clamp(.875rem, 1.2vw, 1.0625rem);
line-height: 1.55;
font-weight: 400;
color: var(--er-gray-80);
}
.mic-cards:focus-visible {
outline: 2px solid var(--fg);
outline-offset: 4px;
border-radius: 6px;
}
.hw-card {
scroll-snap-align: start;
scroll-snap-stop: always;
}
@media (max-width: 30rem) {
.hw-card { scroll-snap-align: center; }
.hw-card-art { aspect-ratio: 3 / 4; }}
.battery-band {
margin-top: clamp(3rem, 6vw, 5rem);
padding-block: 10rem;
background: #f5f5f7;
color: #1d1d1f;
text-align: center;
}
.battery-inner {
width: 87.5%;
max-width: 78.75rem;
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.battery-head {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 78px;
}
.battery-eyebrow {
margin: 0 0 6px;
font-size: 1.75rem;
color: #1d1d1f;
}
.battery-h {
margin: 0 0 38px;
font-size: 6rem;
font-weight: 600;
line-height: var(--heading-leading);
letter-spacing: var(--heading-tracking);
color: #1d1d1f;
}
.battery-copy {
margin: 0;
max-width: 67.5%;
font-size: 1.5rem;
line-height: 1.33341;
font-weight: 600;
letter-spacing: var(--heading-tracking);
color: #6e6e73;
}
.battery-art {
margin: 0 0 84px;
width: min(57.5rem, 100%);
background: #f5f5f7;
}
.battery-art img {
display: block;
width: 100%;
height: auto;
mix-blend-mode: multiply;
}
.battery-stat {
width: 100%;
max-width: 350px;
}
.battery-fig {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.battery-cap {
display: block;
font-size: 1.1875rem;
line-height: 1.21053;
font-weight: 600;
letter-spacing: var(--heading-tracking);
color: #6e6e73;
}
.battery-value {
display: block;
padding: 4px 0 2px;
font-size: 5rem;
line-height: 1;
font-weight: 600;
letter-spacing: var(--heading-tracking);
white-space: nowrap;
color: #1d1d1f;
}
.battery-callout {
margin: 18px 0 0;
padding: 16px max(0px, calc((100% - 240px) / 2)) 0;
border-top: 2px solid #00c866;
font-size: 1.3125rem;
line-height: 1.19048;
font-weight: 600;
letter-spacing: var(--heading-tracking);
color: #5b5b61;
}
.battery-callout strong { font-weight: 600; color: #1d1d1f; }
@media (max-width: 66.75rem) {
.battery-band { padding-block: 8rem; }
.battery-head { margin-bottom: 62px; }
.battery-eyebrow { font-size: 1.5rem; }
.battery-h { margin-bottom: 32px; font-size: 5rem; }
.battery-copy { max-width: 83.5%; font-size: 1.3125rem; line-height: 1.381; }
.battery-art { margin-bottom: 62px; width: min(52.125rem, 100%); }
.battery-cap { font-size: 1.0625rem; line-height: 1.23536; }
.battery-value { font-size: 4rem; }
.battery-callout { margin-top: 38px; font-size: 1.1875rem; line-height: 1.21053; }
}
@media (max-width: 45.875rem) {
.battery-band { padding-block: 6rem; }
.battery-head { margin: 20px 0 48px; }
.battery-eyebrow { font-size: 1.3125rem; }
.battery-h { margin-bottom: 28px; font-size: 3rem; }
.battery-copy { max-width: none; font-size: 1.1875rem; line-height: 1.4211; }
.battery-art { margin-bottom: 46px; width: 100vw; max-width: none; overflow: hidden; }
.battery-art img { width: 138vw; max-width: none; margin: -4.4vw 0 -3.3vw -19vw; }
.battery-stat { max-width: none; }
.battery-cap { font-size: .875rem; line-height: 1.42859; }
.battery-value { font-size: 3rem; }
.battery-callout {
margin-top: 12px;
padding-top: 12px;
font-size: 1.0625rem;
line-height: 1.23536;
}
}
.seal-band {
background: #f5f5f7;
color: #1d1d1f;
padding: 0 0 100px;
}
.seal-inner {
width: 87.5%;
max-width: 78.75rem;
margin-inline: auto;
display: flex;
align-items: center;
}
.seal-image {
flex: 0 0 58.3333%;
margin: 0;
display: flex;
justify-content: center;
overflow: hidden;
}
.seal-image img { display: block; width: 100%; height: auto; }
.seal-copy { flex: 0 1 352px; margin-left: 65px; }
.seal-icon { display: block; width: 44px; height: 55px; margin-bottom: 18px; fill: #000; }
.seal-text {
margin: 0;
font-size: 21px;
line-height: 29px;
font-weight: 600;
letter-spacing: .0023em;
color: #6c6c6c;
}
.seal-text strong { font-weight: 600; color: #1d1d1f; }
.seal-band.is-flip .seal-inner { flex-direction: row-reverse; }
.seal-band.is-flip .seal-copy { margin-left: 0; margin-right: 65px; }
.seal-band.is-flip { background: #fff; padding-top: 100px; }
.seal-band.is-flip + .seal-band { padding-top: 100px; }
@media (max-width: 66.75rem) {
.seal-band.is-flip,
.seal-band.is-flip + .seal-band { padding-top: 80px; }
}
@media (max-width: 45.875rem) {
.seal-band.is-flip,
.seal-band.is-flip + .seal-band { padding-top: 64px; }
}
@media (max-width: 66.75rem) {
.seal-band { padding-bottom: 80px; }
.seal-image { flex-basis: 470px; }
.seal-copy { flex-basis: 312px; }
.seal-icon { width: 31px; height: 39px; margin-bottom: 6px; }
}
@media (max-width: 45.875rem) {
.seal-band { padding-bottom: 64px; }
.seal-inner { flex-direction: column; align-items: stretch; }
.seal-image { flex: none; }
.seal-copy { flex: none; margin: 32px 0 0; }
.seal-band.is-flip .seal-inner { flex-direction: column; }
.seal-band.is-flip .seal-copy { margin: 32px 0 0; }
.seal-icon { margin-bottom: 4px; }
.seal-text { font-size: 17px; line-height: 21px; letter-spacing: -.022em; }
}
.speaker-p {
font-size: clamp(1rem, 1.2vw, 1.125rem);
font-weight: 400;
line-height: 1.5;
letter-spacing: -.012em;
color: var(--er-gray-70);
margin: clamp(1.125rem, 2.4vw, 2.125rem) 0 0;
max-width: 42ch;
}
.o1-tag-speaker .eyebrow {
font-style: normal;
text-transform: none;
font-weight: 300;
font-size: clamp(1.5rem, 3vw, 2.625rem);
line-height: 1.07;
letter-spacing: -.048em;
color: var(--er-gray-90);
margin-bottom: clamp(.75rem, 1.5vw, 1.375rem);
}
.audio-h {
font-size: clamp(1rem, 1.55vw, 1.375rem);
font-weight: 300;
line-height: 1.2;
letter-spacing: -.048em;
color: var(--er-gray-70);
margin-bottom: 0;
}
@media (max-width: 48rem) {
.speaker-p { font-size: .875rem; }}
.mic-block {
margin-top: calc(clamp(3rem, 7vw, 6rem) + clamp(2.5rem, 4vw, 3.5rem));
margin-bottom: 0;
padding-bottom: clamp(3rem, 7vw, 6rem);
background: #f5f5f7;
}
.voice-waves + .mic-cards { margin-top: clamp(.5rem, 3vw, 2.5rem); }
.mic-block + .battery-band { margin-top: 0; }
.voice-waves {
position: relative;
padding: clamp(10rem, 13vw, 12rem) max(var(--gutter), env(safe-area-inset-left));
overflow: hidden;
text-align: center;
background: linear-gradient(to bottom, var(--er-white) calc(100% - 16rem), #f5f5f7 100%);
}
.voice-waves-canvas {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1.2s var(--ease-out);
}
.voice-waves.is-live .voice-waves-canvas { opacity: 1; }
.voice-waves-copy {
position: relative;
width: fit-content;
max-width: 100%;
margin-inline: auto;
}
.voice-waves .voice-waves-eyebrow {
margin: 0 0 clamp(.5rem, 1vw, .75rem);
font-size: clamp(1.3125rem, 2.2vw, 1.75rem);
color: var(--er-gray-90);
}
.voice-waves-h {
font-size: clamp(2.25rem, 11.2vw, 4.5rem);
color: var(--er-gray-90);
}
@media (min-width: 64rem) {
.voice-waves-h { font-size: clamp(4.5rem, 7vw, 6rem); }}
.voice-waves-h .br-phone { display: none; }
@media (max-width: 48rem) {
.voice-waves-h .br-phone { display: inline; }
.voice-waves-h .br-wide { display: none; }}
@media (prefers-reduced-motion: reduce) {
.voice-waves-canvas { transition: none; }}
.mic-plate.is-cutout { background: var(--er-white); }
.mic-cards {
list-style: none;
margin: clamp(1rem, 2.2vw, 1.75rem) auto 0;
padding-inline: clamp(1.25rem, 3.2vw, 3.5rem);
max-width: var(--maxw);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.mic-cards .hw-card-art {
aspect-ratio: 3 / 4;
display: grid;
place-items: center;
margin-bottom: 0;
border-radius: 28px;
}
.mic-cards .hw-copy {
padding: 28px 15px 0;
font-size: 17px;
line-height: 25px;
letter-spacing: -.022em;
font-weight: 600;
}
.mic-cards .hw-copy h3,
.mic-cards .hw-copy p {
display: inline;
margin: 0;
font-size: inherit;
line-height: inherit;
}
.mic-cards .hw-copy h3 {
font-weight: inherit;
letter-spacing: inherit;
color: #1d1d1f;
}
.mic-cards .hw-copy p {
font-weight: inherit;
color: #6e6e73;
}
.mic-plate img { object-fit: contain; }
.mic-art svg {
width: 88%;
height: auto;
overflow: visible;
}
.mic-frame { stroke: var(--er-gray-30); stroke-width: 3; }
.mic-dot { fill: var(--er-gray-50); }
.mic-bone { fill: var(--fg); }
.mic-bone-ring { fill: none; stroke: var(--fg); stroke-width: 2; opacity: .28; }
.mic-bone-ring:nth-of-type(2) { opacity: .14; }
.mic-wave {
stroke: var(--fg);
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.mic-flow { stroke: var(--er-gray-30); stroke-width: 2.4; }
@media (max-width: 48rem) {
.mic-cards {
grid-auto-flow: column;
grid-auto-columns: 100%;
grid-template-columns: none;
gap: .75rem;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 18px;
margin-bottom: -18px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
padding-inline: 12%;
scroll-padding-inline: 12%;
scrollbar-width: none;
}
.mic-cards::-webkit-scrollbar { display: none; }
.mic-cards .hw-card { scroll-snap-align: center; scroll-snap-stop: always; }
.mic-cards .hw-card-art { aspect-ratio: 3 / 4; }
.mic-art svg { width: 88%; }}
.o1-tag-bone .eyebrow {
font-style: normal;
text-transform: none;
font-weight: 300;
font-size: clamp(1.75rem, 3.6vw, 3.25rem);
letter-spacing: -.048em;
line-height: 1.05;
color: var(--er-gray-90);
margin-bottom: clamp(1rem, 1.5vw, 1.375rem);
}
.bone-h {
font-size: clamp(1.125rem, 2vw, 1.75rem);
font-weight: 300;
line-height: 1.2;
letter-spacing: -.048em;
color: var(--er-gray-70);
margin: 0;
}
.bone-p {
text-wrap: balance;
font-size: clamp(1rem, 1.3vw, 1.1875rem);
font-weight: 400;
line-height: 1.5;
letter-spacing: -.014em;
color: var(--er-gray-70);
margin: clamp(1.5rem, 2.4vw, 2.125rem) 0 0;
max-width: 44ch;
}
.bone-stat {
margin: clamp(2rem, 3vw, 2.75rem) 0 0;
padding-top: clamp(1.375rem, 2.2vw, 2rem);
border-top: 1px solid var(--rule);
max-width: 44ch;
}
.bone-stat-lead,
.bone-stat-sub {
font-size: clamp(1rem, 1.3vw, 1.1875rem);
font-weight: 400;
line-height: 1.35;
letter-spacing: -.01em;
color: var(--er-gray-70);
margin: 0;
}
.bone-stat-fig {
font-size: clamp(1.75rem, 3vw, 2.625rem);
font-weight: 400;
line-height: 1;
letter-spacing: -.045em;
color: var(--er-gray-90);
margin: .24em 0 .28em;
}
@keyframes bonePing {
0%   { scale: .28; opacity: 0; }
9%   { opacity: .9; }
100% { scale: 1;   opacity: 0; }
}
@media (max-width: 48rem) {
.o1-tag-bone .eyebrow { white-space: normal; }
.o1-tag-bone .eyebrow { font-size: clamp(1.875rem, 9vw, 2.375rem); }
.bone-h { font-size: clamp(1.125rem, 5.2vw, 1.375rem); }
.bone-p { max-width: none; }}
.section-app { background: #f5f5f7; padding-block: 144px; }
@media (max-width: 66.75rem) { .section-app { padding-block: 120px; } }
@media (max-width: 45.875rem) { .section-app { padding-block: 112px; } }
.ag-lockup {
box-sizing: border-box;
width: min(87.5%, 1260px);
margin: 0 auto;
text-align: start;
}
.ag-eyebrow {
margin: 0;
font-size: 21px;
line-height: 1;
font-weight: 600;
letter-spacing: .011em;
color: #1d1d1f;
}
.ag-headline {
max-width: 840px;
margin: 12px 0 0;
font-size: 48px !important;
line-height: 1.0834 !important;
font-weight: 600 !important;
letter-spacing: -.003em !important;
color: #1d1d1f;
text-wrap: balance;
}
.ag-copy {
max-width: 840px;
margin: 24px 0 0;
font-size: 21px;
line-height: 1.381;
font-weight: 600;
letter-spacing: .011em;
color: #6e6e73;
}
@media (max-width: 66.75rem) {
.ag-headline { font-size: 40px !important; line-height: 1.1 !important; }
.ag-copy { font-size: 19px; line-height: 1.42; }
}
@media (max-width: 48rem) {
.ag-eyebrow { font-size: 17px; }
.ag-headline { margin-top: 10px; font-size: 32px !important; line-height: 1.125 !important; }
.ag-copy { margin-top: 18px; font-size: 17px; line-height: 1.47; letter-spacing: -.022em; }
}
.ag {
margin-top: 40px;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
container-type: inline-size;
}
.ag-item { cursor: pointer; user-select: none; -webkit-user-select: none; }
.ag::-webkit-scrollbar { display: none; }
.ag-track {
--ag-gutter: max(6.25cqw, calc((100cqw - 1260px) / 2));
display: flex;
gap: 20px;
width: max-content;
margin: 0;
padding: 0 var(--ag-gutter);
list-style: none;
}
.ag-item {
flex: 0 0 372px;
scroll-snap-align: start;
scroll-margin-inline-start: var(--ag-gutter);
}
.ag-card {
position: relative;
height: 580px;
border-radius: 28px;
background: #fff;
overflow: hidden;
}
.ag-cap {
margin: 0;
padding: 28px 15px 0;
font-size: 17px;
line-height: 21px;
font-weight: 600;
letter-spacing: -.022em;
color: #6e6e73;
}
.ag-cap strong { font-weight: 600; color: #1d1d1f; }
.ag-nav {
display: flex;
justify-content: flex-end;
gap: 18px;
box-sizing: border-box;
width: min(87.5%, 1260px);
max-width: none;
margin: 32px auto 0;
padding: 0;
}
.ag-arrow {
display: grid;
place-items: center;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(210, 210, 215, .64);
color: rgba(0, 0, 0, .56);
cursor: pointer;
transition: background-color .2s, opacity .2s;
}
.ag-arrow svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ag-arrow:hover { background: rgba(223, 223, 227, .7); color: rgba(0, 0, 0, .64); }
.ag-arrow:disabled { opacity: .42; cursor: default; }
.ag-arrow:focus-visible { outline: 2px solid #0071e3; outline-offset: 3px; }
.ag-phone {
position: absolute;
top: 12%;
left: 50%;
width: 76%;
aspect-ratio: 716 / 1476;
translate: -50% 0;
box-sizing: border-box;
padding: 0;
border-radius: 15.22% / 7.385%;
box-shadow: 0 24px 44px -26px rgba(0, 0, 0, .35);
container-type: inline-size;
}
.ag-item:first-child .ag-phone { top: 50%; width: 68%; translate: -50% -50%; }
.ag-item:first-child .as-ask { bottom: 6.5cqw; }
.ag-screen {
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 0 5.5cqw;
position: absolute;
inset: 1.355% 2.793%;
border-radius: 13.17% / 6.198%;
background: #fff;
overflow: hidden;
color: #1d1d1f;
font-size: 4.3cqw;
line-height: 1.3;
letter-spacing: -.01em;
text-align: start;
}
.ag-screen img { display: block; max-width: none; }
.as-bar {
display: flex;
align-items: center;
justify-content: space-between;
flex: none;
height: 15cqw;
padding: 0 3.5cqw;
margin: 0 -1.5cqw;
font-size: 4.3cqw;
font-weight: 600;
}
.as-status { width: 16cqw; height: 3cqw; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 12'%3E%3Cg fill='%231d1d1f'%3E%3Crect x='0' y='7.6' width='3' height='3.9' rx='.9'/%3E%3Crect x='4.5' y='5.4' width='3' height='6.1' rx='.9'/%3E%3Crect x='9' y='3.1' width='3' height='8.4' rx='.9'/%3E%3Crect x='13.5' y='.8' width='3' height='10.7' rx='.9'/%3E%3Cpath d='M29.3 11.6 26.61 8.91A3.8 3.8 0 0 1 31.99 8.91Z'/%3E%3Crect x='43.4' y='2.8' width='18.8' height='6.4' rx='1.7'/%3E%3Cpath d='M65.3 4.2v3.6a1.9 1.9 0 0 0 0-3.6Z' fill-opacity='.4'/%3E%3C/g%3E%3Cg fill='none' stroke='%231d1d1f'%3E%3Cpath d='M24.21 6.51A7.2 7.2 0 0 1 34.39 6.51M21.8 4.1A10.6 10.6 0 0 1 36.8 4.1' stroke-width='2.1' stroke-linecap='round'/%3E%3Crect x='41.5' y='.9' width='22.6' height='10.2' rx='3' stroke-opacity='.35'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.as-title { margin: 2cqw 0 3cqw; font-size: 8cqw; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
.as-fine { margin-top: 4cqw; font-size: 3.2cqw; color: #8e8e93; text-align: center; }
.as-note { margin-bottom: 4cqw; font-size: 3.6cqw; color: #6e6e73; }
.as-tabs {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 2.4cqw 3cqw 24cqw;
border-top: 1px solid rgba(0, 0, 0, .07);
background: rgba(250, 250, 252, .96);
}
.as-tabs span { display: flex; flex-direction: column; align-items: center; gap: .8cqw; font-size: 2.7cqw; font-weight: 500; color: #8e8e93; }
.as-tabs svg { width: 6cqw; height: 6cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.as-tabs .is-on { color: #0071e3; }
.ag-phone .ip15 {
position: absolute;
inset: 0;
z-index: 6;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.ag-screen::after {
content: "";
position: absolute;
z-index: 5;
left: 50%;
bottom: 2.2cqw;
width: 34cqw;
height: 1.2cqw;
translate: -50% 0;
border-radius: 1cqw;
background: #1d1d1f;
}
.as-round {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 3.4cqw;
min-width: 10.5cqw;
height: 10.5cqw;
box-sizing: border-box;
padding: 0 2.6cqw;
border-radius: 999px;
background: #fff;
box-shadow: 0 .8cqw 3.4cqw rgba(0, 0, 0, .1);
}
.as-round svg { width: 5.2cqw; height: 5.2cqw; fill: none; stroke: #1d1d1f; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.as-top { display: flex; align-items: center; justify-content: space-between; margin-top: .5cqw; }
.as-navtitle { font-size: 4.6cqw; font-weight: 600; letter-spacing: -.01em; }
.as-ask { position: absolute; z-index: 4; left: 5.5cqw; right: 5.5cqw; bottom: 31cqw; display: flex; align-items: center; gap: 2cqw; }
.as-askbtn {
display: flex;
align-items: center;
width: 100%;
height: 13.6cqw;
box-sizing: border-box;
padding: 0 1.8cqw 0 5.6cqw;
border-radius: 999px;
background: rgba(255, 255, 255, .96);
box-shadow: inset 0 0 0 .25cqw rgba(0, 0, 0, .05), 0 1.4cqw 4.4cqw rgba(0, 0, 0, .1);
-webkit-backdrop-filter: blur(3cqw);
backdrop-filter: blur(3cqw);
color: #3a3a3c;
font-size: 4cqw;
font-weight: 500;
letter-spacing: -.01em;
}
.as-askbtn i { display: grid; place-items: center; width: 9.2cqw; height: 9.2cqw; margin-left: auto; border-radius: 50%; background: #1d1d1f; }
.as-askbtn i svg { width: 5cqw; height: 5cqw; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.as-askfield { display: flex; align-items: center; flex: 1; height: 10.5cqw; padding: 0 4cqw; border-radius: 999px; background: #fff; box-shadow: 0 .8cqw 3.4cqw rgba(0, 0, 0, .1); font-size: 3.9cqw; color: #8e8e93; }
.as-power { display: flex; justify-content: center; gap: 12cqw; margin-top: 2cqw; }
.as-batt2 { display: flex; flex-direction: column; align-items: center; }
.as-ring { position: relative; display: grid; place-items: center; width: 11.5cqw; height: 11.5cqw; border-radius: 50%; background: conic-gradient(#30d158 calc(var(--p) * 1%), #e8e8ed 0); }
.as-ring::before { content: ""; position: absolute; inset: 1.05cqw; border-radius: 50%; background: #fff; }
.as-ring svg { position: relative; width: 5.8cqw; height: 5.8cqw; fill: none; stroke: #1d1d1f; stroke-width: 1.6; stroke-linecap: round; }
.as-batt2 b { margin-top: 1.4cqw; font-size: 3.7cqw; font-weight: 600; letter-spacing: -.01em; }
.as-batt2 em { font-style: normal; font-size: 2.9cqw; color: #8e8e93; }
.as-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; margin-top: 4cqw; }
.as-quick span { display: flex; align-items: center; gap: 2.2cqw; height: 12cqw; box-sizing: border-box; padding: 0 3cqw; border-radius: 6cqw; background: #fff; box-shadow: 0 .6cqw 3cqw rgba(0, 0, 0, .09); }
.as-quick svg { flex: none; width: 5cqw; height: 5cqw; fill: none; stroke: #1d1d1f; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.as-quick b { display: flex; flex-direction: column; font-size: 3cqw; line-height: 1.25; font-weight: 500; white-space: nowrap; }
.as-quick em { font-style: normal; color: #8e8e93; }
.as-quick .is-all { justify-content: center; }
.as-pager { display: flex; justify-content: center; gap: 1.2cqw; margin-top: 3cqw; }
.as-pager i { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: #c7c7cc; }
.as-pager .is-on { background: #1d1d1f; }
.as-entry { display: flex; align-items: center; gap: 3cqw; margin-top: 4.5cqw; padding: 2.6cqw 3.4cqw 2.6cqw 2.8cqw; border-radius: 4.5cqw; background: #f5f5f7; }
.as-cluster { position: relative; flex: none; width: 13cqw; height: 9.5cqw; }
.as-cluster img { position: absolute; width: 7.4cqw; height: 7.4cqw; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 .6cqw #f5f5f7; }
.as-cluster img:nth-child(1) { left: 0; top: 2.1cqw; }
.as-cluster img:nth-child(2) { left: 3.4cqw; top: 0; z-index: 1; }
.as-cluster img:nth-child(3) { left: 6cqw; top: 2.6cqw; z-index: 2; width: 6.2cqw; height: 6.2cqw; }
.as-entry-t { display: flex; flex-direction: column; min-width: 0; }
.as-entry-t b { font-size: 3.9cqw; font-weight: 600; }
.as-entry-t em { font-style: normal; font-size: 3.1cqw; color: #8e8e93; }
.as-chev { width: 4.4cqw; height: 4.4cqw; margin-left: auto; fill: none; stroke: #c7c7cc; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ag-screen.is-home { background: #f5f5f7; padding-inline: 0; }
.is-home .as-bar { margin: 0; padding: 0 5cqw; }
.hm-top { display: flex; align-items: center; gap: 3cqw; margin: 1cqw 5cqw 0; }
.hm-me { display: flex; align-items: center; gap: 2.8cqw; flex: 1; min-width: 0; padding: 2cqw 4cqw 2cqw 2cqw; border-radius: 6cqw; background: #fff; box-shadow: 0 .6cqw 2.4cqw rgba(0, 0, 0, .05); }
.hm-av { flex: none; width: 10cqw; height: 10cqw; border-radius: 50%; overflow: hidden; background: #f5f5f7; }
.hm-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-me > span { display: flex; flex-direction: column; min-width: 0; }
.hm-me em { font-style: normal; font-size: 2.8cqw; color: #8e8e93; }
.hm-me b { font-size: 3.8cqw; font-weight: 600; letter-spacing: -.01em; }
.is-home .as-round { flex: none; background: #fff; box-shadow: 0 .6cqw 2.4cqw rgba(0, 0, 0, .05); }
.hm-hero { position: relative; display: flex; flex-direction: column; align-items: center; margin: 17cqw 5cqw 0; }
.hm-link { display: flex; flex-direction: column; align-items: center; gap: .4cqw; margin-top: 4.4cqw; text-align: center; }
.hm-link b { font-size: 4.6cqw; font-weight: 600; letter-spacing: -.015em; }
.hm-link em { font-style: normal; font-size: 3.2cqw; color: #8e8e93; }
.hm-batt { display: inline-flex; align-items: center; gap: 1.2cqw; margin-top: 1.4cqw; font-style: normal; font-size: 3.4cqw; font-weight: 500; }
.hm-batt svg { width: 5.4cqw; height: 5.4cqw; fill: none; stroke: currentColor; stroke-width: 1.5; }
.hm-hero img { display: block; width: 76%; height: auto; margin: 0 auto; }
.hm-sheet { flex: 1; display: flex; flex-direction: column; justify-content: center; margin-top: 8cqw; padding: 5cqw 5cqw 41.6cqw; border-radius: 7cqw 7cqw 0 0; background: #fff; }
.hm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.hm-tile { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hm-tile > i { display: grid; place-items: center; width: 12.6cqw; height: 12.6cqw; margin-bottom: 2cqw; border-radius: 50%; background: #f5f5f7; color: #1d1d1f; }
.hm-tile svg { width: 6.2cqw; height: 6.2cqw; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hm-tile b { font-size: 3.8cqw; font-weight: 600; letter-spacing: -.01em; }
.hm-tile em { font-style: normal; font-size: 2.8cqw; line-height: 1.3; color: #8e8e93; }
.hm-tile.is-on > i { background: #0071e3; color: #fff; }
.hm-tile.is-rec > i { background: rgba(255, 59, 48, .12); color: #ff3b30; }
.hm-tabs { position: absolute; left: 0; right: 0; bottom: 23.6cqw; display: flex; justify-content: space-around; align-items: flex-end; padding-top: 2cqw; }
.hm-tabs span { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 1.1cqw; font-size: 3cqw; font-weight: 500; color: #8e8e93; }
.hm-tabs svg { width: 7.2cqw; height: 7.2cqw; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hm-tabs .is-on { color: #0071e3; }
.hm-tabs .aira-orb { width: 11cqw; height: 11cqw; }
.hm-rec {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
gap: 2.4cqw;
padding: 3.6cqw 5cqw 6.5cqw;
background: #000;
color: #fff;
}
.hm-recrow { display: flex; align-items: center; justify-content: space-between; }
.hm-recwave { display: flex; align-items: center; gap: 2.4cqw; font-size: 4cqw; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hm-recwave svg { width: 5.4cqw; height: 5.4cqw; fill: none; stroke: #ff3b30; stroke-width: 1.9; stroke-linecap: round; }
.hm-recright { display: flex; align-items: center; gap: 2.8cqw; }
.hm-recright em { font-style: normal; font-size: 3.6cqw; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.hm-stop { display: grid; place-items: center; width: 8.6cqw; height: 8.6cqw; border-radius: 50%; background: #fff; }
.hm-stop svg { width: 4.6cqw; height: 4.6cqw; fill: #ff3b30; stroke: none; }
.is-home::after { background: rgba(255, 255, 255, .5); }
.ag-screen.is-liveblk { padding-bottom: 30cqw; background: #000; color: #fff; }
.is-liveblk .as-status { filter: invert(1); }
.lvx-grab { align-self: center; width: 11cqw; height: 1cqw; border-radius: 999px; background: rgba(255, 255, 255, .32); }
.lvx-title { align-self: center; margin-top: 4cqw; font-size: 4.8cqw; font-weight: 600; letter-spacing: -.015em; }
.lvx-time { align-self: center; margin-top: 1cqw; font-size: 3.6cqw; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .5); }
.lvx-lines { margin-top: 6cqw; }
.lvx-lines p { margin: 0 0 3.6cqw; font-size: 4cqw; line-height: 1.45; letter-spacing: -.01em; color: rgba(255, 255, 255, .22); }
.lvx-lines p:nth-child(2) { color: rgba(255, 255, 255, .32); }
.lvx-lines p:nth-child(3) { color: rgba(255, 255, 255, .46); }
.lvx-lines .is-now { margin-bottom: 0; color: #fff; }
.lvx-lines .is-now em { font-style: normal; color: rgba(255, 255, 255, .42); }
.lvx-lines .is-now > i {
display: inline-block;
width: .6cqw;
height: 3.8cqw;
margin-left: .8cqw;
border-radius: .3cqw;
background: #0071e3;
vertical-align: -.5cqw;
}
.lvx-ctrls { display: flex; align-items: center; justify-content: center; gap: 6cqw; margin-top: auto; }
.lvx-shots { position: absolute; left: 5.5cqw; bottom: 29cqw; display: flex; }
.lvx-shots img { width: 6.4cqw; height: 6.4cqw; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 .55cqw #000; }
.lvx-shots img + img { margin-left: -3cqw; }
.lvx-ctrls > span:not(.lvx-shots) { display: grid; place-items: center; width: 13cqw; height: 13cqw; border-radius: 50%; background: rgba(255, 255, 255, .13); color: #fff; }
.lvx-ctrls > span.is-main { width: 16cqw; height: 16cqw; background: #fff; color: #1d1d1f; }
.lvx-ctrls svg { width: 6cqw; height: 6cqw; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lvx-ctrls .is-main svg { width: 7cqw; height: 7cqw; }
.lvx-conn { align-self: center; display: flex; align-items: center; gap: 1.8cqw; margin-top: 4cqw; font-size: 3.2cqw; font-weight: 600; color: #30d158; }
.lvx-conn > i { width: 2cqw; height: 2cqw; border-radius: 50%; background: currentColor; }
.lvx-conn b { font-weight: 600; color: rgba(255, 255, 255, .5); }
.as-nav { display: flex; align-items: center; justify-content: flex-end; gap: 2cqw; margin-top: .5cqw; }
.as-nav .as-sync { margin-right: auto; gap: 1.4cqw; padding: 0 3.2cqw 0 2.4cqw; }
.as-sync span { font-size: 3.7cqw; font-weight: 600; letter-spacing: -.01em; color: #1d1d1f; }
.as-nav + .as-title { margin-top: 6cqw; }
.as-view { display: inline-flex; align-items: center; gap: .6cqw; height: 10.5cqw; box-sizing: border-box; padding: 0 .9cqw; border-radius: 999px; background: #fff; box-shadow: 0 .8cqw 3.4cqw rgba(0, 0, 0, .1); }
.as-view i { display: grid; place-items: center; width: 8.7cqw; height: 8.7cqw; border-radius: 50%; color: #8e8e93; }
.as-view i.is-on { background: #f5f5f7; color: #1d1d1f; }
.as-view svg { width: 5.2cqw; height: 5.2cqw; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.as-seg { display: flex; padding: .7cqw; border-radius: 999px; background: rgba(118, 118, 128, .12); }
.as-seg span { flex: 1; padding: 1.5cqw 0; border-radius: 999px; text-align: center; font-size: 3.3cqw; font-weight: 500; }
.as-seg .is-on { background: #fff; box-shadow: 0 0 0 .15cqw rgba(0, 0, 0, .04), 0 .6cqw 2cqw rgba(0, 0, 0, .12); font-weight: 600; }
.as-graph { position: relative; flex: none; height: 110cqw; margin: 0 -5.5cqw; }
.as-peek { position: absolute; z-index: 4; left: 4.5cqw; right: 4.5cqw; bottom: 47cqw; display: flex; align-items: center; gap: 3cqw; padding: 2.6cqw 3.6cqw 2.6cqw 2.6cqw; border-radius: 5cqw; background: #fff; box-shadow: 0 0 0 .25cqw rgba(0, 0, 0, .04), 0 1.6cqw 5cqw rgba(0, 0, 0, .12); }
.as-peek img { flex: none; width: 11cqw; height: 11cqw; object-fit: cover; border-radius: 50%; }
.as-peek span { display: flex; flex-direction: column; gap: .3cqw; min-width: 0; }
.as-peek b { font-size: 3.9cqw; font-weight: 600; letter-spacing: -.01em; }
.as-peek em { display: flex; align-items: center; gap: .5cqw; font-style: normal; font-size: 3.3cqw; font-weight: 500; color: #0071e3; }
.as-peek svg { width: 3cqw; height: 3cqw; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.as-day { margin: 4cqw 0 1cqw; font-size: 3.4cqw; font-weight: 600; color: #8e8e93; }
.as-row { display: flex; align-items: center; gap: 3cqw; padding: 1.9cqw 0; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.as-row:has(+ .as-ask) { border-bottom: 0; }
.as-row img { width: 12cqw; height: 12cqw; object-fit: cover; border-radius: 2.6cqw; }
.as-more { display: grid; place-items: center; flex: none; width: 7.6cqw; height: 7.6cqw; margin-left: auto; color: #8e8e93; }
.as-more svg { width: 7.6cqw; height: 7.6cqw; fill: none; stroke: currentColor; stroke-width: 1.4; }
.as-row span, .as-act span { display: flex; flex-direction: column; min-width: 0; }
.as-row b { font-size: 4cqw; font-weight: 600; }
.as-row em, .as-act em { font-style: normal; font-size: 3.3cqw; color: #8e8e93; }
.as-shot { width: auto; height: 26cqw; margin: 3cqw -5.5cqw 0; object-fit: cover; border-radius: 0; }
.ag-phone .ag-screen.is-memory { padding-top: 12cqw; }
.as-mtitle { margin-top: 3.2cqw; font-size: 6.2cqw; line-height: 1.12; font-weight: 700; letter-spacing: -.02em; }
.as-meta { margin-top: 1.2cqw; font-size: 3.4cqw; color: #8e8e93; }
.as-people { display: flex; align-items: center; gap: 2.4cqw; margin-top: 2.6cqw; font-size: 3.4cqw; color: #6e6e73; }
.as-faces { display: flex; }
.as-faces img, .as-faces i { width: 8cqw; height: 8cqw; box-sizing: border-box; border-radius: 50%; border: .6cqw solid #fff; object-fit: cover; }
.as-faces img + img, .as-faces i { margin-left: -2.4cqw; }
.as-faces i { display: grid; place-items: center; background: #ececf0; font-style: normal; font-size: 2.8cqw; font-weight: 600; color: #6e6e73; }
.as-acts { margin-top: 3.4cqw; display: flex; flex-direction: column; gap: 1.5cqw; font-size: 3.5cqw; line-height: 1.32; }
.as-acts b { font-size: 3.2cqw; font-weight: 600; color: #8e8e93; }
.as-acts span { display: flex; gap: 2.2cqw; }
.as-acts i { flex: none; width: 4.4cqw; height: 4.4cqw; margin-top: .3cqw; border-radius: 50%; background: #30d158; position: relative; }
.as-acts i::after { content: ""; position: absolute; left: 1.55cqw; top: .85cqw; width: 1.1cqw; height: 2.1cqw; border: solid #fff; border-width: 0 .5cqw .5cqw 0; rotate: 45deg; }
.is-memory .as-sum { margin-top: 4cqw; padding: 0; border-radius: 0; background: none; font-size: 4.2cqw; line-height: 1.45; color: #1d1d1f; }
.is-memory .as-sum b { display: flex; align-items: baseline; justify-content: space-between; gap: 3cqw; margin-bottom: 1.6cqw; font-size: 3.4cqw; }
.as-full { display: inline-flex; align-items: center; gap: .6cqw; font-weight: 500; color: #0071e3; }
.as-full svg { width: 2.8cqw; height: 2.8cqw; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ag-phone.is-bare {
top: 50%;
translate: -50% -50%;
width: 86%;
height: auto;
aspect-ratio: auto;
border-radius: 0;
box-shadow: none;
}
.is-bare .ag-screen {
position: relative;
inset: auto;
padding: 4.5cqw 5.5cqw 6cqw;
border-radius: 6cqw;
background: #f5f5f7;
box-shadow: 0 0 0 .25cqw rgba(0, 0, 0, .04), 0 2.5cqw 7cqw rgba(0, 0, 0, .1);
}
.ag-phone.is-bare.is-full { top: 0; left: 0; width: 100%; height: 100%; translate: none; }
.is-full .ag-screen { min-height: 100%; padding: 4cqw 5.5cqw 4.5cqw; border-radius: 0; box-shadow: none; background: #fff; }
.is-bare .ag-screen::after { content: none; }
.as-back { display: flex; align-items: center; gap: .4cqw; margin-left: -1.8cqw; font-size: 4.2cqw; color: #0071e3; }
.as-back svg { width: 5.6cqw; height: 5.6cqw; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.is-settings .as-list { background: #fff; }
.as-list { padding: 0 3.5cqw; border-radius: 4cqw; background: #f5f5f7; }
.as-app { display: flex; align-items: center; gap: 3cqw; height: 13cqw; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.as-app:last-child { border-bottom: 0; }
.as-app img { width: 7cqw; height: 7cqw; object-fit: contain; }
.as-app span { flex: 1; font-size: 4cqw; }
.as-tog { position: relative; width: 10.5cqw; height: 6.4cqw; border-radius: 999px; background: #e5e5ea; }
.as-tog::after { content: ""; position: absolute; top: .5cqw; left: .5cqw; width: 5.4cqw; height: 5.4cqw; border-radius: 50%; background: #fff; box-shadow: 0 .4cqw 1cqw rgba(0, 0, 0, .18); }
.as-tog.is-on { background: #30d158; }
.as-tog.is-on::after { left: auto; right: .5cqw; }
.as-act { display: flex; align-items: center; gap: 2.6cqw; padding: 2.2cqw 2.6cqw; border-radius: 3cqw; background: #f5f5f7; }
.as-act img { width: 7cqw; height: 7cqw; object-fit: contain; }
.as-act b { font-size: 3.6cqw; font-weight: 600; }
.as-btns { display: flex; justify-content: flex-end; gap: 2cqw; margin-top: 3cqw; }
.as-btns span { padding: 1.8cqw 5cqw; border-radius: 999px; background: #f5f5f7; font-size: 3.8cqw; font-weight: 600; }
.as-btns .is-primary { background: #0071e3; color: #fff; }
.mc-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 3cqw; margin: 0 -5.5cqw; padding: 0 4.3cqw 3.2cqw; border-bottom: 1px solid rgba(16, 20, 26, .07); }
.mc-back { display: inline-flex; align-items: center; gap: .4cqw; margin-left: -1.4cqw; font-size: 3.8cqw; color: #0071e3; }
.mc-title { position: absolute; left: 50%; translate: -50% 0; font-size: 4cqw; font-weight: 600; letter-spacing: -.01em; }
.mc-back svg { width: 4.6cqw; height: 4.6cqw; }
.mc-back svg, .mc-tools svg { width: 4.8cqw; height: 4.8cqw; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mc-tools { display: inline-flex; align-items: center; gap: 3.7cqw; color: rgba(35, 35, 35, .5); }
.mc-avatar { width: 5.9cqw; height: 5.9cqw; border-radius: 50%; background: linear-gradient(135deg, #cdd8f6, #8c9dbd); }
.mc-thread { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 3.7cqw; padding: 5cqw 0 3cqw; }
.as-when { align-self: center; font-size: 3cqw; color: #8e8e93; }
.as-when b { font-weight: 600; }
.mc-you { align-self: flex-end; max-width: 80%; margin: 0; padding: 2.1cqw 4cqw; border-radius: 5.3cqw; background: #f5f5f7; font-size: 4cqw; line-height: 1.55; }
.mc-aira { align-self: stretch; font-size: 4cqw; line-height: 1.55; }
.mc-aira p { margin: 0; }
.aira-orb { --aira-top: #eef0f3; --aira-bottom: #d3d7de;
position: relative; display: inline-block; flex: none; vertical-align: middle;
width: 1.375rem; height: 1.375rem; border-radius: 50%;
background: url("assets/aira/aira-orb.webp?v=2") center / 100% 100% no-repeat;
filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .14)) drop-shadow(0 3px 6px rgba(0, 0, 0, .08)); }
.aira-orb canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.mc-title { display: inline-flex; align-items: center; gap: 2cqw; }
.mc-title .aira-orb { width: 7.6cqw; height: 7.6cqw; }
.mc-aira { position: relative; padding-left: 10.2cqw; }
.mc-aira > .aira-orb { position: absolute; left: 0; top: -.7cqw; width: 7.6cqw; height: 7.6cqw; }
.mc-aira > .as-recall, .mc-aira > .as-draft { margin-left: -10.2cqw; }
.mc-chips { display: flex; flex-wrap: wrap; gap: 1.6cqw; margin-top: 1.6cqw; }
.mc-chip { display: inline-flex; align-items: center; gap: 1.6cqw; padding: 1.1cqw 2.1cqw; border-radius: 1.6cqw; background: #f5f5f7; color: #3a3a3a; font-size: 3.2cqw; line-height: 1.2; white-space: nowrap; }
.mc-chip::before { content: ""; flex: none; width: 2.1cqw; height: 2.1cqw; border-radius: 50%; background: currentColor; }
.mc-thk { position: relative; padding-left: 10.2cqw; font-size: 3cqw; line-height: 1.3; color: #8e8e93; }
.mc-thk > .aira-orb { position: absolute; left: 1.4cqw; top: -.5cqw; width: 4.8cqw; height: 4.8cqw; }
.mc-thk-h { display: flex; align-items: center; gap: 1cqw; margin: 0; white-space: nowrap; }
.mc-thk-h b { font-weight: 600; color: #6e6e73; }
.mc-thk-h svg { flex: none; width: 3cqw; height: 3cqw; margin-right: 1.4cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mc-thk ul { display: grid; gap: .7cqw; margin: 1cqw 0 0; padding: 0; list-style: none; }
.mc-thk li { display: flex; align-items: center; gap: 1.8cqw; min-width: 0; }
.mc-thk li > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mc-thk li > img,
.mc-thk li > i { flex: none; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; object-fit: cover; }
.mc-thk li > img { opacity: .8; }
.mc-thk li > i { background: radial-gradient(circle at 34% 30%, #fff, #dfe3e9 55%, #b9c0ca); box-shadow: inset 0 0 0 1px rgba(16, 20, 26, .08); }
.mc-aira > .mc-foot { display: flex; align-items: center; gap: 2.1cqw; margin-top: 1.8cqw; font-size: 3.4cqw; line-height: 1.2; color: #6e6e73; }
.mc-foot svg { flex: none; width: 4cqw; height: 4cqw; fill: none; stroke: #a1a1a6; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mc-stack { display: inline-flex; }
.mc-stack > * { width: 4.2cqw; height: 4.2cqw; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 .45cqw #fff; }
.mc-stack > * + * { margin-left: -1.3cqw; }
.mc-stack > i { background: radial-gradient(circle at 34% 30%, #fff, #dfe3e9 55%, #b9c0ca); box-shadow: 0 0 0 .45cqw #fff, inset 0 0 0 1px rgba(16, 20, 26, .08); }
.mc-composer { display: flex; align-items: center; gap: 2.1cqw; min-height: 13.2cqw; box-sizing: border-box; padding: 1.8cqw 1.8cqw 1.8cqw 5.2cqw; border: 1px solid rgba(16, 20, 26, .12); border-radius: 3.7cqw; font-size: 4cqw; color: rgba(35, 35, 35, .64); }
.mc-send { display: grid; place-items: center; flex: none; width: 8.5cqw; height: 8.5cqw; margin-left: auto; border-radius: 50%; background: #1d1d1f; }
.mc-send svg { width: 4.3cqw; height: 4.3cqw; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.is-onphone .mc-bar { padding-top: 0; }
.is-onphone .mc-thread { gap: 1.9cqw; padding: 1.8cqw 0 0; }
.ag-screen.is-onphone { padding-bottom: 46cqw; }
.is-onphone .mc-composer { position: absolute; left: 5.5cqw; right: 5.5cqw; bottom: 29cqw; background: #fff; }
.as-recall { display: flex; flex-direction: column; gap: .8cqw; margin-top: 3.4cqw; padding: 2.2cqw 3cqw; border-radius: 3cqw; background: #f5f5f7; }
.as-recall-h { display: flex; align-items: center; gap: 1.6cqw; font-size: 3cqw; color: #8e8e93; }
.as-recall-h svg { flex: none; width: 3.8cqw; height: 3.8cqw; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.as-recall b { font-size: 3.6cqw; font-weight: 600; letter-spacing: -.01em; }
.as-draft { margin-top: 3.4cqw; padding: 2cqw 3cqw; border: 1px solid rgba(0, 0, 0, .1); border-radius: 3cqw; font-size: 3.4cqw; line-height: 1.4; }
.as-draft-h { display: flex; align-items: center; gap: 1.8cqw; margin-bottom: 1.2cqw; font-size: 3.2cqw; color: #8e8e93; }
.as-draft-h img { width: 4.4cqw; height: 4.4cqw; object-fit: contain; }
.as-draft b { display: block; margin-bottom: 1cqw; font-weight: 600; }
.as-draft p { margin: 0 0 .8cqw; }
.as-draft p:last-child { margin-bottom: 0; }
.as-menu { width: 66cqw; margin: 2.6cqw 0 2.6cqw auto; border-radius: 3.6cqw; background: #fff; overflow: hidden; box-shadow: 0 .4cqw 2cqw rgba(0, 0, 0, .10), 0 2.6cqw 8cqw rgba(0, 0, 0, .16); font-size: 4.1cqw; }
.as-mi { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; box-sizing: border-box; min-height: 11.2cqw; padding: 0 4cqw; }
.as-mi + .as-mi { border-top: 1px solid rgba(0, 0, 0, .07); }
.as-mi svg { flex: none; width: 5.1cqw; height: 5.1cqw; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.as-mi.is-del { color: #ff3b30; }
.as-end { display: inline-flex; align-items: center; gap: 2.2cqw; }
.as-end svg:first-child { width: 3.4cqw; height: 3.4cqw; color: #8e8e93; stroke-width: 2.2; }
.as-sheet {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 53%;
padding: 2.4cqw 5.5cqw 0;
border-radius: 7cqw 7cqw 0 0;
background: #fff;
box-shadow: 0 0 0 200cqw rgba(0, 0, 0, .22);
}
.as-sheet-grab { width: 10cqw; height: 1.2cqw; margin: 0 auto 3cqw; border-radius: 1cqw; background: #d1d1d6; }
.as-sheet-h { margin-bottom: 3cqw; text-align: center; font-size: 4.8cqw; font-weight: 600; }
.as-inc { display: flex; align-items: center; justify-content: space-between; height: 10cqw; border-bottom: 1px solid rgba(0, 0, 0, .06); font-size: 3.8cqw; }
.as-check { position: relative; width: 5.4cqw; height: 5.4cqw; box-sizing: border-box; border: .5cqw solid #c7c7cc; border-radius: 50%; }
.as-check.is-on { border-color: #0071e3; background: #0071e3; }
.as-check.is-on::after { content: ""; position: absolute; left: 1.45cqw; top: .6cqw; width: 1.4cqw; height: 2.6cqw; border: solid #fff; border-width: 0 .6cqw .6cqw 0; rotate: 45deg; }
.as-cta { margin-top: 4cqw; padding: 3.2cqw; border-radius: 3.4cqw; background: #0071e3; color: #fff; text-align: center; font-size: 4cqw; font-weight: 600; }
.is-menu .as-title,
.is-menu .as-day,
.is-menu .as-row.is-dim,
.is-menu .as-ask { opacity: .32; }
.is-menu .as-row.is-held { border-bottom: 0; }
.is-menu .as-more.is-on { color: #1d1d1f; }
.is-sheet .as-ask { display: none; }
.as-sum { padding: 3cqw; border-radius: 3cqw; background: #f5f5f7; font-size: 3.6cqw; line-height: 1.4; }
.as-sum b { display: block; margin-bottom: 1cqw; font-size: 3.2cqw; font-weight: 600; color: #8e8e93; }
.ag-phone.is-low { top: 32%; }
.ag-screen.is-lock {
padding-bottom: 108cqw;
background: #93a3b5 url("assets/app/lock-glass.webp") center / cover no-repeat;
}
.is-lock .as-bar { justify-content: flex-end; }
.is-lock .as-status { filter: invert(1); }
.lk-lock { display: block; width: 5.6cqw; height: 5.6cqw; margin: auto auto 2.4cqw; color: #fff; }
.lk-lock svg { width: 100%; height: 100%; fill: currentColor; stroke-linecap: round; }
.lk-time { text-align: center; font-size: 22cqw; font-weight: 500; line-height: 1.02; letter-spacing: -.025em; }
.lk-date { text-align: center; margin-top: 1.4cqw; font-size: 4.4cqw; font-weight: 600; letter-spacing: -.01em; }
.lk-lock, .lk-time, .lk-date { text-shadow: 0 .4cqw 2cqw rgba(38, 24, 10, .34); }
.lk-date, .lk-time { color: #fff; }
.lk-note {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 2.8cqw;
margin-top: 7cqw;
padding: 2.6cqw 3.2cqw 3.4cqw;
border-radius: 3.8cqw;
background: rgba(255, 255, 255, .72);
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
color: #1d1d1f;
}
.lk-head { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-bottom: 1.4cqw; font-size: 2.9cqw; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6c6c70; }
.lk-head em { font-style: normal; letter-spacing: 0; text-transform: none; font-weight: 400; }
.lk-icon { grid-row: 2 / span 2; display: grid; place-items: center; width: 9.4cqw; height: 9.4cqw; border-radius: 2.7cqw; background: #fff; box-shadow: inset 0 0 0 .28cqw rgba(0, 0, 0, .08); }
.lk-icon svg { width: 6.038cqw; fill: #1d1d1f; }
.lk-note b { align-self: end; font-size: 3.8cqw; font-weight: 600; line-height: 1.34; }
.lk-note p { margin: 0; font-size: 3.8cqw; line-height: 1.34; }
@media (max-width: 66.75rem) {
.ag-item { flex-basis: 344px; }
.ag-card { height: 536px; }
}
@media (max-width: 48rem) {
.ag-item { flex-basis: 290px; }
.ag-card { height: 470px; }
.ag-phone { width: 76%; }
.ag-item:first-child .ag-phone { width: 68%; }
.ag-cap { padding-top: 24px; font-size: 14px; line-height: 20px; letter-spacing: -.016em; }
.ag-nav { margin-top: 24px; }
}
.section-steps + .reel-wrap { margin-top: clamp(1.625rem, 5.975vw + 2.5px, 5rem); }
.section-aira { background: #fff; padding-block: clamp(5.25rem, 8.75vw, 7rem) 0; }
.ai-head { width: min(100% - 2 * var(--gutter), 56rem); margin: 0 auto; text-align: center; }
.ai-orb { position: relative; width: clamp(120px, 13vw, 160px); aspect-ratio: 1; margin: 0 auto; border-radius: 50%;
background: url("assets/aira/aira-orb-hero.webp") center / 100% 100% no-repeat; }
.ai-orb canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 50%; }
.ai-title { margin: 30px 0 0; font-size: 80px; color: #1d1d1f; text-wrap: balance; }
.ai-sub { margin: 18px auto 0; max-width: 30em; font-size: 24px; font-weight: 400; line-height: calc(1em + 8px); letter-spacing: var(--heading-tracking); color: #6e6e73; text-wrap: balance; }
.section-aira + .section-voice { padding-top: 224px; }
@media (max-width: 1068px) {
.ai-title { font-size: 64px; }
.ai-sub { font-size: 21px; }
}
@media (max-width: 734px) {
.ai-title { margin-top: 24px; font-size: 44px; }
.ai-sub { margin-top: 12px; max-width: 19em; font-size: 17px; }
.section-aira + .section-voice { padding-top: 160px; }
.section-aira {
display: flex;
flex-direction: column;
justify-content: center;
min-height: calc(100svh - var(--header-height));
padding-block: 0;
}
.ai-orb { width: 148px; }
.section-aira + .section-voice { padding-top: 40px; }
}
.section-voice { background: #fff; padding-block: clamp(5.5rem, 11vw, 9rem) clamp(4rem, 9vw, 7.5rem); }
.vo-head { width: min(100% - 2 * var(--gutter), 72.5rem); margin: 0 auto clamp(2rem, 4.5vw, 3.5rem); text-align: center; }
.vo-title { margin: 0; font-size: 80px; color: #1d1d1f; text-wrap: balance; }
.vo-l { display: inline-block; text-wrap: balance; }
.vo-l + .vo-l { color: #0071e3; }
@media (max-width: 1068px) {
.vo-title { font-size: 64px; }
}
@media (max-width: 734px) {
.vo-title { font-size: 44px; }
}
.vo-flow { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: 36px; }
.vo-step { position: relative; display: flex; flex-direction: column; align-items: center; }
.vo-glasses { display: block; width: 228px; height: auto; }
.vo-cap { position: absolute; top: 50%; width: 14rem; transform: translateY(-50%); }
.vo-cap-l { right: calc(100% + 36px); text-align: right; }
.vo-cap-r { left: calc(100% + 36px); text-align: left; }
.vo-cap h3 { font-size: 17px; color: #1d1d1f; }
.vo-cap p { margin-top: 4px; font-size: 15px; line-height: 21px; color: #6e6e73; text-wrap: balance; }
.vo-cap.vo-cap-tag { margin: 0; font-size: 17px; line-height: 21px; font-weight: 400; letter-spacing: -.022em; color: #6e6e73; }
.vo-say { display: grid; justify-items: center; align-items: center; max-width: 36rem; margin-top: 8px; }
.vo-say > span { grid-area: 1 / 1; display: flex; align-items: flex-start; gap: 9px; padding: 10px 18px 10px 15px; border-radius: 19px; background: #ececee; font-size: 15px; line-height: 1.4; color: #1d1d1f; text-align: left; text-wrap: balance; opacity: 0; transform: translateY(6px); transition: opacity .25s var(--ease), transform .3s var(--ease-out); }
.vo-say > span b { font-weight: 600; }
.vo-say > span.is-on { opacity: 1; transform: none; }
.vo-say .vo-wave { margin-top: .14em; }
.vo-flow.is-talking .vo-say .is-on .vo-wave rect { animation: voTalk .22s ease-in-out infinite alternate; }
.vo-flow.is-talking .vo-say .is-on .vo-wave rect:nth-child(2n) { animation-delay: .11s; }
.vo-flow.is-talking .vo-say .is-on .vo-wave rect:nth-child(3n) { animation-delay: .05s; }
.vo-seg { position: relative; display: block; width: 1px; height: 30px; margin: 7px 0; }
.vo-seg::before { content: ""; position: absolute; inset: 0; background: #d2d2d7; transform-origin: 50% 0; }
.vo-know { width: 290px; height: 58px; }
.vo-know > img { position: absolute; left: calc(50% + var(--x)); top: 50%; width: calc(var(--d) / var(--f, .72)); height: auto; border-radius: 50%; transform: translate(-50%, -50%); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .16)); }
.vo-dot { position: absolute; left: 50%; top: 0; display: block; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #0071e3; opacity: 0; pointer-events: none; z-index: 3; }
.vo-flow.is-armed .vo-seg::before { transform: scaleY(0); }
.vo-flow.is-armed .vo-seg.is-on::before { transform: none; transition: transform .34s cubic-bezier(.45, 0, .2, 1); }
.vo-flow.is-armed .vo-know > img { opacity: .28; transform: translate(-50%, -50%) scale(.86); filter: grayscale(1) drop-shadow(0 3px 6px rgba(0, 0, 0, .1)); transition: opacity .35s var(--ease), transform .5s var(--ease-out), filter .35s var(--ease); }
.vo-flow.is-armed .vo-know.is-on > img { opacity: 1; transform: translate(-50%, -50%); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .16)); }
.vo-flow.is-armed .vo-know.is-on > img:nth-of-type(3), .vo-flow.is-armed .vo-know.is-on > img:nth-of-type(4) { transition-delay: .08s; }
.vo-flow.is-armed .vo-know.is-on > img:nth-of-type(5), .vo-flow.is-armed .vo-know.is-on > img:nth-of-type(6) { transition-delay: .16s; }
.vo-apps { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 46rem; margin: 0; padding: 0; }
.vo-apps li { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 6px 14px rgba(0, 0, 0, .06); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease), opacity .3s var(--ease); }
.vo-apps img { width: 32px; height: 32px; object-fit: contain; }
.vo-apps li[data-app="gmail"] { --c: #ea4335; }
.vo-apps li[data-app="calendar"] { --c: #1a73e8; }
.vo-apps li[data-app="linkedin"] { --c: #0a66c2; }
.vo-apps.is-acting li { opacity: .4; }
.vo-apps.is-acting li.is-on { opacity: 1; transform: translateY(-4px) scale(1.08); box-shadow: 0 0 0 2px var(--c, #0071e3), 0 12px 24px -8px rgba(0, 0, 0, .2); }
.vo-apps li::after {
content: "";
position: absolute;
top: -6px;
right: -6px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #34c759 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 6.3l1.9 1.9 3.8-4.2' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
box-shadow: 0 0 0 2px #fff;
opacity: 0;
transform: scale(.6);
transition: opacity .2s var(--ease), transform .25s var(--ease-out);
}
.vo-apps li.is-done::after { opacity: 1; transform: none; }
@media (max-width: 1068px) {
.vo-cap { width: 13rem; }
}
@media (max-width: 48rem) {
.vo-flow { margin-top: 32px; }
.vo-cap, .vo-cap-l, .vo-cap-r { position: static; width: auto; max-width: 17em; margin: 14px auto 0; transform: none; text-align: center; }
.vo-know { height: auto; padding-top: 58px; }
.vo-know > img { top: 29px; }
.vo-say { max-width: 19.5rem; margin-top: 16px; }
.vo-say > span { padding: 9px 15px; font-size: 14px; }
.vo-cap.vo-cap-tag { margin-top: 4px; }
.vo-know + .vo-seg { height: 40px; margin: 14px 0 12px; }
.vo-apps { gap: 14px; max-width: 336px; }
.vo-apps li { width: 54px; height: 54px; border-radius: 13.5px; }
.vo-apps img { width: 30px; height: 30px; }
.vo-apps li::after { width: 16px; height: 16px; top: -5px; right: -5px; background-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
.vo-say > span, .vo-apps li, .vo-apps li::after { transition: none; }
}
.vo-scrolly { position: relative; width: min(100% - 2 * var(--gutter), 56rem); margin: 0 auto; }
.vo-scrolly.is-scrolly .vo-pin { position: sticky; top: var(--vo-top, calc(var(--header-height) + 20px)); }
.vo-stage { list-style: none; display: grid; gap: 20px; margin: 0; padding: 0; }
.vo-scrolly.is-scrolly .vo-stage { display: block; position: relative; height: calc(var(--vo-h) * var(--vo-k, 1)); }
.vo-scrolly.is-scrolly .vo-tile { position: absolute; left: 0; right: 0; top: 0; height: var(--vo-h); box-sizing: border-box; transform: scale(var(--vo-k, 1)); transform-origin: 50% 0; will-change: transform; }
.vo-scrolly.is-scrolly .vo-tile + .vo-tile { translate: 0 var(--vo-y, 100vh); }
.vo-scrolly.is-scrolly.is-css { view-timeline-name: --vo; view-timeline-axis: block; view-timeline-inset: var(--vo-top, 0px) 0px; }
.vo-scrolly.is-scrolly.is-css .vo-tile + .vo-tile {
animation-name: vo-rise;
animation-duration: 1ms;
animation-timing-function: linear(0, .155, .3, .435, .558, .67, .769, .854, .924, .975, 1);
animation-fill-mode: both;
animation-timeline: --vo;
}
@keyframes vo-rise { from { translate: 0 var(--vo-y, 100vh); } to { translate: 0 0; } }
.vo-scrolly.vo-fade .vo-tile::after {
content: "";
position: absolute;
inset: 0;
background: #fff;
opacity: var(--vo-dim, 0);
pointer-events: none;
}
.vo-scrolly.vo-fade .vo-tile:last-child::after { opacity: 0; }
.vo-snap { display: none; }
html:has(.vo-scrolly.vo-snaps) { scroll-snap-type: y proximity; }
.vo-scrolly.vo-snaps .vo-snap {
display: block;
position: absolute;
left: 0;
width: 1px;
height: 1px;
pointer-events: none;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.vo-tile {
--pk-bar: 2.875rem;
--pk-chat: 44%;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 540px;
overflow: hidden;
border: 1px solid rgba(16, 20, 26, .1);
border-radius: clamp(.75rem, 1.1vw, 1rem);
background: #fbfbfb;
color: #1d1d1f;
font-size: 15px;
line-height: 1.47;
letter-spacing: -.011em;
}
.vo-tile p { margin: 0; }
.vo-tile .pk-search { width: auto; min-width: 9.5rem; }
.vo-body { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); min-height: 0; }
.vo-chat { display: flex; flex-direction: column; min-width: 0; }
.vo-thread { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; padding: 18px 22px 12px 20px; }
.vo-you { align-self: flex-end; display: flex; align-items: flex-start; gap: 9px; max-width: 90%; padding: 9px 15px; border-radius: 18px; background: #f0f0f0; }
.vo-you b { font-weight: 600; }
.vo-you > span { text-wrap: pretty; }
.vo-wave { flex: none; width: 22px; height: 16px; margin-top: .2em; fill: currentColor; opacity: .55; }
.vo-you .vo-wave { width: 20px; height: 15px; margin-top: .22em; }
.vo-anim .vo-you,
.vo-anim .vo-thk,
.vo-anim .vo-mems li,
.vo-anim .vo-ai,
.vo-anim .vo-card,
.vo-anim .vo-note {
opacity: 0;
transform: translateY(10px);
transition: opacity .3s var(--ease), transform .4s var(--ease-out);
}
.vo-anim .vo-doc { transform: translateX(1.5rem); }
.vo-anim .is-play .vo-you,
.vo-anim .is-play .vo-thk,
.vo-anim .is-play .vo-mems li,
.vo-anim .is-play .vo-ai,
.vo-anim .is-play .vo-card,
.vo-anim .is-play .vo-note { opacity: 1; transform: none; }
.vo-anim .is-play .vo-thk { transition-delay: .4s; }
.vo-anim .is-play .vo-mems li:nth-child(1) { transition-delay: .65s; }
.vo-anim .is-play .vo-mems li:nth-child(2) { transition-delay: .9s; }
.vo-anim .is-play .vo-mems li:nth-child(3) { transition-delay: 1.15s; }
.vo-anim .is-play .vo-ai { transition-delay: 1.5s; }
.vo-anim .is-play .vo-card { transition-delay: 1.8s; }
.vo-anim .is-play .vo-note { transition-delay: 2.1s; }
.vo-anim .vo-typed.is-play :is(.vo-you, .vo-thk, .vo-mems li, .vo-ai, .vo-card) { opacity: 0; transform: translateY(10px); transition-delay: 0s; }
.vo-anim .vo-typed.is-play .vo-doc { transform: translateX(1.5rem); }
.vo-anim .vo-typed.is-play.is-sent .vo-you,
.vo-anim .vo-typed.is-play.is-thinking .vo-thk,
.vo-anim .vo-typed.is-play.is-thinking .vo-mems li,
.vo-anim .vo-typed.is-play.is-answering .vo-ai,
.vo-anim .vo-typed.is-play.is-drafting .vo-card { opacity: 1; transform: none; }
.vo-anim .vo-typed.is-play.is-thinking .vo-mems li:nth-child(1) { transition-delay: .35s; }
.vo-anim .vo-typed.is-play.is-thinking .vo-mems li:nth-child(2) { transition-delay: .6s; }
.vo-anim .vo-typed.is-play.is-thinking .vo-mems li:nth-child(3) { transition-delay: .85s; }
.vo-anim .vo-typed.is-play .vo-wave rect { animation: none; }
.vo-anim .vo-typed.is-thinking:not(.is-answering) .vo-thk-h > b {
background: linear-gradient(90deg, #6e6e73 0%, #6e6e73 35%, #d2d2d7 50%, #6e6e73 65%, #6e6e73 100%) 0 0 / 250% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: voShimmer 1.4s linear infinite;
}
@keyframes voShimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.vo-w { opacity: 0; transition: opacity .22s var(--ease); }
.vo-w.is-in { opacity: 1; }
.vo-anim .vo-typed.is-play .vo-foot { opacity: 0; transition: opacity .3s var(--ease); }
.vo-anim .vo-typed.is-play.is-drafted .vo-foot { opacity: 1; }
.vo-tile .mem-typed { white-space: normal; overflow: visible; line-height: 1.4; }
.vo-tile .mem-composer.is-live .mem-typed::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: #1d1d1f; animation: psCaret 1.05s steps(1, end) infinite; }
.vo-tile .mem-send { transition: background-color .2s var(--ease), transform .2s var(--ease-out); }
.vo-tile .mem-composer.is-sending .mem-send { transform: scale(.86); }
.vo-anim .vo-typed.is-play :is(.vo-ev, .vo-img) { opacity: 0; transform: translateY(8px) scale(.97); transition: opacity .35s var(--ease), transform .5s var(--ease-out); }
.vo-anim .vo-typed.is-play.is-drafted :is(.vo-ev, .vo-img) { opacity: 1; transform: none; }
.vo-wave rect { transform-box: fill-box; transform-origin: 50% 50%; }
.vo-anim .is-play .vo-wave rect { animation: voTalk .2s ease-in-out .1s 4 alternate; }
.vo-anim .is-play .vo-wave rect:nth-child(2n) { animation-delay: .17s; }
.vo-anim .is-play .vo-wave rect:nth-child(3n) { animation-delay: .03s; }
@keyframes voTalk { to { transform: scaleY(.4); } }
.vo-thk { position: relative; padding-left: 38px; font-size: 14px; line-height: 1.38; color: #8e8e93; }
.vo-thk > .aira-orb { position: absolute; left: 1px; top: -3px; width: 24px; height: 24px; }
.vo-thk-h { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; }
.vo-thk-h > b { font-weight: 600; color: #6e6e73; }
.vo-thk-h svg { width: 14px; height: 14px; margin-right: 8px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vo-thk-h + .vo-mems { margin-top: 6px; }
.vo-mems { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.vo-mems li { display: flex; align-items: center; gap: 10px; }
.vo-mems li > i,
.vo-mems li > img { flex: none; width: 18px; height: 18px; }
.vo-mems li > i { border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff, #dfe3e9 55%, #b9c0ca); box-shadow: inset 0 0 0 1px rgba(16, 20, 26, .08); }
.vo-mems li > img { object-fit: contain; }
.vo-mems li > img.is-mem { border-radius: 50%; object-fit: cover; opacity: .8; }
.vo-mems li b { font-weight: 500; color: #6e6e73; }
.vo-ai { position: relative; padding-left: 38px; }
.vo-ai > .aira-orb { position: absolute; left: 0; top: -3px; width: 28px; height: 28px; }
.vo-pane { min-width: 0; padding: .75rem; border-top-left-radius: .75rem; background: radial-gradient(120% 90% at 50% 38%, #f2f3f2, #e3e5e4 72%); box-shadow: inset 1px 1px 0 rgba(16, 20, 26, .04); }
.vo-doc { padding: 16px 20px; border-radius: .875rem; background: #fff; box-shadow: 0 0 0 1px rgba(16, 20, 26, .05), 0 14px 36px -10px rgba(16, 20, 26, .18); }
.vo-doc-h { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.3; color: #8e8e93; }
.vo-doc-h img { flex: none; width: 18px; height: 18px; object-fit: contain; }
.vo-doc-h b { font-weight: 600; color: var(--app, #1d1d1f); }
.vo-doc-h b + span::before { content: "\00b7"; margin-right: 8px; }
.vo-doc-b { margin-top: 12px; }
.vo-subj { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.vo-tile .vo-q { display: flex; gap: 8px; margin-top: 2px; color: #8e8e93; }
.vo-q b { flex: none; font-weight: 600; color: #6e6e73; }
.vo-re { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, .08); color: #424245; }
.vo-tile .vo-re p + p { margin-top: 4px; }
.vo-tile .vo-re .vo-to + p { margin-top: 8px; }
.vo-to { color: #8e8e93; }
.vo-img { display: block; width: 100%; height: 150px; margin-top: 12px; border-radius: 8px; object-fit: cover; object-position: 50% 45%; }
.vo-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 8px; margin-top: 14px; }
.vo-tile .vo-foot .vo-note { flex: 1 0 auto; min-width: min(max-content, 100%); margin-right: auto; font-size: 13px; line-height: 1.3; color: #8e8e93; }
.vo-btns { display: flex; gap: 8px; }
.vo-btns span { padding: 6px 18px; border-radius: 999px; background: #f0f0f2; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.vo-btns .is-pri { background: #0071e3; color: #fff; }
.vo-day { --hr: 56px; position: relative; padding-top: 10px; }
.vo-hours { list-style: none; margin: 0; padding: 0; }
.vo-hours li { position: relative; height: var(--hr); }
.vo-hours li:last-child { height: 12px; }
.vo-hours time { position: absolute; left: 0; top: -.62em; font-size: 11.5px; line-height: 1.2; color: #70757a; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.vo-hours li::after { content: ""; position: absolute; left: 46px; right: 0; top: 0; height: 1px; background: #e3e3e6; }
.vo-ev { position: absolute; left: 50px; right: 6px; top: calc(10px + 2 * var(--hr) + 1px); height: calc(var(--hr) / 2 - 2px);
display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 10px; border-radius: 6px; background: #1a73e8; color: #fff;
font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; box-shadow: 0 6px 16px -8px rgba(26, 115, 232, .75); }
.vo-ev b { font-weight: 600; }
.vo-ev span { opacity: .92; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 48.0625rem) and (max-height: 760px) {
.vo-tile { min-height: 474px; }
.vo-thread { gap: 12px; padding: 16px 20px 10px 18px; }
.vo-doc { padding: 14px 18px; }
.vo-img { height: 128px; }
}
@media (max-width: 64rem) and (min-width: 48.0625rem) {
.vo-tile { --pk-chat: 50%; }
.vo-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 64rem) {
.vo-day { --hr: 70px; }
.vo-hours li:first-child,
.vo-hours li:last-child { display: none; }
.vo-hours li:nth-last-child(2) { height: 12px; }
.vo-ev { top: calc(10px + var(--hr) + 1px); flex-direction: column; align-items: stretch; justify-content: center; gap: 1px; font-size: 12.5px; white-space: nowrap; }
.vo-ev b, .vo-ev span { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 48rem) {
.vo-tile { --pk-bar: 2.75rem; min-height: 0; border-radius: 1rem; font-size: 14.5px; }
.vo-tile .pk-search { min-width: 0; }
.vo-body { display: flex; flex-direction: column; }
.vo-chat { display: contents; }
.vo-thread { order: 1; flex: none; gap: 12px; padding: 12px 14px 0; }
.vo-pane { order: 2; flex: 1 1 auto; padding: 10px .625rem .625rem; border-radius: 0; background: none; box-shadow: none; }
.vo-tile .mem-composer { order: 3; }
.vo-you { max-width: 88%; padding: 8px 13px; border-radius: 17px; }
.vo-you .vo-wave { width: 18px; height: 13px; }
.vo-thk, .vo-ai { padding-left: 34px; }
.vo-thk { font-size: 13px; }
.vo-thk > .aira-orb { width: 22px; height: 22px; }
.vo-ai > .aira-orb { width: 26px; height: 26px; }
.vo-mems { gap: 2px; }
.vo-doc { padding: 12px 13px; border-radius: .75rem; box-shadow: 0 0 0 1px rgba(16, 20, 26, .1); font-size: 13.5px; line-height: 1.42; }
.vo-doc-h { font-size: 12.5px; }
.vo-doc-b { margin-top: 8px; }
.vo-subj { font-size: 14.5px; }
.vo-re { margin-top: 8px; padding-top: 8px; }
.vo-tile .vo-re p + p { margin-top: 2px; }
.vo-tile .vo-re .vo-to + p { margin-top: 5px; }
.vo-img { height: 104px; margin-top: 10px; }
.vo-foot { margin-top: 10px; }
.vo-tile .vo-foot .vo-note { font-size: 12px; }
.vo-btns span { padding: 6px 16px; font-size: 13.5px; }
.vo-ev { font-size: 12px; padding: 0 8px; }
}
.section-voice + .reel-wrap { margin-top: clamp(1.625rem, 5.975vw + 2.5px, 5rem); }
.reel-wrap + .section-app { margin-top: clamp(4.5rem, 10.2vw, 9.2rem); }
.section-ask {
display: flex;
flex-direction: column;
justify-content: center;
min-height: min(100svh - var(--header-height), 38rem);
padding-block: clamp(1.25rem, 4vw, 2.25rem);
background: #fff;
color: #1d1d1f;
}
.section-voice + .section-ask,
.section-why + .section-ask { margin-top: clamp(1.625rem, 5.975vw + 2.5px, 5rem); }
.section-ask + .section-app { margin-top: clamp(4.5rem, 10.2vw, 9.2rem); }
.ak-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; column-gap: 64px;
width: min(100% - 2 * var(--gutter), 1100px); margin: 0 auto; }
.ak-h { font-size: 48px; color: #1d1d1f; text-wrap: balance; }
.ak-more { margin-top: 32px; }
.ak-stage { position: relative; padding: 30px 40px 34px; border-radius: 28px; background: #f5f5f7; }
.ak-thread { display: flex; flex-direction: column; }
.ak-meta { display: flex; flex-direction: column; align-items: center; gap: 1px; margin: 0 0 20px;
font-size: 12px; line-height: 16px; letter-spacing: -.01em; color: #86868b; }
.ak-meta b { font-weight: 600; }
.ak-bub { position: relative; width: fit-content; padding: 11px 18px 13px 16px; border-radius: 22px; will-change: transform, opacity; }
.ak-bub.is-you { align-self: flex-end; max-width: min(86%, 480px); background: #0071e3; color: #fff; transform-origin: 100% 100%; }
.ak-bub.is-aira { justify-self: start; max-width: 100%; background: #fff; color: #1d1d1f; transform-origin: 0 0; }
.ak-row { display: flex; align-items: center; height: 26px; }
.ak-glyph { flex: none; width: 18px; height: 18px; margin-right: 11px; fill: currentColor; transform-origin: 50% 60%; }
.ak-glyph .st { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.ak-glyph.is-o1 { width: 32px; height: 14px; margin: 0 9px 0 -3px; }
.ak-glyph.is-o1 .st { stroke-width: 1.5; transform-box: fill-box; }
.ak-bars { display: flex; align-items: center; gap: 2px; height: 26px; }
.ak-bars i { flex: none; width: 3px; border-radius: 1.5px; background: currentColor;
height: calc(3px + (var(--v) * var(--wh, 24px) - 3px) * var(--k, 1));
opacity: calc(var(--lo) + (1 - var(--lo)) * var(--k, 1)); }
.is-you .ak-bars { --lo: .42; }
.is-aira .ak-bars { --lo: .2; color: #3a3a3c; }
.ak-said { display: grid; margin: 6px 0 0; font-size: 17px; line-height: 23px; letter-spacing: -.022em; }
.ak-said > .ak-words,
.ak-said > .ak-voice { grid-area: 1 / 1; min-width: 0; }
.ak-said.is-saying > .ak-words { visibility: hidden; }
.ak-voice span { opacity: var(--k, 1); filter: blur(calc((1 - var(--k, 1)) * 3px)); }
.is-aira .ak-said b { font-weight: 600; }
.ak-aira { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; margin-top: 22px; }
.ak-orb { grid-row: 1; grid-column: 1; align-self: start; display: block; width: 40px; height: 40px;
--aira-top: #f3f4f6; --aira-bottom: #c8ccd3; filter: none; }
.ak-card { --ak-r: 18px; grid-row: 1; grid-column: 2; position: relative; min-width: 0; }
.ak-skin { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: var(--ak-r); background: #fff; }
.ak-card-in { position: relative; padding: 6px 8px 8px; }
.ak-sh { display: grid; align-items: center; height: 30px; margin: 0; padding: 0 10px;
font-size: 14px; line-height: 20px; letter-spacing: -.01em; }
.ak-sh > span { grid-area: 1 / 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-sh-s { opacity: 0; color: #86868b;
background: linear-gradient(90deg, #86868b 0%, #86868b 40%, #d2d2d7 50%, #86868b 60%, #86868b 100%) 0 0 / 300% 100%;
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ak-sh-f { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #1d1d1f; }
.ak-ok { flex: none; width: 15px; height: 15px; border-radius: 50%; background: #34c759 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 6.3l1.9 1.9 3.8-4.2' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.ak-mems { position: relative; margin: 0; padding: 0; list-style: none; }
.ak-mems li { position: relative; display: grid; grid-template-columns: 15px minmax(0, 1fr) auto; grid-template-rows: 30px; grid-auto-rows: auto;
align-items: center; column-gap: 10px; padding: 0 10px; border-radius: 10px;
font-size: 14px; line-height: 20px; letter-spacing: -.01em; color: #1d1d1f; }
.ak-mems li:not(.is-found) { --d: 1; }
.ak-dotm { position: relative; width: 15px; height: 15px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fff 0, #f2f4f7 22%, #d6dbe2 58%, #aab3bf 100%);
box-shadow: inset 0 0 0 1px rgba(16, 20, 26, .1), 0 1px 1.5px rgba(16, 20, 26, .12); }
.ak-mn { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: calc(1 - .58 * var(--d, 0)); }
.ak-md { font-size: 13px; color: #86868b; white-space: nowrap; font-variant-numeric: tabular-nums; opacity: calc(1 - .5 * var(--d, 0)); }
.ak-mems li.is-found { --lit: 1; padding-bottom: 8px; background: rgba(0, 113, 227, .09); }
.ak-mems li.is-found .ak-dotm::after { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: var(--lit);
background: radial-gradient(circle at 35% 30%, #cfe6ff 0, #5aa8f8 26%, #0071e3 62%, #0052a8 100%); }
.ak-mems li.is-found .ak-md { color: #0071e3; color: color-mix(in srgb, #0071e3 calc(var(--lit) * 100%), #86868b); }
.ak-quote { grid-column: 2 / -1; margin: 0; padding-top: 1px; font-size: 14px; line-height: 19px; letter-spacing: -.012em; color: #1d1d1f; }
.ak-quote b { font-weight: 600; }
.ak-who { margin-right: 3px; font-weight: 600; color: #0071e3; }
.ak-scan { position: absolute; left: 0; right: 0; top: 0; height: 30px; border-radius: 10px; pointer-events: none; }
.ak-stage.is-armed .ak-mems li.is-found { background: transparent; }
.ak-aira .ak-bub { grid-row: 2; grid-column: 2; margin-top: 10px; }
@media (min-width: 66.8125rem) and (max-height: 760px) {
.ak-h { font-size: 44px; }
.ak-stage { padding: 18px 28px 20px; }
.ak-meta { margin-bottom: 10px; }
.ak-aira { margin-top: 14px; }
.ak-sh { height: 28px; }
.ak-mems li { grid-template-rows: 28px; }
.ak-scan { height: 28px; }
.ak-quote { font-size: 13.5px; line-height: 18px; }
.ak-aira .ak-bub { margin-top: 8px; }
}
@media (min-width: 66.8125rem) and (max-height: 640px) {
.section-ask { padding-block: 12px; }
}
@media (min-width: 66.8125rem) and (min-height: 761px) {
.ak-stage { padding: 36px 44px 40px; }
.ak-meta { margin-bottom: 24px; }
.ak-aira { margin-top: 28px; }
.ak-aira .ak-bub { margin-top: 12px; }
}
@media (max-width: 66.75rem) {
.ak-wrap { grid-template-columns: minmax(0, 1fr); width: min(100% - 2 * var(--gutter), 680px); }
.ak-copy { display: contents; }
.ak-h { order: 0; font-size: 40px; text-align: center; }
.ak-stage { order: 1; margin-top: 32px; }
.ak-more { order: 2; justify-self: center; margin-top: 28px; }
}
@media (min-width: 45.9375rem) and (max-width: 66.75rem) and (max-height: 820px) {
.ak-stage { margin-top: 24px; padding: 22px 32px 24px; }
.ak-meta { margin-bottom: 12px; }
.ak-aira { margin-top: 16px; }
.ak-more { margin-top: 20px; }
}
@media (max-width: 45.875rem) {
.section-ask { padding-block: 14px; }
.ak-h { font-size: 28px; }
.ak-stage { margin-top: 16px; padding: 14px 12px; border-radius: 24px; }
.ak-meta { flex-direction: row; justify-content: center; gap: 4px; margin-bottom: 8px; font-size: 11px; line-height: 14px; }
.ak-bub { padding: 8px 14px 10px 12px; border-radius: 19px; }
.ak-row { height: 22px; }
.ak-glyph { width: 15px; height: 15px; margin-right: 8px; }
.ak-glyph.is-o1 { width: 27px; height: 12px; margin: 0 7px 0 -2px; }
.ak-bars { gap: 1.5px; height: 22px; --wh: 19px; }
.ak-bars i { width: 2px; border-radius: 1px; }
.ak-said { margin-top: 4px; font-size: 15px; line-height: 20px; letter-spacing: -.016em; }
.ak-aira { grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; margin-top: 12px; }
.ak-orb { width: 28px; height: 28px; }
.ak-card { --ak-r: 16px; }
.ak-card-in { padding: 4px 6px 6px; }
.ak-sh { height: 26px; padding: 0 8px; font-size: 13px; line-height: 18px; }
.ak-sh-f { gap: 8px; }
.ak-ok { width: 13px; height: 13px; background-size: 9.5px; }
.ak-mems li { grid-template-columns: 13px minmax(0, 1fr) auto; grid-template-rows: 25px; column-gap: 8px; padding: 0 8px; border-radius: 9px;
font-size: 13px; line-height: 18px; }
.ak-mems li.is-found { padding-bottom: 7px; }
.ak-dotm { width: 13px; height: 13px; }
.ak-md { font-size: 12px; }
.ak-quote { grid-column: 1 / -1; font-size: 13px; line-height: 18px; }
.ak-scan { height: 25px; border-radius: 9px; }
.ak-aira .ak-bub { grid-column: 1 / -1; margin-top: 8px; }
.ak-more { margin-top: 14px; }
}
:lang(ja) .ak-said, :lang(ja) .ak-quote { word-break: auto-phrase; }
:lang(ko) .ak-said, :lang(ko) .ak-quote { word-break: keep-all; }
@media (max-width: 21.25rem) {
.ak-said { font-size: 14px; line-height: 19px; }
.ak-aira .ak-card { grid-row: 2; grid-column: 1 / -1; margin-top: 8px; }
.ak-aira .ak-bub { grid-row: 3; }
}
.mh {
--mh-bubble-k: .65;
--b01-left: -8vw; --b01-top: 56.5%; --b01-w: 229px; --b01-h: 229px; --b01-blur: 3px; --b01-scale: 1;
--b02-left: 14.2%; --b02-top: 8.5%; --b02-w: 66px; --b02-h: 67px; --b02-blur: 1.5px; --b02-scale: 1;
--b03-left: -10.5%; --b03-top: 51.7%; --b03-w: 113px; --b03-h: 104px; --b03-blur: .8px; --b03-scale: 1;
--b04-left: 1.1%; --b04-top: 26.3%; --b04-w: 72px; --b04-h: 67px; --b04-blur: 1.5px; --b04-scale: 1;
--b05-left: min(16.7%, calc(50% - 412px)); --b05-top: 37.4%; --b05-w: 87px; --b05-h: 88px; --b05-blur: 0px; --b05-scale: 1;
--b06-left: max(81.9%, calc(50% + 325px)); --b06-top: 30.1%; --b06-w: 89px; --b06-h: 89px; --b06-blur: 2px; --b06-scale: 1;
--b07-left: 92.9%; --b07-top: 23.2%; --b07-w: 76px; --b07-h: 76px; --b07-blur: 2.15px; --b07-scale: 1;
--b08-left: 95.3%; --b08-top: 43.2%; --b08-w: 153px; --b08-h: 153px; --b08-blur: 0px; --b08-scale: 1;
position: relative;
z-index: 2;
height: calc(100vh - var(--header-height));
height: calc(100svh - var(--header-height));
min-height: 400px;
overflow: hidden;
box-shadow: 0 170px 48px rgba(0, 0, 0, 0), 0 109px 44px rgba(0, 0, 0, .01), 0 61px 37px rgba(0, 0, 0, .05),
0 27px 27px rgba(0, 0, 0, .09), 0 7px 15px rgba(0, 0, 0, .1);
}
.mh-bg { position: absolute; inset: 0; z-index: 0; opacity: .98; }
.mh-bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.mh-bubbles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mh-bubble { position: absolute; max-width: none; object-fit: contain; }
.mh-bubble.b01 { left: var(--b01-left); top: var(--b01-top); width: var(--b01-w); height: var(--b01-h); filter: blur(calc(var(--b01-blur) / var(--mh-bubble-k))); transform: scale(calc(var(--b01-scale) * var(--mh-bubble-k))); }
.mh-bubble.b02 { left: var(--b02-left); top: var(--b02-top); width: var(--b02-w); height: var(--b02-h); filter: blur(calc(var(--b02-blur) / var(--mh-bubble-k))); transform: scale(calc(var(--b02-scale) * var(--mh-bubble-k))); }
.mh-bubble.b03 { left: var(--b03-left); top: var(--b03-top); width: var(--b03-w); height: var(--b03-h); filter: blur(calc(var(--b03-blur) / var(--mh-bubble-k))); transform: scale(calc(var(--b03-scale) * var(--mh-bubble-k))); }
.mh-bubble.b04 { left: var(--b04-left); top: var(--b04-top); width: var(--b04-w); height: var(--b04-h); filter: blur(calc(var(--b04-blur) / var(--mh-bubble-k))); transform: scale(calc(var(--b04-scale) * var(--mh-bubble-k))); }
.mh-bubble.b05 { left: var(--b05-left); top: var(--b05-top); width: var(--b05-w); height: var(--b05-h); filter: blur(calc(var(--b05-blur) / var(--mh-bubble-k))); transform: scale(calc(var(--b05-scale) * var(--mh-bubble-k))); }
.mh-bubble.b06 { left: var(--b06-left); top: var(--b06-top); width: var(--b06-w); height: var(--b06-h); filter: blur(calc(var(--b06-blur) / var(--mh-bubble-k))); transform: scale(calc(var(--b06-scale) * var(--mh-bubble-k))); }
.mh-bubble.b07 { left: var(--b07-left); top: var(--b07-top); width: var(--b07-w); height: var(--b07-h); filter: blur(calc(var(--b07-blur) / var(--mh-bubble-k))); transform: scale(calc(var(--b07-scale) * var(--mh-bubble-k))); }
.mh-bubble.b08 { left: var(--b08-left); top: var(--b08-top); width: var(--b08-w); height: var(--b08-h); filter: blur(calc(var(--b08-blur) / var(--mh-bubble-k))); transform: scale(calc(var(--b08-scale) * var(--mh-bubble-k))); }
.mh-container {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
padding-inline: 16px;
text-align: center;
}
.mh-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mh-title { margin: 0; font-size: 64px; line-height: 1.3 !important; color: #000; }
.mh-sub { margin: 10px 0 0; max-width: 32em; font-size: 21px; line-height: 1.3; color: #424245; text-wrap: balance; }
.mh-btn {
margin-top: 51px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 24px;
border-radius: 90px;
background: #000;
color: #fff;
font-size: 16px;
line-height: 1;
letter-spacing: -.01em;
transition: background .2s var(--ease);
}
.mh-btn:hover { background: rgba(0, 0, 0, .9); }
@media (max-width: 820px) {
.mh {
--b01-left: -22%; --b01-top: 60%; --b01-scale: .85; --b02-left: 10%; --b02-top: 6%;
--b03-left: -5%; --b03-top: 48%; --b03-scale: .85; --b04-left: -2%; --b04-top: 22%;
--b05-left: 6%; --b05-top: 26%; --b06-left: 78%; --b06-top: 22%; --b07-left: 90%; --b07-top: 20%;
--b08-left: 86%; --b08-top: 48%; --b08-scale: .85;
}
.mh-sub { font-size: 17px; max-width: 330px; margin-top: 8px; }
.mh-title { font-size: min(48px, 9.6vw); }
.mh-btn { margin-top: 24px; padding: 12px 20px; font-size: 15px; }
}
@media (max-width: 480px) {
.mh {
--b01-left: -30%; --b01-top: 65%; --b01-scale: .6; --b02-left: 5%; --b02-top: 5%; --b02-scale: .8;
--b03-left: -15%; --b03-top: 58%; --b03-scale: .7; --b04-left: -5%; --b04-top: 18%; --b04-scale: .8;
--b05-left: 72%; --b05-top: 62%; --b05-scale: .7; --b06-left: 80%; --b06-top: 5%; --b06-scale: .4;
--b07-left: 88%; --b07-top: 0%; --b07-scale: .6; --b08-left: 80%; --b08-top: 16%; --b08-scale: .6;
}
}
@media (max-width: 48rem) {
.section-bubbles + .section-connect { margin-top: 3rem; }
}
.section-privacy { padding-block: 144px; }
.privacy-card {
width: 87.5%;
max-width: 78.75rem;
margin-inline: auto;
padding: 120px min(7.2917%, 6.5625rem);
border-radius: 28px;
background: #f5f5f7;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.privacy-lock {
display: block;
width: 49px;
height: 68px;
color: #1d1d1f;
}
.privacy-h {
margin-top: 40px;
font-size: 3rem;
color: #1d1d1f;
text-wrap: balance;
}
.privacy-copy {
margin-top: .8em;
max-width: 840px;
text-wrap: balance;
font-size: 1.0625rem;
line-height: 1.23536;
font-weight: 600;
letter-spacing: var(--heading-tracking);
color: #6e6e73;
}
.privacy-points {
list-style: none;
margin: 44.8px 0 0;
padding: 0;
width: 100%;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 2.5rem;
text-align: left;
}
.privacy-points li { grid-column: span 2; }
.privacy-points li:nth-child(4) { grid-column: 2 / span 2; }
.privacy-points li:nth-child(5) { grid-column: 4 / span 2; }
.privacy-points li {
padding-inline-start: 32px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19'%3E%3Ccircle cx='9.5' cy='9.5' r='8.7' fill='none' stroke='%231d1d1f' stroke-width='1.6'/%3E%3Cpath d='M5.7 9.8l2.6 2.7 5-6.1' fill='none' stroke='%231d1d1f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left 1px / 19px 19px;
}
.privacy-point-h {
margin: 0;
font-size: 1.0625rem;
color: #1d1d1f;
}
.privacy-points p {
margin-top: 6px;
font-size: .875rem;
line-height: 1.42859;
letter-spacing: var(--heading-tracking);
color: #6e6e73;
}
.privacy-points a { color: #0066cc; }
.privacy-points a:hover { text-decoration: underline; }
@media (max-width: 66.75rem) {
.section-privacy { padding-block: 120px; }
.privacy-card { padding-block: 80px; }
.privacy-h { margin-top: 28px; font-size: 2.5rem; }
.privacy-copy { max-width: none; }
.privacy-points {
margin-top: 38.4px;
width: auto;
max-width: 30rem;
grid-template-columns: minmax(0, 1fr);
gap: 1.75rem;
}
.privacy-points li:nth-child(n) { grid-column: auto; }
}
@media (max-width: 45.875rem) {
.section-privacy { padding-block: 112px; }
.privacy-card { padding-block: 60px; }
.privacy-lock { width: 26px; height: 36px; }
.privacy-h { font-size: 2rem; }
.privacy-copy { font-size: .875rem; line-height: 1.28577; }
.privacy-points { margin-top: 33.6px; max-width: none; gap: 1.5rem; }
}
.kit-grid {
list-style: none;
margin: clamp(1rem, 2vw, 1.75rem) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: clamp(.5rem, .85vw, .75rem);
grid-auto-rows: clamp(11rem, 23vw, 19rem);
}
.kit-cell {
position: relative;
background: #f5f5f7;
border-radius: 4px;
overflow: hidden;
padding: clamp(.875rem, 1.6vw, 1.25rem);
display: grid;
place-items: center;
}
.kit-cell.is-wide { grid-column: span 4; }
.kit-cell:not(.is-wide) { grid-column: span 2; }
.kit-art {
display: grid;
place-items: center;
width: 100%;
height: 100%;
padding-bottom: 1.5rem;
min-height: 0;
}
.kit-art picture { display: contents; }
.kit-art source { display: none; }
.kit-art img {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
object-fit: contain;
display: block;
mix-blend-mode: multiply;
}
.kit-art { padding-inline: 14%; }
.kit-cell.is-wide .kit-art { padding-inline: 24%; }
.kit-appicon {
display: grid;
place-items: center;
width: clamp(3.75rem, 6.5vw, 5.25rem);
aspect-ratio: 1;
border-radius: 22%;
background: var(--er-gray-90);
color: var(--er-white);
}
.kit-appicon svg { width: 58%; height: auto; display: block; }
.kit-label {
position: absolute;
left: clamp(.875rem, 1.6vw, 1.25rem);
bottom: clamp(.75rem, 1.4vw, 1rem);
right: clamp(.875rem, 1.6vw, 1.25rem);
font-size: clamp(.8125rem, 1vw, .9375rem);
line-height: 1.35;
color: var(--er-gray-70);
}
@media (max-width: 48rem) {
.kit-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: clamp(9rem, 34vw, 13rem);
}
.kit-cell:not(.is-wide) { grid-column: span 1; }
.kit-cell.is-wide { grid-column: span 2; }}
.spec-cols {
margin-top: clamp(1.75rem, 3.5vw, 3rem);
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: clamp(1rem, 1.6vw, 1.5rem);
align-items: start;
}
.spec-col { margin: 0; }
.spec-col-head {
padding-bottom: .625rem;
border-bottom: 1px solid var(--fg);
}
.spec-col-head h3 {
margin: 0;
font-size: clamp(.9375rem, 1.15vw, 1.0625rem);
font-weight: 400;
letter-spacing: -.012em;
color: var(--er-gray-90);
}
.spec-col > div:not(.spec-col-head) {
display: grid;
gap: .125rem;
padding: .625rem 0;
border-bottom: 1px solid var(--rule);
}
.spec-col > div.spec-feature { grid-template-columns: minmax(0, 1fr); }
.spec-col dt {
font-size: clamp(.75rem, .92vw, .8125rem);
line-height: 1.4;
color: var(--er-gray-70);
}
.spec-col dd {
text-wrap: balance;
margin: 0;
font-size: clamp(.75rem, .92vw, .8125rem);
line-height: 1.4;
color: var(--er-gray-90);
}
@media (max-width: 64rem) {
.spec-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }}
@media (max-width: 40rem) {
.spec-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }}
.section-vs {
padding-top: clamp(3.5rem, 8vw, 6.5rem);
padding-bottom: clamp(1.625rem, 3.6vw, 2.875rem);
}
.vs { max-width: 61.25rem; margin-inline: auto; }
.section-vs .vs-h {
max-width: 42.5rem;
margin: 0 auto 2.25rem;
font-size: 2.75rem;
text-align: center;
color: #0a0a0a;
text-wrap: balance;
}
.vs-clip {
overflow: hidden;
background: #fff;
border: 1px solid rgba(15, 23, 42, .1);
box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .06);
}
.vs-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
font-size: .9375rem;
line-height: 1.33;
color: rgba(20, 20, 20, .9);
}
.vs-col-spec { width: 38%; }
.vs-col-val { width: 31%; }
.vs-table th,
.vs-table td {
padding: 1.25rem 1.375rem;
vertical-align: middle;
border-bottom: 1px solid rgba(15, 23, 42, .07);
}
.vs-table tbody tr:last-child > * { border-bottom: 0; }
.vs-table td { text-align: center; }
.vs-table td + td,
.vs-table thead th + th + th { border-left: 1px solid rgba(15, 23, 42, .07); }
.vs-table thead th { background-image: linear-gradient(#fbfbfc, #f5f6f7); }
.vs-spec-head {
text-align: left;
font-size: .9375rem;
font-weight: 600;
letter-spacing: var(--heading-tracking);
color: #6e6e73;
}
.vs-prod {
text-align: center;
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: var(--heading-tracking);
color: #1d1d1f;
}
.vs-prod.vs-us { border-left: 1px solid rgba(15, 23, 42, .07); }
.vs-lc { text-transform: none; }
.vs-table tbody th { text-align: left; font-weight: 400; }
.vs-spec {
display: inline-flex;
align-items: center;
gap: .5625rem;
font-size: 1.0625rem;
line-height: 1.25;
color: #0a0a0a;
}
.vs-ico,
.vs-mark {
flex: none;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
}
.vs-ico { width: 1.25rem; height: 1.25rem; stroke-width: 1.6; }
.vs-mark { width: 1.5rem; height: 1.5rem; stroke-width: 2.4; }
.vs-mark { display: block; margin-inline: auto; }
.vs-mark.is-yes { color: #0071e3; }
.vs-mark.is-no { color: #b42318; }
.vs-val { font-weight: 600; }
.vs-val.is-yes { color: #0071e3; }
.vs-val.is-no { color: #b42318; }
.vs-table tr[hidden] { display: none; }
.vs-table tbody tr:nth-child(even) > * { background-color: rgba(15, 23, 42, .016); }
.vs-table .vs-us { background-color: rgba(0, 113, 227, .035); }
.vs-table tbody tr:nth-child(even) > .vs-us { background-color: rgba(0, 113, 227, .05); }
@media (max-width: 48rem) {
.section-vs .vs-h { margin-bottom: 1.5rem; font-size: min(1.875rem, calc(7.5vw - 2.6px)); }
.vs-col-spec { width: 40%; }
.vs-col-val { width: 30%; }
.vs-table { font-size: .875rem; }
.vs-table th,
.vs-table td { padding: .75rem .5625rem; }
.vs-prod { font-size: .875rem; }
.vs-spec-head { font-size: .8125rem; }
.vs-spec { font-size: .8125rem; gap: .375rem; line-height: 1.25; }
.vs-ico { width: 1rem; height: 1rem; }
.vs-mark { width: 1.25rem; height: 1.25rem; }
}
.section-backers { background: #fff; padding-block: clamp(3.5rem, 7.5vw, 6rem) 0; text-align: center; }
.bk-label { margin: 0; font-size: 17px; color: #86868b; }
.bk-logos {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px clamp(32px, 5.5vw, 72px);
margin: clamp(20px, 2.4vw, 28px) auto 0;
padding: 0 var(--gutter);
}
.bk-logos img { display: block; width: auto; max-width: none; }
.bk-logos .is-iitd { height: 64px; }
.bk-logos .is-itel { height: 62px; }
.bk-logos .is-indiaai { height: 38px; }
.section-backers + .section-order { padding-top: clamp(48px, 9vw, 120px); }
@media (max-width: 734px) {
.bk-label { font-size: 14px; }
.bk-logos { gap: 16px 28px; }
.bk-logos .is-iitd { height: 52px; }
.bk-logos .is-itel { height: 50px; }
.bk-logos .is-indiaai { height: 30px; }
}
.section-order {
overflow: hidden;
background: #fff;
padding-block: clamp(33px, calc(14.949vw - 25.55px), 165.8px)
clamp(46px, calc(6.7756vw + 19.87px), 106.6px);
text-align: center;
}
.section-order .od-title,
.section-unlock .od-title {
margin: 0 auto;
padding-inline: var(--gutter);
font-size: clamp(27.2px, calc(2.604vw + 16.97px), 50.3px);
line-height: 1.3 !important;
color: #1d1d1f;
text-wrap: balance;
}
.od-stage {
position: relative;
margin-top: clamp(16.6px, calc(4.645vw - 1.65px), 57.8px);
}
.od-glasses {
position: absolute;
top: 0;
left: 50%;
width: clamp(250px, calc(83.427vw - 30.87px), 1037px);
max-width: none;
height: auto;
transform: translateX(-50%);
pointer-events: none;
-webkit-mask-image: linear-gradient(#000 28%, rgba(0, 0, 0, .8) 34%, rgba(0, 0, 0, .5) 42%,
rgba(0, 0, 0, .2) 50%, transparent 57%);
mask-image: linear-gradient(#000 28%, rgba(0, 0, 0, .8) 34%, rgba(0, 0, 0, .5) 42%,
rgba(0, 0, 0, .2) 50%, transparent 57%);
}
.od-copy {
position: relative;
padding-top: clamp(113.6px, calc(8.2187vw + 81.3px), 186.5px);
}
.od-copy p { margin: 0; }
.od-name {
font-size: clamp(27.2px, calc(.3382vw + 25.87px), 30.2px);
line-height: 1.3;
letter-spacing: var(--heading-tracking);
color: #1d1d1f;
}
.section-order .od-kind {
margin-top: .2em;
font-size: clamp(17px, calc(.0893vw + 16.65px), 17.8px);
line-height: 1.4;
color: #86868b;
}
.od-cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 17px;
margin-top: 35px;
}
.od-btn {
height: auto;
min-width: 189px;
padding: 14px 24px;
font-size: 16px;
line-height: 1.2;
letter-spacing: -.01em;
}
.section-unlock { background: #fff; text-align: center; padding-block: 0 clamp(106px, calc(6.877vw + 78.97px), 167px); }
.section-specs + .section-unlock { padding-top: clamp(3.5rem, 5.4vw, 4.375rem); }
.od-batch { display: grid; gap: 8px; }
.od-batch-label { font-size: 16px; line-height: 1.4; color: #6e6e73; }
.od-batch-desc { font-size: 13px; line-height: 1.4; color: #86868b; }
@media (max-width: 48rem) {
.od-glasses {
-webkit-mask-image: linear-gradient(#000 34%, rgba(0, 0, 0, .67) 48%, rgba(0, 0, 0, .37) 59%,
rgba(0, 0, 0, .18) 69%, transparent 85%);
mask-image: linear-gradient(#000 34%, rgba(0, 0, 0, .67) 48%, rgba(0, 0, 0, .37) 59%,
rgba(0, 0, 0, .18) 69%, transparent 85%);
}
.od-cta { gap: 37px; margin-top: 29px; }
.od-batch { order: -1; }
.od-btn { min-width: 0; padding: 12px 24px; font-size: 15px; }
.od-batch-label { font-size: 17px; }
.od-batch-desc { font-size: 14px; }
}
@media (max-width: 30rem) {
.od-glasses { width: 92vw; }
.od-copy { padding-top: 35.2vw; }
}
.graph-block {
width: 100%;
padding: 0 var(--gutter) clamp(4.5rem, 9vw, 8rem);
box-sizing: border-box;
}
.section-statement {
display: grid;
align-content: center;
min-height: 120vh;
min-height: 120lvh;
box-sizing: border-box;
padding-block: 4rem calc(4rem + 20vh);
padding-bottom: calc(4rem + 20lvh);
background: #fff;
}
.stm { width: min(100% - 2 * var(--gutter), 56rem); margin: 0 auto; text-align: center; }
.stm-h { margin: 0; font-size: clamp(2rem, 3.75vw, 3rem); color: #1d1d1f; text-wrap: balance; }
@media (max-width: 48rem) {
.stm-h { font-size: min(10vw, 3rem); }
}
.section-steps { background: #f5f5f7; padding-block: clamp(5.5rem, 12vw, 10rem) clamp(4rem, 9vw, 7.5rem); }
.st-head { width: min(100% - 2 * var(--gutter), 56rem); margin: 0 auto clamp(2rem, 4.5vw, 3.5rem); text-align: center; }
.st-title { margin: 0; font-size: clamp(1.75rem, 3.75vw, 3rem); color: #1d1d1f; text-wrap: balance; }
.st-sub {
margin: clamp(.5rem, 1vw, .75rem) auto 0;
max-width: 34em;
font-size: clamp(1.0625rem, 1.65vw, 1.3125rem);
line-height: 1.38;
letter-spacing: -.01em;
color: #6e6e73;
text-wrap: balance;
}
.st-foot { width: min(100% - 2 * var(--gutter), 72.25rem); margin: clamp(32px, 3.75vw, 48px) auto 0; text-align: center; }
.st-more {
display: inline-block;
padding: 11px 21px;
border: 1px solid transparent;
border-radius: 980px;
background: #0071e3;
color: #fff;
font-size: 17px;
line-height: 1.17648;
font-weight: 400;
letter-spacing: -.022em;
text-decoration: none;
transition: background-color .2s var(--ease);
}
.st-more:hover { background: #0077ed; }
.st-more:focus-visible { outline: 2px solid #0071e3; outline-offset: 3px; }
@media (max-width: 48rem) {
.st-more { padding: 8px 15px; font-size: 14px; line-height: 1.28577; letter-spacing: -.016em; }
}
.st-row {
list-style: none;
width: min(100% - 2 * var(--gutter), 72.25rem);
margin: 0 auto;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.st-step {
display: flex;
flex-direction: column;
min-width: 0;
aspect-ratio: 372 / 520;
overflow: hidden;
border-radius: 28px;
background: #fff;
}
.st-h { position: relative; z-index: 1; flex: none; margin: 0; padding: 32px 32px 0; min-height: calc(32px + 2 * (1em + 4px) + .3em); font-size: 24px; color: #1d1d1f; text-align: center; text-wrap: balance; }
.st-h-lite { color: #86868b; }
.st-vis { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; container-type: inline-size; }
.st-wear img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 50% 100%;
}
.st-cap { display: flex; flex-direction: column; align-items: center; justify-content: center; justify-content: safe center; }
.st-flow {
--u: clamp(0px, 100cqw - 290px, 82px);
--v: clamp(0px, 100cqw - 232px, 58px);
--mx: calc(18px + var(--v) * 6 / 58 + var(--u) * 16 / 82);
--gap: calc(10px + var(--v) * 2 / 58 + var(--u) * 10 / 82);
--nd: calc(22px + var(--u) * 6 / 82);
--gx: calc(9px + var(--u) * 5 / 82);
--po: calc(7px + var(--v) * 1 / 58 + var(--u) * 4 / 82);
--ts: calc(12.5px + var(--u) * 2.5 / 82);
--tl: calc(16px + var(--u) * 4 / 82);
--ss: calc(11.5px + var(--u) * 1.5 / 82);
--sl: calc(15px + var(--u) * 3 / 82);
--wh: calc(16px + var(--u) * 6 / 82);
position: relative;
flex: none;
display: flex;
flex-direction: column;
gap: var(--gap);
width: calc(100% - 2 * var(--mx));
margin: 0 0 calc(var(--u) * 20 / 82);
padding: 0;
list-style: none;
text-align: left;
}
.st-fl { position: relative; display: flex; align-items: flex-start; gap: var(--gx); }
.st-fl:not(:last-child)::before {
content: "";
position: absolute;
left: calc(var(--nd) / 2 - .5px);
top: calc(var(--nd) / 2);
height: calc(100% - var(--nd) / 2 + var(--gap));
width: 1px;
background: #e3e3e8;
}
.st-fl-ic {
--ic-bg: #f5f5f7;
position: relative;
z-index: 1;
flex: none;
display: grid;
place-items: center;
width: var(--nd);
height: var(--nd);
border-radius: 50%;
background: var(--ic-bg);
color: #1d1d1f;
}
.st-fl-ic svg { width: 58%; height: 58%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.st-fl-ic .st-fl-fill { fill: currentColor; stroke: none; }
.st-fl-cut { stroke: var(--ic-bg); stroke-width: 4.75; }
.st-fl-tx { flex: 1 1 auto; min-width: 0; padding-top: calc((var(--nd) - var(--tl)) / 2); }
.st-fl-l { display: flex; flex-direction: column; font-size: var(--ts); line-height: var(--tl); font-weight: 500; letter-spacing: -.012em; color: #1d1d1f; }
.st-fl-l .st-fl-g { order: 1; margin-top: calc(1px + var(--u) * 1 / 82); font-size: var(--ss); line-height: var(--sl); font-weight: 400; letter-spacing: -.004em; color: #86868b; text-wrap: balance; }
.st-fl-rec { margin-inline: calc(-1 * var(--po)); padding: var(--po); border-radius: calc(11px + var(--u) * 5 / 82); background: #f5f5f7; }
.st-fl.st-fl-rec::before { left: calc(var(--po) + var(--nd) / 2 - .5px); top: 100%; height: var(--gap); }
.st-fl-rec .st-fl-ic { --ic-bg: #ff3b30; color: #fff; }
.st-fl-rec .st-fl-tx { padding-top: 0; }
.st-rec-top { display: flex; align-items: center; gap: calc(6px + var(--u) * 4 / 82); height: var(--nd); }
.st-rec-top .st-fl-l { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-rec-time { flex: none; font-size: var(--ts); line-height: var(--tl); font-weight: 500; letter-spacing: 0; color: #1d1d1f; font-variant-numeric: tabular-nums; }
.st-rec-stop { flex: none; display: grid; place-items: center; width: calc(18px + var(--u) * 4 / 82); height: calc(18px + var(--u) * 4 / 82); border-radius: 50%; box-shadow: inset 0 0 0 1.5px #d1d1d6; }
.st-rec-stop i { width: 36%; height: 36%; border-radius: 22%; background: #ff3b30; }
.st-rec-wave { position: relative; display: flex; align-items: center; height: var(--wh); margin-top: calc(4px + var(--u) * 4 / 82); }
.st-rec-past {
position: relative;
flex: none;
width: 70%;
height: 100%;
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent, #000 24%);
mask-image: linear-gradient(to right, transparent, #000 24%);
}
.st-rec-strip { position: absolute; left: 0; top: 0; width: calc(var(--wh) * 20); max-width: none; height: 100%; }
.st-rec-head { --hw: 1.5px; position: relative; flex: none; width: var(--hw); height: 120%; margin-left: calc(var(--hw) / -2); border-radius: 1px; background: #ff3b30; }
.st-rec-head::before,
.st-rec-head::after { content: ""; position: absolute; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #ff3b30; transform: translateX(-50%); }
.st-rec-head::before { top: -2.5px; }
.st-rec-head::after { bottom: -2.5px; }
.st-rec-next {
flex: 1 1 auto;
height: 2px;
margin-left: 5px;
background: radial-gradient(circle at center, #c7c7cc 0 .8px, transparent 1.05px) 0 50% / 5px 2px repeat-x;
}
@media (prefers-reduced-motion: no-preference) {
.st-rec-strip { animation: stRecScroll 12s linear infinite paused; }
.st-flow.is-live .st-rec-strip { animation-play-state: running; }
}
@keyframes stRecScroll { to { transform: translateX(-50%); } }
.st-fl-cap .st-fl-ic { --ic-bg: #e5f8ea; color: #34c759; }
.st-fl-cap .st-fl-ic svg { stroke-width: 2.1; }
.st-shot { display: flex; align-items: flex-start; gap: .38em; margin: calc(1px + var(--u) * 1 / 82) 0 0; font-size: var(--ss); line-height: var(--sl); letter-spacing: -.004em; color: #86868b; text-wrap: balance; }
.st-shot svg { flex: none; width: 1.15em; height: var(--sl); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.st-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(4px + var(--u) * 2 / 82); margin-top: calc(7px + var(--u) * 4 / 82); }
.st-thumbs img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(5px + var(--u) * 3 / 82); background: #f5f5f7; }
@container (max-width: 287.98px) {
.st-thumbs { display: none; }
}
@media (max-width: 48rem) {
.st-flow { margin-bottom: 8px; }
}
:lang(ja) .st-fl-g, :lang(ja) .st-shot { word-break: auto-phrase; }
.st-app .ag-phone { top: clamp(8px, 52.4cqw - 125px, 70px); width: 64%; }
@media (max-width: 64rem) { .st-app .ag-phone { top: clamp(8px, 52.4cqw - 112px, 70px); } }
@media (max-width: 48rem) { .st-app .ag-phone { top: clamp(8px, 52.4cqw - 82px, 70px); } }
.st-app .ag-screen.is-memory { padding-top: 0; }
.st-app .as-shot { object-position: 50% 37%; }
.st-app .as-mtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-app .as-people > span:last-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-app .as-tr span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.st-app .as-sum-t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.st-app .as-tr { margin-top: 4cqw; font-size: 4cqw; line-height: 1.42; }
.st-app .as-tr b { display: block; margin-bottom: 1.6cqw; font-size: 3.4cqw; font-weight: 600; color: #8e8e93; }
.st-app .as-tr p { display: flex; gap: 2.6cqw; margin: 0 0 1.4cqw; }
.st-app .as-tr time { flex: none; padding-top: .3cqw; font-size: 3.4cqw; color: #8e8e93; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
.st-step.is-in .st-app .ag-phone { animation: stPhoneIn .5s var(--ease-out) .1s both; }
}
@keyframes stPhoneIn { from { opacity: 0; transform: translateY(5cqw); } to { opacity: 1; transform: none; } }
@media (max-width: 64rem) {
.st-h { padding: 26px 26px 0; min-height: calc(26px + 2 * (1em + 4px) + .3em); font-size: 21px; }
}
@media (max-width: 48rem) {
.st-row { grid-template-columns: minmax(0, 1fr); width: min(100% - 2 * var(--gutter), 26rem); }
.st-step { aspect-ratio: 344 / 470; }
.st-h { padding: 24px 24px 0; min-height: 0; font-size: 21px; }
}
.section-steps.sx {
background: #f5f5f7;
padding-block: 120px 96px;
--t: 1;
--hh: 48px;
--pg: clamp(12px, 3.2svh, 32px);
--card-h: clamp(440px, calc(100svh - var(--hh) - 2 * var(--pg)), 736px);
--step: max(58svh, 330px);
--copy-w: clamp(280px, 34%, 400px);
--copy-pad: clamp(40px, 5.2vw, 72px);
--mk: 30px;
--mg: 26px;
--tfs: 48px;
}
@media (max-width: 1068px) { .section-steps.sx { padding-block: 104px 88px; --tfs: 40px; --mk: 28px; --mg: 22px; } }
@media (max-width: 734px) {
.section-steps.sx {
padding-block: 88px 72px; --tfs: 32px; --mk: 26px; --mg: 16px; --hh: 52px;
--pg: clamp(10px, 2svh, 18px); --card-h: clamp(440px, calc(100svh - var(--hh) - 2 * var(--pg)), 700px); --step: max(52svh, 320px);
}
}
.sx-head { width: min(100% - 2 * var(--gutter), 56rem); margin: 0 auto; text-align: center; }
.sx-title { margin: 0; font-size: clamp(1.75rem, 3.75vw, 3rem); color: #1d1d1f; text-wrap: balance; }
.sx-sub { margin: clamp(.5rem, 1vw, .75rem) auto 0; max-width: 34em; font-size: clamp(1.0625rem, 1.65vw, 1.3125rem); font-weight: 400; line-height: 1.38; letter-spacing: -.01em; color: #6e6e73; text-wrap: balance; }
.sx-track { width: min(100% - 2 * var(--gutter), 1156px); margin: clamp(44px, 5vw, 64px) auto 0; }
.sx-card { display: grid; gap: 20px; }
.sx-prog { display: none; }
.sx-step {
position: relative;
display: grid;
grid-template-columns: var(--copy-w) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
height: 520px;
background: #fff;
border-radius: 28px;
overflow: hidden;
}
.sx-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-left: var(--copy-pad); }
.sx-num {
display: grid; place-items: center; flex: none; width: var(--mk); height: var(--mk); margin-bottom: var(--mg);
border-radius: 50%; background: #1d1d1f; color: #fff;
font-size: calc(var(--mk) * .47); font-weight: 600; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.sx-h { margin: 0; font-size: var(--tfs); color: #1d1d1f; text-wrap: balance; min-height: calc(2 * (1em + 4px)); }
.sx-vis { position: relative; min-width: 0; min-height: 0; container-type: size; }
.sx.is-story .sx-track { position: relative; width: auto; height: calc(var(--card-h) + 3 * var(--step)); }
html:has(.sx.is-story) { scroll-snap-type: y proximity; }
.sx-snap { display: none; }
.sx.is-story .sx-snap {
display: block;
position: absolute;
left: 0;
top: calc(var(--step) * var(--k));
width: 1px;
height: 1px;
pointer-events: none;
scroll-snap-align: start;
scroll-snap-stop: always;
scroll-margin-top: calc(var(--hh) - var(--header-height) + max(var(--pg), (100svh - var(--hh) - var(--card-h)) / 2));
}
html.snap-free .sx.is-story .sx-snap,
html.snap-free .vo-scrolly.vo-snaps .vo-snap { scroll-snap-align: none; }
.sx.is-story.sx-done .sx-track { height: auto; }
.sx.is-story.sx-done .sx-stage { position: static; }
.sx.is-story.sx-done .sx-snap { display: none; }
.vo-scrolly.is-scrolly.vo-done { height: auto !important; }
.vo-scrolly.is-scrolly.vo-done .vo-pin { position: static; }
.vo-scrolly.is-scrolly.vo-done .vo-tile { animation: none !important; translate: none !important; }
.vo-scrolly.vo-done .vo-snap { display: none !important; }
.sx.is-story .sx-stage { position: sticky; top: calc(var(--hh) + max(var(--pg), (100svh - var(--hh) - var(--card-h)) / 2)); height: var(--card-h); }
.sx.is-story .sx-card {
position: relative; height: 100%; width: min(100% - 2 * var(--gutter), 1156px); margin: 0 auto;
gap: 0; grid-template-rows: minmax(0, 1fr);
background: #fff; border-radius: 28px; overflow: hidden; isolation: isolate;
}
.sx.is-story .sx-step { grid-area: 1 / 1; height: auto; background: none; border-radius: 0; opacity: 0; pointer-events: none; transition: opacity calc(.24s * var(--t)) var(--ease); }
.sx.is-story .sx-step.is-on { opacity: 1; pointer-events: auto; transition: opacity calc(.5s * var(--t)) var(--ease) calc(.2s * var(--t)); }
.sx.is-story .sx-num { visibility: hidden; }
.sx.is-story .sx-h, .sx.is-story .sx-vis > * { transition: transform calc(.8s * var(--t)) var(--ease-out); }
.sx.is-story .sx-step .sx-h { transform: translateY(14px); }
.sx.is-story .sx-step .sx-vis > * { transform: translateY(26px); }
.sx-still, .sx-still * { transition: none !important; }
.sx.is-story .sx-step.is-past .sx-h { transform: translateY(-12px); }
.sx.is-story .sx-step.is-past .sx-vis > * { transform: translateY(-22px); }
.sx.is-story .sx-step.is-on .sx-h,
.sx.is-story .sx-step.is-on .sx-vis > * { transform: none; transition-delay: calc(.2s * var(--t)); }
.sx.is-story .sx-step { will-change: opacity; }
.sx.is-story .sx-step .sx-h,
.sx.is-story .sx-step .sx-vis > * { will-change: transform; }
.sx.is-story .sx-prog {
position: absolute; z-index: 3; left: var(--copy-pad);
top: calc(50% - (var(--mk) + var(--mg) + 2 * (var(--tfs) + 4px)) / 2);
display: flex; align-items: center; margin: 0; padding: 0; list-style: none;
}
.sx-prog li { display: flex; align-items: center; }
.sx-prog i { position: relative; width: calc(var(--mk) * .9); height: 2px; margin-inline: 5px; border-radius: 1px; background: #e3e3e8; overflow: hidden; }
.sx-prog i::after { content: ""; position: absolute; inset: 0; background: #1d1d1f; transform: scaleX(0); transform-origin: left center; transition: transform calc(.45s * var(--t)) var(--ease-out); }
.sx-prog li.is-on i::after { transform: none; }
.sx-prog button {
display: grid; place-items: center; width: var(--mk); height: var(--mk); padding: 0; border: 0; border-radius: 50%;
background: #fff; box-shadow: inset 0 0 0 1.5px #d2d2d7; color: #86868b;
font: inherit; font-size: calc(var(--mk) * .47); font-weight: 600; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums;
cursor: pointer;
transition: background-color calc(.35s * var(--t)) var(--ease) calc(.1s * var(--t)), color calc(.35s * var(--t)) var(--ease) calc(.1s * var(--t)), box-shadow calc(.35s * var(--t)) var(--ease) calc(.1s * var(--t));
}
.sx-prog li.is-on button { background: #1d1d1f; color: #fff; box-shadow: inset 0 0 0 1.5px #1d1d1f; }
.sx-prog li:not(.is-on) button:hover { box-shadow: inset 0 0 0 1.5px #86868b; color: #1d1d1f; }
.sx-prog button:focus-visible { outline: 2px solid #0071e3; outline-offset: 3px; }
.sx-wear {
--m: clamp(34px, 7cqh, 64px);
--H: min(calc((100cqh - var(--m)) / .7625), calc(100cqh + 110px));
position: absolute; left: 50%; top: calc(100cqh - .90 * var(--H));
width: calc(var(--H) * .84); height: var(--H); margin-left: calc(var(--H) * -.42);
}
.sx-wear img { display: block; width: 100%; height: 100%; max-width: none; }
.sx-hs { margin: 10px 0 0; max-width: 17em; font-size: 17px; line-height: 1.38; font-weight: 400; letter-spacing: -.016em; color: #6e6e73; text-wrap: balance; }
.sx-hs .st-fl-g { color: inherit; }
.sx.is-story .sx-hs { position: absolute; left: var(--copy-pad); right: 24px; top: calc(50% + (var(--mk) + var(--mg) + 2 * (var(--tfs) + 4px)) / 2 + 12px); }
.sx-v-rec { --u: min(1cqh, 100cqw / 140); }
.sx-rec-man {
position: absolute;
left: calc(50% - 66 * var(--u));
bottom: calc(-6 * var(--u));
width: auto;
height: calc(104 * var(--u));
max-width: none;
}
.sx-v-rec .ag-phone.sx-rec-phone {
left: calc(50% + 66 * var(--u) - 46 * var(--u));
top: calc(100cqh - 90 * var(--u));
width: calc(46 * var(--u));
translate: none;
z-index: 2;
}
.ag-screen.is-rec { align-items: center; padding: 0 5cqw; background: #000; color: #fff; text-align: center; }
.ag-screen.is-rec .as-bar { align-self: stretch; color: #fff; }
.ag-screen.is-rec .as-status { filter: invert(1); }
.ag-screen.is-rec::after { background: #fff; }
.rc-state { display: flex; align-items: center; gap: 1.8cqw; margin: 7cqw 0 0; font-size: 4.4cqw; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; color: #ff453a; }
.rc-dot { flex: none; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #ff453a; }
.ag-screen.is-rec .st-rec-time { margin-top: 2cqw; font-size: 16cqw; line-height: 1; font-weight: 300; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.ag-screen.is-rec .st-rec-wave { position: relative; display: flex; align-items: center; align-self: stretch; height: 13cqw; margin: 6cqw -5cqw 0; }
.ag-screen.is-rec .st-rec-past { position: relative; flex: none; width: 58%; height: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 30%); mask-image: linear-gradient(to right, transparent, #000 30%); }
.ag-screen.is-rec .st-rec-strip { width: calc(13cqw * 20); }
.ag-screen.is-rec .st-rec-head { width: .5cqw; height: 120%; margin-left: -.25cqw; background: #ff453a; }
.ag-screen.is-rec .st-rec-head::before, .ag-screen.is-rec .st-rec-head::after { width: 1.8cqw; height: 1.8cqw; background: #ff453a; }
.ag-screen.is-rec .st-rec-head::before { top: -.9cqw; }
.ag-screen.is-rec .st-rec-head::after { bottom: -.9cqw; }
.ag-screen.is-rec .st-rec-next { height: 2px; margin-left: 1.5cqw; background: radial-gradient(circle at center, #636366 0 .8px, transparent 1.05px) 0 50% / 5px 2px repeat-x; }
.ag-screen.is-rec.is-live .st-rec-strip { animation-play-state: running; }
.rc-stack { position: relative; flex: none; width: 50cqw; height: 34cqw; margin-top: 9cqw; }
.rc-stack img {
position: absolute;
left: 50%;
top: 50%;
width: 38cqw;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 2.4cqw;
box-shadow: 0 0 0 .5cqw #000, 0 2cqw 5cqw rgba(0, 0, 0, .6);
translate: -50% -50%;
}
.rc-stack img:nth-child(1) { rotate: -9deg; translate: -62% -54%; }
.rc-stack img:nth-child(2) { rotate: 7deg; translate: -38% -52%; }
.rc-stop { display: grid; place-items: center; flex: none; width: 15cqw; height: 15cqw; margin: auto 0 13cqw; border-radius: 50%; box-shadow: inset 0 0 0 .9cqw #fff; }
.rc-stop i { width: 5.6cqw; height: 5.6cqw; border-radius: 1.3cqw; background: #ff453a; }
@media (prefers-reduced-motion: no-preference) {
.ag-screen.is-rec.is-live .rc-dot { animation: rcBlink 1.6s ease-in-out infinite; }
}
@keyframes rcBlink { 50% { opacity: .35; } }
.sx-v-app .ag-phone { top: clamp(16px, 7.5cqh, 60px); width: clamp(210px, 61cqh, 380px); }
@media (max-width: 734px), (max-width: 1068px) and (orientation: portrait) {
.sx-step { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 600px; }
.sx-copy { align-items: center; padding: 26px 22px 0; text-align: center; }
.sx-h { min-height: 0; }
.sx.is-story .sx-prog { left: 50%; top: 26px; translate: -50% 0; }
.sx.is-story .sx-hs { position: static; }
.sx-hs { margin: 8px auto 0; }
.sx-vis { margin-top: 14px; }
.sx-v-app .ag-phone { --pw: min(78cqw, 64cqh, 380px); width: var(--pw); top: max(10px, 100cqh - var(--pw) * 2.0615 + 56px); }
}
@media (max-width: 734px) {
.sx-track { margin-top: 36px; }
.sx-v-rec { --mh: min(95cqh, 115cqw); }
.sx-rec-man { left: calc(var(--mh) * -.4375); bottom: -3cqh; height: var(--mh); }
.sx-v-rec .ag-phone.sx-rec-phone { left: auto; right: 4cqw; top: auto; bottom: -8cqh; width: min(52cqw, 49.5cqh); }
.sx-hs { font-size: 14px; line-height: 1.35; }
.sx-wear { --H: calc((100cqh - 40px) / .8625); top: calc(100cqh - var(--H)); }
}
@media (min-width: 735px) and (max-width: 1068px) and (orientation: portrait) {
.section-steps.sx { --card-h: clamp(560px, calc(100svh - var(--hh) - 2 * var(--pg)), 900px); }
.sx-copy { padding-top: 44px; }
.sx.is-story .sx-prog { top: 44px; }
.sx-vis { margin-top: 20px; }
.sx-wear { --H: min(calc((100cqh - var(--m)) / .7625), 100cqh + 110px, 92cqw); }
}
.section-bubbles .graph-block { padding-bottom: 0; }
.section-bubbles { padding-bottom: calc(var(--section-y) + clamp(2.5rem, 4vw, 3.5rem)); }
.section-bubbles { padding-top: calc(var(--section-y) + clamp(2.5rem, 4vw, 3.5rem)); }
.graph-head {
max-width: 56rem;
margin: 0 auto clamp(2rem, 4.5vw, 3.5rem);
text-align: center;
}
.graph-h {
margin: 0;
font-size: clamp(2rem, 4.4vw, 4rem);
color: var(--er-gray-90);
text-wrap: balance;
}
.graph-sub {
max-width: 34em;
margin: clamp(.75rem, 1.4vw, 1.125rem) auto 0;
font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
line-height: 1.45;
color: var(--er-gray-70);
text-wrap: balance;
}
.graph-panel {
--pk-bar: 2.875rem;
--pk-chat: 29%;
--pk-card: 36.5%;
position: relative;
display: flex;
flex-direction: column;
width: calc((100% + 2 * var(--gutter)) * .875);
max-width: 78.75rem;
margin-inline: auto;
aspect-ratio: 16 / 10;
max-height: min(48.75rem, 84svh);
min-height: 34rem;
overflow: hidden;
isolation: isolate;
border-radius: clamp(.75rem, 1.1vw, 1rem);
background: #fbfbfb;
border: 1px solid rgba(16, 20, 26, .1);
box-shadow: 0 1px 2px rgba(16, 20, 26, .04), 0 28px 70px -24px rgba(16, 20, 26, .22);
color: #1d1d1f;
}
.pk-bar {
flex: none;
display: flex;
align-items: center;
height: var(--pk-bar);
padding-right: .875rem;
color: #86868b;
font-size: .8125rem;
white-space: nowrap;
}
.pk-bar svg,
.pk-zoom svg,
.pc-bar svg,
.mem-foot svg,
.mt-h svg,
.mem-cbar svg {
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.pk-left {
box-sizing: border-box;
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
width: calc(var(--pk-chat) + 2.25rem);
padding-left: 1rem;
}
.pk-title { display: inline-flex; align-items: center; gap: .5rem; color: #1d1d1f; }
.pk-title b { font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; }
.pk-bar .pk-mark { width: 1.25rem; height: .625rem; fill: currentColor; stroke: none; }
.pk-tools { display: inline-flex; align-items: center; gap: .625rem; }
.pk-tools > svg { width: 1.0625rem; height: 1.0625rem; }
.pk-seg { display: inline-flex; padding: 2px; border-radius: .5rem; background: #f0f0f1; }
.pk-seg i { display: grid; place-items: center; width: 1.5rem; height: 1.375rem; border-radius: .375rem; }
.pk-seg i.on { background: #fff; color: #1d1d1f; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.pk-seg svg { width: .9375rem; height: .9375rem; }
.pk-search {
display: inline-flex;
align-items: center;
gap: .375rem;
width: 9.5rem;
height: 1.75rem;
margin-left: .875rem;
padding: 0 .625rem;
border-radius: .5rem;
background: #f0f0f1;
color: #a1a1a6;
}
.pk-search svg { width: .9375rem; height: .9375rem; flex: none; }
.pk-apps { display: inline-flex; align-items: center; gap: .3125rem; margin-left: auto; }
.pk-apps svg { width: .9375rem; height: .9375rem; color: #1d1d1f; stroke-width: 1.8; }
.pk-apps img { width: .9375rem; height: .9375rem; object-fit: contain; }
.pk-me {
flex: none;
width: 1.5rem;
height: 1.5rem;
margin-left: .75rem;
border-radius: 50%;
background: linear-gradient(145deg, #d9dce3, #aeb4bf);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.pk-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.graph-ui {
position: relative;
flex: none;
width: var(--pk-chat);
min-height: 0;
display: flex;
flex-direction: column;
}
.pk-stage {
position: relative;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
isolation: isolate;
border-top-left-radius: .75rem;
background: #e3e5e4;
box-shadow: inset 1px 1px 0 rgba(16, 20, 26, .04);
}
.graph-canvas {
position: absolute; inset: 0;
width: 100%; height: 100%;
display: block;
touch-action: pan-y;
}
.graph-canvas.is-over { cursor: pointer; }
.pk-zoom {
position: absolute;
z-index: 2;
top: .75rem;
right: .75rem;
display: grid;
justify-items: center;
gap: .625rem;
color: #6e6e73;
transition: right .7s cubic-bezier(.65, 0, .35, 1);
}
.pk-zgrp {
display: grid;
border-radius: .625rem;
background: rgba(255, 255, 255, .92);
box-shadow: 0 0 0 1px rgba(16, 20, 26, .05), 0 1px 3px rgba(16, 20, 26, .06);
}
.pk-zoom i {
display: grid;
place-items: center;
width: 1.875rem;
height: 1.875rem;
cursor: pointer;
}
.pk-zoom svg { width: 1rem; height: 1rem; }
.pk-zloc {
border-radius: 50%;
background: rgba(255, 255, 255, .92);
box-shadow: 0 0 0 1px rgba(16, 20, 26, .05), 0 1px 3px rgba(16, 20, 26, .06);
}
.graph-panel.is-card .pk-zoom { right: calc(var(--pk-card) + 1.5rem); }
.mem-chat {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.mem-thread {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: .875rem;
padding: 1rem 1.125rem .75rem 1rem;
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 2.5rem);
mask-image: linear-gradient(to bottom, transparent, #000 2.5rem);
}
.mem-msg {
display: none;
flex: 0 0 auto;
margin: 0;
font-size: .875rem;
line-height: 1.57;
color: #1d1d1f;
}
.mem-msg.is-in {
display: block;
animation: chatLineIn .45s var(--ease-out) both;
}
.mem-msg p { margin: 0; }
.mem-msg b { font-weight: 600; }
.mem-list {
margin: .375rem 0 0;
padding-left: 1.25rem;
list-style: decimal;
}
.mem-list li + li { margin-top: .1875rem; }
.mem-list li::marker { font-weight: 600; }
.mem-msg.you {
align-self: flex-end;
max-width: 84%;
padding: .5625rem .875rem;
border-radius: .875rem;
background: #f0f0f0;
}
.mem-msg.aira { align-self: stretch; }
.mt-h {
display: flex;
align-items: center;
gap: .375rem;
font-size: .875rem;
color: #86868b;
}
.mt-h .aira-orb { --aira-top: #f1f2f4; --aira-bottom: #d5d9df; width: 1.375rem; height: 1.375rem; }
.mt-h svg { width: .875rem; height: .875rem; }
.mt-s { margin-top: .25rem !important; font-size: .75rem; line-height: 1.4; color: #a1a1a6; }
.mt-n { display: none; }
.mem-thk.is-found .mt-n { display: block; animation: chatLineIn .35s var(--ease-out) both; }
.mt-list {
display: none;
margin: .5rem 0 0;
padding: .3125rem .625rem;
list-style: none;
border: 1px solid #ededee;
border-radius: .625rem;
}
.mem-thk.is-found .mt-list { display: block; }
.mt-list li {
display: none;
align-items: center;
gap: .5rem;
height: 1.625rem;
font-size: .8125rem;
color: #2c2c2e;
white-space: nowrap;
}
.mt-list li.is-in { display: flex; animation: chatLineIn .3s var(--ease-out) both; }
.mt-list li > img:first-child,
.mt-list li > i {
flex: none;
width: .875rem;
height: .875rem;
border-radius: 50%;
object-fit: cover;
}
.mt-list li > i,
.mem-chip > i,
.mem-stack > i,
.pc-bub {
background: radial-gradient(circle at 34% 30%, #fff, #dfe3e9 55%, #b9c0ca);
box-shadow: inset 0 0 0 1px rgba(16, 20, 26, .08);
}
.mem-thk.is-done .mt-list li { color: #a1a1a6; }
.mem-thk.is-done .mt-list img { opacity: .55; }
.mem-chip {
display: inline-flex;
align-items: center;
gap: .3125rem;
vertical-align: -.1875rem;
margin: 0 .0625rem;
padding: .0625rem .5rem .0625rem .1875rem;
border: 0;
border-radius: .375rem;
background: #efefef;
color: #1d1d1f;
font: inherit;
font-size: .8125rem;
line-height: 1.25rem;
white-space: nowrap;
cursor: pointer;
transition: background-color .2s var(--ease);
}
.mem-chip > img,
.mem-chip > i {
flex: none;
width: .9375rem;
height: .9375rem;
border-radius: 50%;
object-fit: cover;
}
.mem-chip:hover,
.mem-chip:focus-visible { background: #e5e5e7; }
.mem-nb { white-space: nowrap; }
.mem-foot {
display: flex;
align-items: center;
gap: .5rem;
margin-top: .5rem !important;
font-size: .8125rem;
color: #6e6e73;
}
.mem-foot svg { width: .9375rem; height: .9375rem; color: #a1a1a6; }
.mem-stack { display: inline-flex; }
.mem-stack > * {
width: 1rem;
height: 1rem;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 0 0 1.5px #fbfbfb;
}
.mem-stack > * + * { margin-left: -.3125rem; }
.mem-composer {
position: relative;
flex: none;
display: block;
min-height: 5rem;
margin: .375rem .875rem .875rem 1rem;
padding: .75rem .875rem 2.5rem;
border-radius: .875rem;
border: 1px solid rgba(16, 20, 26, .05);
background: #f0f0f0;
font-size: .875rem;
box-sizing: border-box;
}
.mem-typed {
display: block;
min-width: 0;
overflow: hidden;
white-space: nowrap;
color: #1d1d1f;
}
.mem-ph {
display: block;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: rgba(35, 35, 35, .5);
}
.mem-composer.is-live .mem-ph { display: none; }
.mem-cbar {
position: absolute;
right: .625rem;
bottom: .625rem;
display: flex;
align-items: center;
gap: .625rem;
color: #8e8e93;
}
.mem-mic { width: 1.0625rem; height: 1.0625rem; }
.mem-send {
display: grid;
place-items: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
background: #a1a1a6;
transition: background-color .2s var(--ease);
}
.mem-composer.is-live .mem-send { background: #1d1d1f; }
.mem-send svg { width: .9375rem; height: .9375rem; stroke: #fff; stroke-width: 2; }
.pk-card {
position: absolute;
z-index: 3;
top: .75rem;
right: .75rem;
bottom: .75rem;
width: var(--pk-card);
box-sizing: border-box;
display: flex;
flex-direction: column;
padding: .625rem 1rem 1rem;
overflow: hidden;
border-radius: .875rem;
background: #fff;
box-shadow: 0 0 0 1px rgba(16, 20, 26, .05), 0 14px 36px -10px rgba(16, 20, 26, .18);
font-size: .8125rem;
line-height: 1.5;
color: #1d1d1f;
transform: translateX(calc(100% + 1.5rem));
transition: transform .7s cubic-bezier(.65, 0, .35, 1);
-webkit-mask-image: linear-gradient(#000 calc(100% - 1.75rem), transparent);
mask-image: linear-gradient(#000 calc(100% - 1.75rem), transparent);
}
.graph-panel.is-card .pk-card { transform: none; }
.pc-bar {
flex: none;
display: flex;
align-items: center;
gap: .625rem;
height: 1.5rem;
color: #b0b0b5;
}
.pc-bar svg { width: .9375rem; height: .9375rem; flex: none; }
.pc-sp { flex: 1; }
.pc-ask { font-size: .75rem; color: #6e6e73; white-space: nowrap; }
.pc-head { display: flex; flex-direction: column; align-items: flex-start; }
.pc-img {
width: 4rem;
height: 4rem;
margin: .875rem 0 .75rem;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 0 0 1px rgba(16, 20, 26, .06), 0 4px 12px -4px rgba(16, 20, 26, .3);
}
.pc-title { margin: 0; font-size: 1.0625rem; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.pc-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .625rem;
margin: .25rem 0 0;
font-size: .75rem;
color: #8e8e93;
}
.pc-meta img { width: .875rem; height: .875rem; object-fit: contain; margin-left: -.375rem; }
.pc-body { margin: .75rem 0 0; }
.pc-sub { margin: .625rem 0 0; }
.pc-list { margin: .125rem 0 0; padding-left: 1.125rem; list-style: disc; }
.pc-list li::marker { color: #6e6e73; }
.pc-list li + li { margin-top: .0625rem; }
.pc-sec { display: flex; gap: .375rem; margin: 1rem 0 .375rem; font-size: .75rem; color: #8e8e93; }
.pc-sec b { font-weight: 400; color: #c0c0c5; }
.pc-row {
display: flex;
align-items: center;
gap: .625rem;
padding: .5rem .625rem;
border-radius: .625rem;
background: #f6f6f7;
transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.pc-row + .pc-row { margin-top: .375rem; }
.pc-row b { display: block; font-size: .8125rem; font-weight: 600; line-height: 1.35; }
.pc-row em { display: block; font-style: normal; font-size: .6875rem; line-height: 1.35; color: #8e8e93; }
.pc-bub { flex: none; width: 2.125rem; height: 2.125rem; border-radius: 50%; }
.pc-face { flex: none; width: 2.125rem; height: 2.125rem; border-radius: .4375rem; object-fit: cover; }
.pc-row.is-hot { background: #eef5ff; box-shadow: inset 0 0 0 1px rgba(0, 113, 227, .22); }
@media (prefers-reduced-motion: reduce) {
.mem-msg.is-in,
.mt-list li.is-in,
.mem-thk.is-found .mt-n { animation: none; }
.pk-card,
.pk-zoom { transition: none; }
}
.graph-labels { position: absolute; inset: 0; pointer-events: none; }
.graph-label {
position: absolute;
top: 0; left: 0;
white-space: nowrap;
transform: translate3d(-9999px, -9999px, 0);
opacity: 0;
transition: opacity .5s var(--ease);
}
.graph-label.is-focused { will-change: transform, opacity; }
.graph-label.is-flipped { text-align: right; }
.graph-label.is-flipped.is-focused {
padding-left: 0;
padding-right: .75rem;
border-left: 0;
border-right: 1px solid rgba(255, 255, 255, .3);
}
.graph-label b {
display: block;
font-size: clamp(.6875rem, .95vw, .8125rem);
font-weight: 400;
letter-spacing: -.01em;
color: var(--er-gray-90);
text-shadow: 0 1px 10px rgba(255,255,255,.95), 0 0 3px rgba(255,255,255,.9);
}
.graph-label span {
display: block;
font-size: clamp(.5625rem, .78vw, .6875rem);
letter-spacing: .07em;
text-transform: lowercase;
color: var(--er-gray-70);
text-shadow: 0 1px 8px rgba(255,255,255,.95), 0 0 3px rgba(255,255,255,.9);
}
.graph-label.is-focused {
padding-left: .75rem;
border-left: 1px solid rgba(35,35,35,.28);
}
.graph-label.is-focused b {
font-size: clamp(1rem, 1.7vw, 1.5rem);
font-weight: 300;
letter-spacing: -.03em;
color: #000;
}
.graph-label.is-focused span {
font-size: clamp(.625rem, .85vw, .75rem);
color: rgba(0, 0, 0, .78);
margin-top: .125rem;
}
#graphLabels .graph-label.is-focused,
#graphLabels .graph-label.is-flipped.is-focused {
padding: .4375rem .75rem .5rem;
border: 0;
border-radius: .625rem;
background: rgba(255, 255, 255, .92);
box-shadow: 0 1px 2px rgba(16, 20, 26, .06), 0 8px 24px -8px rgba(16, 20, 26, .22);
}
#graphLabels .graph-label.is-focused b {
font-size: clamp(.9375rem, 1.1vw, 1.0625rem);
font-weight: 600;
letter-spacing: -.01em;
text-shadow: none;
}
#graphLabels .graph-label.is-focused span { text-shadow: none; }
.eyebrow-strong {
font-weight: 300;
font-size: clamp(.9375rem, 2.4vw, 2rem);
letter-spacing: .05em;
color: var(--er-gray-90);
margin-bottom: .625rem;
}
.app-steps {
position: relative;
height: 260svh;
}
.app-stage {
position: sticky;
top: var(--header-height);
height: calc(100svh - var(--header-height));
padding-block: calc((100svh - var(--header-height)) * .06);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(.875rem, 1.8vw, 1.5rem);
}
.app-head {
align-self: stretch;
width: 100%;
max-width: var(--maxw);
margin: 0 auto;
padding-left: max(var(--gutter), env(safe-area-inset-left));
padding-right: max(var(--gutter), env(safe-area-inset-right));
text-align: left;
}
.app-points {
display: flex;
flex-direction: column;
gap: .4em;
margin: .7em 0 0;
padding: 0;
list-style: none;
max-width: 30em;
font-size: clamp(1rem, 1.3vw, 1.25rem);
font-weight: 400;
line-height: 1.45;
letter-spacing: -.012em;
color: var(--er-gray-70);
}
.app-points li {
display: flex;
align-items: baseline;
gap: .5em;
}
.app-points li::before {
content: "";
flex: 0 0 auto;
width: .3125rem;
height: .3125rem;
border-radius: 50%;
background: var(--er-gray-30);
transform: translateY(-.18em);
}
@media (max-width: 48rem) {
.app-points { display: none; }
.app-head { text-align: center; }}
@media (max-width: 48rem) {
.app-stage {
translate: 0 calc((100dvh - 100svh) / 2);
transition: translate .4s var(--ease);
}}
@media (max-width: 48rem) and (prefers-reduced-motion: reduce) {
.app-stage { transition: none; }}
@media (min-width: 48.01rem) {
.app-head {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
max-width: min(30em, 32vw);
align-self: auto;
}
.app-points { max-width: none; }}
.app-stage .eyebrow {
font-size: clamp(2rem, 4.4vw, 3.5rem);
letter-spacing: .05em;
margin-bottom: 0;
line-height: 1.05;
}
.app-phone {
flex: 1 1 auto;
min-height: 0;
max-height: min(42rem, 88vw * 1476 / 716);
width: 100%;
align-items: center;
}
.app-phone .phone-frame {
flex-grow: 0;
height: 100%;
width: auto;
aspect-ratio: 716 / 1476;
padding: 0;
background: none;
border-radius: 15.22% / 7.385%;
position: relative;
container-type: size;
}
@container (max-height: 560px) {
.app-phone .ps-thumbs i:nth-child(n+4) { display: none; }
}
@media (max-width: 64rem) {
@container (max-height: 620px) {
.app-phone .ps-thumbs i:nth-child(n+4) { display: none; }
}
}
@container (max-height: 500px) {
.app-phone .ps-pair-hero img { width: 62%; }
}
.app-phone .app-scr {
position: absolute;
inset: 2.134% 4.4%;
border-radius: 11.87% / 5.485%;
padding-top: 0;
height: auto;
opacity: 0;
visibility: hidden;
transition: opacity .42s var(--ease-out), visibility 0s linear .42s;
}
.app-phone .ps-btn:not(.ps-btn-nav) { margin-top: auto; }
.app-phone .app-scr.is-on {
opacity: 1;
visibility: visible;
transition: opacity .42s var(--ease-out), visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
.app-phone .app-scr { transition: none; }}
.app-phone .ip15 {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
z-index: 1;
}
.app-phone .app-scr .ps-bar {
display: grid;
grid-template-columns: 1fr 29.1cqw 1fr;
align-items: center;
justify-items: center;
height: 2.125rem;
height: 14.02cqw;
margin: 0 -.8125rem;
font-size: .5625rem;
font-size: 3.93cqw;
font-weight: 600;
letter-spacing: -.01em;
line-height: 1;
color: #1d1d1f;
}
.app-phone .app-scr .ps-bar > span:first-child { grid-column: 1; }
.app-phone .app-scr .ps-dots {
grid-column: 3;
width: 2.5rem;
width: 15.71cqw;
height: .4375rem;
height: 2.77cqw;
border-radius: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 12'%3E%3Cg fill='%231d1d1f'%3E%3Crect x='0' y='7.6' width='3' height='3.9' rx='.9'/%3E%3Crect x='4.5' y='5.4' width='3' height='6.1' rx='.9'/%3E%3Crect x='9' y='3.1' width='3' height='8.4' rx='.9'/%3E%3Crect x='13.5' y='.8' width='3' height='10.7' rx='.9'/%3E%3Cpath d='M29.3 11.6 26.61 8.91A3.8 3.8 0 0 1 31.99 8.91Z'/%3E%3Crect x='43.4' y='2.8' width='18.8' height='6.4' rx='1.7'/%3E%3Cpath d='M65.3 4.2v3.6a1.9 1.9 0 0 0 0-3.6Z' fill-opacity='.4'/%3E%3C/g%3E%3Cg fill='none' stroke='%231d1d1f'%3E%3Cpath d='M24.21 6.51A7.2 7.2 0 0 1 34.39 6.51M21.8 4.1A10.6 10.6 0 0 1 36.8 4.1' stroke-width='2.1' stroke-linecap='round'/%3E%3Crect x='41.5' y='.9' width='22.6' height='10.2' rx='3' stroke-opacity='.35'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.ps-chat-fab.is-tapped,
.ps-btn-nav.is-tapped {
transform: scale(.97);
filter: brightness(.93);
transition: transform .1s ease-out, filter .1s ease-out;
}
.ps-chat .msg { display: none; }
.ps-chat .msg.is-in {
display: block;
animation: chatLineIn .32s var(--ease-out) both;
}
.ps-chat.is-thinking .ps-think {
display: inline-flex;
animation: chatLineIn .28s var(--ease-out);
}
.ps-chat.is-thinking .ps-think .ps-dots3,
.ps-chat.is-thinking .ps-think .ps-dots3 i { opacity: 1; }
.ps-chat.is-thinking .ps-think .ps-dots3 i { animation: psDot 1.05s ease-in-out infinite; }
.ps-chat.is-thinking .ps-think .ps-dots3 i:nth-child(2) { animation-delay: .35s; }
.ps-chat.is-thinking .ps-think .ps-dots3 i:nth-child(3) { animation-delay: .7s; }
.ps-dots3 {
display: inline-flex;
align-items: center;
gap: .18em;
opacity: 0;
}
.ps-dots3 i {
width: .3em;
height: .3em;
border-radius: 50%;
background: currentColor;
opacity: .35;
}
@keyframes psDot {
0%, 60%, 100% { opacity: .3; transform: translateY(0); }
30%           { opacity: .95; transform: translateY(-.12em); }
}
@media (prefers-reduced-motion: reduce) {
.ps-chat.is-thinking .ps-think .ps-dots3 i { animation: none; opacity: .6; }}
.ps-scr-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
flex: 0 0 auto;
margin-bottom: .125rem;
}
.ps-menu {
display: flex;
flex-direction: column;
gap: .1875rem;
padding: .125rem 0;
}
.ps-menu i {
height: 1.5px;
border-radius: 1px;
background: var(--er-gray-90);
opacity: .82;
}
.ps-menu i:nth-child(1) { width: .875rem; }
.ps-menu i:nth-child(2) { width: .625rem; }
.ps-menu i:nth-child(3) { width: .75rem; }
.ps-composer {
display: flex;
align-items: center;
gap: .5rem;
flex: 0 0 auto;
margin-top: .375rem;
padding-top: .4375rem;
border-top: 1px solid var(--er-gray-10);
}
.ps-clip {
width: .9375rem;
height: .9375rem;
flex: 0 0 auto;
fill: none;
stroke: var(--er-gray-50);
stroke-width: 1.3;
stroke-linecap: round;
stroke-linejoin: round;
}
.ps-field {
position: relative;
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
font-size: .75rem;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
}
.ps-ph {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--er-gray-50);
transition: opacity .12s linear;
}
.ps-chat-live .ps-ph { opacity: 0; }
.ps-input {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
color: var(--er-gray-90);
}
.ps-caret {
flex: 0 0 auto;
width: 1px;
height: .95em;
margin-left: .09em;
background: var(--er-gray-90);
opacity: 0;
}
.ps-chat-live .ps-caret { animation: psCaret 1.05s steps(1, end) infinite; }
@keyframes psCaret { 0%, 48% { opacity: .8; } 49%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.ps-chat-live .ps-caret { animation: none; opacity: .8; }}
.ps-send {
flex: 0 0 auto;
width: 1.375rem;
height: 1.375rem;
border-radius: 50%;
background: var(--er-gray-90);
display: grid;
place-items: center;
}
.ps-send svg {
width: .75rem;
height: .75rem;
fill: none;
stroke: var(--er-white);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.ps-send.is-tapped { transform: scale(.86); filter: brightness(1.5); }
@media (prefers-reduced-motion: reduce) {
.ps-send.is-tapped { transform: none; }}
.ps-chat .ps-think {
align-items: center;
padding-block: .5em;
min-height: 0;
}
.app-dots {
display: flex;
gap: .375rem;
margin: 0;
}
.app-dots i {
width: .3125rem;
height: .3125rem;
border-radius: 50%;
background: var(--er-gray-20);
transition: background .3s var(--ease-out), transform .3s var(--ease-out);
}
.app-dots i.is-on {
background: var(--er-gray-70);
transform: scale(1.25);
}
.phone-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.5rem, 3.5vw, 3.5rem);
margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.phone { margin: 0; display: flex; flex-direction: column; }
.phone-frame {
aspect-ratio: 9 / 17;
flex-grow: 1;
border-radius: 1.75rem;
padding: .5rem;
background: linear-gradient(160deg, #2c3238, #14181c);
box-shadow: 0 30px 60px -35px rgba(16, 18, 20, .75);
}
.phone-screen {
height: 100%;
border-radius: 1.375rem;
background: var(--er-white);
padding: .6875rem .8125rem .75rem;
display: flex;
flex-direction: column;
gap: .375rem;
overflow: hidden;
color: var(--er-gray-90);
}
.phone-screen .ps-bar { color: rgba(35, 35, 35, .5); }
.phone-screen .ps-dots { background: rgba(35, 35, 35, .2); }
.ps-pair-hero {
display: grid;
place-items: center;
padding: .25rem 0 .125rem;
}
.ps-pair-hero picture { display: block; width: 100%; }
.ps-pair-hero img {
display: block;
width: 84%;
height: auto;
margin-inline: auto;
filter: drop-shadow(0 10px 14px rgba(20, 24, 28, .22));
}
.ps-pair-name {
text-align: center;
font-size: 1rem;
font-weight: 400;
letter-spacing: -.03em;
}
.ps-pair-state {
display: flex; align-items: center; justify-content: center; gap: .3125rem;
font-size: .625rem;
color: rgba(35, 35, 35, .64);
margin-top: .125rem;
}
.ps-pair-state i {
width: 5px; height: 5px; border-radius: 50%;
background: #2fbf71;
box-shadow: 0 0 6px rgba(47, 191, 113, .8);
}
.ps-battery {
display: flex;
align-items: center;
justify-content: center;
gap: .375rem;
font-size: .625rem;
color: rgba(35, 35, 35, .6);
margin-top: .25rem;
}
.ps-batt-icon {
position: relative;
width: 18px; height: 9px;
border: 1px solid rgba(35, 35, 35, .35);
border-radius: 2.5px;
padding: 1px;
}
.ps-batt-icon::after {
content: "";
position: absolute; right: -3px; top: 50%;
transform: translateY(-50%);
width: 1.5px; height: 4px;
background: rgba(35, 35, 35, .35);
border-radius: 0 1px 1px 0;
}
.ps-batt-icon i {
display: block; height: 100%;
background: #2fbf71;
border-radius: 1.5px;
}
.ps-sec-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-top: .375rem;
padding-top: .25rem;
border-top: 1px solid rgba(35, 35, 35, .09);
font-size: .5rem;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(35, 35, 35, .45);
}
.ps-sec-count { letter-spacing: 0; color: rgba(35, 35, 35, .32); }
.ps-thumbs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
margin-top: .375rem;
}
.ps-thumbs i {
position: relative;
display: block;
aspect-ratio: 4 / 3;
border-radius: 4px;
background: var(--er-gray-20);
overflow: hidden;
}
.ps-thumbs i img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ps-thumbs i.vid::after {
content: "";
position: absolute;
right: 3px; bottom: 3px;
width: 0; height: 0;
border-left: 5px solid rgba(255, 255, 255, .85);
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
}
.ps-btn {
display: flex;
align-items: center;
justify-content: center;
gap: .3125rem;
margin-top: .4375rem;
padding: .4375rem .625rem;
border: 1px solid rgba(35, 35, 35, .18);
border-radius: 8px;
font-size: .5625rem;
letter-spacing: -.005em;
color: rgba(35, 35, 35, .82);
}
.ps-btn svg {
width: 10px; height: 10px;
fill: none; stroke: currentColor;
stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.ps-btn-nav { justify-content: space-between; }
.ps-btn-l { display: flex; align-items: center; gap: .375rem; }
.ps-btn-nav em { font-style: normal; font-size: .75rem; color: rgba(35, 35, 35, .35); }
.ps-btn-nav.ps-btn-ask {
background: var(--er-gray-90);
border-color: var(--er-gray-90);
color: var(--er-white);
}
.ps-btn-nav.ps-btn-ask em { color: rgba(255, 255, 255, .5); }
.ps-chat-fab {
display: flex;
align-items: center;
justify-content: center;
gap: .375rem;
margin-top: auto;
padding: .5rem;
border-radius: 999px;
background: var(--er-gray-90);
color: var(--er-white);
font-size: .625rem;
letter-spacing: -.01em;
}
.ps-chat-fab svg {
width: 12px; height: 12px;
fill: none; stroke: currentColor;
stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.ps-search-mini {
display: flex;
align-items: center;
gap: .375rem;
font-size: .5625rem;
color: rgba(35, 35, 35, .64);
background: var(--glass-paper-fill);
border: var(--glass-paper-rim);
box-shadow: var(--glass-paper-lift);
border-radius: 999px;
padding: .375rem .5625rem;
margin-bottom: .25rem;
}
.ps-search-mini svg {
width: 9px; height: 9px;
fill: none; stroke: currentColor;
stroke-width: 1.5; stroke-linecap: round;
}
.ps-graph-wrap {
position: relative;
flex: 1;
flex: 0 1 56cqh;
min-height: 0;
overflow: hidden;
}
.ps-graph-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ps-labels { position: absolute; inset: 0; pointer-events: none; }
.ps-labels .graph-label b {
font-size: 9px;
letter-spacing: -.01em;
}
.ps-labels .graph-label span {
font-size: 7.5px;
letter-spacing: .04em;
}
.ps-btn-nav[aria-pressed="true"] {
background: var(--er-gray-90);
border-color: var(--er-gray-90);
color: var(--er-white);
}
.ps-btn-nav[aria-pressed="true"] em { color: rgba(255, 255, 255, .5); }
.ps-graph-foot {
display: flex;
justify-content: space-between;
font-size: .5rem;
letter-spacing: .06em;
text-transform: uppercase;
color: rgba(35, 35, 35, .64);
padding-top: .375rem;
border-top: 1px solid rgba(35, 35, 35, .1);
}
.ps-chat {
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: .3125rem;
flex: 1 1 auto;
min-height: 0;
margin-top: .375rem;
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 1.25rem);
mask-image: linear-gradient(to bottom, transparent, #000 1.25rem);
}
.ps-chat .msg {
max-width: 86%;
font-size: .625rem;
line-height: 1.45;
padding: .375rem .5rem;
border-radius: 9px;
}
.ps-chat .msg.you {
align-self: flex-end;
background: var(--er-gray-90);
color: var(--er-white);
border-bottom-right-radius: 3px;
}
.ps-chat .msg.aira {
align-self: flex-start;
background: #ededed;
color: var(--er-gray-90);
border-bottom-left-radius: 3px;
}
.ps-chat .msg.aira span {
display: block;
font-size: .5rem;
color: rgba(35, 35, 35, .68);
margin-top: .125rem;
}
.ps-chat .msg.aira .ps-draft {
display: block;
margin-top: .3125rem;
padding: .3125rem .4375rem;
border-left: 2px solid rgba(35, 35, 35, .25);
border-radius: 3px 6px 6px 3px;
background: var(--er-white);
font-size: .5625rem;
line-height: 1.45;
color: var(--er-gray-90);
}
@keyframes chatLineIn {
from { opacity: 0; transform: translateY(6px); }
to   { opacity: 1; transform: none; }
}
.ps-chat-fab[aria-pressed="true"] { background: #000; }
@media (prefers-reduced-motion: reduce) {
.ps-chat .msg.is-in,
.ps-chat.is-thinking .ps-think { animation: none; }}
.ps-bar {
display: flex; align-items: center; justify-content: space-between;
font-size: .5625rem; color: rgba(255, 255, 255, .5); margin-bottom: .25rem;
}
.ps-dots { width: 22px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.22); }
.ps-title { font-size: 1.375rem; font-weight: 300; letter-spacing: -.04em; }
.ps-title.sm { font-size: 1.125rem; }
.ps-sub { font-size: .625rem; color: rgba(255, 255, 255, .42); margin-top: -.1875rem; }
.ps-list { display: flex; flex-direction: column; gap: .5rem; margin-top: .375rem; }
.ps-list li {
display: grid;
grid-template-columns: 2.25rem 1fr;
gap: .125rem .5rem;
padding-bottom: .5rem;
border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.ps-list b { font-size: .625rem; font-weight: 400; color: var(--hud); }
.ps-list span { font-size: .75rem; letter-spacing: -.01em; }
.ps-list em {
grid-column: 2; font-style: normal; font-size: .5625rem;
color: rgba(255, 255, 255, .38);
}
.ps-list li.dim b { color: rgba(255, 255, 255, .3); }
.ps-list li.dim span { color: rgba(255, 255, 255, .35); }
.ps-search {
font-size: .6875rem;
color: rgba(255, 255, 255, .82);
background: rgba(255, 255, 255, .07);
border-radius: 999px;
padding: .4375rem .6875rem;
}
.ps-answer {
font-size: 1.5rem; font-weight: 300; letter-spacing: -.04em;
color: var(--hud); margin-top: .375rem;
}
.ps-source {
display: flex; align-items: center; gap: .375rem;
font-size: .5625rem; color: rgba(255, 255, 255, .5);
}
.ps-quote {
font-size: .625rem; line-height: 1.5; color: rgba(255, 255, 255, .45);
border-left: 1px solid rgba(255, 255, 255, .18);
padding-left: .5rem; margin-top: .375rem;
}
.ps-badge {
align-self: flex-start;
font-style: normal;
font-size: .5rem; letter-spacing: .12em; text-transform: uppercase;
padding: .1875rem .4375rem; border-radius: 999px;
background: #e8756b; color: #12161a;
}
.ps-label {
font-size: .5rem; letter-spacing: .12em; text-transform: uppercase;
color: rgba(255, 255, 255, .35); margin-top: .5rem;
}
.ps-links { display: flex; flex-direction: column; gap: .4375rem; }
.ps-links li {
display: grid; grid-template-columns: 8px 1fr; gap: .125rem .4375rem;
align-items: center; font-size: .6875rem;
}
.ps-links i {
width: 7px; height: 7px; border-radius: 50%;
background: var(--c); box-shadow: 0 0 7px -1px var(--c);
}
.ps-links em {
grid-column: 2; font-style: normal; font-size: .5625rem;
color: rgba(255, 255, 255, .38);
}
.ps-actions {
display: flex; gap: .375rem; margin-top: auto;
}
.ps-actions span {
flex: 1; text-align: center;
font-size: .5625rem; padding: .375rem 0;
border: 1px solid rgba(255, 255, 255, .16); border-radius: 6px;
color: rgba(255, 255, 255, .6);
}
.section-faq .eyebrow {
margin-bottom: clamp(2.5rem, 5vw, 4rem);
font-size: clamp(1.875rem, 4.4vw, 4rem);
letter-spacing: -.048em;
line-height: 1.07;
}
.faq-list {
max-width: 52rem;
margin-inline: auto;
}
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item:first-of-type { border-top: 1px solid var(--rule); }
.faq-item summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: baseline;
gap: 1.25rem;
padding: clamp(1rem, 2vw, 1.375rem) 0;
font-size: clamp(1rem, 1.5vw, 1.25rem);
font-weight: 400;
letter-spacing: -.03em;
line-height: 1.35;
-webkit-tap-highlight-color: transparent;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.faq-item summary::after {
content: "";
flex: none;
width: 11px; height: 11px;
margin-left: auto;
align-self: center;
background:
linear-gradient(var(--fg), var(--fg)) center/100% 1px no-repeat,
linear-gradient(var(--fg), var(--fg)) center/1px 100% no-repeat;
transition: transform .3s var(--ease);
}
.faq-item[open] summary::after {
background: linear-gradient(var(--fg), var(--fg)) center/100% 1px no-repeat;
transform: rotate(180deg);
}
.faq-answer { padding: 0 3rem clamp(1.25rem, 2.5vw, 1.75rem) 0; }
.faq-answer p {
font-size: clamp(.9375rem, 1.05vw, 1.0625rem);
line-height: 1.7;
color: var(--er-gray-70);
max-width: 44em;
}
.is-placeholder { position: relative; }
.is-placeholder::before {
content: "PLACEHOLDER";
position: absolute;
top: .5rem; right: .5rem;
z-index: 2;
font-style: normal;
font-size: .5625rem;
letter-spacing: .12em;
padding: .1875rem .4375rem;
border-radius: 2px;
background: #ffe8a3;
color: #6b4e00;
pointer-events: none;
}
.form-status { font-size: .8125rem; min-height: 1.25rem; color: rgba(255, 255, 255, .75); }
.form-status.is-error { color: #ffb4a8; }
.form-status.is-ok { color: #b8f5cf; }
.order-done { display: flex; flex-direction: column; gap: 12px; margin-top: 40px; }
.order-done .buy-title { margin: 0 0 4px; font-size: 32px; }
.order-done p {
margin: 0;
font-size: 17px;
line-height: 25px;
letter-spacing: var(--heading-tracking);
color: #1d1d1f;
}
.order-done a { color: #0066cc; }
.order-ref {
font-size: 14px !important;
line-height: 20px !important;
color: #6e6e73 !important;
font-feature-settings: "zero", "tnum";
}
.page-buy { background: #fff; }
.buy-page { padding-top: 53px; color: #1d1d1f; }
.buy-title { margin: 1px 0 0; font-size: 40px; color: #1d1d1f; }
@media (max-width: 45.875rem) {
.buy-page { padding-top: 32px; }
.buy-title { font-size: 28px; }
}
.buy-field { position: relative; margin: 14px 0 0; }
.buy-field input {
display: block;
width: 100%;
height: 56px;
margin: 0;
padding: 24px 15px 6px;
font: inherit;
font-size: 17px;
line-height: 21px;
letter-spacing: -.022em;
color: #1d1d1f;
background: rgba(255, 255, 255, .8);
border: 1px solid #86868b;
border-radius: 12px;
box-sizing: border-box;
appearance: none;
}
.buy-field label {
position: absolute;
top: 17px;
left: 16px;
right: 16px;
font-size: 17px;
line-height: 21px;
letter-spacing: -.022em;
color: #6e6e73;
pointer-events: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: top .125s ease-in, font-size .125s ease-in, line-height .125s ease-in;
}
.buy-field input:focus + label,
.buy-field input:not(:placeholder-shown) + label {
top: 8px;
font-size: 12px;
line-height: 16px;
letter-spacing: -.01em;
}
.buy-field input:focus {
outline: none;
border-color: #0071e3;
box-shadow: 0 0 0 4px rgba(0, 125, 250, .3);
}
.buy-field .field-error,
.buy-check .field-error {
display: block;
margin: 8px 0 0;
font-size: 12px;
line-height: 16px;
color: #e30000;
}
.buy-field .field-error:empty,
.buy-check .field-error:empty { display: none; }
.buy-field.is-invalid input { border-color: #e30000; background: #fff2f4; }
.buy-check {
margin: 20px 0 0;
display: grid;
grid-template-columns: auto 1fr;
gap: 0 10px;
align-items: start;
}
.buy-check input { width: 18px; height: 18px; margin: 0; accent-color: #0071e3; }
.buy-check label {
font-size: 12px;
line-height: 18px;
letter-spacing: -.01em;
color: #1d1d1f;
}
.buy-check a { color: #0066cc; }
.buy-check .field-error { grid-column: 2; }
.buy-button {
display: block;
width: 100%;
margin-top: 22px;
padding: 8px 15px;
border: 0;
border-radius: 8px;
font: inherit;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: -.016em;
color: #fff;
cursor: pointer;
}
.buy-button[disabled] { opacity: .42; cursor: default; }
.buy-form .form-status {
min-height: 0;
margin: 12px 0 0;
font-size: 14px;
line-height: 20px;
color: #1d1d1f;
}
.buy-form .form-status:empty { display: none; }
.buy-form .form-status.is-error { color: #e30000; }
.buy-form .form-status.is-ok { color: #1d1d1f; }
.buy-foot {
margin: 18px 0 0;
font-size: 12px;
line-height: 16px;
letter-spacing: -.01em;
color: #6e6e73;
}
.page-order { background: #fff; }
.po-page { color: #000; }
.po-d { display: none; }
.po-m { display: flex; }
@media (min-width: 51.3125rem) {
.po-d { display: flex; }
.po-m { display: none; }
}
.po-gallery { position: relative; overflow: hidden; border-radius: 8px; background: #f6f5f8; }
.po-view {
position: relative;
width: 100%;
height: 100%;
touch-action: pan-y pinch-zoom;
-webkit-user-select: none;
user-select: none;
outline: none;
}
.po-view:focus-visible { box-shadow: inset 0 0 0 4px rgba(0, 125, 250, .6); }
.po-slide {
position: absolute;
inset: 0;
z-index: 1;
opacity: 0;
pointer-events: none;
transition: opacity .15s ease-in-out;
}
.po-slide[data-active] { z-index: 2; opacity: 1; pointer-events: auto; }
.po-slide[data-exiting] { z-index: 1; opacity: 0; }
.po-slide img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
pointer-events: none;
-webkit-user-drag: none;
}
.po-gallery[data-narrow="true"] .po-slide.is-fit { display: flex; align-items: center; justify-content: center; }
.po-gallery[data-narrow="true"] .po-slide.is-fit img { height: var(--narrow-img-height, 100%); }
.po-view.is-cur-left {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15 6L9 12L15 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 12 12, w-resize;
}
.po-view.is-cur-right {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M9 6L15 12L9 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 12 12, e-resize;
}
.po-view.is-dragging { cursor: grabbing !important; }
.po-controls {
position: absolute;
z-index: 3;
left: 50%;
bottom: 21px;
display: inline-flex;
align-items: center;
gap: 14px;
transform: translateX(-50%);
}
.po-nav {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 90px;
background: transparent;
color: gray;
cursor: pointer;
transition: color .15s;
}
.po-nav:hover { color: rgba(0, 0, 0, .6); }
.po-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.po-dots { display: inline-flex; align-items: center; gap: 7px; }
.po-dot {
width: 8px;
height: 8px;
padding: 0;
border: .5px solid rgba(0, 0, 0, .2);
border-radius: 9999px;
background: rgba(0, 0, 0, .03);
cursor: pointer;
transition: background .15s, border-color .15s;
}
.po-dot[aria-selected="true"] { background: rgba(0, 0, 0, .22); }
.po-nav:focus-visible,
.po-dot:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 125, 250, .6); }
.po-d {
position: relative;
width: 100%;
height: calc(100vh - var(--header-height));
height: calc(100svh - var(--header-height));
box-sizing: border-box;
padding: 24px;
overflow: hidden;
align-items: center;
justify-content: center;
gap: 36px;
}
.po-gallery--d { flex: 71 1 0; align-self: stretch; min-width: 0; }
.po-panel {
flex: 31 1 0;
align-self: stretch;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-start;
box-sizing: border-box;
margin: 0 -12px 0 0;
padding: 40px 12px 30px 0;
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, .2) transparent;
}
.po-top { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; gap: 19px; flex-shrink: 0; }
.po-head { align-self: stretch; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.po-name { min-width: 125px; min-height: 76px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.po-d .po-head { position: relative; }
.po-d .po-faq { position: absolute; top: 0; right: 0; }
.po-product { position: relative; top: -.3px; margin: 0; font-size: 30.6px; line-height: 46.8px !important; white-space: nowrap; color: #000; }
.po-subtitle { margin: -4px 0 0; font-size: 18px; line-height: 1.4; letter-spacing: -.01em; color: rgba(0, 0, 0, .4); }
.po-faq {
flex: none;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 22px;
border: 0;
border-radius: 90px;
background: rgba(0, 0, 0, .03);
font-size: 16px;
line-height: 18.7px;
letter-spacing: -.01em;
color: gray;
cursor: pointer;
}
.po-options { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; gap: 31px; font-size: 14px; line-height: 16.7px; color: gray; }
.po-divider { align-self: stretch; flex-shrink: 0; height: 1px; background: rgba(0, 0, 0, .1); }
.po-options-in { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 31px; }
.po-label { letter-spacing: -.01em; }
.po-lens { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: 12px; }
.po-lens-head { align-self: stretch; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.po-notsure {
padding: 0;
border: 0;
background: transparent;
font-size: 14px;
line-height: 16.7px;
letter-spacing: -.01em;
text-decoration: underline;
color: gray;
opacity: .6;
cursor: pointer;
}
.po-pills { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; font-size: 16px; color: #000; }
.po-pill { position: relative; display: block; cursor: pointer; }
.po-pill input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.po-pill span {
display: flex;
align-items: center;
justify-content: center;
padding: 10.7px 24px 13.3px;
border: 2px solid transparent;
border-radius: 90px;
background: rgba(0, 0, 0, .03);
font-size: 16px;
line-height: 1;
letter-spacing: -.01em;
white-space: nowrap;
opacity: .3;
transition: opacity .15s ease, border-color .15s ease;
}
.po-pill input:checked + span { border-color: gray; opacity: 1; }
.po-pill input:focus-visible + span { box-shadow: 0 0 0 4px rgba(0, 125, 250, .6); }
.po-rx {
align-self: stretch;
display: flex;
align-items: center;
max-height: 0;
padding: 0 14px;
overflow: hidden;
border-radius: 8px;
background: rgba(0, 0, 0, .03);
color: rgba(0, 0, 0, .4);
opacity: 0;
transition: opacity .2s ease, max-height .2s ease, padding .2s ease;
}
.po-rx[data-visible="true"] { max-height: 100px; padding: 14px; opacity: 1; }
.po-rx p { flex: 1; margin: 0; font-size: 14px; line-height: 16.7px; letter-spacing: -.01em; }
.po-bottom { align-self: stretch; display: flex; flex-direction: column; flex-shrink: 0; }
.po-batch {
position: relative;
z-index: 1;
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 36px;
box-sizing: border-box;
padding: 18px 20px;
border-radius: 19px;
background: #f6f5f8;
}
.po-batch-top { align-self: stretch; display: flex; flex-direction: column; gap: 26px; }
.po-batch-info { display: flex; flex-direction: column; gap: 9px; }
.po-batch-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; }
.po-d .po-batch-row { position: relative; top: 1px; }
.po-batch-name { margin: 0; font-size: 18px; line-height: 20.7px; letter-spacing: -.01em; color: #000; }
.po-batch-price { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 20px; line-height: 23.3px; letter-spacing: -.01em; color: #000; }
.po-batch-per,
.po-pay-main s { color: #b6b6b6; }
.po-batch-meta { margin: 0; text-align: right; font-size: 16px; line-height: 18.7px; letter-spacing: -.01em; white-space: nowrap; color: #b7b7b7; }
.po-batch-divider { height: 1px; background: rgba(0, 0, 0, .1); }
.po-pay { display: flex; flex-direction: column; gap: 16px; }
.po-pay-lines { display: flex; flex-direction: column; gap: 4px; }
.po-pay-line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; font-size: 16px; line-height: 18.7px; letter-spacing: -.01em; color: #000; }
.po-pay-main,
.po-pay-sub { white-space: nowrap; }
.po-pay-sub,
.po-pay-line.is-muted { color: gray; }
.po-pay-note { margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.4; letter-spacing: -.01em; color: #bfbfbf; }
.po-pay-note li::before { content: "- "; }
.po-proceed {
display: flex;
align-items: center;
justify-content: center;
padding: 14px 24px;
overflow: hidden;
border: 0;
border-radius: 90px;
font-size: 16px;
line-height: 18.7px;
letter-spacing: -.01em;
white-space: nowrap;
cursor: pointer;
}
.po-proceed:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(0, 125, 250, .6); }
.po-m {
position: relative;
width: 100%;
flex-direction: column;
align-items: center;
gap: 48px;
box-sizing: border-box;
padding: 30px 20px 140px;
overflow: hidden;
isolation: isolate;
}
.po-m-top { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.po-m .po-name { min-width: 105px; min-height: 52px; gap: 0; }
.po-m .po-product { top: -.7px; font-size: 20.4px; line-height: 31.2px !important; }
.po-m .po-subtitle { margin: 0; font-size: 15px; }
.po-gallery--m { align-self: stretch; aspect-ratio: 350 / 285; }
.po-gallery--m .po-dot { width: 6px; height: 6px; }
.po-m-content { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 80px; font-size: 14px; line-height: 16.7px; color: gray; }
.po-m-options { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 36px; }
.po-m .po-lens { gap: 12px; padding-bottom: 0; }
.po-m .po-pills { align-self: stretch; flex-wrap: nowrap; font-size: 15px; }
.po-m .po-pill { flex: 1 1 0; min-width: 0; }
.po-m .po-pill span { padding: 10.9px 24px 13.1px; font-size: 15px; }
.po-m .po-rx { margin-top: 0; transition: opacity .2s ease, max-height .2s ease, padding .2s ease, margin-top .2s ease; }
.po-m .po-rx[data-visible="true"] { margin-top: 4px; }
.po-m .po-rx p { font-size: 12px; line-height: 1.3; }
.po-m-checkout { align-self: stretch; display: flex; flex-direction: column; }
.po-m .po-batch { gap: 28px; padding: 16px 18px; border-radius: 17px; }
.po-m .po-batch-top { gap: 20px; }
.po-m .po-batch-info { gap: 6px; }
.po-m .po-batch-row { gap: 4px 16px; }
.po-m .po-batch-name,
.po-m .po-batch-price { font-size: 16px; line-height: 18.7px; }
.po-m .po-batch-meta { font-size: 14px; line-height: 16.7px; }
.po-m .po-pay { gap: 14px; }
.po-m .po-pay-line { gap: 5px; font-size: 14px; line-height: 16.7px; }
.po-m .po-pay-note { position: relative; top: -.6px; font-size: 13px; }
.po-m .po-proceed { align-self: stretch; font-size: 15px; line-height: 17.4px; }
.po-modal {
position: fixed;
inset: auto;
left: 50%;
margin: 0;
padding: 0;
max-width: none;
max-height: none;
box-sizing: border-box;
overflow: hidden;
border: .5px solid rgba(0, 0, 0, .12);
border-radius: 8px;
background: #fff;
color: #000;
transform: translateX(-50%);
}
.po-modal::backdrop { background: rgba(0, 0, 0, .4); }
.po-modal[open] { animation: poSheetIn .2s ease both; }
.po-modal[open]::backdrop { animation: poDimIn .2s ease both; }
.po-modal.is-closing { animation: poSheetOut .2s ease both; }
.po-modal.is-closing::backdrop { animation: poDimOut .2s ease both; }
@keyframes poSheetIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes poSheetOut { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, 10px); } }
@keyframes poDimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes poDimOut { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.po-modal[open],
.po-modal[open]::backdrop { animation: none; }
}
.po-modal-in { display: flex; flex-direction: column; gap: 36px; height: 100%; box-sizing: border-box; padding: 24px; overflow: hidden; }
.po-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-shrink: 0; }
.po-modal-title { position: relative; top: .3px; margin: 0; font-size: 18.7px; line-height: 28.6px !important; color: #000; }
.po-modal-close {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: 0;
background: transparent;
color: #000;
cursor: pointer;
}
.po-modal-close:hover { color: gray; }
.po-modal-close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.po-modal-close:focus-visible { outline: none; border-radius: 4px; box-shadow: 0 0 0 3px rgba(0, 125, 250, .6); }
.po-modal--faq { top: calc(var(--header-height) + 44px); width: 480px; height: min(742px, calc(100vh - var(--header-height) - 88px)); height: min(742px, calc(100dvh - var(--header-height) - 88px)); }
.po-faq-list { display: flex; flex: 1; flex-direction: column; gap: 24px; min-height: 0; overflow-y: auto; }
.po-faq-item { display: flex; flex-direction: column; padding: 16px; border-radius: 6px; background: rgba(0, 0, 0, .03); }
.po-faq-q {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 0;
border: 0;
background: transparent;
text-align: left;
font-size: 16px;
line-height: 1.3;
letter-spacing: -.01em;
color: #000;
cursor: pointer;
}
.po-faq-q > span { flex: 1; padding: 3.5px 0; }
.po-faq-icon { flex-shrink: 0; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.po-faq-v { transform-origin: 14px 14px; transition: transform .25s ease, opacity .25s ease; }
.po-faq-item.is-open .po-faq-v { transform: rotate(90deg); opacity: 0; }
.po-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.po-faq-item.is-open .po-faq-a { grid-template-rows: 1fr; }
.po-faq-a-in { overflow: hidden; }
.po-faq-a-in p { margin: 0; padding-top: 8px; font-size: 16px; line-height: 1.3; letter-spacing: -.01em; color: gray; }
.po-modal--lens { top: max(calc(var(--header-height) + 74px), calc(50vh - 243.5px)); width: 480px; height: 487px; }
.po-modal--lens .po-modal-in { gap: 48px; }
.po-lens-top { display: flex; flex-direction: column; gap: 36px; }
.po-lens-title { max-width: 170px; }
.po-lens-options { display: flex; flex-direction: column; gap: 24px; }
.po-lens-option { display: flex; flex-direction: column; gap: 8px; }
.po-lens-option-title { margin: 0; font-size: 15px; line-height: 17.4px; letter-spacing: -.01em; color: #000; }
.po-lens-option-desc { margin: 0; font-size: 13px; line-height: 1.3; letter-spacing: -.01em; color: gray; }
.po-lens-foot { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 6px; background: rgba(0, 0, 0, .03); }
.po-lens-foot-title { margin: 0; font-size: 14px; line-height: 16.7px; letter-spacing: -.01em; color: #000; }
.po-lens-foot-desc { margin: 0; max-width: 262px; font-size: 13px; line-height: 15.3px; letter-spacing: -.01em; color: gray; }
@media (max-width: 51.25rem) {
.po-modal--faq { top: calc(var(--header-height) + 52px); width: calc(100vw - 40px); height: calc(100vh - var(--header-height) - 72px); height: calc(100dvh - var(--header-height) - 72px); }
.po-modal--lens { top: calc(var(--header-height) + 74px); width: calc(100vw - 60px); height: calc(100vh - var(--header-height) - 148px); height: calc(100dvh - var(--header-height) - 148px); max-height: 501px; }
.po-modal--lens .po-modal-in { overflow-y: auto; }
}
.co-wrap {
width: 87.5%;
max-width: 600px;
margin-inline: auto;
padding-bottom: 80px;
}
.co-sub {
margin: 12px 0 0;
font-size: 17px;
line-height: 25px;
letter-spacing: var(--heading-tracking);
color: #1d1d1f;
}
.co-item {
display: grid;
grid-template-columns: 96px minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
margin-top: 32px;
padding: 16px 0;
border-block: 1px solid #d2d2d7;
}
.co-item-art {
display: grid;
place-items: center;
aspect-ratio: 1;
padding: 12px;
border-radius: 12px;
background: #f5f5f7;
}
.co-item-art picture { display: contents; }
.co-item-art img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.co-item-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.co-item-name,
.co-item-price {
font-size: 17px;
line-height: 21px;
font-weight: 600;
letter-spacing: -.022em;
}
.co-item-lens,
.co-item-change {
margin-top: 2px;
font-size: 14px;
line-height: 20px;
letter-spacing: -.016em;
}
.co-item-lens:empty { display: none; }
.co-item-change { color: #0066cc; }
.co-item-change:hover { text-decoration: underline; }
.co-fields { margin-top: 18px; }
.co-sum { margin: 32px 0 0; padding: 0; }
.co-sum-row {
display: flex;
justify-content: space-between;
gap: 16px;
font-size: 17px;
line-height: 25px;
letter-spacing: var(--heading-tracking);
}
.co-sum-row + .co-sum-row { margin-top: 8px; }
.co-sum-row dt,
.co-sum-row dd { margin: 0; }
.co-sum-row dd { text-align: right; font-feature-settings: "tnum"; }
.co-sum-row.co-sum-total {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #d2d2d7;
font-size: 24px;
line-height: 28px;
font-weight: 600;
}
.co-sum-note {
margin: 8px 0 0;
font-size: 14px;
line-height: 20px;
letter-spacing: var(--heading-tracking);
color: #6e6e73;
}
.co-form .buy-check { margin-top: 28px; }
.co-button {
margin-top: 28px;
padding: 18px 31px;
border-radius: 12px;
font-size: 17px;
line-height: 20px;
letter-spacing: -.022em;
}
.co-wrap > .order-done { margin-top: 0; }
.co-wrap > .order-done .buy-title { font-size: 40px; }
@media (max-width: 45.875rem) {
.co-wrap > .order-done .buy-title { font-size: 32px; }
.co-item { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; }
.co-item-art { padding: 8px; }
.co-sum-row.co-sum-total { font-size: 21px; line-height: 25px; }
}
.footer-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.footer-tagline {
font-size: .875rem;
color: rgba(0, 0, 0, .56);
margin-top: .75rem;
letter-spacing: -.01em;
}
.reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
.reveal-load { animation: reveal-in .85s var(--ease-out) backwards; }
.reveal-load[data-delay="1"] { animation-delay: .1s; }
.reveal-load[data-delay="2"] { animation-delay: .2s; }
@keyframes reveal-in {
from { opacity: 0; transform: translateY(18px); }
}
@media (max-width: 48rem) {
.hw-card p { font-size: 1rem; }
.mic-cards .hw-copy { padding-top: 24px; font-size: 14px; line-height: 20px; letter-spacing: -.016em; }
.act-steps li { font-size: .875rem; }
.spec-col dt,
.spec-col dd { font-size: .8125rem; }
.kit-grid { grid-auto-rows: clamp(11rem, 44vw, 15rem); }
.kit-art { padding-inline: 6%; }
.kit-cell.is-wide .kit-art { padding-inline: 12%; }}
@media (min-width: 125rem) {
:root { --maxw: 100rem; --gutter: var(--gutter-wide); }}
@media (max-width: 64rem) {
.footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feature-grid { grid-template-columns: 1fr; gap: 3rem; }
.press-quotes { grid-template-columns: 1fr; gap: 2.5rem; }
.hw-grid { grid-template-columns: 1fr; }
.phone-row {
display: flex;
gap: clamp(1rem, 4vw, 1.75rem);
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
overscroll-behavior-x: contain;
margin-inline: calc(var(--gutter) * -1);
padding-inline: var(--gutter);
padding-bottom: .5rem;
}
.phone-row::-webkit-scrollbar { display: none; }
.phone-row .phone {
flex: 0 0 min(78%, 17.5rem);
scroll-snap-align: center;
}
.phone-frame { aspect-ratio: 9 / 18; }
.ps-thumbs i { aspect-ratio: 1; }
.ps-pair-hero img { width: 92%; }
.footer-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }}
@media (max-width: 72rem) {
.graph-panel { --pk-chat: 32%; --pk-card: 40%; }
.pc-bar { gap: .5rem; }
.pc-bar > svg:nth-of-type(3) { display: none; }
}
@media (max-width: 59.9375rem) {
.graph-panel {
--globe-h: clamp(20rem, 64vw, 30rem);
--pk-card: 40%;
aspect-ratio: auto;
max-height: none;
min-height: 0;
}
.pk-body { flex-direction: column; }
.pk-stage {
order: -1;
flex: none;
height: var(--globe-h);
margin: 0 .625rem;
border-radius: .75rem;
box-shadow: none;
}
.graph-ui { width: auto; }
.mem-thread { flex: 0 0 auto; height: clamp(22rem, 52vw, 26rem); }
.pk-left { width: auto; gap: 1.25rem; }
}
@media (max-width: 48rem) {
.section-bubbles {
padding-top: calc(var(--section-y) + 1rem);
padding-bottom: calc(var(--section-y) + 1rem);
}
.graph-head { margin-bottom: 1.75rem; }
.graph-sub { max-width: 21em; font-size: 1.0625rem; line-height: 1.47; }
.graph-panel {
--globe-h: 24rem;
--pk-bar: 2.75rem;
width: 87.5%;
border-radius: 1rem;
}
.pk-bar { padding-right: .75rem; }
.pk-left { padding-left: .875rem; }
.pk-tools, .pk-apps { display: none; }
.pk-search { width: auto; height: auto; margin-left: auto; padding: 0; background: none; }
.pk-search span { display: none; }
.pk-search svg { width: 1.0625rem; height: 1.0625rem; }
.pk-stage { margin: 0 .5rem; }
.mem-thread {
height: 25rem;
justify-content: flex-start;
padding: 1.125rem 1rem .5rem;
-webkit-mask-image: none;
mask-image: none;
}
.mem-thread:has(#memQ2.is-in) :is(#memQ1, #memT1, #memA1) { display: none; }
.mem-thk.is-done :is(.mt-s, .mt-list) { display: none; }
.mem-msg { font-size: .9375rem; line-height: 1.5; }
.mem-msg.you { max-width: 88%; }
.mem-composer { margin: 0 .625rem .625rem; min-height: 4.5rem; }
.pk-card {
top: auto;
left: .5rem;
right: .5rem;
bottom: .5rem;
width: auto;
height: 44%;
padding: .5rem .875rem .75rem;
transform: translateY(calc(100% + 1rem));
}
.graph-panel.is-card .pk-zoom { right: .75rem; }
.pc-head { flex-direction: row; align-items: center; gap: .75rem; margin-top: .5rem; }
.pc-img { width: 2.75rem; height: 2.75rem; margin: 0; }
.pc-body { margin-top: .5rem; }
}
@media (max-width: 48rem) {
:root { --header-height: 3.25rem; }
.nav-primary { display: none; }
.menu-toggle { display: flex; }
.header-actions { margin-left: auto; }
.header-actions { gap: .5rem; }
.header-actions .btn-sm {
height: 2rem;
padding-inline: .875rem;
font-size: .75rem;
}
.brand { --brand-h: 1.2292rem; }
.brand-word { height: .8884rem; }
.voice { grid-template-columns: 1fr; }
.voice-portrait { max-width: 14rem; aspect-ratio: 4 / 4.4; }
.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.aira-flow { grid-template-columns: 1fr; gap: 1.25rem; }
.af-hub { flex-direction: row; justify-content: flex-start; gap: .625rem; padding: .75rem .875rem; }
.af-hub-name { margin-top: 0; }
.af-hub::before, .af-hub::after { display: none; }
.af-out { padding-left: 0; border-left: 0; }
.af-out li::before { display: none; }
.af-out li { grid-template-columns: 4.5rem 1fr auto; gap: .5rem; }
.hero-hud { left: 6%; top: 18%; }
.hero-cta .btn { flex: 1 1 auto; }
.hero-stage {
grid-template-columns: 1fr;
gap: .875rem;
}
.hero-art img { max-height: min(18svh, 150px); }
.tech-lens { border-radius: 999px / 120px; aspect-ratio: 16 / 10; }
.legal-inner { flex-direction: column; align-items: flex-start; padding-block: 1rem 1.25rem; }}
@media (max-width: 30rem) {
.footer-grid { grid-template-columns: 1fr; }
.hero-hud { display: none; }}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
.reveal { opacity: 1; transform: none; }
.reveal-load { animation: none; }
.hero-art .glasses-lines > * { stroke-dashoffset: 0; }
.hero-hud { opacity: 1; }
.case-say, .case-did,
.act-steps li, .act-note { animation: none; opacity: 1; transform: none; }
.case-typing { display: none; }}
@media print {
.site-header, .mobile-menu { display: none; }
body { color: #000; }}
@media all {
.reel-wrap {
display: flex;
flex-direction: column;
justify-content: center;
min-height: calc(100svh - var(--header-height));
background: var(--er-white);
padding-block: clamp(1.25rem, 4vw, 2rem);
}
.reel-heading {
display: block;
margin: 0 0 clamp(.625rem, 2vw, 1rem);
padding-inline: var(--gutter);
font-size: clamp(1.25rem, 5.6vw, 1.75rem);
line-height: 1.2;
min-height: calc(2 * 1.2em);
text-wrap: balance;
color: var(--er-gray-80);
}
.reel {
display: flex;
gap: clamp(.625rem, 3vw, 1rem);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
--reel-card: min(84vw, calc(70svh * 3 / 5));
padding-inline: calc((100% - var(--reel-card)) / 2);
scroll-padding-inline: calc((100% - var(--reel-card)) / 2);
scrollbar-width: none;
}
.reel::-webkit-scrollbar { display: none; }
.reel > .section {
flex: 0 0 var(--reel-card);
scroll-snap-align: center;
min-width: 0;
padding: 0;
margin: 0;
background: none;
}
.reel > .section > .container,
.reel > .section .cases-split {
width: 100%;
max-width: none;
padding: 0;
margin: 0;
}
.reel > .section > .container > .d-h2,
.reel > .section .cases-copy { display: none; }
.reel > .section { cursor: pointer; }
.reel > .section.is-centred { cursor: default; }
.reel > .section .case-media,
.reel > .section .recall-media,
.reel > .section .act-media {
filter: blur(calc((1 - var(--focus, 1)) * 7px));
opacity: calc(.42 + var(--focus, 1) * .58);
transform: scale(calc(.93 + var(--focus, 1) * .07));
transform-origin: 50% 50%;
will-change: filter, opacity, transform;
}
.reel .case-media,
.reel .recall-media,
.reel .act-media {
position: relative;
aspect-ratio: 3 / 5;
width: 100%;
margin: 0;
border-radius: var(--reel-radius, 18px);
overflow: hidden;
}
.reel .recall-grid,
.reel .act-grid {
border-radius: var(--reel-radius, 18px);
overflow: hidden;
}
.reel > .section .recall-copy,
.reel > .section .act-copy {
filter: blur(calc((1 - var(--focus, 1)) * 7px));
opacity: calc(.42 + var(--focus, 1) * .58);
left: calc((1 - var(--focus, 1)) * 3.5%);
right: calc((1 - var(--focus, 1)) * 3.5%);
bottom: calc((1 - var(--focus, 1)) * 3.5%);
will-change: filter, opacity;
}
.reel .case-media img,
.reel .case-media .case-video,
.reel .recall-video,
.reel .act-video {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
}
.reel #cases .case:nth-child(1) img { object-position: 66% 50%; }
.reel #cases .case:nth-child(2) img { object-position: 50% 50%; }
.reel .recall-video { object-position: 90% 50%; }
.reel .act-video    { object-position: 26% 50%; }
.reel .recall-grid,
.reel .act-grid {
display: block;
margin: 0;
gap: 0;
}
.reel .cases,
.reel .cases-split .cases { margin: 0; padding: 0; max-width: none; }
.reel .case-track { display: grid; }
.reel .case-scrim { display: none; }
.reel .case-overlay,
.reel .recall-copy,
.reel .act-copy {
position: absolute;
left: 0; right: 0; bottom: 0;
display: flex;
flex-direction: column;
align-items: stretch;
gap: .375rem;
max-width: none;
margin: 0;
padding: 1rem .625rem .625rem;
color: #1d1d1f;
z-index: 2;
}
.reel .recall-media,
.reel .act-media { position: relative; }
.reel .recall-grid,
.reel .act-grid { position: relative; }
.reel .case-say,
.reel .recall-copy .case-say,
.reel .act-copy .case-say {
align-self: flex-end;
max-width: 84%;
margin: 0;
padding: .4375rem .75rem;
border: 0;
border-radius: .875rem;
background: #f0f0f0;
color: #1d1d1f;
box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .5);
-webkit-backdrop-filter: none;
backdrop-filter: none;
font-size: .75rem;
line-height: 1.45;
}
.reel .case-say .case-mic { display: inline-block; opacity: .45; }
.reel .chat-aira {
display: flex;
flex-direction: column;
align-items: stretch;
gap: .4375rem;
padding: .5625rem .6875rem .6875rem;
border-radius: 14px;
background: #fbfbfb;
box-shadow: 0 14px 32px -16px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .04);
opacity: 0;
}
.reel .chat-thk {
display: flex;
align-items: center;
gap: .3125rem;
font-size: .75rem;
line-height: 1.2;
color: #86868b;
}
.reel .chat-thk .aira-orb { --aira-top: #f6f6f7; --aira-bottom: #d9dce1; width: 1.125rem; height: 1.125rem; }
.reel .chat-thk svg { width: .75rem; height: .75rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.reel .recall-found,
.reel .act-steps {
display: grid;
gap: .3125rem;
margin: 0;
padding: 0;
border: 0;
background: none;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
list-style: none;
}
.reel .act-steps li { display: grid; gap: .3125rem; margin: 0; padding: 0; }
.reel .act-steps li::before { content: none; }
.reel .chat-s { display: block; font-size: .6875rem; line-height: 1.35; color: #a1a1a6; }
.reel .chat-s b { font-weight: 500; color: #6e6e73; }
.reel .chat-s.is-app { display: flex; align-items: center; gap: .375rem; }
.reel .chat-list {
display: block;
padding: .1875rem .5625rem;
border: 1px solid #ededee;
border-radius: .625rem;
}
.reel .chat-row {
display: flex;
align-items: center;
gap: .4375rem;
min-height: 1.5rem;
font-size: .6875rem;
line-height: 1.3;
color: #2c2c2e;
}
.reel .chat-thumb { flex: none; width: .875rem; height: .875rem; border-radius: 50%; object-fit: cover; }
.reel .chat-thumb.is-app { border-radius: 3px; object-fit: contain; }
.reel .case-reply { display: grid; grid-template-rows: 0fr; margin: 0; }
.reel .case-reply > .case-did { min-height: 0; overflow: hidden; }
.reel .case-typing { display: none; }
.reel .case-did {
display: block;
max-width: none;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
color: #1d1d1f;
font-size: .75rem;
line-height: 1.45;
}
.reel .case-did b { font-weight: 600; color: #1d1d1f; }
.reel .act-note {
margin: 0;
padding: 0;
border: 0;
background: none;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
font-size: .6875rem;
line-height: 1.3;
color: #86868b;
}
.cases.is-playing .case.is-active .chat-aira { animation: caseBubble .45s var(--ease-out) 1s both; }
.reel .recall-grid.is-playing .chat-aira { animation: caseBubble .45s var(--ease-out) .6s both; }
.reel .act-grid.is-playing .chat-aira { animation: caseBubble .45s var(--ease-out) 2.45s both; }
.reel .act-steps { opacity: 0; }
.reel .act-grid.is-playing .act-steps { animation: caseBubble .4s var(--ease-out) 2.85s both; }
.cases.is-playing .case.is-active .case-reply { animation: chatOpen .35s var(--ease-out) 2.2s both; }
.reel .recall-grid.is-playing .case-reply { animation: chatOpen .35s var(--ease-out) 2.85s both; }
.reel .act-grid.is-playing .case-reply { animation: chatOpen .35s var(--ease-out) 4.25s both; }
@media (prefers-reduced-motion: reduce) {
.reel .chat-aira,
.reel .act-steps { animation: none; opacity: 1; }
.reel .case-reply { animation: none; grid-template-rows: 1fr; }
}
.reel .recall-grid.is-still .case-say,
.reel .recall-grid.is-still .recall-found,
.reel .recall-grid.is-still .chat-aira,
.reel .recall-grid.is-still .case-did { animation: none; opacity: 1; transform: none; }
.reel .recall-grid.is-still .case-reply { animation: none; grid-template-rows: 1fr; }
.reel-cap {
display: block;
margin: .875rem 0 0;
text-align: center;
font-size: clamp(1.125rem, 5.2vw, 1.4375rem);
font-weight: 400;
line-height: 1.25;
letter-spacing: -.02em;
color: var(--er-gray-90);
}
.reel-nav {
display: flex;
justify-content: center;
align-items: center;
gap: 1.5rem;
margin-top: .875rem;
}
.reel-nav[hidden] { display: none; }
.reel-arrow {
width: 44px;
height: 44px;
display: grid;
place-items: center;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
color: var(--er-gray-50);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: color .2s var(--ease), background-color .2s var(--ease);
}
.reel-arrow svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.reel-arrow:hover { color: var(--er-gray-90); }
.reel-arrow:active { background: var(--er-gray-05); }
.reel-arrow[disabled] { color: var(--er-gray-10); cursor: default; }}
@media (max-width: 59.99rem) {
.reel-wrap { margin-top: clamp(1.5rem, 8vw, 2.5rem); }
.reel-heading {
text-align: center;
margin-bottom: clamp(1.25rem, 6.4vw, 1.75rem);
}
}
@media (min-width: 60rem) {
.reel-wrap {
min-height: 0;
padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
.reel-heading {
font-size: clamp(1.125rem, 1.9vw, 1.75rem);
padding-inline: 0;
max-width: 60rem;
margin-inline: auto;
text-align: center;
min-height: 1.2em;
white-space: nowrap;
}
.reel-heading .reel-br { display: none; }
.reel {
--reel-card: min(84vw, 76rem, calc(76svh * 16 / 9));
gap: clamp(2.5rem, 5.5vw, 5rem);
}
.reel { --reel-radius: 22px; }
.reel .case-media,
.reel .recall-media,
.reel .act-media {
aspect-ratio: 16 / 9;
}
.reel .case-overlay,
.reel .recall-copy,
.reel .act-copy { max-width: 26.5rem; gap: .5rem; padding: 4rem 1.5rem 1.5rem; }
.reel .case-say,
.reel .recall-copy .case-say,
.reel .act-copy .case-say { padding: .5625rem .875rem; font-size: .875rem; line-height: 1.5; }
.reel .chat-aira { gap: .5rem; padding: .75rem .875rem .875rem; border-radius: 16px; }
.reel .chat-thk { gap: .375rem; font-size: .875rem; }
.reel .chat-thk .aira-orb { width: 1.375rem; height: 1.375rem; }
.reel .chat-thk svg { width: .875rem; height: .875rem; }
.reel .chat-s { font-size: .75rem; }
.reel .chat-list { padding: .25rem .625rem; }
.reel .chat-row { gap: .5rem; min-height: 1.75rem; font-size: .8125rem; }
.reel .chat-thumb { width: 1rem; height: 1rem; }
.reel .case-did { font-size: .875rem; line-height: 1.55; }
.reel .act-note { font-size: .75rem; }
.reel-cap {
margin-top: 1.25rem;
font-size: clamp(1.4375rem, 2vw, 1.625rem);
}
.reel-nav { margin-top: 1rem; gap: 2rem; }}
.reel-more {
align-self: center;
margin-top: clamp(1rem, 2.4vw, 1.5rem);
}
.uc-page { padding-bottom: clamp(3rem, 7vw, 6rem); }
.uc-hero {
padding-top: clamp(3.5rem, 9vw, 7rem);
padding-bottom: clamp(2.25rem, 5vw, 3.75rem);
text-align: center;
}
.uc-title {
margin: 0;
font-size: clamp(2.5rem, 6.4vw, 5rem);
color: var(--er-gray-90);
}
.uc-lead {
max-width: 34em;
margin: clamp(.875rem, 1.8vw, 1.25rem) auto 0;
font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
line-height: 1.45;
color: var(--er-gray-70);
text-wrap: balance;
}
.uc-cta {
display: flex;
justify-content: center;
padding-top: clamp(2.5rem, 6vw, 4.5rem);
}
.page-news,
.page-help { background: #fff; }
.nr-page { padding: 52px 0 80px; color: #1d1d1f; }
.nr { width: 87.5%; max-width: 980px; margin-inline: auto; }
.nr-head,
.nr-body { max-width: 653px; margin-inline: auto; }
.nr-eyebrow { margin: 0; }
.nr-category,
.nr-date { display: block; color: #6e6e73; }
.nr-category {
font-size: 12px;
line-height: 16px;
font-weight: 700;
letter-spacing: -.01em;
text-transform: uppercase;
}
.nr-date {
margin-top: 4px;
font-size: 14px;
line-height: 18px;
font-weight: 600;
letter-spacing: -.016em;
}
.nr-title { margin: 20px 0 0; font-size: 56px; color: #1d1d1f; font-weight: 500 !important; }
.nr-body {
margin-top: 44px;
font-size: 19px;
line-height: 27px;
letter-spacing: .012em;
}
.nr-body p { margin: 0 0 27px; }
.nr-body p:last-child { margin-bottom: 0; }
.nr-h { margin: 8px 0 16px; font-size: 24px; color: #1d1d1f; font-weight: 700 !important; }
@media (max-width: 66.75rem) {
.nr-page { padding-top: 40px; }
.nr { max-width: 692px; }
.nr-head,
.nr-body { max-width: 583px; }
.nr-title { font-size: 48px; }
.nr-body { font-size: 17px; line-height: 25px; letter-spacing: -.022em; }
.nr-body p { margin-bottom: 25px; }
.nr-h { font-size: 21px; }
}
@media (max-width: 45.875rem) {
.nr-page { padding-bottom: 64px; }
.nr-head,
.nr-body { max-width: none; }
.nr-title { font-size: 40px; }
.nr-body { margin-top: 32px; }
}
@media (max-width: 48rem) {
.research-doc { --gutter: clamp(1.25rem, 8.2vw, 2.25rem); }}
.article-page {
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--gutter);
padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 9vw, 7rem);
position: relative;
}
.article-toc {
max-width: 42rem;
margin: 0 auto clamp(2rem, 4vw, 3rem);
padding-top: 1.1rem;
border-top: 1px solid var(--rule);
}
.article-toc::before {
content: "Contents";
display: block;
margin-bottom: .75rem;
font-size: .6875rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--er-gray-50);
}
.article-toc ul { list-style: none; margin: 0; padding: 0; }
.article-toc > ul { columns: 2; column-gap: 2rem; }
.article-toc > ul > li { break-inside: avoid; margin-bottom: .45rem; }
.article-toc a {
display: block;
padding-left: .7rem;
border-left: 2px solid transparent;
font-size: .8125rem;
line-height: 1.4;
color: var(--er-gray-70);
text-decoration: none;
transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.article-toc a:hover { color: var(--er-gray-90); }
.article-toc a.is-active {
color: var(--er-gray-90);
border-left-color: var(--er-gray-90);
font-weight: 500;
}
@media (min-width: 1240px) {
.article-page {
display: grid;
grid-template-columns: minmax(0, 1fr) min(58rem, 100%) minmax(0, 1fr);
column-gap: clamp(1.5rem, 2.8vw, 3.25rem);
}
.article-page > *:not(.article-toc) { grid-column: 2; }
.article-page > .article-head { grid-row: 1; }
.article-page > .article-hero { grid-row: 2; }
.article-page > .article-lede { grid-row: 3; }
.article-page > .article      { grid-row: 4; }
.article-toc {
grid-column: 1;
grid-row: 4;
align-self: start;
justify-self: end;
position: sticky;
top: calc(var(--header-height) + 2rem);
width: 100%;
max-width: 10.5rem;
margin: clamp(2.25rem, 5vw, 3.5rem) 0 0;
padding-top: 0;
border-top: 0;
max-height: calc(100vh - var(--header-height) - 4rem);
overflow-y: auto;
}
.article-toc::before { content: none; }
.article-toc > ul {
columns: auto;
display: flex;
flex-direction: column;
gap: .65rem;
}
.article-toc > ul > li { margin-bottom: 0; }}
.sidenote { display: none; }
@media (min-width: 1700px) {
.sidenote {
display: block;
position: absolute;
width: 226px;
font-size: .8125rem;
line-height: 1.6;
color: var(--er-gray-70);
}
.sidenote-entry { display: block; }
.sidenote-entry + .sidenote-entry { margin-top: .9em; }}
.article-head {
max-width: 52rem;
margin-inline: auto;
text-align: center;
}
.article-kicker {
margin: 0 0 clamp(1rem, 2.4vw, 1.75rem);
font-size: clamp(.8125rem, 1vw, .9375rem);
font-weight: 500;
letter-spacing: -.005em;
}
.article-kicker a {
color: var(--fg);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color .2s var(--ease-out);
}
.article-kicker a:hover,
.article-kicker a:focus-visible { border-bottom-color: currentColor; }
.article-title {
margin: 0;
font-weight: 300;
font-size: clamp(2.125rem, 5.8vw, 4rem);
line-height: 1.06;
letter-spacing: -.045em;
}
.article-date {
margin: clamp(1.25rem, 3vw, 2rem) 0 0;
font-size: clamp(.9375rem, 1.1vw, 1rem);
color: var(--er-gray-70);
}
.article-hero {
width: min(58rem, 100%);
margin: clamp(1rem, 2.2vw, 1.5rem) auto 0;
}
.article-hero img {
display: block;
width: 100%;
height: auto;
}
.article-lede {
max-width: 36rem;
margin: clamp(1.125rem, 2.6vw, 1.75rem) auto 0;
text-align: center;
font-size: clamp(1.3125rem, 2.5vw, 1.9375rem);
font-weight: 400;
line-height: 1.3;
letter-spacing: -.022em;
text-wrap: balance;
}
.article {
max-width: 42rem;
margin: clamp(2.25rem, 5vw, 3.5rem) auto 0;
font-size: clamp(1rem, 1.2vw, 1.125rem);
line-height: 1.62;
}
.article > p { margin: 0 0 1.15em; }
.article > h2 {
margin: clamp(2.25rem, 4.4vw, 3rem) 0 .85em;
font-weight: 500;
font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
line-height: 1.3;
letter-spacing: -.018em;
}
.article-pull {
margin: clamp(1.75rem, 3.4vw, 2.5rem) 0 !important;
padding-left: clamp(.875rem, 1.6vw, 1.125rem);
border-left: 2px solid var(--er-gray-90);
font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
line-height: 1.45;
letter-spacing: -.012em;
}
.article-fig {
width: 100%;
margin: clamp(1.75rem, 3.4vw, 2.5rem) 0;
}
.article-fig svg {
display: block;
width: 100%;
max-width: var(--fig-w, 100%);
height: auto;
margin-inline: auto;
overflow: visible;
}
.article-fig figcaption {
margin-top: 13px;
font-size: .8125rem;
line-height: 1.4;
color: #6b6866;
max-width: 100%;
}
.article-tablewrap {
width: min(58rem, 92vw);
margin: clamp(1.75rem, 3.4vw, 2.5rem) auto;
margin-inline-start: 50%;
transform: translateX(-50%);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
.article-table {
width: 100%;
border-collapse: collapse;
font-size: clamp(.8125rem, 1vw, .9375rem);
line-height: 1.4;
white-space: nowrap;
}
.article-table th,
.article-table td {
padding: .6875rem .875rem;
text-align: left;
border-bottom: 1px solid var(--rule);
vertical-align: top;
}
.article-table th {
font-weight: 500;
border-bottom-color: var(--er-gray-30);
}
.article-table td:first-child,
.article-table th:first-child { white-space: normal; min-width: 11rem; }
.article-table tbody tr:last-child td { border-bottom: 0; }
.qt-score { white-space: nowrap; }
.qt-meter {
display: inline-block;
width: 6.5rem;
height: .5rem;
margin-right: .625rem;
background: var(--er-gray-10);
vertical-align: baseline;
}
.qt-meter > span { display: block; height: 100%; background: var(--er-gray-90); }
.qt-num { font-weight: 500; }
@media (max-width: 48rem) {
.article-tablewrap {
width: auto;
margin-inline: calc(var(--gutter) * -1);
transform: none;
padding-inline: var(--gutter);
}
.article-toc { display: none; }
.article-hero {
width: auto;
margin-inline: calc(var(--gutter) * -1);
}
.article-fig {
width: auto;
margin-inline: calc(var(--gutter) * -1);
}
.article-fig figcaption { padding-inline: var(--gutter); }}
.benchmark-scroll {
width: min(58rem, 92vw);
margin: clamp(1.75rem, 3.4vw, 2.5rem) auto .75rem;
margin-inline-start: 50%;
transform: translateX(-50%);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
.benchmark-scroll:focus-visible { outline: 2px solid var(--er-gray-50); outline-offset: 3px; }
.benchmark-table {
border-collapse: separate;
border-spacing: 0;
font-size: .8125rem;
line-height: 1.4;
white-space: nowrap;
}
.benchmark-table th,
.benchmark-table td {
padding: .5rem .7rem;
text-align: center;
font-weight: 400;
border: 0;
background: var(--bg);
}
.benchmark-table thead th { color: var(--er-gray-70); }
.benchmark-table thead th a { color: inherit; }
.benchmark-table .bm-group,
.benchmark-table .bm-metric {
position: sticky;
text-align: left;
background: var(--bg);
}
.benchmark-table .bm-group {
left: 0;
z-index: 3;
width: 5.25rem;
min-width: 5.25rem;
vertical-align: top;
color: var(--er-gray-70);
}
.benchmark-table .bm-metric {
left: 5.25rem;
z-index: 2;
color: var(--er-gray-90);
font-weight: 500;
}
.benchmark-table thead .bm-group,
.benchmark-table thead .bm-metric { z-index: 4; }
.benchmark-table .bm-ours { background: #fbf7ec; }
.benchmark-table td.bm-best { background: #f6efd6; font-weight: 500; color: var(--er-gray-90); }
.benchmark-note {
font-size: .8125rem;
line-height: 1.4;
color: #6b6866;
margin: 0 0 clamp(1.75rem, 3.4vw, 2.5rem);
}
@media (max-width: 48rem) {
.benchmark-scroll {
width: auto;
margin-inline: calc(var(--gutter) * -1);
transform: none;
padding-inline: 0;
}
.benchmark-table .bm-group {
width: calc(5.25rem + var(--gutter));
min-width: calc(5.25rem + var(--gutter));
padding-left: calc(.7rem + var(--gutter));
}
.benchmark-table .bm-metric { left: calc(5.25rem + var(--gutter)); }
.benchmark-table tr > *:last-child { padding-right: calc(.7rem + var(--gutter)); }}
.article > h3 {
margin: clamp(1.75rem, 3.4vw, 2.25rem) 0 .6em;
font-weight: 500;
font-size: clamp(1rem, 1.25vw, 1.0625rem);
line-height: 1.35;
letter-spacing: -.012em;
}
.article > ul,
.article > ol {
margin: 0 0 1.15em;
padding-left: 1.35rem;
}
.article > ul { list-style: disc; }
.article > ol { list-style: decimal; }
.article li { margin: 0 0 .45em; }
.article li:last-child { margin-bottom: 0; }
.article li::marker { color: var(--er-gray-50); }
.article > blockquote {
margin: clamp(1.5rem, 3vw, 2rem) 0;
padding-left: clamp(.875rem, 1.6vw, 1.125rem);
border-left: 2px solid var(--er-gray-90);
}
.article > blockquote p { margin: 0; }
.article strong { font-weight: 500; color: var(--er-gray-90); }
.article a {
color: #676767;
text-decoration: underline;
text-decoration-color: rgba(103, 103, 103, .3);
text-underline-offset: 2px;
transition: color .2s var(--ease-out), text-decoration-color .2s var(--ease-out);
}
.article a:hover,
.article a:focus-visible {
color: var(--er-gray-90);
text-decoration-color: currentColor;
}
.article > .article-flow {
margin: clamp(1.5rem, 3vw, 2rem) 0;
font-weight: 500;
line-height: 1.75;
letter-spacing: -.008em;
}
.article > .article-flow span { white-space: nowrap; }
.article > .article-flow .flow-arrow {
color: var(--er-gray-50);
font-weight: 400;
padding: 0 .2em;
}
.research-page {
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--gutter);
padding-block: clamp(2.5rem, 7vw, 6rem) clamp(3.5rem, 9vw, 7rem);
}
.research-title {
font-weight: 300;
font-size: clamp(2.75rem, 8.4vw, 5.5rem);
line-height: 1.02;
letter-spacing: -.05em;
margin: 0;
}
.research-list {
list-style: none;
margin: clamp(2.5rem, 6vw, 4.5rem) 0 0;
padding: 0;
border-top: 1px solid var(--rule);
}
.research-row {
display: grid;
grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
gap: clamp(.75rem, 3vw, 3rem);
position: relative;
padding-block: clamp(1.5rem, 3.2vw, 2.5rem);
border-bottom: 1px solid var(--rule);
}
.research-meta {
font-size: clamp(.9375rem, 1vw, 1rem);
line-height: 1.45;
}
.research-cat { display: block; color: var(--fg); }
.research-when { display: block; color: var(--er-gray-70); margin-top: .1875rem; }
.research-h a {
color: inherit;
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-size: 0% 1px;
background-repeat: no-repeat;
background-position: 0 100%;
transition: background-size .28s var(--ease-out);
}
.research-h a::after {
content: "";
position: absolute;
inset: 0;
}
.research-h a:hover,
.research-h a:focus-visible { background-size: 100% 1px; }
.research-h {
margin: 0;
font-weight: 400;
font-size: clamp(1.3125rem, 2.1vw, 1.75rem);
line-height: 1.2;
letter-spacing: -.032em;
}
.research-sum {
margin: .5rem 0 0;
max-width: 70ch;
font-size: clamp(.9375rem, 1.15vw, 1.0625rem);
line-height: 1.55;
color: var(--er-gray-70);
}
.research-note {
display: grid;
grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
gap: clamp(.75rem, 3vw, 3rem);
margin: clamp(1.5rem, 3.2vw, 2.5rem) 0 0;
}
.research-note > span {
grid-column: 2;
max-width: 60ch;
font-size: clamp(.9375rem, 1vw, 1rem);
line-height: 1.55;
color: var(--er-gray-70);
}
@media (max-width: 56rem) {
.research-row { grid-template-columns: 1fr; gap: .5rem; }
.research-note { grid-template-columns: 1fr; gap: 0; }
.research-note > span { grid-column: 1; }
.research-meta { display: flex; gap: .75rem; }
.research-cat, .research-when { display: inline; margin: 0; }}
.hd-page { color: #1d1d1f; }
.hd { width: 87.5%; max-width: 980px; margin-inline: auto; counter-reset: hd-section; }
.hd-header {
display: flex;
justify-content: space-between;
gap: 40px;
padding-bottom: 56px;
border-bottom: 1px solid #d2d2d7;
}
.hd-intro { flex: 0 1 600px; min-width: 0; padding-top: 50px; }
.hd-title { margin: 0; font-size: 40px; color: #1d1d1f; }
.hd-updated,
.hd-summary {
margin: 14px 0 0;
font-size: 17px;
line-height: 25px;
letter-spacing: -.022em;
}
.hd-updated { color: #6e6e73; }
.hd-summary p { margin: 0; }
.hd-summary p + p { margin-top: 14px; }
.hd-summary strong { font-weight: 600; }
.hd-topics { flex: 0 0 320px; padding-top: 62px; }
.hd-topics-h { margin: 0 0 15px; font-size: 24px; color: #1d1d1f; }
.hd-topics-list { list-style: none; margin: 0; padding: 0; counter-reset: hd-topic; }
.hd-topics-list li {
counter-increment: hd-topic;
margin-top: 7px;
font-size: 17px;
line-height: 25px;
letter-spacing: -.022em;
}
.hd-topics-list li:first-child { margin-top: 0; }
.hd-topics-list a { color: #0066cc; text-decoration: none; }
.hd-topics-list a:hover { text-decoration: underline; }
.hd-topics-list a::before { content: counter(hd-topic) ". "; }
.hd-row {
counter-increment: hd-section;
display: grid;
grid-template-columns: 240px minmax(0, 700px);
justify-content: space-between;
column-gap: 40px;
padding: 40px 0;
border-bottom: 1px solid #d2d2d7;
}
.hd-row-title { margin: 0; font-size: 24px; color: #1d1d1f; }
.hd-num::before { content: counter(hd-section) ". "; color: #6e6e73; }
.hd-row-body {
min-width: 0;
font-size: 17px;
line-height: 25px;
letter-spacing: -.022em;
}
.hd-row-body p { margin: 0 0 16px; }
.hd-row-body > :last-child { margin-bottom: 0; }
.hd-sub { margin: 27px 0 0; font-size: 17px; color: #1d1d1f; }
.hd-row-body > .hd-sub:first-child { margin-top: 0; }
.hd-row-body ul,
.hd-row-body ol { margin: 8px 0 26px; padding-left: 17px; }
.hd-row-body li { margin-bottom: 12px; }
.hd-row-body li:last-child { margin-bottom: 0; }
.hd-row-body strong { font-weight: 600; }
.hd-row-body a { color: #0066cc; text-decoration: none; }
.hd-row-body a:hover { text-decoration: underline; }
.hd-dl {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
gap: 8px 24px;
margin: 0 0 16px;
}
.hd-dl dt { color: #6e6e73; }
.hd-dl dd { margin: 0; }
.hd-siblings {
display: flex;
flex-wrap: wrap;
gap: 8px 32px;
padding: 40px 0 80px;
font-size: 17px;
line-height: 25px;
letter-spacing: -.022em;
}
.hd-siblings a { color: #0066cc; text-decoration: none; }
.hd-siblings a:hover { text-decoration: underline; }
.hd-siblings [aria-current="page"] { color: #1d1d1f; }
.policy-fill {
display: inline;
background: #ffe8a3;
color: #4a3c00;
font-weight: 500;
padding: .1em .4em;
border-radius: 3px;
box-shadow: inset 0 0 0 1px #d8ac00;
}
.policy-fill::before { content: "TO FILL: "; font-weight: 600; letter-spacing: .02em; }
@media (max-width: 66.75rem) {
.hd { max-width: 692px; }
.hd-header { display: block; padding-bottom: 33px; border-bottom: 0; }
.hd-topics { display: none; }
.hd-row { display: block; padding: 0; border-top: 1px solid #d2d2d7; border-bottom: 0; }
.hd-row:last-of-type { border-bottom: 1px solid #d2d2d7; }
.hd-row-title { padding-top: 32px; font-size: 24px; font-weight: 500 !important; }
.hd-row-body { padding: 16px 0 45px; }
.hd-row.is-acc .hd-row-title { padding-top: 0; }
.hd-row.is-acc .hd-row-body { padding-top: 0; }
.hd-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 0;
padding: 32px 0;
border: 0;
background: none;
font: inherit;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
.hd-toggle:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; border-radius: 4px; }
.hd-toggle-label { min-width: 0; }
.hd-chev {
flex: none;
width: 18px;
height: 35px;
margin-left: 13px;
color: #86868b;
transition: transform .3s ease;
}
.hd-row.is-open .hd-chev { transform: rotate(180deg); }
.hd-siblings { padding-top: 32px; }
}
@media (max-width: 45.875rem) {
.hd-intro { padding-top: 23px; }
.hd-title { font-size: 28px; }
.hd-summary { margin-top: 15px; }
.hd-row-title { padding-top: 24px; font-size: 19px; font-weight: 600 !important; }
.hd-toggle { padding: 24px 0; }
.hd-row-body p { margin-bottom: 20px; }
.hd-dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
.hd-dl dt { margin-top: 12px; }
.hd-dl dt:first-child { margin-top: 0; }
.hd-siblings { flex-direction: column; gap: 8px; padding-bottom: 64px; }
}
:root {
--font-heading: var(--font-body);
--heading-leading: calc(1em + 4px);
--heading-tracking-text: max(-0.022em, min(0.24px - 0.03em, 0.4896px - 0.0508em));
--heading-tracking-display: max(-0.015em, min(0.012em, 0.336px - 0.005em,
0.672px - 0.017em, 1.8667px - 0.03833em));
--heading-tracking: max(
var(--heading-tracking-text) - clamp(0px, (1em - 18.5px) * 1000, 100px),
var(--heading-tracking-display) - clamp(0px, (18.5px - 1em) * 1000, 100px));
}
h1, h2, h3, h4, h5, h6,
.d-h1, .d-h2,
.research-title, .article-title, .article-lede, .article-kicker, .article-toc::before,
.eyebrow, .eyebrow-strong, .o1w-name, .spec-h, .kit-label, .price-now,
.fig-title,
.o1-tag-lead, .o1-tag-sub, .bone-h, .bone-stat-fig, .audio-h, .reel-cap, .faq-item summary,
.ps-pair-name, .ps-sec-head {
font-family: var(--font-heading) !important;
font-weight: 600 !important;
letter-spacing: var(--heading-tracking) !important;
line-height: var(--heading-leading) !important;
text-transform: none !important;
}
.h-regular { font-weight: 400 !important; }
.h-medium { font-weight: 500 !important; }
.ro-wrap { padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.ro-lockup { width: min(87.5%, 1260px); margin: 0 auto; }
.ro-tabs {
display: flex;
gap: 4px;
width: max-content;
max-width: 100%;
margin: 0 auto clamp(3rem, 7vw, 6rem);
padding: 4px;
border-radius: 999px;
background: #f5f5f7;
overflow-x: auto;
scrollbar-width: none;
overscroll-behavior-x: contain;
}
.ro-tabs[hidden] { display: none; }
.ro-tab:first-child { margin-left: auto; }
.ro-tab:last-child { margin-right: auto; }
.ro-tabs::-webkit-scrollbar { display: none; }
.ro-tab {
flex: none;
padding: 10px 20px;
border: 0;
border-radius: 999px;
background: transparent;
font: inherit;
font-size: 17px;
line-height: 21px;
letter-spacing: -.022em;
color: var(--er-gray-70);
white-space: nowrap;
cursor: pointer;
transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.ro-tab:hover { color: var(--er-gray-90); }
.ro-tab[aria-selected="true"] {
background: #fff;
color: var(--er-gray-90);
font-weight: 600;
box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 4px 14px rgba(0, 0, 0, .06);
}
.ro-tab:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }
.ro-panel[hidden] { display: none; }
html:not(.ro-js) .ro-panel + .ro-panel { margin-top: clamp(4rem, 9vw, 8rem); }
.ro-head { max-width: 820px; margin: 0 auto; text-align: center; }
.ro-kicker { margin: 0; font-size: 21px; line-height: 1.19; font-weight: 600; letter-spacing: .011em; color: #1d1d1f; }
.ro-h {
margin: 12px 0 0;
font-size: 48px !important;
line-height: 1.0834 !important;
font-weight: 600 !important;
letter-spacing: -.003em !important;
color: #1d1d1f;
text-wrap: balance;
}
.ro-lead { margin: 20px auto 0; max-width: 720px; font-size: 21px; line-height: 1.381; font-weight: 600; letter-spacing: .011em; color: #6e6e73; text-wrap: balance; }
.ro-fine { margin: 14px 0 0; font-size: 14px; line-height: 20px; letter-spacing: -.016em; color: #86868b; }
.ro-hero { margin: clamp(2.5rem, 5vw, 4rem) 0 0; border-radius: 28px; overflow: hidden; background: #f5f5f7; }
.ro-hero img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 30%; }
#sales .ro-hero img { object-position: 45% 55%; }
#healthcare .ro-hero img { object-position: 50% 12%; }
#founders .ro-hero img { object-position: 45% 20%; }
.ro-gallery { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.ro-gallery .ag-card { background: #f5f5f7; }
.ro-gallery .ag-item { position: relative; cursor: default; user-select: auto; -webkit-user-select: auto; }
.ro-gallery .ag-item:first-child .ag-phone { top: 12%; width: 76%; translate: -50% 0; }
.mc-note { margin: 2cqw 0 0 !important; font-size: 3cqw; line-height: 1.35; color: #8e8e93; }
@media (min-width: 64rem) {
.ro-gallery .ag-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: auto; }
.ro-gallery .ag-card { height: auto; aspect-ratio: 372 / 580; }
}
.ro-privacy { padding: clamp(1rem, 3vw, 2rem) 0 0; }
@media (max-width: 66.75rem) {
.ro-h { font-size: 40px !important; line-height: 1.1 !important; }
.ro-lead { font-size: 19px; line-height: 1.42; }
}
@media (max-width: 48rem) {
.ro-kicker { font-size: 17px; }
.ro-h { margin-top: 10px; font-size: 32px !important; line-height: 1.125 !important; }
.ro-lead { margin-top: 16px; font-size: 17px; line-height: 1.47; letter-spacing: -.022em; }
.ro-hero { border-radius: 18px; }
.ro-hero img { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) { .ro-tab { transition: none; } }
.btn-wl { border: 1px solid #0066cc; background: transparent; color: #0066cc; }
.btn-wl:hover { background: #0076df; color: #fff; }
.btn-wl:active { background: #006edb; color: #fff; }
.btn-wl:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }
@media (max-width: 45.875rem) { .header-actions .btn-wl { display: none; } }
.o1w-wl {
display: flex;
justify-content: center;
align-items: center;
padding: 7px 14px;
border: 1px solid #0066cc;
border-radius: 980px;
background: transparent;
color: #0066cc;
font: inherit;
white-space: nowrap;
cursor: pointer;
transition: background-color .2s var(--ease), color .2s var(--ease);
}
.o1w-wl:hover { background: #0076df; color: #fff; }
.o1w-wl:active { background: #006edb; color: #fff; }
.o1w-wl:focus-visible { outline: 2px solid #0071e3; outline-offset: 3px; }
.o1w-ctas { display: flex; gap: 14px; }
.o1w-detail-inner { justify-content: center; }
@media (max-width: 45.875rem) {
.o1w-detail-inner { flex-wrap: wrap; column-gap: 20px; row-gap: 12px; }
.o1w-ctas { gap: 10px; }
}
html.wl-lock { overflow: hidden; }
.wl {
width: min(40rem, calc(100% - 40px));
max-width: none;
max-height: calc(100dvh - 80px);
margin: auto;
padding: 0;
border: 0;
border-radius: 18px;
background: #fff;
color: #1d1d1f;
overflow: auto;
}
.wl::backdrop {
background: #0000007a;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
.wl[open] { animation: wlIn .3s var(--ease-out); }
@keyframes wlIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.wl-card { position: relative; padding: 76px; }
.wl-close {
position: absolute;
top: 20px;
inset-inline-end: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.wl-close span {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: #e8e8ed;
color: #6e6e73;
transition: color .1s linear, background .1s linear;
}
.wl-close svg { width: 20px; height: 20px; fill: currentColor; }
.wl-close:hover span { background: #ececf0; color: #000000b8; }
.wl-close:active span { background: #dfdfe4; }
.wl-close:focus-visible { outline: none; }
.wl-close:focus-visible span { outline: 2px solid #0071e3; outline-offset: 3px; }
.wl-h { margin: 0; font-size: 32px; color: #1d1d1f; text-wrap: balance; outline: none; }
.wl-sub { margin: 12px 0 0; font-size: 17px; line-height: 1.47059; letter-spacing: -.022em; color: #6e6e73; }
.wl-field { position: relative; margin-top: 32px; }
.wl-field input {
display: block;
width: 100%;
height: 56px;
padding: 18px 16px 0;
border: 1px solid #86868b;
border-radius: 12px;
background: #fffc;
font: inherit;
font-size: 17px;
line-height: 1.23536;
letter-spacing: -.022em;
color: #1d1d1f;
appearance: none;
}
.wl-field input:focus { outline: none; border: 2px solid #0071e3; padding-inline-start: 15px; }
.wl-field input[aria-invalid="true"]:not(:focus) { border-color: #e30000; background: #fff2f4; }
.wl-field input[aria-invalid="true"] + label { color: #e30000; }
.wl-field label {
position: absolute;
inset-inline-start: 16px;
top: 18px;
max-width: calc(100% - 32px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 17px;
line-height: 1.23536;
letter-spacing: -.022em;
color: #6e6e73;
pointer-events: none;
transform-origin: left top;
transition: transform .125s ease-in;
}
.wl-field input:focus + label,
.wl-field input:not(:placeholder-shown) + label { transform: translateY(-10px) scale(.70588); }
.wl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wl-error {
display: flex;
gap: 4px;
margin: 8px 0 0;
font-size: 12px;
line-height: 1.33337;
letter-spacing: -.01em;
color: #e30000;
}
.wl-error[hidden] { display: none; }
.wl-error::before {
content: "";
flex: none;
width: 13px;
height: 13px;
margin-top: 1px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0a7 7 0 1 0 0 14A7 7 0 0 0 7 0zm0 10.9a.9.9 0 1 1 0-1.8.9.9 0 0 1 0 1.8zM7.8 8H6.2L6 3.2h2z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0a7 7 0 1 0 0 14A7 7 0 0 0 7 0zm0 10.9a.9.9 0 1 1 0-1.8.9.9 0 0 1 0 1.8zM7.8 8H6.2L6 3.2h2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wl-submit {
display: block;
width: 100%;
margin-top: 16px;
padding: 18px 31px;
border: 0;
border-radius: 12px;
background: #0071e3;
color: #fff;
font: inherit;
font-size: 17px;
line-height: 1.17648;
letter-spacing: -.022em;
cursor: pointer;
}
.wl-submit:hover { background: #0076df; }
.wl-submit:active { background: #006edb; }
.wl-submit:disabled { opacity: .42; cursor: default; }
.wl-submit:focus-visible { outline: 2px solid #0071e3; outline-offset: 3px; }
.wl-fine { margin: 20px 0 0; font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; color: #6e6e73; }
.wl-fine a { color: #0066cc; }
.wl-fine a:hover { text-decoration: underline; }
.wl-done { text-align: center; }
.wl-tick { display: block; width: 56px; height: 56px; margin: 0 auto 24px; color: #008009; }
.wl-tick svg { display: block; width: 100%; height: 100%; }
.wl-done .wl-submit { margin-top: 32px; }
@media (max-width: 45.875rem) {
.wl { width: calc(100% - 40px); max-height: calc(100dvh - 40px); }
.wl-card { padding: 76px 6.25% 60px; }
.wl-h { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .wl[open] { animation: none; } .wl-field label { transition: none; } }
@media (min-width: 48.0625rem) {
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
.header-inner > .brand { justify-self: start; }
.header-inner > .nav-primary { margin-inline: 0; }
.header-inner > .header-actions { justify-self: end; }
}
@media (min-width: 48.0625rem) and (max-width: 56.25rem) {
.brand-word { display: none; }
}
.ag-type { background: #fff; container-type: inline-size; display: grid; place-items: center; }
.lg-stack { display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; text-align: center; }
.lg {
display: block;
font-family: -apple-system, BlinkMacSystemFont, "Kohinoor Devanagari", "Kohinoor Bangla", "Kohinoor Telugu", "Tamil Sangam MN", "Kannada Sangam MN", "Nirmala UI", "Noto Sans", sans-serif;
line-height: 1.12;
letter-spacing: -.01em;
background-image: linear-gradient(90deg, #c8605a 0%, #b07a30 32%, #4f9166 64%, #4a73c4 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.lg-1 { font-size: 12.5cqw; font-weight: 200; }
.lg-2 { font-size: 10.5cqw; font-weight: 700; transform: skewX(-9deg); }
.lg-3 { font-size: 11.5cqw; font-weight: 900; }
.lg-4 { font-size: 10.5cqw; font-weight: 300; }
.lg-5 { font-size: 11.5cqw; font-weight: 600; transform: skewX(-9deg); }
.lg-6 { font-size: 11cqw; font-weight: 400; }
.lg-arrow { display: block; width: 1px; height: 6cqw; margin: 1.5cqw 0 2cqw; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .45)); position: relative; }
.lg-arrow::after { content: ""; position: absolute; left: 50%; bottom: -.2cqw; width: 2.2cqw; height: 2.2cqw; border-right: 1px solid rgba(0, 0, 0, .45); border-bottom: 1px solid rgba(0, 0, 0, .45); transform: translateX(-50%) rotate(45deg); }
.lg-en { font-size: 12cqw; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: #1d1d1f; }