/* Blink website: one stylesheet for every page. The server's Content-Security-Policy allows
   no inline styles, so every rule lives here.
   Design boards: B62 (home, 1440 wide), B65 (home at 390), B66 (German), B67 (Chinese),
   B63/B64 (support and privacy, restyled with B62's system).
   Layout steps: B62 above 1023 px; up to 1023 px the menu folds into a button and the
   two-column sections stack; up to 760 px the page follows B65. Type sizes are fluid: the
   phone size at 390 px, B62's size from 1120 px. */

/* Tokens: macOS greys, the system font, and the system blue as the only accent. */
:root{
  --bg:#f5f5f7; --raised:#ffffff; --text:#1d1d1f; --text-2:#6e6e73; --text-3:#86868b;
  --hair:rgba(0,0,0,.08); --hair-2:rgba(0,0,0,.14); --seg:rgba(0,0,0,.06); --seg-on:#ffffff;
  --accent:#007aff; --link:#0068da;
  --btn:#1d1d1f; --btn-text:#ffffff;
  --key:#ffffff; --key-edge:rgba(0,0,0,.13); --key-depth:#c7c7cc; --key-text:#1d1d1f; --key-label:#86868b;
  --key-drop:0 6px 16px -8px rgba(0,0,0,.18);
  --panel:#1c1c1e; --panel-2:#141416; --panel-edge:rgba(0,0,0,.06);
  --inv:#1c1c1e; --inv-text:#f5f5f7; --inv-text-2:#a1a1a6; --inv-hair:rgba(255,255,255,.1); --inv-link:#419cff;
  --frame-shadow:0 40px 80px -20px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.06);
  --shot-shadow:0 18px 40px -16px rgba(0,0,0,.35);
  --nav-bg:rgba(245,245,247,.8);
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-in:cubic-bezier(.55,0,1,.45); --ease-key:cubic-bezier(.34,1.4,.64,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --fs-display:clamp(44px,24.8px + 4.93vw,80px);
  --fs-h2:clamp(30px,20.4px + 2.47vw,48px);
  --fs-closing:clamp(34px,22.3px + 3.01vw,56px);
  --fs-hero-lede:clamp(18px,16.4px + .41vw,21px);
  --fs-lede:clamp(17px,15.9px + .27vw,19px);
  --fs-h3:clamp(20px,18.9px + .27vw,22px);
  --fs-price:clamp(52px,41.3px + 2.74vw,72px);
  --section:clamp(80px,54.4px + 6.58vw,128px);
  --gutter:24px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0e0e10; --raised:#18181b; --text:#f5f5f7; --text-2:#a1a1a6; --text-3:#8e8e93;
    --hair:rgba(255,255,255,.08); --hair-2:rgba(255,255,255,.14); --seg:rgba(255,255,255,.08); --seg-on:#48484a;
    --accent:#0a84ff; --link:#419cff;
    --btn:#f5f5f7; --btn-text:#1d1d1f;
    --key:#2c2c2e; --key-edge:rgba(255,255,255,.1); --key-depth:#000000; --key-text:#f5f5f7; --key-label:#98989d;
    --panel:#18181b; --panel-2:#131315; --panel-edge:rgba(255,255,255,.08);
    --inv:#18181b; --inv-hair:rgba(255,255,255,.08);
    --frame-shadow:0 40px 80px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.1);
    --shot-shadow:0 18px 40px -16px rgba(0,0,0,.8);
    --nav-bg:rgba(14,14,16,.76);
  }
}
/* Chinese (B67): PingFang, headlines one step smaller. */
:root:lang(zh-Hans){--font:-apple-system,BlinkMacSystemFont,"SF Pro SC","SF Pro Text","PingFang SC","Helvetica Neue","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif}
:root:lang(zh-Hant){--font:-apple-system,BlinkMacSystemFont,"SF Pro TC","SF Pro Text","PingFang TC","Helvetica Neue","Microsoft JhengHei",system-ui,sans-serif}
:root:lang(zh){
  --fs-display:clamp(40px,22.9px + 4.38vw,72px);
  --fs-h2:clamp(28px,21.6px + 1.64vw,40px);
  --fs-closing:clamp(30px,20.4px + 2.47vw,48px);
}

/* Base */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.55 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--link);text-decoration:none}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
p,dd{text-wrap:pretty}
ol,ul{padding:0;list-style:none}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px;border-radius:6px}
[id]{scroll-margin-top:64px}
.nw{white-space:nowrap}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-64px;z-index:30;padding:8px 14px;border-radius:999px;background:var(--btn);color:var(--btn-text);font-size:13px;font-weight:500}
.skip:focus{top:8px}

.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section) 0}
.section.flush{padding-top:0}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.h2{margin-top:14px;font-size:var(--fs-h2);line-height:1.08;font-weight:600;letter-spacing:-.025em;text-wrap:balance}
.lede{font-size:var(--fs-lede);line-height:1.5;color:var(--text-2)}
.sec-head{display:grid;grid-template-columns:1fr 420px;gap:80px;align-items:end;margin-bottom:56px}
.sec-head .lede{font-size:17px;line-height:1.55}

