@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--paper:#f6f6f5;--ink:#202123;--muted:#686b70;--aluminium:#d5d8db;--line:#d8dadd;--deep:#292b2e}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:35px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
button,a,.trackpad{touch-action:manipulation}
button:focus-visible,a:focus-visible,.trackpad:focus-visible{outline:3px solid #72777d;outline-offset:6px}
.wrap{width:min(1240px,calc(100% - 96px));margin:auto}
.header{height:114px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;font-family:'Manrope',sans-serif;font-weight:800;letter-spacing:-1.8px;font-size:32px;gap:9px}
.mark{width:30px;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round}
.platform{font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:1.2px;font-weight:500;margin-left:15px;align-self:center;color:var(--muted)}
nav{display:flex;gap:37px;font-size:13px}
nav a:hover{text-decoration:underline;text-underline-offset:6px}
nav span{margin-left:8px}
.hero{display:grid;grid-template-columns:1.12fr 1fr;column-gap:70px;padding-top:79px}
.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:600;margin:0;line-height:1.8}
.tiny-dot{display:inline-block;background:var(--ink);height:6px;width:6px;border-radius:50%;margin-right:9px;vertical-align:middle}
h1,h2,h3,p{margin-top:0}
h1,h2{font-family:'Manrope',sans-serif;font-weight:500;letter-spacing:-4.7px}
h1{font-size:clamp(55px,5.6vw,82px);line-height:1.05;margin:25px 0 26px}
em{font-family:inherit;font-style:normal;font-weight:inherit}
.intro{font-size:16px;line-height:1.8;color:#60646a;margin-bottom:31px}
.button{border:0;display:inline-flex;align-items:center;justify-content:space-between;gap:46px;padding:17px 21px;background:var(--ink);color:var(--paper);font-size:13px;border-radius:5px;transition:background .2s,transform .2s}
.button:hover{background:#44484d;transform:translateY(-2px)}
.button span{font-size:20px;line-height:1}
.under-button{font-size:11px;color:var(--muted);margin:13px 0 0}
.demo{background:#e2e4e6;border:1px solid #cbd0d4;border-radius:10px;padding:27px 30px 18px;align-self:center;box-shadow:0 18px 40px #20212312}
.demo-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.demo-top .eyebrow{font-size:8px;letter-spacing:1.4px}
.demo-tag{font-size:7px;letter-spacing:1px;border:1px solid #aeb5bb;padding:5px 6px;border-radius:3px}
.sound-readout{display:flex;gap:15px;align-items:center;justify-content:center;margin:38px 0 16px}
.sound-readout svg{width:26px;fill:none;stroke:#4a4f55;stroke-width:1.6;stroke-linejoin:round}
.sound-readout output{font-family:'Manrope',sans-serif;font-size:51px;line-height:1;font-weight:500;letter-spacing:-2px;min-width:91px}
.sound-readout output span{font-size:23px;margin-left:3px;letter-spacing:-1px}
.meter{display:flex;gap:4px;height:21px;justify-content:center;margin-bottom:36px}
.meter i{width:5px;background:#bcc2c7;border-radius:2px}
.meter i.active{background:#33373c}
.trackpad{height:228px;background:#f3f4f5;border:1px solid #b6bcc2;border-radius:12px;position:relative;box-shadow:inset 0 1px 2px #fff,0 6px 12px #20212309;touch-action:none;cursor:ns-resize;user-select:none;overflow:hidden}
.gesture-path{position:absolute;left:50%;top:38px;bottom:46px;border-left:1px dashed #a8afb5}
.gesture-path:before{content:'';width:7px;height:7px;border-top:1px solid currentColor;border-left:1px solid currentColor;transform:rotate(45deg);position:absolute;top:-19px;left:-5px;color:#747b83;font-size:16px}
.fingers{display:flex;gap:9px;position:absolute;top:75px;left:50%;transform:translateX(-50%);transition:top .1s}
.fingers i{height:62px;width:26px;border:1px solid #363a3f;border-radius:30px;background:#42474d;box-shadow:0 4px 10px #17191d24}
.fingers i:nth-child(2){margin-top:-12px}
.trackpad-label{position:absolute;bottom:17px;left:0;right:0;text-align:center;letter-spacing:2px;font-size:7px;color:#697078}
.pad-corner{position:absolute;bottom:14px;right:17px;font-size:16px;color:#747c84}
.demo-bottom{display:flex;justify-content:space-between;align-items:center;margin:20px 0 0;font-size:9px;color:#606970}
.demo-bottom button{border:0;background:none;color:var(--ink);display:flex;align-items:center;padding:3px 0;font-size:10px}
.mute-dot{display:inline-block;border:1px solid #707880;border-radius:50%;width:12px;height:12px;margin-right:7px}
.is-muted .mute-dot{background:#585d63}
.is-muted .waves{visibility:hidden}
.demo-disclaimer{font-size:8px;color:#687078;text-align:center;margin:14px 0 0}
.hero-foot{grid-column:1/-1;margin-top:82px;padding:23px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;color:var(--muted)}
.down{margin-left:25px;color:var(--ink)}
.gestures{margin-top:44px;background:#eaeced;padding:68px 0 55px}
.section-title{display:grid;grid-template-columns:.7fr 1.4fr 1fr;gap:35px;align-items:start}
.section-title .eyebrow{padding-top:10px}
h2{font-size:45px;line-height:1.13;letter-spacing:-2px;margin-bottom:0}
.section-title>p:last-child{font-size:14px;color:var(--muted);line-height:1.8;padding-top:7px}
.gesture-rows{margin-top:47px}
.gesture-rows article{display:grid;grid-template-columns:45px 90px 1fr 1.15fr;gap:22px;align-items:center;padding:24px 0;border-top:1px solid #cdd1d4}
.row-no{font-size:10px;color:#71777d}
.gesture-icon{font-size:31px;color:#484d53}
.tap-icon{font-size:52px;line-height:25px}
.gesture-rows h3{font-size:21px;font-weight:500;letter-spacing:-.5px;margin:0}
.gesture-rows p{font-size:13px;color:#60676d;margin:0;line-height:1.7}
.direction-toggle{border:0;border-bottom:1px solid #8d959d;padding:7px 0;background:none;font-size:11px;margin:22px 0 0 179px;color:#41474d}
.direction-toggle .line-icon{margin-left:20px}
.editions{padding:86px 0 78px}
.edition-heading{position:relative}
.edition-heading h2{margin-top:23px;font-size:49px}
.edition-heading>p:last-child{font-size:14px;line-height:1.7;color:var(--muted);margin-top:22px}
.table-wrap{margin-top:43px}
table{width:100%;border-collapse:collapse;font-size:14px;text-align:left}
thead th{padding:20px 0 24px;font-size:23px;font-weight:500}
thead th:first-child{font-size:11px;font-weight:400;color:var(--muted);vertical-align:bottom;padding-bottom:28px}
thead th:not(:first-child),td{text-align:center;width:21%}
thead th span{font-size:10px;display:block;color:var(--muted);font-weight:400;margin-top:8px}
tbody tr{border-top:1px solid var(--line)}
tbody tr:last-child{border-bottom:1px solid var(--line)}
tbody th{font-weight:400;padding:20px 0}
td{font-size:18px;color:#393f45}
td:last-child,thead th:last-child{background:#e9ebed}
.support{font-size:9px;color:var(--muted);margin-left:12px;white-space:nowrap}
.table-note{font-size:10px;line-height:1.8;color:var(--muted);margin-top:16px;max-width:620px}
.closing{background:var(--aluminium);padding:56px 0 63px}
.closing-inner{display:flex;justify-content:space-between;align-items:center}
.closing h2{font-size:56px;letter-spacing:-2.8px;margin-top:18px}
.closing-action{padding-top:30px}
.closing-action p{font-size:11px;color:#646c74;margin:14px 0 0}
.closing .button{min-width:240px}
footer{display:flex;justify-content:space-between;align-items:center;padding:32px 0}
footer .brand{font-size:27px}
footer p,footer>a:last-child{font-size:10px;color:var(--muted);margin:0}
.footer-dot{color:#7b838b;margin-left:-6px}
dialog{max-width:460px;width:calc(100% - 40px);background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:42px;color:var(--ink)}
dialog::backdrop{background:#181b20b0}
dialog h2{font-size:34px;letter-spacing:-1.5px;margin:20px 0}
dialog p:not(.eyebrow){font-size:14px;line-height:1.8;color:var(--muted)}
.close{position:absolute;right:16px;top:10px;font-size:26px;background:none;border:0;color:var(--ink)}
.close-action{margin-top:10px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(min-width:1500px){.hero{padding-top:100px;padding-bottom:0}
h1{font-size:84px}
}
@media(max-width:1000px){.wrap{width:calc(100% - 56px)}
.hero{gap:30px}
.demo{padding:22px}
.demo-tag{display:none}
h1{font-size:60px;letter-spacing:-3.5px}
.section-title{grid-template-columns:.7fr 1.4fr}
.section-title>p:last-child{grid-column:2}
.section-title h2{font-size:39px}
.gesture-rows article{grid-template-columns:30px 48px 1fr 1.1fr;gap:14px}
.direction-toggle{margin-left:106px}
.support{display:block;margin:5px 0 0}
}
@media(max-width:700px){.wrap{width:calc(100% - 40px)}
.header{height:85px}
.brand{font-size:28px}
.platform{display:none}
nav{gap:19px;font-size:11px}
.hero{display:flex;flex-direction:column;padding-top:45px;gap:0}
h1{font-size:64px;letter-spacing:-3.8px;margin-top:22px}
.hero-copy .eyebrow{font-size:8px}
.intro{font-size:14px}
.demo{width:100%;max-width:440px;margin-top:47px;padding:23px}
.demo-tag{display:block}
.sound-readout{margin-top:30px}
.trackpad{height:215px}
.hero-foot{width:100%;margin-top:45px;font-size:7px;letter-spacing:1px}
.hero-foot .down{margin-left:8px}
.gestures{margin-top:12px;padding:42px 0}
.section-title{display:block}
.section-title h2{margin:20px 0;font-size:39px}
.section-title>p:last-child{font-size:13px}
.gesture-rows{margin-top:30px}
.gesture-rows article{grid-template-columns:22px 35px 1fr;gap:12px;padding:21px 0}
.gesture-rows h3{font-size:20px}
.gesture-rows p{grid-column:3;font-size:12px}
.gesture-icon{grid-row:span 2;align-self:start}
.row-no{align-self:start;padding-top:7px}
.direction-toggle{margin-left:81px;font-size:10px;text-align:left}
.editions{padding:48px 0}
.edition-heading h2{font-size:37px;letter-spacing:-1.8px}
.edition-heading>p:last-child{font-size:13px;max-width:290px}
.table-wrap{margin-top:22px}
thead th{font-size:20px}
thead th span{font-size:8px;padding:0 5px;line-height:1.5}
thead th:first-child{font-size:9px;max-width:140px}
tbody th{font-size:12px;max-width:160px;padding-right:10px;line-height:1.6}
thead th:not(:first-child),td{width:23%}
.table-note{font-size:9px}
.closing{padding:40px 0}
.closing-inner{display:block}
.closing h2{font-size:44px;letter-spacing:-2px}
.closing-action{padding-top:27px}
footer{flex-wrap:wrap;gap:20px}
footer p{order:3;width:100%}
footer>a:last-child{margin-left:auto}
.table-note{max-width:310px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*{transition:none!important}
}


/* Aluminium is a material cue: neutral silver, graphite and soft white. */
.demo { background: linear-gradient(145deg, #eef0f1 0%, #dce0e3 100%); box-shadow: inset 0 1px 0 #ffffffb3, 0 18px 40px #20212312; }

.trackpad { box-shadow: inset 0 1px 2px #fff, 0 6px 12px #20212309; }

.fingers i { box-shadow: inset 0 1px 0 #ffffff26, 0 4px 10px #17191d24; }

.closing { background: #25272a; color: #f6f6f5; border-top: 1px solid #92989e; }

.closing .eyebrow { color: #b8bec4; }

.closing-action p { color: #c2c7cc; }

.closing .button { background: #e0e3e6; color: #202123; }

.closing .button:hover { background: #fff; }


.island-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; padding-top: 86px; padding-bottom: 76px; border-bottom: 1px solid var(--line); }
.island-copy h2 { margin-top: 23px; }
.island-copy > p:not(.eyebrow) { max-width: 370px; font-size: 14px; line-height: 1.8; color: var(--muted); margin: 24px 0 22px; }
.island-link { display: inline-flex; gap: 30px; font-size: 11px; border-bottom: 1px solid #8d959d; padding-bottom: 8px; }
.island-link:hover { border-color: var(--ink); }
.island-figure { margin: 0; min-width: 0; }
.mac-display { padding: 7px 7px 0; border: 1px solid #aeb4ba; border-bottom: 0; border-radius: 18px 18px 0 0; background: #cbd0d4; box-shadow: inset 0 1px 0 #ffffffb3; }
.mac-screen { height: 265px; position: relative; overflow: hidden; border: 5px solid #202123; border-bottom: 0; border-radius: 12px 12px 0 0; background: #e5e8ea; }
.screen-menu { display: flex; justify-content: space-between; padding: 11px 14px; font-size: 8px; color: #666e75; }
.screen-menu span:first-child { font-weight: 700; color: #30343a; }
.island-shape { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 244px; background: #08090a; color: #fff; border-radius: 0 0 24px 24px; padding: 0 19px 17px; }
.camera-space { height: 32px; display: flex; align-items: center; justify-content: center; }
.camera-space span { width: 6px; height: 6px; background: #202328; border-radius: 50%; }
.island-feedback { display: flex; align-items: center; gap: 13px; height: 30px; }
.island-feedback svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; flex: none; }
.island-level { height: 4px; flex: 1; background: #404144; border-radius: 3px; overflow: hidden; }
.island-level > span { display: block; width: 48%; height: 100%; background: #f4f5f6; border-radius: inherit; }
.island-percent { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.screen-line { position: absolute; top: 126px; left: 30px; right: 30px; border-top: 1px solid #cbd0d4; }
.screen-caption { position: absolute; top: 151px; left: 30px; color: #666e75; font-size: 20px; letter-spacing: -.6px; line-height: 1.4; }
.island-figure figcaption { font-size: 9px; line-height: 1.7; color: var(--muted); margin-top: 12px; }
@media (max-width: 1000px) { .island-section { gap: 35px; } .island-copy h2 { font-size: 39px; } .island-shape { width: 212px; padding-left: 16px; padding-right: 16px; } .screen-menu span:last-child { display: none; } }
@media (max-width: 700px) { .island-section { grid-template-columns: 1fr; gap: 32px; padding-top: 48px; padding-bottom: 42px; } .island-copy h2 { font-size: 37px; } .island-copy > p:not(.eyebrow) { max-width: 350px; font-size: 13px; margin-top: 20px; } .island-figure { width: 100%; max-width: 440px; } .mac-screen { height: 245px; } }

.download-button { gap: 22px; font-size: 11px; font-weight: 600; letter-spacing: 1px; }
.download-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.mid-download { padding-top: 36px; }
.mid-download + .island-section { padding-top: 60px; }
@media (max-width: 700px) { .mid-download { padding-top: 28px; } .mid-download + .island-section { padding-top: 48px; } }

.mid-download { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 44px; padding-bottom: 6px; }
.mid-download-title { font-size: 21px; font-weight: 500; letter-spacing: -.5px; margin-bottom: 18px; }
.mid-download-note { font-size: 11px; color: var(--muted); margin: 13px 0 0; }
@media (max-width: 700px) { .mid-download { padding-top: 36px; } }

thead th .edition-price { font-size: 23px; font-weight: 500; color: var(--ink); letter-spacing: -.7px; margin-top: 13px; white-space: nowrap; }
.currency-note { font-size: 10px; color: var(--muted); margin: 16px 0 0; line-height: 1.7; }
@media (max-width: 700px) { thead th .edition-price { font-size: 17px; padding: 0 3px; } }

/* Section headings stand on their own, without small prefatory labels. */
.hero-copy h1, .island-copy h2, .edition-heading h2, .closing h2 { margin-top: 0; }
.section-title { grid-template-columns: 1.4fr 1fr; }
@media (min-width: 701px) and (max-width: 1000px) { .section-title { grid-template-columns: 1.4fr 1fr; } .section-title > p:last-child { grid-column: auto; } }

.site-footer { gap: 24px; border-top: 1px solid var(--line); }
.site-footer .copyright { font-size: 11px; color: var(--muted); margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 24px; font-size: 11px; color: var(--muted); }
.footer-links a:hover { color: var(--ink); }
.legal-page { max-width: 820px; padding-top: 48px; padding-bottom: 64px; }
.legal-review-note { padding: 16px 20px; border: 1px solid var(--line); font-size: 12px; line-height: 1.6; color: var(--muted); margin-bottom: 35px; }
.legal-page h1 { font-size: clamp(32px,5vw,48px); letter-spacing: -1.8px; line-height: 1.15; margin: 0 0 28px; }
.legal-page h2 { font-size: 23px; letter-spacing: -.6px; margin: 32px 0 14px; line-height: 1.4; }
.legal-page h3 { margin-top: 24px; }
.legal-page p, .legal-page li { font-size: 14px; line-height: 1.85; color: #51575d; overflow-wrap: anywhere; }
.legal-page article a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) { .site-footer { align-items: flex-start; gap: 18px; } .site-footer .copyright { order: 2; width: auto; margin-left: auto; font-size: 10px; } .site-footer .footer-links { order: 3; width: 100%; gap: 24px; } .legal-page { padding-top: 30px; } }

.support.microphone-note { display: block; margin: 6px 0 0; white-space: normal; font-size: 10px; line-height: 1.6; font-weight: 400; }

.line-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -.12em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gesture-icon .line-icon { display: block; width: 28px; height: 28px; }