:root { --ink: #111; --ink2: #6B6B70; --ink3: #A0A0A6; --line: rgba(0, 0, 0, .08); --line2: rgba(0, 0, 0, .12); --acc: #007AFF; --bg: #F2F2F4; --tile: #fff; --app: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; }
body { background: var(--bg); color: var(--ink); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
code { font: .92em var(--mono); }
ul { list-style: none; margin: 0; padding: 0; }
a:focus-visible, button:focus-visible, summary:focus-visible, [role=tab]:focus-visible { outline: none; background-color: rgba(0, 0, 0, .06); }
@media (prefers-contrast: more), (forced-colors: active) { a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #0A84FF; outline-offset: 3px; } }
@keyframes in { from { opacity: 0; transform: translateY(14px); } }
.page { display: flex; flex-direction: column; }
.br-m { display: none; }

/* Nav */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.nav { position: sticky; top: 0; z-index: 40; background: rgba(242, 242, 244, .78); -webkit-backdrop-filter: saturate(1.8) blur(18px); backdrop-filter: saturate(1.8) blur(18px); transition: background-color .35s, box-shadow .35s; }
.nav.scrolled { background: rgba(255, 255, 255, .82); box-shadow: 0 .5px 0 rgba(0, 0, 0, .12), 0 8px 24px -16px rgba(0, 0, 0, .25); }
.nav .wrap { display: flex; align-items: center; height: 64px; gap: 10px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-size: 17px; letter-spacing: -.02em; }
.brand img { width: 30px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .16)) drop-shadow(0 4px 8px rgba(0, 0, 0, .14)); transition: transform .5s var(--spring); }
.brand:hover img { transform: rotate(-8deg) scale(1.07); }
.brand:active img { transform: scale(.9); transition-duration: .12s; }
.nav nav { position: relative; display: flex; gap: 2px; margin-left: auto; margin-right: 18px; font-size: 14px; font-weight: 500; }
.nav nav a { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 34px; padding: 0 13px; border-radius: 10px; color: var(--ink2); transition: color .2s, background-color .2s, transform .3s var(--spring); }
.nav nav a:hover { color: var(--ink); background: rgba(0, 0, 0, .045); }
.nav nav a.on { color: var(--ink); } .nav nav a.on:hover { background: transparent; }
.nav nav a:active { transform: scale(.95); transition-duration: .1s; }
.nav .ind { position: absolute; left: 0; top: 0; height: 34px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .07), 0 2px 6px -2px rgba(0, 0, 0, .16); opacity: 0; transition: transform .55s var(--spring), width .55s var(--spring), opacity .25s, background-color .3s; }
.nav.scrolled .ind { background: rgba(0, 0, 0, .06); box-shadow: none; }
.dlw { display: flex; }
.nav .dl { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px 0 13px; border-radius: 10px; background: #000; color: #fff; font: 600 14px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; transition: transform .35s var(--spring), background-color .2s; }
.nav .dl:hover { background: #2C2C2E; }
.nav .dl:active, .nav .dl.going { transform: scale(.96); transition-duration: .1s; }
.dl-ap { flex: none; width: 13px; height: 16px; margin-top: -2px; }
.dl-ic { flex: none; width: 15px; height: 15px; margin-top: -1px; }

/* Buttons: Apple black download, white GitHub */
.bk1, .ghb { --bh: 58px; --br: 17px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: var(--bh); border-radius: var(--br); font-size: 17px; font-weight: 600; line-height: 1.15; letter-spacing: -.015em; white-space: nowrap; }
.bk1 { gap: 12px; padding: 0 26px 0 22px; background: #000; color: #fff; transition: transform .35s var(--spring), background-color .2s; }
.bk1:hover { background: #2C2C2E; }
.bk1:active, .bk1.going { transform: scale(.97); transition-duration: .12s; }
.bk1 .ap { flex: none; width: 20px; height: 24px; margin-top: -3px; }
html[data-os^="linux"] .bk1 .ap { width: 22px; height: 24px; margin-top: -2px; }
html[data-os^="linux"] .dl-ap { width: 15px; height: 16px; margin-top: -1px; }
.bk1 .tx { text-align: left; } .bk1 small { display: block; margin-top: 1px; font-size: 12px; font-weight: 500; opacity: .7; letter-spacing: 0; }
.ghb { gap: 10px; padding: 0 24px 0 22px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); transition: transform .35s var(--spring), box-shadow .2s, background-color .2s; }
.ghb:hover { background: #F7F7F8; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.ghb:active { transform: scale(.97); transition-duration: .12s; }
.ghb svg { flex: none; width: 19px; height: 19px; }
.dtoast { position: fixed; left: 50%; bottom: 24px; z-index: 900; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 12px 20px 12px 13px; border-radius: 16px; background: rgba(28, 28, 30, .94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: #fff; font-size: 13.5px; line-height: 1.3; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .1), 0 18px 40px -12px rgba(0, 0, 0, .5); translate: -50% 0; transform: translateY(160%); opacity: 0; transition: transform .55s var(--spring), opacity .25s; pointer-events: none; }
.dtoast.show { transform: none; opacity: 1; }
.dtoast i { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #30A46C; }
.dtoast i svg { width: 15px; height: 15px; }
.dtoast b { display: block; font-weight: 600; } .dtoast span { color: rgba(255, 255, 255, .68); font-size: 12.5px; }

/* Hero text, centered: the first part in ink, the second part grey on its own line */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 84px; animation: in .9s var(--ease) both; }
.hero > * { max-width: 100%; }
.h-tw { border-radius: 18px; }
.h-t { font: 700 clamp(48px, 6.3vw, 86px)/1.02 var(--sans); letter-spacing: -.045em; color: var(--ink3); text-wrap: balance; }
.h-t .g { display: block; }
.hw { font-style: normal; color: var(--ink); }
.h-sub { margin-top: 20px; font-size: 21px; line-height: 1.35; letter-spacing: -.02em; color: var(--ink2); }
.h-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 32px; }
.h-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; margin-top: 16px; font-size: 13px; color: var(--ink2); }
.h-meta .br, .meta .br { display: none; }
.h-meta li + li::before, .bigicon .meta li + li::before { content: ""; display: inline-block; width: 3px; height: 3px; margin-right: 8px; border-radius: 50%; background: var(--ink3); vertical-align: 3px; }
.h-meta a, .bigicon .meta a { color: inherit; text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .22); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.h-meta a:hover, .bigicon .meta a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* Hero desktop scenes: a 1184 by 700 stage, zoomed to fit (site.js) and cropped at the sides on phones */
.hv { margin-top: 56px; border-radius: 26px; animation: in 1s var(--ease) .15s both; }
.desk { --fit: 1184px; position: relative; height: 700px; border-radius: 26px; overflow: hidden; background: #8EC5F2 url(assets/wall-blossom.webp) center / cover no-repeat; box-shadow: 0 0 0 .5px var(--line), 0 40px 90px -50px rgba(20, 40, 90, .55); }
.desk > .mb { position: relative; z-index: 3; }
.dk-fb { position: absolute; left: 50%; bottom: 44px; z-index: 6; height: 48px; translate: -50% 0; }
.dk-cur { position: absolute; z-index: 9; width: 19px; height: 28px; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); pointer-events: none; }
.ml { position: absolute; left: calc(50% - 380px); top: 66px; width: 760px; }
.dk-cur:not(.ap-cur) { left: calc(50% + 300px); top: 452px; }
.mw { overflow: hidden; border-radius: 12px; background: #fff; color: #1D1D1F; font: 13px/1.4 var(--text); letter-spacing: 0; text-align: left; }
.mw-bar { display: flex; align-items: center; height: 52px; padding: 0 14px 0 20px; background: #F6F6F6; box-shadow: inset 0 -.5px 0 rgba(0, 0, 0, .12); }
.tl3 { display: flex; gap: 8px; } .tl3 b { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .16); }
.tl3 b:nth-child(2) { background: #FEBC2E; } .tl3 b:nth-child(3) { background: #28C840; }
.mw-send { display: grid; place-items: center; width: 34px; height: 28px; margin-left: 22px; border-radius: 6px; color: #6E6E73; }
.mw-send svg { width: 17px; height: 17px; }
.mw-ti { margin-left: 8px; font-weight: 600; color: rgba(0, 0, 0, .85); }
.mw-sp { flex: 1; }
.mw-tool { display: grid; place-items: center; min-width: 32px; height: 28px; border-radius: 6px; color: #6E6E73; font-weight: 500; }
.mw-tool svg { width: 17px; height: 17px; }
.mw-f { display: flex; align-items: center; gap: 6px; height: 37px; margin: 0 20px; box-shadow: inset 0 -.5px 0 rgba(0, 0, 0, .1); }
.mw-f span { color: #8A8A8E; }
.tok { font-weight: 400; color: var(--acc); }
.mw-body { height: 298px; padding: 18px 20px; font-size: 14.5px; line-height: 1.55; }
.mw-tx .w { animation: wIn .24s var(--ease) both; animation-delay: calc(var(--n) * 14ms); }
@keyframes wIn { from { opacity: 0; } }
.caret { display: inline-block; width: 1.5px; height: 17px; margin-left: 1px; vertical-align: -3px; background: var(--acc); animation: k-blink 1.06s steps(1) infinite; }
.kc { position: absolute; left: calc(50% - 380px); top: 556px; z-index: 5; display: flex; align-items: center; gap: 14px; }
.kc-cap { position: relative; width: 110px; height: 70px; border-radius: 11px; background: linear-gradient(#FFFFFF, #F4F4F6); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 3px 0 #C6C6CC, 0 10px 22px -8px rgba(20, 40, 90, .5); color: #1D1D1F; font: 500 13px/1 var(--text); transition: transform .12s var(--ease), box-shadow .12s var(--ease); }
.kc-cap small { position: absolute; right: 11px; top: 10px; font-size: 14px; }
.kc-cap span { position: absolute; left: 11px; bottom: 10px; }
.kc.down .kc-cap { transform: translateY(2px); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 1px 0 #C6C6CC, 0 5px 12px -6px rgba(20, 40, 90, .5); background: linear-gradient(#F4F4F6, #EDEDF0); }
.kc p { padding: 7px 13px; border-radius: 99px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08); font-size: 13.5px; font-weight: 600; color: #1D1D1F; transition: background-color .2s; }
/* Raw to clean */
.rc { position: absolute; left: calc(50% - 430px); top: 84px; width: 860px; }
.rc-card { padding: 6px 36px; border-radius: 22px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 30px 60px -30px rgba(20, 40, 90, .45); text-align: left; }
.rc-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 18px; align-items: baseline; min-height: 128px; padding: 26px 0; }
.rc-row + .rc-row { box-shadow: inset 0 .5px 0 rgba(0, 0, 0, .1); }
.rc-row > b { font-size: 14px; font-weight: 600; color: var(--ink2); letter-spacing: -.01em; transition: color .3s, opacity .3s; }
.rc-row:not(.on) > b { opacity: .45; }
.rc-x { font: 500 27px/1.38 var(--sans); letter-spacing: -.025em; color: var(--ink); }
.tk { background: linear-gradient(#8E8E93, #8E8E93) 0 58% / 0 2px no-repeat; transition: color .35s var(--ease), background-size .4s var(--ease); }
.tk.x { color: var(--ink3); background-size: 100% 2px; }
.tk.c { color: var(--acc); }
.rc-x .w { animation: wIn .3s var(--ease) both; animation-delay: calc(var(--n) * 30ms); }
/* App window: the real Home capture. Two patches in the capture's own colors show the ready state and
   the transcript, at the capture's 1x points. */
.ap-w { position: absolute; left: calc(50% - 470px); top: 58px; width: 940px; }
.ap-st, .ap-tr { position: absolute; background: var(--gfill, #EDEDED); font: 13px/1.3 var(--app); letter-spacing: 0; color: rgba(0, 0, 0, .85); }
.ap-st { left: 700px; top: 61px; width: 214px; height: 27px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-right: 10px; }
.ap-ready { color: #34C759; } .ap-ready.mid { color: rgba(0, 0, 0, .5); }
.ap-btn { display: grid; place-items: center; min-width: 74px; height: 22px; padding: 0 12px; border-radius: 5px; background: rgba(0, 0, 0, .08); font-weight: 500; transition: transform .12s var(--ease), background-color .12s; }
.ap-btn.press { transform: scale(.95); background: rgba(0, 0, 0, .14); }
.ap-tr { left: 257px; top: 92.5px; width: 658px; height: 93px; display: grid; place-items: center; padding: 16px 24px; text-align: center; }
.ap-tr p { grid-area: 1 / 1; transition: opacity .2s; }
.ap-ph { color: rgba(0, 0, 0, .42); }
.ap-tx:empty, .ap-tr.has .ap-ph { opacity: 0; }
.ap-tx .w { animation: wIn .24s var(--ease) both; animation-delay: calc(var(--n) * 14ms); }
.ap-fb { bottom: 30px; }
.ap-cur { left: calc(50% + 230px); top: 520px; }
/* Big flow bar */
.bg-c { position: absolute; inset: 24px 0 0; display: grid; place-content: center; justify-items: center; }
.bg-fb { height: 84px; }
.bg-n { margin-top: 40px; min-width: 180px; padding: 9px 18px; border-radius: 99px; background: rgba(255, 255, 255, .74); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08); font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: #1D1D1F; text-align: center; }
.bg-n.swap { animation: nIn .4s var(--ease); }
@keyframes nIn { from { opacity: 0; transform: translateY(4px); } }
.bg-dots { display: flex; gap: 7px; margin-top: 22px; }
.bg-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, .2); transition: background-color .3s, transform .3s var(--ease); }
.bg-dots i.on { background: #1D1D1F; transform: scale(1.25); }
.bg-all { display: none; }
.calm .desk[data-scene=big] .bg-c { display: none; }
.calm .desk[data-scene=big] .bg-all { position: absolute; inset: 24px 0 0; display: grid; grid-template-columns: repeat(3, auto); align-content: center; justify-content: center; gap: 34px 70px; }
.bg-all > div { display: grid; justify-items: center; gap: 16px; }
.bg-all .fbh { height: 42px; --s: 1.5; }
.bg-all p { font-size: 14px; font-weight: 600; color: #1D1D1F; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .74); }

/* Works with strip */
.ww { margin-top: 64px; border-radius: 24px; }
.strip { display: flex; align-items: center; gap: 30px; padding: 22px 30px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 .5px var(--line); }
.strip > p { flex: none; width: 82px; font-size: 14px; font-weight: 600; color: var(--ink2); }
.strip > div { flex: 1; min-width: 0; }
.chip { display: inline-flex; align-items: center; gap: 9px; flex: none; height: 40px; padding: 0 16px; border-radius: 12px; background: #F5F5F7; font-size: 14px; white-space: nowrap; }
.chip b { font-weight: 600; }
.chip .ph { color: var(--ink2); clip-path: inset(0 100% 0 0); animation: type var(--d, 7s) steps(var(--c, 20)) var(--dl, 0s) infinite; }
.chip .ph::after { content: ""; display: inline-block; width: 1.5px; height: 15px; margin-left: 2px; vertical-align: -2px; background: var(--acc); }
@keyframes type { 0% { clip-path: inset(0 100% 0 0); } 30%, 85% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .chip .ph { animation: none; clip-path: none; } }
.lang { flex: none; font-size: 17px; font-weight: 600; letter-spacing: -.015em; color: var(--ink2); white-space: nowrap; }
.lang.hi { color: var(--ink); }
.ks { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; }
.ks > span { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink2); white-space: nowrap; }
.ks kbd, .key { position: relative; display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 7px; background: #F7F7F8; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .16), 0 2px 0 rgba(0, 0, 0, .14); color: #1D1D1F; font: 500 13px/1 var(--text); transition: transform .12s var(--ease), box-shadow .12s var(--ease), background-color .12s; }
.ks kbd.down { transform: translateY(1.5px); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .16), 0 .5px 0 rgba(0, 0, 0, .14); background: #EDEDF0; }
.ks i { font-style: normal; color: var(--ink3); margin: 0 -4px; }

/* Section heads */
.sh { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding: 120px 0 28px; }
.sh h2, .h2 { font: 700 54px/1.02 var(--sans); letter-spacing: -.05em; }
h2 span { color: var(--ink3); }

/* Bento. Modes: m0 grid, m1 stacked rows, m2 one big tile and small ones. */
.bento { display: grid; gap: 16px; border-radius: 26px; outline-offset: 10px; }
.bento > .vtag { left: 0; top: -30px; }
.bento.m0 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 300px; grid-template-areas: "fbt fbt ru sc" "ai ai cm cm" "hi hi di di" "hi hi ma ra"; }
.bento.m2 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 300px; grid-template-areas: "fbt fbt ru" "fbt fbt sc" "ai cm di" "hi ma ra"; }
.bento.m1 { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 300px; }
.bento > .fbt { grid-area: fbt; } .bento > .ru { grid-area: ru; } .bento > .sc { grid-area: sc; } .bento > .ai { grid-area: ai; } .bento > .cm { grid-area: cm; }
.bento > .hi { grid-area: hi; } .bento > .di { grid-area: di; } .bento > .ma { grid-area: ma; } .bento > .ra { grid-area: ra; }
.bento.m1 > .t { grid-area: auto; }
.t { position: relative; overflow: hidden; padding: 24px; border-radius: 26px; background: var(--tile); box-shadow: 0 0 0 .5px var(--line); transition: transform .45s var(--spring), box-shadow .3s, opacity .9s var(--ease); }
.t:hover { transform: translateY(-4px); box-shadow: 0 0 0 .5px var(--line), 0 22px 44px -18px rgba(0, 0, 0, .2); }
[data-reveal]:not(.in).t { transform: translateY(30px) scale(.98); }
.t h3 { font-size: 17px; letter-spacing: -.02em; white-space: nowrap; } .t .lab p { color: #777; font-size: 14px; margin-top: 2px; }
.t .lab { position: relative; z-index: 2; }
.t .demo { position: absolute; inset: 90px 24px 24px; }
.bento.m1 > .t { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; padding: 30px 34px; }
.bento.m1 > .t .lab { align-self: center; }
.bento.m1 > .t .lab h3 { font-size: 22px; letter-spacing: -.03em; } .bento.m1 > .t .lab p { font-size: 15px; margin-top: 6px; white-space: normal; }
.bento.m1 > .t .demo { position: relative; inset: auto; height: 100%; }
/* Flow bar tile */
.fbt-d { display: grid; place-content: center; justify-items: center; cursor: pointer; }
.fbt-h { --s: 2; height: 56px; }
.bento.m2 .fbt-h { --s: 3; height: 84px; }
.bento.m2 .fbt { background: radial-gradient(80% 70% at 50% 60%, #F4F4F6, #fff 70%); }
.fbt-n { margin-top: 22px; font-size: 14px; font-weight: 600; color: var(--ink2); }
.bento.m2 .fbt-n { margin-top: 34px; font-size: 16px; }
.fbt-n.swap { animation: nIn .35s var(--ease); }
/* Rule cleanup */
.ru-d { display: grid; align-content: center; gap: 16px; }
.ru-b small { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 600; color: var(--ink3); }
.ru-b p { min-height: 2.8em; font-size: 15px; line-height: 1.4; letter-spacing: -.012em; }
.ru-res { transition: opacity .3s var(--ease), transform .3s var(--ease); }
.ru-res.pre { opacity: 0; transform: translateY(4px); }
/* Shortcuts */
.sc-d { display: grid; place-content: center; justify-items: center; gap: 22px; }
.sc-k { display: grid; justify-items: center; width: 296px; }
.sc-c { grid-area: 1 / 1; display: flex; gap: 22px; transition: opacity .22s var(--ease), transform .3s var(--ease), visibility 0s; }
.sc-c:not(.on) { opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .18s var(--ease), transform .3s var(--ease), visibility 0s .3s; }
.sc-c .key + .key::before { content: "+"; position: absolute; left: -22px; top: 50%; width: 22px; margin-top: -9px; text-align: center; font-size: 16px; line-height: 18px; color: var(--ink3); }
.key i { position: absolute; left: 9px; top: 9px; font: 500 10px/1 var(--text); font-style: normal; color: var(--ink3); }
.key.k-c small { right: auto; left: 11px; top: 9px; font-size: 14px; } .key.k-c b { left: 11px; bottom: 2px; font-size: 24px; line-height: 1; }
.key.k-l b { left: 0; right: 0; bottom: 18px; text-align: center; font-size: 20px; }
.key { width: 84px; height: 58px; padding: 0; border-radius: 10px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .16), 0 3px 0 rgba(0, 0, 0, .13); }
.key small { position: absolute; right: 9px; top: 8px; font-size: 13px; } .key b { position: absolute; left: 9px; bottom: 8px; font-weight: 500; font-size: 12px; }
.key.k-esc { width: 58px; }
.key.down { transform: translateY(2px); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .16), 0 1px 0 rgba(0, 0, 0, .13); background: #EDEDF0; }
.sc-say { display: grid; text-align: center; }
.sc-say span { grid-area: 1 / 1; font-size: 14px; font-weight: 600; color: var(--ink2); transition: opacity .25s, transform .35s var(--ease), color .15s; }
.sc-say span:not(.on) { opacity: 0; transform: translateY(6px); }
.sc-say span.out { transform: translateY(-6px); }
.sc-d.dn .sc-say span.on { color: var(--ink); }
/* Segmented control, drawn like the app's: the control fill, the raised white segment */
.seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: 28px; padding: 2px; border-radius: 7px; background: rgba(0, 0, 0, .07); }
.seg button { position: relative; z-index: 1; padding: 0 12px; border-radius: 5px; font-size: 13px; font-weight: 500; color: var(--ink2); white-space: nowrap; transition: color .2s; }
.seg button[aria-checked=true] { color: var(--ink); }
.seg-i { position: absolute; left: 2px; top: 2px; bottom: 2px; width: calc((100% - 4px) / var(--n, 4)); border-radius: 5px; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .14); transition: transform .3s var(--ease); }
.seg2 { --n: 2; width: 160px; }
/* AI cleanup */
.ai-d { display: flex; flex-direction: column; container-type: inline-size; }
@container (max-width: 440px) { .ai-raw { display: none; } }
.ai-d .seg { width: 100%; max-width: 420px; }
.ai-raw { margin-top: 14px; font-size: 13px; color: var(--ink3); }
.ai-raw small { margin-right: 8px; font-size: 12px; font-weight: 600; }
.ai-out { position: relative; flex: 1; min-height: 110px; margin-top: 10px; border-radius: 12px; background: #F5F5F7; }
.ai-out p { position: absolute; inset: 0; padding: 11px 14px; white-space: pre-line; font-size: 14.5px; line-height: 1.38; letter-spacing: -.012em; opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.ai-out p.on { opacity: 1; transform: none; }
/* Command Mode */
.cm-d { display: flex; flex-direction: column; justify-content: center; }
.cm-doc { min-height: 96px; padding: 16px 18px; border-radius: 12px; background: #F5F5F7; font-size: 16px; line-height: 1.45; letter-spacing: -.012em; }
.cm-s { background: linear-gradient(rgba(0, 122, 255, .22), rgba(0, 122, 255, .22)) 0 0 / 0 100% no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .7s var(--ease), opacity .2s; }
.cm-s.sel { background-size: 100% 100%; }
.cm-s.swap { opacity: 0; }
.cm-say { display: flex; align-items: center; gap: 14px; height: 42px; margin-top: 16px; }
.cm-say .cm-fb { --s: 1.4; height: 40px; width: 166px; justify-items: start; }
.cm-say .cm-fb > .fb { transform-origin: 0 50%; }
.cm-q { font-size: 15px; font-weight: 600; color: var(--ink2); transition: opacity .3s; }
/* History: a crop of the real History entry */
.hi-ex { display: flex; gap: 6px; margin-top: 14px; }
.hi-ex span { display: grid; place-items: center; height: 26px; padding: 0 10px; border-radius: 6px; background: rgba(0, 0, 0, .05); font-size: 12.5px; font-weight: 600; color: var(--ink2); transition: background-color .25s, color .25s; }
.hi-ex span.on { background: #1D1D1F; color: #fff; }
.t .hi-d { inset: 140px 0 0 0; }
.hi-w { position: absolute; left: -192px; top: 0; width: 771px; transition: transform .7s var(--ease); }
.t.hi:hover .hi-w { transform: translateY(-6px); }
.bento.m1 .hi-d { overflow: hidden; border-radius: 12px; }
.bento.m1 .hi-w { left: -192px; top: 10px; }
/* Dictionary packs: a group of rows, like the app */
.di-d { display: grid; align-content: center; }
.grp-a { border-radius: 10px; background: rgba(0, 0, 0, .03); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .1); }
.di-r { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 12px; }
.di-r + .di-r { box-shadow: inset 0 .5px 0 rgba(0, 0, 0, .1); }
.di-r b { display: block; font-size: 13.5px; font-weight: 500; } .di-r span { display: block; font-size: 11.5px; color: var(--ink2); }
/* Manual */
.ma-d { display: grid; align-content: center; gap: 12px; }
.ma-z { position: relative; display: grid; place-content: center; justify-items: center; gap: 6px; height: 104px; border-radius: 10px; background: rgba(0, 0, 0, .03); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); font-size: 12.5px; color: var(--ink2); transition: background-color .25s, box-shadow .25s; }
.ma-z::before { content: ""; position: absolute; inset: 0; border-radius: 10px; border: 1px dashed rgba(0, 0, 0, .28); transition: opacity .25s; }
.ma-z svg { width: 24px; height: 24px; }
.ma-z.over { background: rgba(0, 122, 255, .07); box-shadow: inset 0 0 0 1.5px var(--acc); } .ma-z.over::before { opacity: 0; }
.ma-f { position: absolute; left: 50%; top: -6px; width: 22px; height: 28px; margin-left: -11px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25), 0 6px 12px -4px rgba(0, 0, 0, .3); opacity: 0; }
.ma-f::after { content: ""; position: absolute; left: 5px; right: 5px; top: 13px; height: 6px; background: repeating-linear-gradient(90deg, var(--acc) 0 1.5px, transparent 1.5px 3px); }
.ma-f.drop { animation: fdrop 1s var(--ease) both; }
@keyframes fdrop { 0% { opacity: 0; transform: translate(40px, -60px) rotate(12deg); } 25% { opacity: 1; } 70% { opacity: 1; transform: translate(0, 30px) rotate(0); } 100% { opacity: 0; transform: translate(0, 40px) scale(.7); } }
.ma-r { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 10px; background: rgba(0, 0, 0, .03); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .1); }
.ma-r b { display: block; font-size: 13px; font-weight: 500; } .ma-r span { display: block; font-size: 11.5px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.ma-r span.ok { color: #34C759; }
.ma-p { flex: none; width: 72px; height: 5px; border-radius: 9px; background: rgba(0, 0, 0, .1); overflow: hidden; }
.ma-p b { display: block; height: 100%; border-radius: inherit; background: var(--acc); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; transition: transform .3s linear; }
/* Read aloud */
.ra-d { display: grid; align-content: center; }
.ra-v { font-size: 15px; font-weight: 500; letter-spacing: -.012em; } .ra-v b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ra-sl { position: relative; height: 22px; margin: 12px 0 18px; }
.ra-tr { position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 9px; background: rgba(0, 0, 0, .1); overflow: hidden; }
.ra-tr b { display: block; height: 100%; background: var(--acc); transform: scaleX(var(--v, .3)); transform-origin: 0 50%; transition: transform .45s var(--ease); }
.ra-k { position: absolute; left: 9px; right: 9px; top: 2px; height: 18px; transform: translateX(calc(var(--v, .3) * 100%)); transition: transform .45s var(--ease); }
.ra-k::after { content: ""; position: absolute; left: -9px; top: 0; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .28); }
.ra-sl { --w: 100%; }
.ra-sl .ra-k { width: calc(100% - 18px); }
.ra-w { display: flex; align-items: center; gap: 3px; height: 34px; }
.ra-w i { flex: 1; height: 100%; border-radius: 2px; background: var(--ink); opacity: .78; transform: scaleY(.12); animation: raw 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--n) * -97ms); animation-duration: calc(.7s + var(--r) * .6s); }
.t:not(.live) .ra-w i { animation-play-state: paused; }
@keyframes raw { to { transform: scaleY(var(--h, .8)); } }
@media (prefers-reduced-motion: reduce) { .ra-w i { animation: none; transform: scaleY(var(--h, .5)); } }

/* Screens: the real captures, in a tab set */
.scr { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px; border-radius: 26px; outline-offset: 10px; }
.scr > .vtag { left: 0; top: -30px; }
.scr-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; width: 100%; max-width: 100%; }
.scr-tabs { display: flex; gap: 2px; max-width: 100%; padding: 3px; overflow-x: auto; border-radius: 12px; background: rgba(0, 0, 0, .05); scrollbar-width: none; }
.scr-tabs::-webkit-scrollbar { display: none; }
.scr-tabs button { position: relative; flex: none; display: grid; height: 32px; padding: 0 13px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--ink2); text-align: left; transition: color .2s, background-color .2s; }
.scr-tabs button span { line-height: 32px; }
.scr-tabs button:hover { color: var(--ink); }
.scr-tabs button.on { background: #fff; color: var(--ink); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .12); }
.scr-tabs small, .scr-tabs .pg { display: none; }
.scr-st { width: 100%; max-width: 940px; }
.scr-st .win { aspect-ratio: 940 / 600; transition: background-color .3s; }
.scr-st .win.dark { background: #1E1E1E; }
.scr-st img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: translateY(4px); transition: opacity .32s var(--ease), transform .32s var(--ease); }
.scr-st img.on { opacity: 1; transform: none; }
.scr.m1 { grid-template-columns: 236px minmax(0, 940px); justify-content: center; align-items: center; gap: 30px; }
.scr.m1 .scr-top { flex-direction: column; align-items: stretch; gap: 18px; }
.scr.m1 .scr-tabs { flex-direction: column; padding: 0; overflow: visible; background: none; }
.scr.m1 .scr-tabs button { height: auto; padding: 8px 12px; border-radius: 10px; }
.scr.m1 .scr-tabs button span { line-height: 1.3; }
.scr.m1 .scr-tabs small { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink3); line-height: 1.35; }
.scr.m1 .seg2 { margin-left: 12px; }
.scr.m2 .scr-tabs { gap: 4px; padding: 0; background: none; }
.scr.m2 .scr-tabs button.on { background: none; box-shadow: none; }
.scr.m2 .scr-tabs .pg { display: block; position: absolute; left: 13px; right: 13px; bottom: 0; height: 2px; border-radius: 2px; background: rgba(0, 0, 0, .1); overflow: hidden; }
.scr.m2 .scr-tabs .pg b { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.scr.m2 .scr-tabs button.on .pg b { animation: pg 4.6s linear both; }
.scr.m2:not(.live) .scr-tabs .pg b { animation-play-state: paused; }
@keyframes pg { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .scr.m2 .scr-tabs button.on .pg b { animation: none; transform: scaleX(1); } }

/* Models */
.mdl { border-radius: 26px; outline-offset: 10px; }
.mdl > .vtag { left: 0; top: -30px; }
.mrows { max-width: 940px; margin: 0 auto; padding: 28px 34px 24px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 .5px var(--line); }
.mrows h4 { margin: 0 0 10px 2px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.mg { border-radius: 10px; background: rgba(0, 0, 0, .03); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .1); }
.mr { display: grid; grid-template-columns: minmax(0, 1fr) 70px auto; align-items: center; gap: 18px; min-height: 64px; padding: 10px 16px; }
.mr + .mr { box-shadow: inset 0 .5px 0 rgba(0, 0, 0, .1); }
.mr b { display: block; font-size: 15px; font-weight: 500; letter-spacing: -.01em; } .mr em { margin-left: 8px; font-style: normal; font-size: 13px; font-weight: 400; color: var(--ink2); }
.mr span { display: block; overflow: hidden; font-size: 13px; color: var(--ink2); white-space: nowrap; text-overflow: ellipsis; }
.mr small { font-size: 13px; color: var(--ink2); text-align: right; font-variant-numeric: tabular-nums; }
.pb { display: grid; place-items: center; height: 24px; padding: 0 12px; border-radius: 6px; background: rgba(0, 0, 0, .07); font-style: normal; font-size: 13px; font-weight: 500; }
.mf { margin: 10px 2px 0; font-size: 12.5px; color: var(--ink2); }
.mcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mc { display: flex; flex-direction: column; padding: 26px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 .5px var(--line); transition: transform .45s var(--spring), box-shadow .3s; }
.mc:hover { transform: translateY(-4px); box-shadow: 0 0 0 .5px var(--line), 0 20px 40px -20px rgba(0, 0, 0, .22); }
.mc small { font-size: 13px; font-weight: 600; color: var(--ink3); } .mc.rec small { color: var(--acc); }
.mc b { margin-top: 16px; font-size: 21px; line-height: 1.15; font-weight: 650; letter-spacing: -.025em; white-space: nowrap; }
.mc b i { display: block; font-style: normal; color: var(--ink3); }
.mc span { margin-top: 8px; font-size: 14px; color: var(--ink2); }
.mc em { margin-top: 28px; font: 700 34px/1 var(--sans); font-style: normal; letter-spacing: -.045em; }
.mdl-n { margin-top: 22px; color: var(--ink3); font-size: 13.5px; text-align: center; }

/* Privacy */
.safe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.safe > div { background: #fff; border-radius: 22px; padding: 26px; box-shadow: 0 0 0 .5px var(--line); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.safe > div.in { transition: transform .45s var(--spring), box-shadow .3s, opacity .9s var(--ease); }
.safe svg { width: 26px; height: 26px; color: var(--acc); margin-bottom: 26px; transition: transform .5s var(--spring); }
.safe h3 { font-size: 17px; letter-spacing: -.02em; margin-bottom: 4px; } .safe p { color: var(--ink2); font-size: 14px; }
.safe > div:hover { transform: translateY(-4px); box-shadow: 0 0 0 .5px var(--line), 0 20px 40px -20px rgba(0, 0, 0, .22); }
.safe > div:hover svg { transform: scale(1.1) rotate(-6deg); }

/* Linux: GNOME Terminal with the Ayu Dark profile */
.cli { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: center; padding-top: 140px; }
.cli p { color: var(--ink2); font-size: 18px; line-height: 1.5; margin-top: 16px; }
.cmd { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-top: 26px; height: 44px; padding: 0 6px 0 16px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 14px var(--mono); transition: box-shadow .25s; }
.cmd code { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cmd:hover { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 8px 18px -12px rgba(0, 0, 0, .25); }
.cmd .k-copy { flex: none; } .cmd .k-copy:hover { background: rgba(0, 0, 0, .06); } .cmd .k-copy:active { transform: scale(.9); }
.lx { display: grid; gap: 6px; margin-top: 22px; font-size: 14px; }
.lx div { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ink3); }
.lx b { width: 52px; font-weight: 600; color: var(--ink2); }
.lx a { color: var(--ink2); transition: color .2s; } .lx a:hover { color: var(--ink); }
.lsh { filter: drop-shadow(0 0 .5px rgba(0, 0, 0, .6)) drop-shadow(0 24px 32px rgba(0, 0, 0, .26)); }
.gt { border-radius: 12px 12px 0 0; }
.gt-bar { position: relative; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 8px; background: #262626; box-shadow: inset 0 -1px 0 #000; color: #fff; font: 600 13px/1 "Ubuntu", var(--text); }
.gt-ti { position: absolute; left: 50%; translate: -50% 0; white-space: nowrap; }
.gt-ib { display: grid; place-items: center; width: 30px; height: 28px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .86); }
.gt-ib svg, .gt-wc svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.gt-sp { flex: 1; }
.gt-wc { display: flex; gap: 10px; margin-left: 8px; }
.gt-wc i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; }
.gt-wc svg { width: 10px; height: 10px; }
.tw { border-radius: 12px 12px 0 0; }

/* FAQ */
.faqs { display: grid; grid-template-columns: 1fr 1.6fr; gap: 16px; align-items: start; padding-top: 140px; }
.faqs .q p { color: var(--ink2); margin-top: 14px; }
.faqs [data-faq] { background: #fff; border-radius: 26px; padding: 8px 30px; box-shadow: 0 0 0 .5px var(--line); }
.faqs details + details { border-top: 1px solid var(--line); }
.faqs summary { padding: 20px 0; font-size: 17px; font-weight: 600; letter-spacing: -.015em; transition: color .2s; }
.faqs summary:hover { color: #000; } .faqs summary:hover::after { opacity: 1; }
.faqs details p { color: var(--ink2); padding: 0 30px 20px 0; }

/* Final call to action */
.cta-wrap { margin-top: 140px; }
.bigicon { text-align: center; padding: 40px 0 20px; }
.bigicon button { display: block; margin: 0 auto 30px; }
.bigicon img { width: 190px; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .2)); transition: transform .5s var(--spring), filter .3s; }
.bigicon button:hover img { transform: translateY(-6px) rotate(-4deg); filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .24)); }
.bigicon button:active img { transform: scale(.93) translateY(4px); transition-duration: .12s; }
.bigicon h2 { font: 700 64px/1 var(--sans); letter-spacing: -.055em; }
.bi-sub { margin-top: 14px; font-size: 19px; color: var(--ink2); }
.row { display: flex; gap: 12px; align-items: center; }
.bigicon .row { justify-content: center; margin-top: 30px; }
.meta { font-size: 13px; color: var(--ink2); display: flex; gap: 8px; align-items: center; }
.meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--ink3); }
.bigicon .meta { flex-wrap: wrap; justify-content: center; gap: 2px 8px; margin-top: 18px; }

/* Footer */
.foot { margin-top: 120px; }
.fcols { display: flex; gap: 72px; } .fcols h4 { margin: 0 0 12px; font-size: 13px; } .fcols a { display: block; color: var(--ink2); padding: 4px 0; font-size: 14px; transition: color .2s, transform .3s var(--spring); } .fcols a:hover { color: var(--ink); transform: translateX(2px); }
.fbrand { display: flex; gap: 14px; align-items: center; } .fbrand img { width: 44px; } .fbrand b { display: block; font-size: 16px; } .fbrand span { color: var(--ink2); font-size: 14px; }
.fbar { display: flex; justify-content: space-between; align-items: center; padding: 22px 0 36px; color: var(--ink3); font-size: 13px; }
.f2 .wm { position: relative; margin-top: 70px; height: 280px; overflow: hidden; border-bottom: 1px solid var(--line); }
.f2 .wm b { position: absolute; left: 50%; top: 0; transform: translateX(-50%); font: 800 300px/1 var(--sans); letter-spacing: -.07em; white-space: nowrap; background: linear-gradient(180deg, #D6D6DA 0%, rgba(214, 214, 218, 0) 82%); -webkit-background-clip: text; background-clip: text; color: transparent; transition: letter-spacing 1.2s var(--ease); }
.f2 .wm:hover b { letter-spacing: -.04em; }
.f2 .top2 { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }

/* Responsive */
@media (max-width: 1100px) {
  .bento.m0, .bento.m2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "fbt fbt" "ru sc" "ai ai" "cm cm" "hi hi" "hi hi" "di di" "ma ra"; }
  .bento.m2 .fbt-h { --s: 2; height: 56px; }
  .safe, .mcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cli { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 110px; }
  .tw { justify-self: start; max-width: 100%; }
  .scr.m1 { grid-template-columns: minmax(0, 1fr); }
  .scr.m1 .scr-top { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; }
  .scr.m1 .scr-tabs { flex-direction: row; overflow-x: auto; background: rgba(0, 0, 0, .05); padding: 3px; }
  .scr.m1 .scr-tabs small { display: none; }
  .scr.m1 .seg2 { margin-left: 0; }
}
@media (max-width: 900px) {
  .nav nav { display: none; }
  .dlw { margin-left: auto; }
  .hero { padding-top: 64px; }
  .faqs { grid-template-columns: minmax(0, 1fr); padding-top: 110px; }
}
@media (max-width: 820px) {
  .desk { --fit: 1000px; }
  .sh { padding: 90px 0 24px; }
  .sh h2, .h2 { font-size: 42px; }
  .bento.m1 { grid-auto-rows: auto; }
  .bento.m1 > .t { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px; }
  .bento.m1 > .t .demo { height: 230px; }
  .bento.m1 > .t.hi .demo { height: 300px; }
  .mr { grid-template-columns: minmax(0, 1fr) auto; } .mr .pb { display: none; }
  .f2 .top2 { flex-direction: column; }
  .fcols { gap: 48px; }
  .f2 .wm { height: clamp(84px, 22vw, 280px); margin-top: 50px; }
  .f2 .wm b { font-size: clamp(60px, 23vw, 300px); }
}
@media (max-width: 700px) {
  .bento.m0, .bento.m2 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "fbt" "ru" "sc" "ai" "cm" "hi" "hi" "di" "ma" "ra"; }
  .bento.m0 > .t:not(.hi), .bento.m2 > .t:not(.hi) { display: flex; flex-direction: column; }
  .bento.m0 > .t:not(.hi) .demo, .bento.m2 > .t:not(.hi) .demo { position: relative; inset: auto; flex: 1; min-height: 0; margin-top: 16px; }
  .strip { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; }
  .strip > p { width: auto; text-align: center; }
  .ks { justify-content: center; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .br-m { display: inline; }
  .desk { --fit: 820px; height: 640px; }
  .desk[data-scene=app] { --fit: 990px; height: 700px; }
  .gt-sp ~ .gt-ib { display: none; }
  .gt-ti { position: static; translate: none; margin-left: 4px; font-size: 12px; }
  .h-t { font-size: clamp(40px, 11.5vw, 58px); }
  .h-sub { font-size: 18px; }
  .hero { padding-top: 48px; }
  .bk1, .ghb { --bh: 54px; }
  .h-cta { align-self: stretch; } .h-cta > a { flex: 1 1 auto; justify-content: center; }
  .hv { margin-top: 40px; }
  .ww { margin-top: 36px; }
  .sh h2, .h2 { font-size: 34px; }
  .t { padding: 20px; border-radius: 22px; }
  .t .demo { inset: 84px 20px 20px; }
  .t .hi-d { inset: 140px 0 0 0; }
  .safe, .mcards { grid-template-columns: minmax(0, 1fr); }
  .mrows { padding: 22px 16px 18px; border-radius: 22px; }
  .mr { padding: 10px 12px; gap: 10px; }
  .mr em { display: block; margin: 0; }
  .cmd { font-size: 12px; }
  .faqs [data-faq] { padding: 4px 20px; }
  .faqs summary { font-size: 16px; }
  .bigicon img { width: 140px; } .bigicon h2 { font-size: 46px; }
  .bigicon .row { flex-wrap: wrap; } .bigicon .row > a { flex: 1 1 auto; }
  .h-meta .br, .meta .br { display: block; flex-basis: 100%; height: 0; }
  .h-meta .br::before, .bigicon .meta .br::before, .h-meta .br + li::before, .bigicon .meta .br + li::before { display: none; }
  .fcols { flex-wrap: wrap; gap: 28px 44px; }
}