/* Inline key chips and keycaps (built, not pictured). */
kbd{font:500 .84em/1 var(--font);display:inline-block;padding:.22em .45em .26em;border-radius:6px;background:var(--raised);border:1px solid var(--hair-2);box-shadow:0 1px 0 var(--hair-2);color:var(--text);white-space:nowrap;vertical-align:.08em}
.key{position:relative;display:block;height:60px;border-radius:12px;background:var(--key);border:1px solid var(--key-edge);box-shadow:0 2px 0 var(--key-depth),var(--key-drop);padding:0;font:inherit;color:var(--key-text);vertical-align:top}
.key .glyph{position:absolute;top:8px;right:11px;font-size:19px;line-height:1}
.key .label{position:absolute;left:11px;bottom:8px;font-size:11px;line-height:1;color:var(--key-label);letter-spacing:.01em}
.key-mod{width:68px}
.key-space{width:236px}

/* Nav: a quiet bar in the spirit of the menu bar. */
.nav{position:sticky;top:0;z-index:20;background:var(--nav-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--hair)}
.nav-in{position:relative;height:48px;display:flex;align-items:center;gap:32px;font-size:13px}
.brand{display:flex;align-items:center;gap:8px;color:var(--text);font-size:14px;font-weight:600}
.brand img{width:22px;height:22px}
.menu{display:flex;gap:24px}
.menu a,.nav-end>a{color:var(--text-2)}
.nav-end>a[aria-current]{color:var(--text)}
.nav-end{margin-left:auto;display:flex;align-items:center;gap:22px}
.seg{display:flex;gap:2px;padding:2px;border-radius:8px;background:var(--seg)}
.seg a{padding:3px 9px;border-radius:6px;font-size:12px;line-height:16px;color:var(--text-2)}
.seg a[aria-current]{background:var(--seg-on);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.nav-menu{display:none}
.nav-menu summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;cursor:pointer;color:var(--text);border-radius:10px}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu summary svg{display:block}
.nav-menu .x{display:none}
.nav-menu[open] .x{display:block}
.nav-menu[open] .bars{display:none}
.sheet{position:absolute;top:100%;left:0;right:0;padding:8px var(--gutter) 20px;background:var(--bg);border-bottom:1px solid var(--hair);box-shadow:0 24px 40px -24px rgba(0,0,0,.25)}
.sheet a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--hair);color:var(--text);font-size:19px;font-weight:600;letter-spacing:-.01em}
.sheet .sub{margin-top:12px}
.sheet .sub a{min-height:44px;font-size:15px;font-weight:400;color:var(--text-2);border:0}

/* "Coming soon" in place of the Mac App Store badge until Blink is live (store-cta in the HTML).
   A neutral pill, not a link. */
.store-cta{display:inline-flex;align-items:center;gap:8px;min-height:46px;box-sizing:border-box;padding:0 20px;border-radius:999px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--hair-2);color:var(--text-2);font-size:15px;font-weight:500;line-height:1.3;text-align:left}
.store-cta svg{flex:none;color:var(--text-3)}
.nav-cta.store-cta{display:inline-block;min-height:0;padding:5px 13px;background:none;font-size:12px;line-height:16px;color:var(--text-2)}

/* Hero */
.hero{padding:88px 0 0;text-align:center;overflow-x:clip}
.keys{display:inline-flex;gap:10px;margin-bottom:40px}
.display{font-size:var(--fs-display);line-height:1.02;font-weight:600;letter-spacing:-.035em;max-width:820px;margin:0 auto;text-wrap:balance}
.hero .lede{max-width:640px;margin:26px auto 0;font-size:var(--fs-hero-lede);line-height:1.45}
.hero .lede kbd{font-size:.76em;padding:.2em .42em .24em;vertical-align:.12em}
.hero-cta{margin-top:38px}
.micro{margin-top:14px;font-size:13px;color:var(--text-3)}
.stage{position:relative;margin-top:88px;container-type:inline-size}

.rise{animation:rise 600ms var(--ease-out) both}
.i1{animation-delay:60ms}.i2{animation-delay:120ms}.i3{animation-delay:180ms}.i4{animation-delay:240ms}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes frame-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
/* Hero stills (B69 B): the board lifts off the app you're in. 10 s loop. Depths are relative
   to the frame (cqw of .stage), so at B62's 1120 px frame they are B62's pixel values and the
   tilt looks the same on narrower screens. Phones use B65's values. */
.stack{
  --z-dim:3.571cqw; --z-t1:13.393cqw; --z-t2:14.732cqw; --z-c1:26.786cqw; --z-c2:29.464cqw; --z-d1:23.214cqw; --z-d2:25.893cqw;
  --rig-y:9%; --rig-s:.6; --frame-r:18px;
  position:relative;aspect-ratio:16/9;margin:0 0 40px;perspective:214.286cqw;perspective-origin:50% 35%;animation:frame-in 800ms var(--ease-out) 150ms both}
