:root {
  color-scheme: light;
  --ink: #1d1d1f;
  --muted: #656569;
  --green: #087f59;
  --line: #dcdce0;
  --paper: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: white; -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; scroll-padding-top: 95px; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, summary { cursor: pointer; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #087f59; outline-offset: 5px; }
svg { display: block; flex-shrink: 0; }
img { max-width: 100%; height: auto; display: block; }
.wrap { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.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; }
.skip { position: absolute; top: -100px; left: 20px; padding: 15px; background: white; z-index: 20; }
.skip:focus { top: 10px; }
.studio-bar { width: min(1120px, calc(100% - 64px)); margin-inline: auto; height: 42px; display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: #727277; }
.studio-bar a { font-weight: 650; letter-spacing: 1.8px; color: #424247; }
.nav { position: sticky; top: 0; z-index: 10; background: #ffffffeb; border-bottom: 1px solid #00000013; backdrop-filter: blur(20px); }
.nav-inner { width: min(1120px, calc(100% - 64px)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 9px; font-size: 22px; font-weight: 650; letter-spacing: -.6px; }
.brand svg { width: 24px; height: 24px; }
.nav nav { display: flex; gap: 28px; align-items: center; font-size: 12px; }
.nav nav > a:hover { color: var(--green); }
.nav .nav-cta { border-radius: 30px; padding: 9px 15px; background: #1d1d1f; color: white; }
.nav .nav-cta:hover { color: white; background: #3d3d3f; }
.hero { text-align: center; padding: 65px 24px 50px; overflow: hidden; }
.app-icon { width: 80px; height: 80px; display: grid; place-items: center; border-radius: 21px; margin: 0 auto 21px; color: #e5f4ef; background: linear-gradient(145deg,#354f40,#152a21); box-shadow: inset 0 1px 1px #ffffff70, 0 6px 10px #11291a0f, 0 18px 30px #11291a0a; }
.app-icon svg { width: 52px; height: 52px; filter: drop-shadow(0 2px 3px #0002); }
.product-name { font-size: 18px; font-weight: 600; letter-spacing: -.3px; margin: 0 0 20px; }
h1,h2,p { margin-top: 0; }
h1 { font-size: clamp(60px, 7.2vw, 100px); font-weight: 650; line-height: .99; letter-spacing: -.064em; margin-bottom: 25px; }
h1 span { background: linear-gradient(105deg,#145d45 10%,#16865b 60%,#568c3d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-description { font-size: 23px; font-weight: 450; line-height: 1.4; letter-spacing: -.7px; color: #646468; margin-bottom: 22px; }
.hero-link { color: var(--green); font-size: 17px; }
.hero-link span { margin-left: 7px; }
.hero-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.experience { width: min(1400px, calc(100% - 48px)); margin: 0 auto; padding: 32px 38px 28px; border-radius: 32px; background: #f5f5f7; overflow: hidden; }
.demo-top { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.demo-top h2 { font-size: 18px; letter-spacing: -.5px; font-weight: 600; margin: 0; }
.demo-tag { font-size: 11px; color: #646469; display: flex; align-items: center; gap: 6px; }
.demo-tag > span { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.mode-picker { display: flex; width: max-content; max-width: 100%; margin: 27px auto 12px; padding: 4px; gap: 3px; background: #e7e7eb; border-radius: 30px; }
.mode-picker button { border: 0; background: none; padding: 11px 22px; border-radius: 25px; font-size: 12px; color: #525259; transition: background .25s, box-shadow .25s; }
.mode-picker button[aria-pressed=true] { background: white; color: #1d1d1f; box-shadow: 0 2px 5px #00000010; }
.scope-description { text-align: center; color: #656569; font-size: 13px; min-height: 20px; margin: 0; line-height: 1.5; }
.device-stage { position: relative; width: min(1120px, 100%); height: 320px; margin: 18px auto 0; isolation: isolate; }
.stage-floor { position: absolute; height: 30px; left: -10%; right: -10%; bottom: 28px; background: radial-gradient(ellipse,#00000018,transparent 66%); filter: blur(8px); z-index: -1; }
.device { position: absolute; bottom: 0; }
.device.external { width: 30%; left: 0; z-index: 1; }
.device.laptop { width: 29%; left: 21%; z-index: 3; }
.device.pc { width: 30%; left: 48%; z-index: 2; }
.device.imac { width: 25%; right: 0; z-index: 1; }
.hardware { position: relative; padding-bottom: 46px; }
.bezel { padding: 6px; border-radius: 9px; background: linear-gradient(135deg,#424448,#090a0b 30%,#222326 80%,#55575a); box-shadow: 0 1px 1px #ffffffaa, 0 0 0 1px #777, 0 6px 8px #0002; position: relative; z-index: 2; }
.bezel::after { content: ''; position: absolute; top: 2px; left: 50%; width: 2px; height: 2px; background: #576365; border-radius: 50%; }
.display { position: relative; aspect-ratio: 16/10; overflow: hidden; border-radius: 3px; background: black; }
.wallpaper { position: absolute; inset: 0; filter: brightness(var(--brightness, .7)); transition: filter .16s ease-out; overflow: hidden; }
.wallpaper::before, .wallpaper::after { content: ''; position: absolute; width: 110%; height: 140%; border-radius: 48%; transform: rotate(-32deg); }
.wallpaper.green { background: linear-gradient(145deg,#073e32,#268b71 35%,#9befbc 74%,#e9f8ab); }
.wallpaper.green::before { top: 0; left: -45%; background: linear-gradient(130deg,#092f37 20%,#126359 50%,#81e8c8 75%,#b9ffe5 76%,#268970 79%); box-shadow: 14px 14px 40px #00261970; }
.wallpaper.green::after { top: 30%; left: 42%; background: linear-gradient(145deg,#ccf5a2,#46b392 45%,#0f4b4a 85%); box-shadow: -5px -4px 2px #d3ffc86b; }
.wallpaper.blue { background: linear-gradient(145deg,#080d50,#142bb6 55%,#818ef4); }
.wallpaper.blue::before { width: 90%; height: 150%; left: -26%; top: -37%; background: linear-gradient(90deg,#152399 20%,#416dff 55%,#9ab2ff 62%,#101650 65%); transform: rotate(37deg); box-shadow: 14px 15px 26px #020c7c; }
.wallpaper.blue::after { left: 41%; top: 10%; width: 62%; background: linear-gradient(90deg,#081754,#718cfb 42%,#a4bdff 46%,#314caf 50%,#122484); transform: rotate(38deg); }
.wallpaper.orange { background: linear-gradient(135deg,#f3cfba,#ef9974 40%,#7b343b); }
.wallpaper.orange::before { left: -40%; top: -10%; background: linear-gradient(160deg,#facdb1,#de9978 45%,#9a493c 62%,#e6af8a 64%,#673d35); transform: rotate(25deg); }
.wallpaper.orange::after { left: 45%; top: 20%; background: linear-gradient(135deg,#f4cba3,#f0b288 35%,#cc6d5d 70%); }
.screen-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 3px 7px; font-size: 6px; color: #fff; background: #0002; opacity: .9; }
.screen-brightness { position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%); border: 1px solid #ffffff35; border-radius: 13px; width: 64px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #fff; background: #00000054; backdrop-filter: blur(16px); box-shadow: 0 6px 15px #0001; }
.screen-brightness svg { width: 20px; height: 20px; }
.screen-brightness span { font-size: 13px; font-weight: 550; font-variant-numeric: tabular-nums; }
.support { width: 17%; height: 40px; position: absolute; bottom: 8px; left: 41.5%; background: linear-gradient(90deg,#9c9ea1,#d9dadd 35%,#c4c5c8 70%,#818386); transform: perspective(80px) rotateX(10deg); }
.foot { position: absolute; bottom: 5px; height: 5px; width: 36%; left: 32%; background: linear-gradient(90deg,#86888a,#c6c7c9 15%,#e5e5e7 75%,#797b7e); border-radius: 60% 60% 2px 2px; }
.device.pc .display { aspect-ratio: 16/9; }
.device.pc .hardware { padding-bottom: 42px; }
.device.pc .support { background: linear-gradient(90deg,#1c1d22,#484a51,#25262c); width: 9%; left: 45.5%; }
.device.pc .foot { background: #282a30; height: 5px; width: 55%; left: 22.5%; clip-path: polygon(40% 0,60% 0,100% 100%,0 100%); }
.device.imac .bezel { background: #e1d2c9; padding: 7px; border-radius: 9px 9px 0 0; box-shadow: 0 0 0 1px #c2b1a7; }
.device.imac .chin { position: relative; z-index: 2; height: 24px; background: linear-gradient(90deg,#d6b5a2,#e7c8b7,#dcb6a3); border-radius: 0 0 6px 6px; }
.device.imac .support { background: linear-gradient(90deg,#b79682,#ddc3b2,#c0a08c); }
.device.imac .foot { background: linear-gradient(90deg,#b9957e,#e0c7b5,#b49681); }
.device.laptop .hardware { padding-bottom: 5px; }
.device.laptop .bezel { padding: 5px; margin: 0 7%; border-radius: 8px 8px 2px 2px; }
.device.laptop .display { aspect-ratio: 1.55; }
.device.laptop .support { display: none; }
.device.laptop .foot { position: relative; bottom: 0; left: 0; width: 100%; height: 9px; border-radius: 1px 1px 40% 40%; background: linear-gradient(#d2d3d5 0 25%,#a1a2a6 40%,#5b5c60); box-shadow: 0 5px 8px #0002; }
.device.laptop .foot::after { content: ''; position: absolute; left: 43%; top: 0; width: 14%; height: 3px; border-radius: 0 0 8px 8px; background: #777a7f; }
.device-caption { display: flex; flex-direction: column; align-items: center; gap: 5px; padding-top: 14px; height: 54px; white-space: nowrap; }
.device-caption strong { font-size: 11px; font-weight: 600; }
.device-caption span { font-size: 10px; color: #68686d; }
.device.is-selected .device-caption span { color: #087647; }
.device.is-selected .device-caption span::before { content: ''; display: inline-block; width: 4px; height: 4px; margin-right: 4px; border-radius: 50%; background: currentColor; vertical-align: middle; }
.demo-controller { position: relative; z-index: 4; width: min(500px,100%); margin: 28px auto 0; padding: 20px 25px 15px; border-radius: 24px; border: 1px solid #ffffff; background: #ffffffeb; box-shadow: 0 6px 12px #00000004,0 20px 50px #25252b0c; }
.controller-top { display: flex; justify-content: space-between; align-items: center; }
.controller-brand { display: flex; gap: 7px; align-items: center; font-size: 13px; }
.controller-brand svg { width: 19px; height: 19px; }
#brightness-value { font-size: 26px; letter-spacing: -1px; font-weight: 600; font-variant-numeric: tabular-nums; }
#brightness-value span { font-size: 16px; margin-left: 2px; color: #737379; }
.brightness-control { display: flex; gap: 16px; align-items: center; margin: 14px 0; }
.sun-small svg { width: 16px; height: 16px; color: #6b6b71; }
.sun-large svg { width: 23px; height: 23px; color: #4b4b52; }
#brightness { appearance: none; -webkit-appearance: none; flex: 1; width: 100%; min-width: 0; height: 28px; background: transparent; cursor: pointer; margin: 0; --fill: 70%; }
#brightness::-webkit-slider-runnable-track { height: 7px; border-radius: 5px; background: linear-gradient(to right,#188858 var(--fill),#e3e6e5 var(--fill)); }
#brightness::-moz-range-track { height: 7px; border-radius: 5px; background: linear-gradient(to right,#188858 var(--fill),#e3e6e5 var(--fill)); }
#brightness::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: white; margin-top: -8.5px; border: 1px solid #00000009; box-shadow: 0 1px 5px #0003; }
#brightness::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: white; border: 1px solid #00000009; box-shadow: 0 1px 5px #0003; }
#brightness:disabled { cursor: not-allowed; opacity: .5; }
.computer-picker { padding: 0; border: 0; margin: 17px 0 0; display: flex; gap: 6px; flex-wrap: wrap; }
.computer-picker legend { font-size: 10px; color: #6a6a6f; margin-bottom: 8px; padding: 0; }
.computer-picker label { position: relative; cursor: pointer; }
.computer-picker input { position: absolute; opacity: 0; }
.computer-picker label span { display: flex; align-items: center; gap: 5px; font-size: 10px; padding: 8px 10px; border: 1px solid #dddde1; border-radius: 20px; color: #626268; }
.computer-picker label span::before { content: '+'; font-size: 11px; width: 11px; }
.computer-picker input:checked + span { color: #146241; border-color: #b9d6c5; background: #eef7f1; }
.computer-picker input:checked + span::before { content: '✓'; }
.computer-picker input:focus-visible + span { outline: 3px solid var(--green); outline-offset: 3px; }
.single-picker { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 17px; min-height: 52px; }
.single-picker label { font-size: 11px; color: #6a6a6f; }
.single-picker select { background: #f5f5f7; color: #333338; border: 1px solid #dddde1; border-radius: 8px; padding: 8px; font-size: 11px; max-width: 75%; }
[hidden] { display: none !important; }
.controller-footer { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #eeeef0; padding-top: 12px; margin-top: 16px; font-size: 10px; color: #66666b; }
.controller-footer button { background: none; border: 0; padding: 0; font-size: 10px; color: #176943; }
.demo-note { text-align: center; margin: 22px 0 0; color: #55555b; font-size: 12px; line-height: 1.7; }
.demo-note span { font-size: 10px; color: #6b6b70; }
.statement { text-align: center; padding-block: 125px 90px; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 1.6px; color: #66666b; margin-bottom: 23px; }
h2 { font-size: clamp(36px,4.8vw,62px); font-weight: 600; letter-spacing: -.05em; line-height: 1.07; margin-bottom: 25px; }
.statement h2 span { color: #838388; }
.statement > p:not(.eyebrow) { width: min(620px,100%); font-size: 20px; color: #6d6d72; line-height: 1.5; letter-spacing: -.4px; margin: 0 auto; }
.platform-line { display: flex; gap: 22px; align-items: center; justify-content: center; font-size: 27px; font-weight: 550; letter-spacing: -1px; margin-top: 35px; }
.platform-plus { font-size: 20px; color: #8c8c92; font-weight: 400; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.feature { border-radius: 28px; overflow: hidden; min-width: 0; }
.native-feature { background: #f5f5f7; }
.feature-copy { padding: 44px 40px 0; }
.feature .eyebrow { font-size: 9px; margin-bottom: 20px; }
.feature h2 { font-size: 38px; margin-bottom: 20px; }
.feature-copy > p:last-child { font-size: 16px; line-height: 1.5; color: #68686e; letter-spacing: -.25px; max-width: 370px; margin-bottom: 0; }
.native-visual { position: relative; margin: 34px 0 0; padding-bottom: 35px; min-height: 360px; background: radial-gradient(ellipse at bottom,#cfe4d850,transparent 75%); }
.mini-menubar { display: flex; align-items: center; justify-content: flex-end; gap: 14px; height: 28px; padding: 0 25px; background: #e3e3e8; font-size: 9px; color: #47474d; }
.mini-menubar > span:first-child { margin-right: auto; }
.selected-icon { background: #c6c8cc; display: grid; place-items: center; height: 28px; width: 28px; }
.selected-icon svg { width: 17px; height: 17px; }
.native-panel { width: 270px; margin: 7px 24px 0 auto; padding: 19px; border: 1px solid #d6d6dc; border-radius: 12px; background: #fffffff0; box-shadow: 0 15px 40px #0000001c; }
.native-heading { display: flex; align-items: center; gap: 7px; font-size: 12px; margin-bottom: 22px; }
.native-heading > span { margin-left: auto; color: #818186; }
.native-heading svg { width: 18px; height: 18px; }
.native-line { display: flex; justify-content: space-between; font-size: 11px; }
.native-line b { color: #69696f; font-weight: 400; font-size: 10px; }
.native-line.subtle { font-size: 10px; color: #626269; }
.native-slider { position: relative; height: 5px; border-radius: 10px; margin: 15px 0 23px; background: linear-gradient(to right,#6fbc91 70%,#d8e2dc 70%); }
.native-slider::after { content: ''; position: absolute; top: -4px; left: calc(70% - 6px); width: 13px; height: 13px; background: white; border-radius: 50%; box-shadow: 0 1px 4px #0003; }
.native-slider.short { margin-bottom: 17px; }
.illustration-label { display: block; text-align: center; margin-top: 18px; font-size: 9px; color: #74747a; }
.native-capture { width: 310px; margin: 7px 24px 0 auto; border: 1px solid #d6d6dc; border-radius: 12px; box-shadow: 0 15px 40px #0000001c; }
.phone-feature { background: #eaf2ef; position: relative; }
.phone-visual { height: 340px; overflow: hidden; margin-top: 30px; }
.phone { width: 225px; margin: 0 auto; border: 5px solid #363b3c; border-radius: 35px; padding: 10px 17px 20px; background: #f7faf8; box-shadow: 0 0 0 1px #747c78,14px 12px 35px #17372422,inset 0 0 0 1px #fff; transform: rotate(-7deg); }
.phone-island { width: 62px; height: 16px; margin: 0 auto 24px; border-radius: 20px; background: #1b2020; }
.phone-heading { display: flex; align-items: center; gap: 7px; font-size: 18px; }
.phone-heading svg { width: 25px; height: 25px; }
.phone-subtitle { display: block; margin: 8px 0 20px; color: #596a5f; font-size: 9px; }
.phone-control { border: 1px solid #dde7e0; border-radius: 10px; padding: 13px 10px 0; margin-bottom: 8px; font-size: 10px; }
.phone-control b { float: right; font-size: 9px; font-weight: 400; color: #4f715b; }
.phone-control .native-slider { margin: 14px 0 16px; }
.phone-url { text-align: center; padding: 10px; font-size: 9px; background: #e4ede7; border-radius: 10px; margin-top: 20px; }
.feature-footnote { position: relative; font-size: 10px; line-height: 1.5; color: #596e62; margin: 0; padding: 20px 30px 25px; text-align: center; background: #eaf2ef; }
.details { padding-block: 110px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 90px; }
.details h2 { font-size: 44px; }
.detail-list details { border-bottom: 1px solid var(--line); padding-block: 20px; }
.detail-list details:first-child { padding-top: 0; }
.detail-list summary { list-style: none; display: flex; justify-content: space-between; gap: 20px; font-size: 16px; font-weight: 550; }
.detail-list summary::-webkit-details-marker { display: none; }
.detail-list summary::after { content: '+'; color: #68686d; font-size: 19px; font-weight: 400; }
.detail-list details[open] summary::after { content: '−'; }
.detail-list p { font-size: 13px; line-height: 1.65; color: #66666d; margin: 15px 0 0; }
kbd { font: inherit; }
.availability { padding: 75px 24px 85px; background: var(--paper); text-align: center; }
.app-icon.small { width: 65px; height: 65px; border-radius: 17px; }
.app-icon.small svg { width: 42px; height: 42px; }
.availability .product-name { font-size: 16px; }
.availability h2 { font-size: 56px; }
.availability > p:not(.product-name) { font-size: 17px; line-height: 1.5; color: #6b6b72; }
.actions { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 25px; }
.button { display: inline-flex; gap: 15px; padding: 14px 23px; border-radius: 30px; background: #087c54; color: white; font-size: 14px; }
.button:hover { background: #096443; }
.release-link { color: #176947; font-size: 13px; }
footer { display: flex; justify-content: space-between; gap: 20px; padding-block: 28px; font-size: 11px; color: #6b6b71; }
footer div { display: flex; gap: 25px; }
@media(min-width:1400px) { .device-stage { height: 350px; } }
@media(max-width:1200px) {  .device-stage { height: 280px; } }
@media(max-width:900px) {
  .device-stage { height: 250px; }
  .experience { padding-inline: 25px; }
  .screen-brightness { width: 50px; height: 50px; border-radius: 10px; }
  .screen-brightness svg { width: 16px; height: 16px; }
  .screen-brightness span { font-size: 11px; }
  .feature-copy { padding: 32px 25px 0; }
  .feature h2 { font-size: 31px; }
  .feature-copy > p:last-child { font-size: 14px; }
  .native-capture { width: calc(100% - 35px); margin-right: 15px; }
  .native-panel { width: calc(100% - 35px); margin-right: 15px; }
  .details { gap: 40px; }
  .details h2 { font-size: 37px; }
}
@media(max-width:600px) {
  .wrap { width: calc(100% - 40px); }
  .studio-bar { width: calc(100% - 40px); margin-inline: auto; height: 34px; font-size: 9px; }
  .studio-bar > span { display: none; }
  .nav-inner { width: calc(100% - 40px); margin-inline: auto; min-height: 57px; }
  .brand { font-size: 20px; }
  .nav nav { gap: 0; }
  .nav nav > a:not(.nav-cta) { display: none; }
  .nav .nav-cta { font-size: 11px; padding: 8px 12px; }
  .hero { padding: 43px 20px 36px; }
  .app-icon { width: 62px; height: 62px; border-radius: 17px; margin-bottom: 19px; }
  .app-icon svg { width: 40px; height: 40px; }
  .product-name { font-size: 14px; margin-bottom: 20px; }
  h1 { font-size: clamp(47px,12vw,68px); letter-spacing: -.062em; margin-bottom: 22px; }
  .hero-description { font-size: 17px; letter-spacing: -.5px; line-height: 1.5; }
  .hero-link { font-size: 15px; }
  .experience { width: calc(100% - 20px); border-radius: 22px; padding: 24px 13px; }
  .demo-top { flex-direction: column; gap: 10px; }
  .demo-top h2 { font-size: 17px; }
  .demo-tag { font-size: 10px; }
  .mode-picker { margin-top: 20px; gap: 0; width: 100%; }
  .mode-picker button { flex: 1; font-size: 10px; padding: 10px 5px; white-space: nowrap; }
  .scope-description { font-size: 11px; min-height: 32px; padding: 0 8px; }
  .device-stage { height: 380px; margin: 8px auto 0; max-width: 410px; }
  .device.external { width: 48%; left: 0; top: 0; bottom: auto; }
  .device.laptop { width: 50%; left: 49%; top: 25px; bottom: auto; }
  .device.pc { width: 48%; left: 0; bottom: 0; }
  .device.imac { width: 45%; right: 2%; bottom: 0; }
  .hardware { padding-bottom: 25px; }
  .device.pc .hardware { padding-bottom: 25px; }
  .support { height: 23px; }
  .device.imac .chin { height: 16px; }
  .device-caption { padding-top: 10px; gap: 3px; height: 41px; }
  .device-caption strong { font-size: 9px; }
  .device-caption span { font-size: 8px; }
  .bezel, .device.imac .bezel { padding: 4px; border-radius: 6px; }
  .device.imac .bezel { border-radius: 6px 6px 0 0; }
  .screen-bar { font-size: 5px; }
  .screen-brightness { width: 43px; height: 43px; gap: 3px; }
  .screen-brightness svg { width: 14px; height: 14px; }
  .screen-brightness span { font-size: 10px; }
  .demo-controller { margin-top: 18px; padding: 17px 16px 14px; border-radius: 18px; }
  .computer-picker { gap: 5px; }
  .computer-picker label span { font-size: 9px; padding: 7px; gap: 3px; }
  .controller-footer { font-size: 9px; }
  .controller-footer button { font-size: 9px; }
  .demo-note { font-size: 10px; }
  .demo-note span { font-size: 9px; }
  .statement { padding-block: 75px 55px; }
  .eyebrow { font-size: 10px; margin-bottom: 20px; }
  .statement h2 { font-size: 42px; }
  .statement > p:not(.eyebrow) { font-size: 17px; }
  .platform-line { font-size: 23px; }
  .feature-grid { grid-template-columns: 1fr; gap: 20px; }
  .feature-copy { padding: 35px 28px 0; }
  .feature h2 { font-size: 34px; }
  .feature-copy > p:last-child { font-size: 16px; }
  .native-capture { width: 280px; max-width: calc(100% - 40px); margin-right: 20px; }
  .native-panel { width: 270px; max-width: calc(100% - 40px); margin-right: 20px; }
  .native-visual { min-height: 340px; }
  .phone-visual { height: 320px; }
  .details { grid-template-columns: 1fr; padding-block: 70px; gap: 25px; }
  .details h2 { font-size: 38px; }
  .detail-list summary { font-size: 15px; }
  .availability { padding-block: 60px; }
  .availability h2 { font-size: 44px; }
  footer { flex-direction: column; gap: 20px; font-size: 10px; }
}
@media(max-width:360px) { .device-stage { height: 340px; } .computer-picker label span { padding: 7px 5px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *,*::before,*::after { transition: none !important; animation: none !important; } }

/* Desk configurations pair physical display groups with the native-style panel. */
.configuration-demo { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 40px; align-items: center; margin: 35px auto 10px; max-width: 1200px; }
.computer-stage { display: grid; gap: 32px; min-width: 0; }
.computer-rig { min-width: 0; border-bottom: 1px solid #ddddE3; padding-bottom: 16px; }
.rig-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
.rig-heading strong { font-size: 13px; font-weight: 600; }
.rig-heading > span { font-size: 11px; color: #656569; }
.rig-screens { display: flex; justify-content: center; align-items: flex-end; gap: 16px; }
.configuration-demo .device { position: relative; inset: auto; width: auto; flex: 1; max-width: 245px; min-width: 0; }
.configuration-demo .hardware { padding-bottom: 28px; }
.configuration-demo .support { height: 25px; }
.configuration-demo .device.laptop .hardware { padding-bottom: 5px; }
.configuration-demo .device.laptop .display { aspect-ratio: 1.65; }
.configuration-demo .device.pc .hardware { padding-bottom: 28px; }
.configuration-demo .device-caption { height: auto; min-height: 28px; padding-top: 9px; }
.configuration-demo .device-caption strong { font-size: 10px; display: flex; align-items: center; gap: 5px; font-weight: 500; }
.display-number { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 5px; font-size: 9px; background: #e3e5e6; color: #585c5b; flex-shrink: 0; }
.configuration-demo .screen-brightness { width: 44px; height: 44px; border-radius: 10px; gap: 3px; }
.configuration-demo .screen-brightness svg { width: 15px; height: 15px; }
.configuration-demo .screen-brightness span { font-size: 11px; }
.configuration-demo .bezel { transition: box-shadow .2s; }
.configuration-demo .is-adjusting .bezel { box-shadow: 0 0 0 2px #258c62, 0 0 0 5px #258c621a; }
.configuration-demo .is-adjusting .display-number { color: #146241; background: #d6eadd; }
.configuration-demo .demo-controller { width: 100%; margin: 0; padding: 18px 16px 14px; border-radius: 18px; }
.configuration-demo .controller-top { margin: 0 3px 17px; }
.panel-preview-label { color: #656569; font-size: 10px; }
.computer-controls { margin-top: 10px; border: 1px solid #e8e8ec; border-radius: 11px; background: #f7f7f9; padding: 12px 10px 7px; }
.computer-control-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 11px; }
.computer-control-heading > span { font-size: 8px; color: #626669; background: #eaeaed; padding: 3px 5px; border-radius: 5px; }
.control-row { display: grid; grid-template-columns: 110px minmax(0,1fr) 33px; gap: 8px; align-items: center; min-height: 33px; }
.control-row label { font-size: 10px; display: flex; align-items: center; gap: 5px; }
.control-row output { font-size: 9px; font-variant-numeric: tabular-nums; text-align: right; color: #5c6360; }
.control-row.all-row { background: #edf5f0; border-radius: 9px; padding: 5px 10px; }
.all-row label, .group-row label { font-weight: 600; }
.control-row input { appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; height: 28px; margin: 0; background: transparent; cursor: pointer; --fill: 70%; }
.control-row input::-webkit-slider-runnable-track { height: 4px; border-radius: 5px; background: linear-gradient(to right,#24845e var(--fill),#d8ddda var(--fill)); }
.control-row input::-moz-range-track { height: 4px; border-radius: 5px; background: linear-gradient(to right,#24845e var(--fill),#d8ddda var(--fill)); }
.control-row input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: white; margin-top: -6px; box-shadow: 0 1px 4px #0003; border: 1px solid #e6e9e7; }
.control-row input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: white; box-shadow: 0 1px 4px #0003; border: 1px solid #e6e9e7; }
@media(max-width:1050px) {
 .configuration-demo { grid-template-columns: minmax(0,1fr) 320px; gap: 25px; }
 .rig-screens { gap: 10px; }
 .configuration-demo .device-caption strong { font-size: 9px; gap: 3px; }
 .configuration-demo .screen-brightness { width: 33px; height: 33px; gap: 2px; border-radius: 7px; }
 .configuration-demo .screen-brightness svg { width: 11px; height: 11px; }
 .configuration-demo .screen-brightness span { font-size: 9px; }
 .control-row { grid-template-columns: 105px minmax(0,1fr) 30px; gap: 6px; }
}
@media(max-width:800px) {
 .configuration-demo { grid-template-columns: 1fr; gap: 25px; max-width: 600px; }
 .configuration-demo .demo-controller { max-width: 430px; margin-inline: auto; }
 .configuration-demo .screen-brightness { width: 44px; height: 44px; }
 .configuration-demo .screen-brightness svg { width: 15px; height: 15px; }
 .configuration-demo .screen-brightness span { font-size: 11px; }
 .configuration-demo .device-caption strong { font-size: 10px; }
 .control-row { grid-template-columns: 120px minmax(0,1fr) 33px; gap: 8px; }
}
@media(max-width:420px) {
 .configuration-demo { margin-top: 23px; }
 .computer-stage { gap: 22px; }
 .rig-heading { margin-bottom: 15px; }
 .rig-heading strong { font-size: 12px; }
 .rig-heading > span { font-size: 10px; }
 .rig-screens { gap: 8px; }
 .configuration-demo .device-caption strong { font-size: 8px; gap: 3px; }
 .configuration-demo .device-caption .display-number { width: 12px; height: 12px; font-size: 8px; }
 .configuration-demo .screen-brightness { width: 30px; height: 30px; border-radius: 6px; }
 .configuration-demo .screen-brightness svg { width: 10px; height: 10px; }
 .configuration-demo .screen-brightness span { font-size: 8px; }
 .configuration-demo .screen-bar { display: none; }
 .configuration-demo .demo-controller { padding-inline: 11px; }
 .control-row { grid-template-columns: 104px minmax(0,1fr) 29px; gap: 5px; }
 .control-row label { font-size: 9px; }
}

.download-options { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; width: min(720px,100%); margin: 30px auto 24px; text-align: center; }
.download-option { background: white; border: 1px solid #e5e5e8; border-radius: 20px; padding: 28px 20px; }
.download-option h3 { font-size: 22px; margin: 0 0 10px; letter-spacing: -.5px; }
.download-option p { color: #656569; font-size: 13px; line-height: 1.6; margin-bottom: 20px; }
.download-option .button { margin-bottom: 16px; }
.download-option .release-link { display: block; }
.download-status { display: inline-block; margin-bottom: 16px; padding: 14px 23px; background: #ededf0; border-radius: 30px; color: #626268; font-size: 14px; }
@media(max-width:600px) { .download-options { grid-template-columns: 1fr; max-width: 360px; } }

.brand-lockup { display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
.brand-credit { font-size: 11px; color: #656569; white-space: nowrap; }
.brand-credit:hover { color: var(--green); }
@media(max-width:600px) { .brand-lockup { gap: 9px; }.brand-credit { font-size: 9px; }.brand { gap: 7px; font-size: 19px; } }
@media(max-width:360px) { .nav-inner { width: calc(100% - 28px); }.brand-lockup { gap: 7px; }.brand svg { width: 20px; height: 20px; }.brand-credit { font-size: 8px; }.nav .nav-cta { padding: 8px 10px; } }