/* sQuit page. Same quiet look as the home page (body[data-product="hub"] + calm.css). The hold demo is driven by squit.js. */
.sq-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; padding: clamp(120px, 16vw, 176px) 24px 0; color: var(--cl-ink); }
.sq-hero > img { border-radius: 22%; }
.sq-h1 { font-family: var(--cl-serif); font-weight: 500; font-size: clamp(46px, 8vw, 84px); line-height: 1.02; letter-spacing: -.025em; }
.sq-h1 em { font-style: normal; color: #d0303c; }
.sq-sub { max-width: 520px; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.5; color: var(--cl-muted); }
.sq-dl { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 14px; font-size: 17px; font-weight: 600; text-decoration: none; color: #fff; background: #111; transition: transform .2s; }
.sq-dl:hover { transform: translateY(-2px); }
.sq-dl:focus-visible { outline: 2px solid var(--cl-ink); outline-offset: 3px; }
.sq-dl svg { width: 20px; height: 20px; }
:root[data-theme="dark"] .sq-dl { background: #fff; color: #111; }
.sq-meta { font-size: 14px; color: var(--cl-muted); }

/* In-use demo: a MacBook drawn in HTML/CSS. Everything inside the screen is sized in container units (cqw),
   so the scene scales like a screenshot. The HUDs copy the app's real ones (hold style and message style). */
.sq-wrap { padding: 0 clamp(16px, 3vw, 32px); }
.sq-demo { width: min(100%, 1040px); margin: clamp(48px, 7vw, 88px) auto 0;
  --w-a: #ff8a6b; --w-b: #e2365b; --w-c: #7b3cff; --w-d: #2e7cf6; --w-bg: #f6b8a0;
  --menu: rgba(255, 255, 255, .3); --menu-ink: #111;
  --win: #ffffff; --side: rgba(236, 234, 238, .86); --list: #fbfbfa; --line: rgba(0, 0, 0, .08); --ink: #1d1d1f; --sub: #6e6e73; --faint: #76767b;
  --sel: #fbe196; --side-sel: rgba(0, 0, 0, .07); --tint: #e0a800;
  --glass: rgba(246, 246, 248, .72); --glass-ink: #1d1d1f; --glass-sub: rgba(29, 29, 31, .72); --track: rgba(29, 29, 31, .12);
  --dock: rgba(255, 255, 255, .32); --alu-a: #e3e4e8; --alu-b: #b9bbc2; --alu-c: #8e9098; }
:root[data-theme="dark"] .sq-demo {
  --w-a: #b2304a; --w-b: #6d1638; --w-c: #3b1a8f; --w-d: #102a6b; --w-bg: #1a0d24;
  --menu: rgba(0, 0, 0, .22); --menu-ink: #f5f5f7;
  --win: #1e1e1e; --side: rgba(44, 44, 48, .9); --list: #232325; --line: rgba(255, 255, 255, .08); --ink: #f5f5f7; --sub: #98989d; --faint: #8e8e93;
  --sel: #6b5414; --side-sel: rgba(255, 255, 255, .1); --tint: #ffcc00;
  --glass: rgba(42, 42, 46, .72); --glass-ink: #f5f5f7; --glass-sub: rgba(245, 245, 247, .6); --track: rgba(245, 245, 247, .16);
  --dock: rgba(40, 40, 46, .38); --alu-a: #3c3d42; --alu-b: #2a2b2f; --alu-c: #1b1c1f; }

/* MacBook body */
.sq-mac { position: relative; }
.sq-lid { position: relative; margin: 0 5.5%; padding: 1.3% 1.3% 1.6%; border-radius: 3.2% / 4.8%; background: #0b0b0d;
  box-shadow: 0 0 0 1.5px var(--alu-c), 0 0 0 2.5px rgba(255, 255, 255, .12), 0 50px 90px -50px rgba(40, 10, 40, .6); }
.sq-base { position: relative; height: clamp(10px, 2.1vw, 22px); margin-top: -1px; border-radius: 0 0 46% 46% / 0 0 100% 100%;
  background: linear-gradient(var(--alu-a), var(--alu-b) 55%, var(--alu-c)); box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .45); }
.sq-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 15%; height: 42%; transform: translateX(-50%); border-radius: 0 0 12px 12px / 0 0 8px 8px; background: linear-gradient(var(--alu-c), var(--alu-b)); opacity: .55; }
.sq-screen { position: relative; container-type: inline-size; aspect-ratio: 16 / 10.4; overflow: hidden; border-radius: 1.1% / 1.7%; background: var(--w-bg);
  color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; -webkit-font-smoothing: antialiased; user-select: none; }
.sq-screen svg { display: block; }

/* wallpaper: soft colour fields, blurred */
.sq-wall { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 90% at 50% 120%, var(--w-c), transparent 60%), var(--w-bg); }
.sq-wall i { position: absolute; border-radius: 50%; filter: blur(5cqw); opacity: .9; }
.sq-wall i:nth-child(1) { left: -20%; top: -30%; width: 75%; height: 90%; background: var(--w-a); }
.sq-wall i:nth-child(2) { right: -18%; top: -10%; width: 70%; height: 85%; background: var(--w-b); }
.sq-wall i:nth-child(3) { left: 8%; bottom: -45%; width: 60%; height: 80%; background: var(--w-c); }
.sq-wall i:nth-child(4) { right: -5%; bottom: -40%; width: 55%; height: 70%; background: var(--w-d); }

/* menu bar + notch */
.sq-menubar { position: absolute; inset: 0 0 auto; z-index: 3; display: flex; align-items: center; justify-content: space-between; height: 2.6cqw; padding: 0 1.4cqw 0 1.8cqw;
  font-size: 1.05cqw; color: var(--menu-ink); background: var(--menu); backdrop-filter: blur(3cqw) saturate(1.4); -webkit-backdrop-filter: blur(3cqw) saturate(1.4); }
.sq-menus { display: flex; gap: 1.55cqw; transition: opacity .2s; }
.sq-menus b { font-weight: 700; }
.sq-mb-r { display: flex; align-items: center; gap: 1.25cqw; }
.sq-mb-r img { width: 1.35cqw; height: 1.35cqw; border-radius: 22%; }
.sq-mb-r svg { width: 1.35cqw; height: 1.35cqw; }
.sq-mb-r .sq-batt { width: 2cqw; height: 1cqw; }
.sq-notch { position: absolute; left: 50%; top: 0; z-index: 4; width: 11cqw; height: 2.6cqw; transform: translateX(-50%); border-radius: 0 0 .9cqw .9cqw; background: #0b0b0d; }

/* Notes window */
.sq-win { position: absolute; left: 7.5cqw; top: 4.4cqw; z-index: 1; display: flex; width: 85cqw; height: 47cqw; border-radius: 1.2cqw; overflow: hidden; background: var(--win);
  box-shadow: 0 0 0 .08cqw rgba(0, 0, 0, .22), 0 0 0 .16cqw rgba(255, 255, 255, .08) inset, 0 2.6cqw 6cqw -1cqw rgba(20, 0, 30, .45);
  transform-origin: 50% 70%; transition: opacity .2s ease, transform .2s ease; font-size: 1.1cqw; }
.sq-side { flex: none; width: 15.5cqw; padding: 1.25cqw .9cqw; background: var(--side); border-right: .08cqw solid var(--line); }
.sq-lights { display: flex; gap: .65cqw; padding: 0 .35cqw; margin-bottom: 2.6cqw; }
.sq-lights i { width: 1.05cqw; height: 1.05cqw; border-radius: 50%; background: #ff5f57; box-shadow: 0 0 0 .06cqw rgba(0, 0, 0, .12) inset; }
.sq-lights i:nth-child(2) { background: #febc2e; } .sq-lights i:nth-child(3) { background: #28c840; }
.sq-side small { display: block; padding: 0 .55cqw .5cqw; font-size: .82cqw; font-weight: 700; color: var(--faint); }
.sq-side ul { margin: 0; padding: 0; list-style: none; }
.sq-side li { display: flex; align-items: center; gap: .6cqw; height: 2.2cqw; padding: 0 .6cqw; border-radius: .55cqw; font-size: 1.05cqw; }
.sq-side li svg { width: 1.3cqw; height: 1.3cqw; color: var(--tint); }
.sq-side li em { margin-left: auto; font-style: normal; color: var(--faint); font-variant-numeric: tabular-nums; }
.sq-side li.on { background: var(--side-sel); }
.sq-list { flex: none; width: 22cqw; padding: 1cqw 1cqw 0; background: var(--list); border-right: .08cqw solid var(--line); }
.sq-tb { display: flex; align-items: center; gap: 1.2cqw; height: 2.1cqw; color: var(--sub); }
.sq-tb svg { width: 1.35cqw; height: 1.35cqw; }
.sq-list .sq-tb { justify-content: flex-end; margin-bottom: .8cqw; }
.sq-list h5 { margin: .9cqw .6cqw .4cqw; font-size: .85cqw; font-weight: 700; color: var(--ink); }
.sq-item { padding: .75cqw .9cqw; border-radius: .7cqw; }
.sq-item + .sq-item { box-shadow: 0 -.08cqw 0 var(--line); }
.sq-item b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 1.08cqw; font-weight: 700; }
.sq-item > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: .2cqw; font-size: .95cqw; color: var(--sub); }
.sq-item time { margin-right: .6cqw; color: var(--ink); opacity: .8; }
.sq-item.on { background: var(--sel); box-shadow: none; }
.sq-item.on + .sq-item { box-shadow: none; }
.sq-ed { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 1cqw 2cqw 0; }
.sq-tb-ed { gap: 1.6cqw; }
.sq-tb-ed b { font-size: 1.15cqw; font-weight: 600; }
.sq-search { display: flex; align-items: center; gap: .45cqw; margin-left: auto; width: 11cqw; height: 1.9cqw; padding: 0 .6cqw; border-radius: .55cqw; font-size: .95cqw; color: var(--faint); box-shadow: 0 0 0 .08cqw var(--line) inset; }
.sq-search svg { width: 1.05cqw; height: 1.05cqw; }
.sq-date { margin: 1.4cqw 0 1.2cqw; text-align: center; font-size: .9cqw; color: var(--faint); }
.sq-note { padding: 0 1.4cqw; transition: opacity .3s; }
.sq-note h4 { min-height: 2.6cqw; margin: 0 0 .8cqw; font-size: 2.05cqw; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.sq-body { font-size: 1.25cqw; line-height: 1.75; color: var(--ink); }
.sq-body div { min-height: 1.75em; white-space: pre; }
.sq-body .sq-ln1 { color: var(--sub); }
.sq-caret { display: inline-block; width: .14cqw; height: 1.15em; margin-left: .08cqw; vertical-align: -.2em; background: var(--tint); }
.sq-demo.idle-caret .sq-caret { animation: sq-blink 1.05s steps(1) infinite; }
@keyframes sq-blink { 50% { opacity: 0; } }

/* sQuit HUDs: hold style (bar) and message style (two lines, fades) */
.sq-hud { position: absolute; left: 50%; top: 50%; z-index: 5; display: flex; align-items: center; gap: 1.5cqw; width: 30cqw; min-height: 8.6cqw; padding: 1.5cqw 1.6cqw; border-radius: 1.65cqw;
  background: var(--glass); color: var(--glass-ink); backdrop-filter: blur(2.6cqw) saturate(1.8); -webkit-backdrop-filter: blur(2.6cqw) saturate(1.8);
  box-shadow: 0 0 0 .07cqw rgba(0, 0, 0, .14), 0 0 0 .14cqw rgba(255, 255, 255, .12) inset, 0 2cqw 4.6cqw -1.2cqw rgba(0, 0, 0, .45);
  opacity: 0; transform: translate(-50%, -50%) scale(.97); pointer-events: none; }
.sq-hud-hold { transition: opacity .08s, transform .08s; }
.sq-hud-msg { transition: opacity .28s ease, transform .28s ease; }
.sq-demo.hud-hold .sq-hud-hold, .sq-demo.hud-msg .sq-hud-msg { opacity: 1; transform: translate(-50%, -50%); }
.sq-ic { flex: none; display: block; width: 4cqw; height: 4cqw; }
img.sq-ic { border-radius: 22%; }
.sq-ic svg { width: 100%; height: 100%; }
.sq-hud-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .8cqw; }
.sq-hud-t b { font-size: 1.28cqw; font-weight: 600; line-height: 1.3; }
.sq-hud-msg .sq-hud-t b { font-size: 1.32cqw; }
.sq-hud-bar { height: .75cqw; border-radius: 99px; background: var(--track); overflow: hidden; }
.sq-hud-bar i { display: block; width: 0; min-width: .75cqw; height: 100%; border-radius: inherit; background: #34c759; }
.sq-hud-row { display: flex; align-items: baseline; justify-content: space-between; font-variant-numeric: tabular-nums; }
.sq-hud-row small { font-size: .9cqw; color: var(--glass-sub); }
.sq-hud-row em { font-style: normal; font-size: 1.25cqw; font-weight: 700; color: #34c759; }

/* dock */
.sq-dock { position: absolute; left: 50%; bottom: .8cqw; z-index: 2; display: flex; align-items: flex-end; gap: .55cqw; padding: .55cqw .6cqw .75cqw; border-radius: 1.6cqw; transform: translateX(-50%);
  background: var(--dock); backdrop-filter: blur(3cqw) saturate(1.6); -webkit-backdrop-filter: blur(3cqw) saturate(1.6); box-shadow: 0 0 0 .07cqw rgba(255, 255, 255, .3) inset, 0 0 0 .07cqw rgba(0, 0, 0, .1), 0 1cqw 3cqw -1cqw rgba(0, 0, 0, .35); }
.sq-di { position: relative; display: grid; place-items: center; width: 4.1cqw; height: 4.1cqw; border-radius: 22.5%; box-shadow: 0 .2cqw .5cqw rgba(0, 0, 0, .18); }
.sq-di svg { width: 100%; height: 100%; }
.sq-di.on::after { content: ""; position: absolute; left: 50%; bottom: -.62cqw; width: .38cqw; height: .38cqw; margin-left: -.19cqw; border-radius: 50%; background: var(--menu-ink); opacity: .65; transition: opacity .2s; }
.sq-di-files { background: linear-gradient(#7cc4ff, #2f7df6); }
.sq-di-web { background: linear-gradient(#4fd1ff, #1166e8); }
.sq-di-mail { background: linear-gradient(#6ab8ff, #1f72e0); }
.sq-di-msg { background: linear-gradient(#6ee27d, #23b33c); }
.sq-di-cal { background: #fff; display: flex; flex-direction: column; justify-content: center; gap: 0; line-height: 1; }
.sq-di-cal b { font-size: .7cqw; font-weight: 700; color: #ff3b30; letter-spacing: .04em; }
.sq-di-cal strong { font-size: 2.2cqw; font-weight: 300; color: #1d1d1f; }
.sq-di-music { background: linear-gradient(#ff6b81, #f0263f); }
.sq-di-notes { box-shadow: 0 .2cqw .5cqw rgba(0, 0, 0, .18); }
.sq-di-notes svg { width: 116%; height: 116%; margin: -8%; }
.sq-di-trash { background: rgba(255, 255, 255, .55); }
.sq-dock-sep { align-self: stretch; width: .08cqw; margin: .3cqw .2cqw; background: rgba(0, 0, 0, .2); }

/* quit + relaunch */
.sq-demo.quit .sq-win { opacity: 0; transform: scale(.985); }
.sq-demo.quit .sq-menus { opacity: 0; }
.sq-demo.quit .sq-di-notes::after { opacity: 0; }
.sq-demo.launch .sq-di-notes { animation: sq-bounce .6s cubic-bezier(.3, 0, .4, 1) 2; }
@keyframes sq-bounce { 50% { transform: translateY(-1.8cqw); } }
.sq-demo.fresh .sq-note { opacity: 0; }

/* caption + keys under the laptop */
.sq-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 28px; margin-top: clamp(26px, 3.4vw, 40px); }
.sq-cap ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sq-cap li { display: flex; flex-direction: column; gap: 2px; width: 196px; padding: 12px 16px; border-radius: 14px; color: var(--cl-muted); box-shadow: 0 0 0 1px var(--cl-line); opacity: .5; transition: opacity .3s, box-shadow .3s; }
.sq-cap li b { font-size: 15px; font-weight: 600; color: var(--cl-ink); }
.sq-cap li span { font-size: 14px; }
.sq-demo[data-step="type"] [data-step="type"], .sq-demo[data-step="tap"] [data-step="tap"], .sq-demo[data-step="hold"] [data-step="hold"] { opacity: 1; box-shadow: 0 0 0 1.5px var(--cl-ink); }
.sq-keys { display: flex; gap: 10px; }
.sq-keys kbd { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; font: 600 22px/1 system-ui, -apple-system, sans-serif; color: var(--cl-ink); background: var(--cl-bg); box-shadow: 0 0 0 1px var(--cl-line), 0 5px 0 var(--cl-soft); transition: transform .08s, box-shadow .08s; }
.sq-demo.held .sq-keys kbd { transform: translateY(4px); box-shadow: 0 0 0 1px var(--cl-line), 0 1px 0 var(--cl-soft); }

@media (max-width: 700px) {
  .sq-lid { margin: 0 4%; }
  /* small screens: blow the HUDs up so their text stays readable, like a zoomed screenshot */
  .sq-hud { width: 66cqw; min-height: 17cqw; gap: 3cqw; padding: 3cqw 3.4cqw; border-radius: 3.4cqw; }
  .sq-ic { width: 8.6cqw; height: 8.6cqw; }
  .sq-hud-t { gap: 1.6cqw; } .sq-hud-t b, .sq-hud-msg .sq-hud-t b { font-size: 3cqw; }
  .sq-hud-bar, .sq-hud-bar i { height: 1.7cqw; min-width: 1.7cqw; }
  .sq-hud-row small { font-size: 2.3cqw; } .sq-hud-row em { font-size: 3.1cqw; }
  .sq-keys kbd { width: 46px; height: 46px; font-size: 19px; }
  .sq-cap ol { flex-wrap: nowrap; gap: 6px; width: 100%; } .sq-cap li { width: auto; flex: 1; min-width: 0; padding: 9px 10px; } .sq-cap li b { font-size: 13px; } .sq-cap li span { font-size: 12px; }
}

.sq-sec { max-width: 1080px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) clamp(20px, 3vw, 32px) 0; color: var(--cl-ink); }
.sq-sec h2 { font-family: var(--cl-serif); font-weight: 500; font-size: clamp(30px, 3.6vw, 40px); letter-spacing: -.015em; margin-bottom: clamp(24px, 3vw, 36px); }
.sq-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-radius: 24px; overflow: hidden; background: var(--cl-line); box-shadow: 0 0 0 1px var(--cl-line); }
.sq-feats > div { padding: 26px 28px 28px; background: var(--cl-bg); }
.sq-feats h3 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 6px; }
.sq-feats p, .sq-steps li, .sq-note { font-size: 16px; line-height: 1.55; color: var(--cl-muted); }
.sq-steps { display: grid; gap: 10px; padding-left: 22px; max-width: 640px; }
.sq-note { max-width: 640px; margin-top: 18px; }
.sq-note a { color: var(--cl-ink); }
.sq-last { padding-bottom: clamp(72px, 10vw, 128px); }
@media (max-width: 600px) { .sq-feats { grid-template-columns: minmax(0, 1fr); } }
/* crumb in the light hub nav: cl.css paints it white for sky heroes */
body[data-product="hub"] .nav:not(.scrolled) .brand-app, body[data-product="hub"] .nav:not(.scrolled) .crumb-sep { color: var(--cl-ink); }
:root[data-theme="dark"] body[data-product="hub"] .nav .dl-chip.dl-mac { background: #fff !important; color: #111 !important; }
.sq-demo .sq-defs { position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden; }