.stack .rig{position:absolute;inset:0;transform-style:preserve-3d;animation:b-rig 10s cubic-bezier(.65,0,.35,1) 1s infinite}
.stack .ly{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:var(--frame-r)}
.stack .doc{box-shadow:var(--frame-shadow)}
.stack .dim{position:absolute;inset:0;border-radius:var(--frame-r);background:rgba(0,0,0,.42);opacity:0;animation:b-dim 10s cubic-bezier(.65,0,.35,1) 1s infinite}
.stack .tiles{opacity:0;filter:drop-shadow(0 24px 30px rgba(0,0,0,.45));animation:b-tiles 10s cubic-bezier(.65,0,.35,1) 1s infinite}
.stack .card{position:absolute;display:block;max-width:none;border-radius:10px;opacity:0;filter:drop-shadow(0 30px 34px rgba(0,0,0,.5));animation:b-card 10s cubic-bezier(.65,0,.35,1) 1s infinite}
.stack .c2{animation-name:b-card2}
.card-cal{left:80.828%;top:3.75%;width:17.609%;height:90.972%}
.card-zones{left:1.562%;top:3.75%;width:19.547%;height:24.007%}
.card-stocks{left:60.969%;top:57.069%;width:19.234%;height:37.653%}
.hero .keys .key{animation:b-keys 10s linear 1s infinite}
@keyframes b-rig{0%,22%{transform:none}38%,70%{transform:translateY(var(--rig-y)) rotateX(52deg) rotateZ(-24deg) scale(var(--rig-s))}86%,100%{transform:none}}
@keyframes b-dim{0%,8%{opacity:0;transform:translateZ(0)}8.9%,22%{opacity:1;transform:translateZ(0)}38%,70%{opacity:.55;transform:translateZ(var(--z-dim))}86%,94%{opacity:1;transform:translateZ(0)}94.7%,100%{opacity:0}}
@keyframes b-tiles{0%,8%{opacity:0;transform:translateZ(0) scale(.96)}8.9%,22%{opacity:1;transform:translateZ(0)}38%{opacity:1;transform:translateZ(var(--z-t1))}54%{transform:translateZ(var(--z-t2))}70%{opacity:1;transform:translateZ(var(--z-t1))}86%,94%{opacity:1;transform:translateZ(0)}94.7%,100%{opacity:0;transform:translateZ(0)}}
@keyframes b-card{0%,22%{opacity:0;transform:translateZ(0)}30%{opacity:1}38%{transform:translateZ(var(--z-c1))}54%{transform:translateZ(var(--z-c2))}70%{opacity:1;transform:translateZ(var(--z-c1))}80%,100%{opacity:0;transform:translateZ(0)}}
@keyframes b-card2{0%,24%{opacity:0;transform:translateZ(0)}32%{opacity:1}40%{transform:translateZ(var(--z-d1))}58%{transform:translateZ(var(--z-d2))}70%{opacity:1;transform:translateZ(var(--z-d1))}80%,100%{opacity:0;transform:translateZ(0)}}
@keyframes b-keys{0%,7.5%{transform:none;box-shadow:0 2px 0 var(--key-depth),var(--key-drop)}8.5%,94%{transform:translateY(2px);box-shadow:0 0 0 var(--key-depth),0 3px 8px -6px rgba(0,0,0,.18)}95.5%,100%{transform:none;box-shadow:0 2px 0 var(--key-depth),var(--key-drop)}}

/* How it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{display:flex;flex-direction:column;background:var(--raised);border:1px solid var(--hair);border-radius:22px;overflow:hidden}
.step-text{padding:28px 28px 30px}
.step-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.num{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--hair-2);font-size:13px;font-weight:600;color:var(--text-2)}
.mini{display:flex;gap:5px}
.mini span{display:grid;place-items:center;height:30px;min-width:30px;box-sizing:border-box;padding:0 8px;border-radius:7px;background:var(--key);border:1px solid var(--key-edge);box-shadow:0 2px 0 var(--key-depth);font-size:14px;color:var(--key-text)}
.mini .sp{min-width:76px;font-size:11px;color:var(--key-label)}
.step h3{font-size:var(--fs-h3);line-height:1.25;font-weight:600;letter-spacing:-.01em}
.step p{margin-top:8px;font-size:15px;line-height:1.5;color:var(--text-2)}
.step-media{position:relative;margin-top:auto;aspect-ratio:714/480;background:#0b0b0c;border-top:1px solid var(--hair)}
.step-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.step-media.calm::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(11,11,12,.7),rgba(11,11,12,0) 64%)}
.chips{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 26px;margin-top:36px;font-size:14px;color:var(--text-2)}
.chips li{display:flex;align-items:center;gap:8px}
.chips .lead{color:var(--text-3)}

/* Step 1 loops the real gesture with the app's own timing: board in over 90 ms, out over 70 ms,
   opacity only. Held 2.4 s, released, 1.2 s rest, pressed again. */
.loop .board-in{animation:board-hold 3.6s infinite}
.loop .mini span{animation:key-hold 3.6s infinite}
.tap .mini span{animation:key-tap 3.6s infinite}
@keyframes board-hold{
  0%,66.667%{opacity:1;animation-timing-function:ease-in}
  68.611%{opacity:0}
  97.5%{opacity:0;animation-timing-function:ease-out}
  100%{opacity:1}
}
@keyframes key-hold{
  0%,66.667%{transform:translateY(2px);box-shadow:0 0 0 var(--key-depth);animation-timing-function:var(--ease-out)}
  71.111%{transform:none;box-shadow:0 2px 0 var(--key-depth)}
  97.5%{transform:none;box-shadow:0 2px 0 var(--key-depth);animation-timing-function:var(--ease-key)}
  100%{transform:translateY(2px);box-shadow:0 0 0 var(--key-depth)}
}
@keyframes key-tap{
  0%,16.667%{transform:none;box-shadow:0 2px 0 var(--key-depth);animation-timing-function:var(--ease-key)}
  19.722%{transform:translateY(2px);box-shadow:0 0 0 var(--key-depth);animation-timing-function:var(--ease-out)}
  24.167%,100%{transform:none;box-shadow:0 2px 0 var(--key-depth)}
}

/* Bento of real board tiles, separated by hairlines. */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:24px;overflow:hidden}
.cell{display:flex;flex-direction:column;background:var(--raised);padding:28px 28px 0}
.cell .idx{font:500 11px/1 var(--mono);letter-spacing:.04em;color:var(--text-3)}
.cell h3{margin-top:14px;font-size:19px;line-height:1.3;font-weight:600;letter-spacing:-.005em}
.cell p{margin-top:6px;font-size:15px;line-height:1.5;color:var(--text-2);max-width:34em}
.tile{margin-top:auto;padding-top:26px}
.tile div{position:relative;overflow:hidden;border-radius:14px 14px 0 0;box-shadow:var(--shot-shadow)}
.tile img{width:100%;height:100%;object-fit:cover;object-position:top}
.c-web{grid-column:span 2}
/* Tile crops: B62's sizes for its 316 px tiles, kept as ratios so narrower columns crop the same. */
.c-web .tile div{border-radius:16px 16px 0 0;aspect-ratio:689/340}
.c-cal{grid-row:span 2}
.c-cal .tile{flex:1;display:flex;min-height:0}
.c-cal .tile div{flex:1;border-radius:16px 16px 0 0}
.c-cal .tile img{position:absolute;inset:0}
.c-tz .tile div,.c-rem .tile div{aspect-ratio:316/200}
.c-stk .tile div,.c-note .tile div,.c-pdf .tile div{aspect-ratio:316/180}
.c-pdf .tile div{box-shadow:none;border-radius:0;color:var(--text-3)}
@media (min-width:761px){
  /* German copy runs longer, so B66 shortens the lower tiles to keep the grid's height. */
  :lang(de) .c-tz .tile div,:lang(de) .c-rem .tile div{aspect-ratio:316/174}
  :lang(de) .c-stk .tile div,:lang(de) .c-note .tile div,:lang(de) .c-pdf .tile div{aspect-ratio:316/162}
}

/* Feature rows with a dark board panel. */
.split{display:grid;grid-template-columns:minmax(0,440fr) minmax(0,600fr);gap:80px;align-items:center}
.split.flip{grid-template-columns:minmax(0,600fr) minmax(0,440fr)}
.split.top{align-items:start}
.panel{position:relative;height:520px;border-radius:24px;overflow:hidden;background:linear-gradient(to bottom,var(--panel),var(--panel-2));box-shadow:inset 0 0 0 1px var(--panel-edge)}
.panel img{position:absolute;max-width:none;filter:drop-shadow(0 24px 40px rgba(0,0,0,.55))}
.card-hang{left:calc(50% - 210px);top:0;width:420px;border-radius:0 0 19px 19px}
.launcher{left:calc(50% - 240px);top:59px;width:480px;border-radius:11px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:26px 32px;margin-top:40px}
.facts div{padding-top:18px;border-top:1px solid var(--hair)}
.facts dt{font-size:15px;font-weight:600}
.facts dd{margin-top:4px;font-size:15px;line-height:1.5;color:var(--text-2)}
.split .lede{margin-top:20px;font-size:17px;line-height:1.55}
.block{margin-top:40px;padding-top:26px;border-top:1px solid var(--hair)}
.block h3{display:flex;align-items:center;gap:10px;font-size:21px;line-height:1.3;font-weight:600;letter-spacing:-.01em}
.block p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--text-2)}
.toolbar-strip{margin-top:22px;padding:14px;border-radius:22px;background:linear-gradient(to bottom,var(--panel),var(--panel-2));box-shadow:inset 0 0 0 1px var(--panel-edge)}
.toolbar-strip img{width:100%;border-radius:999px}

/* Appearance */
.center-head{max-width:640px;margin:0 auto 56px;text-align:center}
.center-head .lede{margin-top:18px}
.compare{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--frame-shadow)}
.compare img{width:100%}
.compare::after{content:"";position:absolute;top:0;bottom:0;left:60.689%;width:1px;background:rgba(255,255,255,.55)}
.compare-cap{position:relative;height:22px;margin-top:18px;font-size:13px;color:var(--text-2)}
.compare-cap span{position:absolute;top:0}
.compare-cap span:last-child{left:calc(60.689% + 14px)}

/* Details grid */
.band{background:var(--raised);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.details{display:grid;grid-template-columns:repeat(4,1fr);gap:0 40px}
.details li{padding:26px 0 34px;border-top:1px solid var(--hair)}
.details svg{display:block;width:22px;height:22px;color:var(--text-2)}
.details h3{margin-top:14px;font-size:16px;line-height:1.35;font-weight:600}
.details p{margin-top:4px;font-size:15px;line-height:1.5;color:var(--text-2)}

/* Privacy */
.private{background:var(--inv);color:var(--inv-text);border-radius:28px;padding:72px 72px 64px;box-shadow:inset 0 0 0 1px var(--inv-hair)}
.private .h2{margin-top:22px;color:var(--inv-text)}
.private .lede{margin-top:18px;max-width:640px;color:var(--inv-text-2)}
.private-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:56px;padding-top:32px;border-top:1px solid var(--inv-hair)}
.private-facts h3{font-size:17px;font-weight:600}
.private-facts p{margin-top:6px;font-size:15px;line-height:1.5;color:var(--inv-text-2)}
.private .more{display:inline-block;margin-top:44px;font-size:15px;color:var(--inv-link)}

/* Pricing */
.price-card{background:var(--raised);border:1px solid var(--hair);border-radius:28px;padding:48px 52px 44px;box-shadow:0 30px 60px -36px rgba(0,0,0,.25)}
.price{display:flex;align-items:baseline;gap:14px}
.price strong{font-size:var(--fs-price);line-height:1;font-weight:600;letter-spacing:-.04em}
.price span{font-size:21px;color:var(--text-2)}
.price-note{margin-top:10px;font-size:15px;color:var(--text-2)}
.checks{margin-top:30px;display:grid;gap:14px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.4}
.checks svg{flex:none;margin-top:2px;color:var(--accent)}
/* The "coming soon" pill is wider than the badge it stands in for, so it sits above the fine print. */
.buy{display:grid;justify-items:start;gap:14px;margin-top:36px;padding-top:30px;border-top:1px solid var(--hair)}
.fine{font-size:13px;line-height:1.5;color:var(--text-3)}
.pricing-copy p+p{margin-top:16px}
.pricing-copy .lede{margin-top:22px}

/* FAQ */
.faq{display:grid;grid-template-columns:360px 1fr;gap:80px}
.faq-side .lede{margin-top:18px;font-size:17px}
.qa{border-top:1px solid var(--hair)}
.qa details{border-bottom:1px solid var(--hair)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;font-size:19px;font-weight:600;letter-spacing:-.005em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(var(--text-2),var(--text-2)) center/12px 1.5px no-repeat,linear-gradient(var(--text-2),var(--text-2)) center/1.5px 12px no-repeat;transition:transform 180ms var(--ease-out)}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa details p{padding:0 48px 26px 0;margin-top:-6px;font-size:17px;line-height:1.55;color:var(--text-2)}

/* Closing call to action and footer */
.closing{padding:40px 0 152px;text-align:center}
.closing img{width:112px;height:112px;margin:0 auto;filter:drop-shadow(0 16px 30px rgba(0,0,0,.22))}
.closing .h2{margin-top:30px;font-size:var(--fs-closing)}
.closing .lede{margin-top:16px}
.closing .store-cta{margin-top:36px}
.footer{border-top:1px solid var(--hair);padding:28px 0 44px;font-size:13px;color:var(--text-2)}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.foot-links,.foot-lang{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
.foot-links .copy-d{color:var(--text-3)}
.footer a{color:var(--text-2)}
.foot-lang svg{display:none}
.foot-lang a[aria-current]{color:var(--text-3);pointer-events:none}
.copy{display:none}
.legal{margin-top:16px;font-size:12px;color:var(--text-3)}

/* Support and privacy (B63, B64) in B62's type and colours. */
.doc-main{padding:72px 0 96px}
.wrap.doc{max-width:760px}
.doc h1{font-size:clamp(36px,5vw,52px);line-height:1.08;font-weight:600;letter-spacing:-.025em;text-wrap:balance}
.doc-lede{margin-top:16px;font-size:19px;line-height:1.5;color:var(--text-2)}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.toc a{padding:8px 14px;border-radius:999px;background:var(--seg);color:var(--text);font-size:14px;line-height:1.3}
.doc h2{margin-top:64px;font-size:30px;line-height:1.2;font-weight:600;letter-spacing:-.015em}
.doc .start + h2{margin-top:72px}
.start{display:grid;gap:20px;margin-top:24px;counter-reset:step}
.start li{display:flex;gap:16px}
.start li::before{counter-increment:step;content:counter(step);flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--btn);color:var(--btn-text);font-size:14px;font-weight:600;line-height:1}
.start p{margin-top:3px;font-size:17px;line-height:1.55}
.qs{margin-top:20px;border-bottom:1px solid var(--hair)}
.qs section{padding:24px 0;border-top:1px solid var(--hair)}
.qs h3{font-size:21px;line-height:1.3;font-weight:600;letter-spacing:-.01em}
.qs p{margin-top:10px;font-size:17px;line-height:1.55;color:var(--text-2)}
.ui{font-weight:600;color:var(--text)}
.doc code{font:.88em var(--mono);padding:.12em .36em;border-radius:5px;background:var(--seg);color:var(--text);white-space:nowrap}
.contact{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:64px;padding:32px;border-radius:22px;background:var(--raised);border:1px solid var(--hair)}
.contact>div{flex:1 1 320px}
.doc .contact h2{margin:0;font-size:24px;line-height:1.25}
.contact p{margin-top:8px;font-size:17px;line-height:1.5;color:var(--text-2)}
.contact-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:999px;background:var(--btn);color:var(--btn-text);font-size:16px;font-weight:600}
.updated{margin-top:14px;font-size:15px;color:var(--text-2)}
.note{margin-top:10px;font-size:14px;line-height:1.5;color:var(--text-3)}
.updated~.doc-lede{margin-top:20px}
.summary{margin-top:32px;padding:28px;border-radius:22px;background:var(--raised);border:1px solid var(--hair)}
.doc .summary h2{margin:0;font-size:19px;line-height:1.35;letter-spacing:-.005em}
.summary ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 24px;margin-top:18px}
.summary li{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.45}
.summary svg{flex:none;margin-top:1px;color:var(--text)}
.pp{margin-top:40px}
.summary+.pp{margin-top:48px}
.doc .pp h2{margin:0;font-size:24px;line-height:1.25}
.pp p{margin-top:12px;font-size:17px;line-height:1.6;color:var(--text-2)}
.nf{padding:120px 0 160px;text-align:center}
.nf .doc-lede{margin:16px auto 0;max-width:520px}
.nf .contact-btn{margin-top:32px}
.nf-langs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:28px;font-size:15px}

@media (hover:hover){
  a:hover{text-decoration:underline}
  .brand:hover,.menu a:hover,.nav-end>a:hover,.seg a:hover,.sheet a:hover,.toc a:hover,.contact-btn:hover,.skip:hover{text-decoration:none}
  .menu a:hover,.nav-end>a:hover,.seg a:hover,.footer a:hover{color:var(--text)}
  .toc a:hover{background:var(--hair-2)}
  .contact-btn:hover{opacity:.86}
  .step,.cell{transition:border-color 180ms var(--ease-out)}
}

/* Up to 1023 px: the menu folds into a button, two-column sections stack (B65's order). */
@media (max-width:1023px){
  .menu,.nav-end>a{display:none}
  .nav-in{gap:8px}
  .nav-end{gap:12px}
  .nav-menu{display:block;margin-right:-10px}

  .sec-head{display:block;margin-bottom:32px}
  .sec-head .lede{margin-top:14px;max-width:640px}

  .feature{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .feature>div:not(.panel){display:contents}
  .feature>*,.feature>div>*{min-width:0}
  .feature .h2{margin-top:12px}
  .feature .lede{margin-top:14px;max-width:640px}
  .feature .panel{order:1;margin-top:28px}
  .feature .facts,.feature .block{order:2}
  .facts{grid-template-columns:repeat(3,1fr)}

  .split.top,.faq{display:block}
  .price-card{margin-top:32px}
  .qa{margin-top:28px}

  .details{grid-template-columns:repeat(3,1fr);gap:0 32px}
  .private{padding:56px 48px 48px}
}

/* Up to 760 px: B65. */
@media (max-width:760px){
  :root{
    --gutter:16px;
    --frame-shadow:0 18px 36px -12px rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.06);
    --shot-shadow:0 12px 28px -14px rgba(0,0,0,.35);
    --key-drop:0 5px 12px -7px rgba(0,0,0,.18);
  }
  .h2{margin-top:12px;line-height:1.1}

  .key{height:46px;border-radius:10px}
  .key .glyph{top:7px;right:9px;font-size:16px}
  .key .label{left:9px;bottom:7px;font-size:10px}
  .key-mod{width:52px}
  .key-space{width:168px}

  .nav-in{height:52px}
  .brand{min-height:44px;font-size:16px}
  .brand img{width:24px;height:24px}
  .seg{display:none}
  .nav-cta.store-cta{padding:6px 14px;font-size:13px;line-height:18px}

  .hero{padding-top:52px}
  .keys{gap:8px;margin-bottom:28px}
  .display{line-height:1.04}
  .hero .lede{margin-top:18px}
  .hero .lede kbd{font-size:.8em;vertical-align:.1em}
  .hero-cta{margin-top:28px}
  .micro{margin:12px auto 0;max-width:300px;line-height:1.45;text-wrap:balance}
  .stage{margin-top:64px}
  /* B65: scaled to a 358 px frame; perspective and depths about a third of B62's. */
  .stack{--z-dim:12px;--z-t1:46px;--z-t2:51px;--z-c1:92px;--z-c2:101px;--z-d1:80px;--z-d2:89px;--rig-y:8%;--rig-s:.72;--frame-r:9px;
    margin-bottom:8px;perspective:800px}
  .stack .tiles{filter:drop-shadow(0 9px 12px rgba(0,0,0,.45))}
  .stack .card{border-radius:4px;filter:drop-shadow(0 11px 13px rgba(0,0,0,.5))}

  .steps{grid-template-columns:none;gap:16px}
  .step{border-radius:20px}
  .step-text{padding:22px 22px 24px}
  .step-top{margin-bottom:18px}
  .mini span{height:28px;min-width:28px;padding:0 7px;font-size:13px}
  .mini .sp{min-width:70px}
  .step p{margin-top:6px}
  .chips{display:grid;justify-content:stretch;gap:12px;margin-top:28px;padding:20px 22px;border-radius:20px;border:1px solid var(--hair);font-size:15px}
  .chips li{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:0}
  .chips li kbd{justify-self:start}
  .chips .lead{display:block;margin-bottom:2px;font-size:13px}

  .bento{grid-template-columns:none;border-radius:22px}
  .cell{padding:24px 20px 0;overflow:hidden}
  .cell h3{margin-top:12px}
  .cell p{margin-top:5px}
  .tile{padding-top:22px}
  .c-web,.c-cal{grid-column:auto;grid-row:auto}
  .c-web .tile div,.c-tz .tile div,.c-rem .tile div,.c-stk .tile div,.c-note .tile div,.c-pdf .tile div{aspect-ratio:auto}
  /* The web tile runs off the cell's right edge so the dashboard stays readable. */
  .c-web .tile{margin-right:-20px}
  .c-web .tile div{border-radius:14px 0 0 0;height:236px}
  .c-web .tile img{width:559px;max-width:none;height:auto}
  .c-cal .tile div{height:300px;border-radius:14px 14px 0 0}
  .c-cal .tile img{object-position:50% 46%}
  .c-tz .tile div{height:186px}
  .c-rem .tile div{height:174px}
  .c-stk .tile div{height:176px}
  .c-note .tile div{height:112px}
  .c-pdf{display:grid;grid-template-columns:1fr auto;column-gap:20px;align-items:center;padding-bottom:24px}
  .c-pdf .tile{grid-column:2;grid-row:1/span 3;margin:0;padding:0}
  .c-pdf .tile div{height:auto;overflow:visible}

  .feature .lede{font-size:17px;line-height:1.55}
  .panel{border-radius:22px}
  .panel img{filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
  .panel-settings{height:352px}
  .card-hang{left:calc(50% - 163px);width:326px;border-radius:0 0 15px 15px}
  .panel-launcher{height:272px}
  .launcher{left:max(20px,50% - 210px);top:24px;width:420px;border-radius:10px}
  .facts{grid-template-columns:1fr 1fr;gap:22px 20px;margin-top:32px}
  .facts div{padding-top:16px}
  .facts dt{line-height:1.35}
  .facts dd{line-height:1.45}
  .block{margin-top:32px;padding-top:22px}
  .block h3{flex-wrap:wrap;gap:8px;font-size:20px}
  .block p{margin-top:6px}
  /* The toolbar at half size, cut by the strip right after Freeform | Flow. */
  .toolbar-strip{margin-top:20px;padding:10px 0 10px 10px;border-radius:18px;overflow:hidden}
  .toolbar-strip img{width:613px;max-width:none;clip-path:inset(1px 0 0 0 round 999px 0 0 999px)}
  :lang(de) .toolbar-strip img{width:690px}
  :lang(zh) .toolbar-strip img{width:558px}

  /* Appearance: a square crop around the seam, so both looks are large enough to read. */
  .center-head{margin-bottom:32px}
  .center-head .lede{margin-top:14px;font-size:17px;line-height:1.55}
  .compare{aspect-ratio:1;border-radius:16px}
  .compare img{height:100%;object-fit:cover;object-position:68% 50%}
  .compare::after{left:55%}
  .compare-cap{display:grid;grid-template-columns:55% 45%;height:auto;margin-top:14px;line-height:1.4}
  .compare-cap span{position:static}
  .compare-cap span:last-child{padding-left:12px}

  .details{grid-template-columns:1fr 1fr;gap:0 20px}
  .details li{padding:20px 0 26px}
  .details h3{margin-top:12px;font-size:15px}
  .details p{font-size:14px;line-height:1.45}
  .details kbd{font-size:.8em}

  .private{border-radius:24px;padding:36px 24px 32px}
  .private>svg{width:30px;height:30px}
  .private .h2{margin-top:18px}
  .private .lede{margin-top:14px;font-size:17px;line-height:1.55}
  .private-facts{grid-template-columns:none;gap:22px;margin-top:32px;padding-top:26px}
  .private-facts p{margin-top:4px}
  .private .more{display:inline-flex;align-items:center;min-height:44px;margin-top:20px}

  .pricing-copy p+p{margin-top:12px}
  .pricing-copy .lede{margin-top:16px;font-size:17px;line-height:1.55}
  .price-card{border-radius:24px;padding:30px 24px 28px;box-shadow:0 24px 48px -30px rgba(0,0,0,.25)}
  .price{flex-wrap:wrap;gap:4px 10px}
  .price span{font-size:19px}
  .price-note{margin-top:8px}
  .checks{margin-top:24px;gap:12px}
  .checks li{font-size:16px}
  .checks svg{margin-top:1px}
  .buy{display:grid;justify-items:start;gap:16px;margin-top:28px;padding-top:24px}

  .faq-side .lede{margin-top:14px;line-height:1.55}
  .qa summary{gap:20px;min-height:44px;padding:16px 0;font-size:17px;line-height:1.35}
  .qa details p{padding:0 32px 20px 0;margin-top:-4px;font-size:16px}

  .closing{padding:16px 0 96px}
  .closing img{width:88px;height:88px;filter:drop-shadow(0 12px 24px rgba(0,0,0,.22))}
  .closing .h2{margin-top:24px}
  .closing .lede{margin-top:12px;font-size:17px;text-wrap:balance}
  .closing .store-cta{margin-top:28px}

  .footer{padding:12px 0 40px;font-size:14px}
  .foot-row{display:block}
  .foot-links,.foot-lang{gap:0 22px}
  .foot-links a,.foot-lang a{display:inline-flex;align-items:center;min-height:44px}
  .foot-links .copy-d{display:none}
  .foot-lang{margin-top:4px;padding-top:4px;border-top:1px solid var(--hair);column-gap:20px}
  .foot-lang svg{display:block;flex:none;margin-right:-8px;color:var(--text-3)}
  .foot-lang a[aria-current]{color:var(--text);font-weight:500}
  .copy{display:block;margin-top:12px;padding-top:16px;border-top:1px solid var(--hair);font-size:13px;color:var(--text-3)}
  .legal{margin-top:6px;line-height:1.5}

  .doc-main{padding:48px 0 72px}
  .doc-lede{font-size:17px}
  .doc h2{margin-top:48px;font-size:26px}
  .doc .start + h2{margin-top:56px}
  .qs h3{font-size:19px}
  .qs p,.start p,.pp p{font-size:16px}
  .contact{margin-top:48px;padding:24px}
  .summary{padding:22px}
  .nf{padding:80px 0 112px}
}

/* German (B66): hyphenate running text (long compounds in narrow columns), never display type. */
body:lang(de){-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4}
:lang(de) :is(h1,h2,h3,dt,summary){text-wrap:balance}
:lang(de) :is(.display,.h2,.lede,.nav,.chips,.compare-cap,.price,.footer,.store-cta,.doc h1,.toc){-webkit-hyphens:manual;hyphens:manual}
:lang(de) .lede{text-wrap:balance}
:lang(de) a[href^="mailto:"]{white-space:nowrap}

/* Chinese (B67): no uppercase or tracked eyebrows, no negative tracking on headings, body
   line-height about 1.75, breaks at punctuation and spaces rather than inside words. */
body:lang(zh){line-height:1.75;line-break:strict}
:lang(zh) :is(p,dd,dt,h3,summary,.chips li,figcaption){word-break:keep-all;overflow-wrap:anywhere}
:lang(zh) .eyebrow{font-size:14px;line-height:1.4;letter-spacing:0;text-transform:none}
:lang(zh) .h2{line-height:1.25;letter-spacing:0}
:lang(zh) .lede{line-height:1.7}
:lang(zh) .sec-head .lede,:lang(zh) .split .lede,:lang(zh) .faq-side .lede{line-height:1.75}
:lang(zh) .display{line-height:1.15;letter-spacing:0}
:lang(zh) .hero .lede{line-height:1.65;text-wrap:balance}
:lang(zh) .micro{line-height:1.6}
:lang(zh) .step h3{font-size:20px;line-height:1.35;letter-spacing:0}
:lang(zh) .step p,:lang(zh) .cell p,:lang(zh) .block p,:lang(zh) .qa details p{line-height:1.75}
:lang(zh) .cell h3{font-size:18px;line-height:1.4;letter-spacing:0}
:lang(zh) .facts dt{line-height:1.5}
:lang(zh) .facts dd,:lang(zh) .details p,:lang(zh) .private-facts p{line-height:1.7}
:lang(zh) .block h3{font-size:20px;line-height:1.4;letter-spacing:0}
:lang(zh) .center-head .lede{text-wrap:balance}
:lang(zh) .compare-cap{line-height:22px}
:lang(zh) .details h3,:lang(zh) .private-facts h3{line-height:1.45}
:lang(zh) .price-note{margin-top:12px;line-height:1.6}
:lang(zh) .checks li{line-height:1.5}
:lang(zh) .checks svg{margin-top:4px}
:lang(zh) .fine{line-height:1.65}
:lang(zh) .qa summary{font-size:18px;line-height:1.45;letter-spacing:0}
:lang(zh) .legal{line-height:1.6}
:lang(zh) .doc h1,:lang(zh) .doc h2,:lang(zh) .qs h3{letter-spacing:0;line-height:1.3}
:lang(zh) .doc-lede{line-height:1.65}
:lang(zh) .start p,:lang(zh) .qs p,:lang(zh) .pp p,:lang(zh) .contact p{line-height:1.75}
@media (max-width:760px){
  :lang(zh) .qa summary{font-size:17px}
  :lang(zh) .compare-cap{line-height:1.5}
}

@media (prefers-reduced-motion:reduce){
  .rise,.stack,.stack .rig,.stack .dim,.stack .tiles,.stack .card,.hero .keys .key{animation:none}
  .stack .dim,.stack .tiles{opacity:1}
  .loop .board-in{animation:none;opacity:1}
  .loop .mini span{animation:none;transform:translateY(2px);box-shadow:0 0 0 var(--key-depth)}
  .tap .mini span{animation:none}
  .qa summary::after{transition:none}
}