/*
 * withbeckon.app: one sheet for every page. Light and dark follow the system, or the nav's switch
 * (theme.js sets <html data-theme>). Ported from saas/prototypes/site-landing.html; the landing
 * page's demo (a pretend Mac desktop) is drawn by landing.js.
 */
@font-face { font-family: Inter; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #fbfbfa; --bg-2: #f3f3f6; --card: #ffffff; --ink: #15161c; --ink-2: #4a4e5a; --muted: #6f7381; --faint: #a3a6b0;
  --line: #e7e7ec; --line-2: #dcdce3; --btn: #15161c; --btn-ink: #ffffff; --soft: #efeff4;
  --accent: #5b5fe8; --accent-2: #8f92ff;
  --shadow-lg: 0 40px 80px -30px rgba(20, 22, 40, .3), 0 12px 30px -12px rgba(20, 22, 40, .16);
  /* the pretend Mac */
  --wall-a: #c9c4f5; --wall-b: #f3d6e8; --wall-c: #b8d8f7; --wall-d: #ece8ff;
  --win: #ffffff; --win-bar: #f3f3f6; --win-line: #e2e2e8; --win-ink: #1d1d22; --win-muted: #8a8d98; --win-fill: #ecedf2; --win-fill-2: #f6f6f9;
  --glass: rgba(255, 255, 255, .42); --glass-line: rgba(255, 255, 255, .7); --glass-ink: #15161c;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0b0b10; --bg-2: #111118; --card: #15151d; --ink: #eef0f6; --ink-2: #b9bcc8; --muted: #8a8e9b; --faint: #5f636e;
  --line: #22232c; --line-2: #2d2e39; --btn: #eef0f6; --btn-ink: #0b0b10; --soft: #1a1a23;
  --accent: #7b7fff; --accent-2: #a9abff;
  --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, .85), 0 12px 30px -12px rgba(0, 0, 0, .55);
  --wall-a: #2b2a7a; --wall-b: #5a2a6e; --wall-c: #133a5e; --wall-d: #0d0c2a;
  --win: #1f1f26; --win-bar: #2a2a32; --win-line: #383842; --win-ink: #ececf2; --win-muted: #8c8e9a; --win-fill: #33333d; --win-fill-2: #26262e;
  --glass: rgba(40, 40, 52, .38); --glass-line: rgba(255, 255, 255, .22); --glass-ink: #f2f2f8;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0b10; --bg-2: #111118; --card: #15151d; --ink: #eef0f6; --ink-2: #b9bcc8; --muted: #8a8e9b; --faint: #5f636e;
    --line: #22232c; --line-2: #2d2e39; --btn: #eef0f6; --btn-ink: #0b0b10; --soft: #1a1a23;
    --accent: #7b7fff; --accent-2: #a9abff;
    --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, .85), 0 12px 30px -12px rgba(0, 0, 0, .55);
    --wall-a: #2b2a7a; --wall-b: #5a2a6e; --wall-c: #133a5e; --wall-d: #0d0c2a;
    --win: #1f1f26; --win-bar: #2a2a32; --win-line: #383842; --win-ink: #ececf2; --win-muted: #8c8e9a; --win-fill: #33333d; --win-fill-2: #26262e;
    --glass: rgba(40, 40, 52, .38); --glass-line: rgba(255, 255, 255, .22); --glass-ink: #f2f2f8;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
kbd { font: 600 .78em/1 Inter, ui-sans-serif, system-ui, sans-serif; display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em; padding: 0 .4em; border-radius: 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; background: var(--card); color: var(--ink); margin: 0 1px; vertical-align: .08em; }
.wrap { width: min(1120px, 100% - 32px); margin: 0 auto; }
.eyebrow { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: .01em; }
h1, h2, h3 { letter-spacing: -.025em; margin: 0; font-weight: 650; }
h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.1; }
.lede { color: var(--ink-2); font-size: 17px; max-width: 580px; }
.btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 999px; background: var(--btn); color: var(--btn-ink); font-weight: 600; font-size: 15px; text-decoration: none; border: 0; cursor: pointer; transition: transform .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; }
.btn.small { height: 36px; padding: 0 14px; font-size: 13.5px; gap: 8px; }
.btn.small svg { width: 15px; height: 15px; }
.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }

/* ---------- Nav ---------- */
nav.top { position: sticky; top: 0; z-index: 9000; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; }
nav.top.scrolled { border-bottom-color: var(--line); }
nav.top .wrap { display: flex; align-items: center; gap: 28px; height: 60px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 650; font-size: 16px; text-decoration: none; letter-spacing: -.01em; }
.brand img { width: 24px; height: 24px; border-radius: 6px; }
.links { display: flex; gap: 22px; font-size: 14px; color: var(--ink-2); margin-left: 8px; }
.links a { text-decoration: none; }
.links a:hover { color: var(--ink); }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.theme-btn { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.theme-btn svg { width: 16px; height: 16px; }

/* ---------- Hero ---------- */
.hero { text-align: center; padding: 92px 0 0; }
.hero h1 { font-size: clamp(40px, 5.6vw, 58px); line-height: 1.02; letter-spacing: -.04em; margin-top: 14px; }
.hero .lede { margin: 20px auto 0; }
.hero .cta { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hero .cta small { color: var(--muted); font-size: 13px; }

/* ---------- The pretend Mac ---------- */
/* The desk: a wallpaper fading into the page on every side, the screen's contents on it */
.desk { position: relative; width: min(1760px, 100%); margin: 28px auto 0; padding: 0 0 96px; }
.wall { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 22% 30%, var(--wall-a), transparent 70%),
    radial-gradient(50% 60% at 78% 24%, var(--wall-b), transparent 70%),
    radial-gradient(70% 70% at 60% 85%, var(--wall-c), transparent 70%),
    var(--wall-d);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 86%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 86%, transparent); mask-composite: intersect; }
.wall::after { content: ""; position: absolute; inset: 0; background:
    radial-gradient(28% 34% at 34% 58%, rgba(255,255,255,.18), transparent 70%),
    radial-gradient(20% 26% at 70% 52%, rgba(255,255,255,.12), transparent 70%); }
/* The screen: a fixed 1200 × 680 canvas, scaled to fit, so the demo's geometry is the app's */
.screen-fit { position: relative; width: min(1200px, 100% - 32px); margin: 0 auto; }
.screen { position: absolute; left: 0; top: 0; width: 1200px; height: 680px; transform-origin: 0 0; font: 13px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif; color: var(--win-ink); user-select: none; -webkit-user-select: none; touch-action: none; }
.screen:focus { outline: none; }

.menubar { position: absolute; z-index: 6000; top: 0; left: 0; right: 0; height: 28px; display: flex; align-items: center; gap: 18px; padding: 0 16px; font-size: 13px; color: var(--glass-ink);
  background: var(--glass); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); }


.menubar .apple { width: 14px; height: 14px; opacity: .9; }
.menubar b { font-weight: 700; }
.menubar .mb-menu { opacity: .88; }
.menubar .mb-end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.menubar .mb-btn { display: grid; place-items: center; height: 22px; padding: 0 5px; border: 0; border-radius: 5px; background: transparent; color: inherit; cursor: pointer; }
.menubar .mb-btn:hover, .menubar .mb-btn.open { background: rgba(127, 127, 127, .25); }
.menubar .mb-btn svg { width: 16px; height: 16px; }
.menubar .mb-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mb-dropdown { position: absolute; z-index: 6500; top: 30px; right: 96px; min-width: 260px; padding: 5px; border-radius: 10px; background: color-mix(in srgb, var(--win) 82%, transparent); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: .5px solid var(--glass-line); box-shadow: 0 14px 40px rgba(0,0,0,.28); display: none; }
.mb-dropdown.show { display: block; }

/* Windows */
.win { position: absolute; border-radius: 11px; background: var(--win); border: .5px solid var(--win-line); box-shadow: 0 22px 50px -18px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.12); overflow: hidden; transition: box-shadow .2s, opacity .25s, transform .25s; }
.win.front { box-shadow: 0 30px 70px -18px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.16); }
.win.hidden { opacity: 0; transform: scale(.96); pointer-events: none; }
.win.launching { animation: launch .35s cubic-bezier(.2,.9,.25,1); }
@keyframes launch { from { opacity: 0; transform: scale(.85); } }
.win.raised { animation: raised .32s ease; }
@keyframes raised { 40% { transform: scale(1.012); } }
.w-bar { height: 34px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--win-bar); border-bottom: .5px solid var(--win-line); }
.w-lights { display: flex; gap: 7px; }
.w-lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.w-lights i:nth-child(2) { background: #febc2e; }
.w-lights i:nth-child(3) { background: #28c840; }
.win:not(.front) .w-lights i { background: var(--win-fill); }
.w-title { flex: 1; text-align: center; font-weight: 600; font-size: 12.5px; color: var(--win-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 50px; }
.win:not(.front) .w-title { color: var(--win-muted); }
.w-body { position: absolute; inset: 34px 0 0 0; overflow: hidden; }
.bars i { display: block; height: 7px; border-radius: 4px; background: var(--win-fill); margin: 0 0 9px; }
.w-side { position: absolute; left: 0; top: 0; bottom: 0; width: 150px; background: var(--win-fill-2); border-right: .5px solid var(--win-line); padding: 14px 12px; }
.w-main { position: absolute; left: 150px; right: 0; top: 0; bottom: 0; padding: 18px 20px; }
.w-tabs { display: flex; gap: 4px; padding: 6px 10px 0; background: var(--win-bar); height: 30px; border-bottom: .5px solid var(--win-line); }
.w-tabs span { width: 120px; height: 24px; border-radius: 7px 7px 0 0; background: var(--win-fill-2); }
.w-tabs span.on { background: var(--win); }
.w-url { margin: 8px 12px; height: 24px; border-radius: 12px; background: var(--win-fill-2); display: flex; align-items: center; padding: 0 12px; font-size: 11.5px; color: var(--win-muted); }
.w-page { padding: 18px 24px; }
.w-page .big { height: 22px; width: 60%; border-radius: 6px; background: var(--win-ink); opacity: .82; margin: 4px 0 14px; }
.w-hero { height: 90px; border-radius: 10px; margin: 0 0 14px; }
.w-code { position: absolute; inset: 0; background: #1b1c23; padding: 16px 18px; }
.w-code i { display: block; height: 6px; border-radius: 3px; margin: 0 0 9px; }
.w-term { position: absolute; inset: 0; background: #111216; padding: 14px 16px; font: 11.5px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; color: #9fe39a; }
.w-term span { color: #8a8d98; }
.w-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.w-grid div { aspect-ratio: 1.15; border-radius: 8px; }
.bubble { max-width: 70%; height: 30px; border-radius: 14px; margin: 0 0 10px; background: var(--win-fill); }
.bubble.me { margin-left: auto; background: var(--accent); opacity: .85; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal div { height: 38px; border-radius: 6px; background: var(--win-fill-2); font-size: 10px; color: var(--win-muted); padding: 3px 5px; }
.cal div.today { background: #ff5a5f; color: #fff; }

/* The Dock */
.dock-row { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; z-index: 5000; transition: transform .45s cubic-bezier(.3,.9,.3,1), opacity .3s; }
.dock-row.gone { transform: translateY(110px); opacity: 0; }
.dock { display: flex; align-items: flex-end; gap: 4px; padding: 4px 6px 6px; border-radius: 18px; background: var(--glass); border: .5px solid var(--glass-line); box-shadow: 0 10px 30px -10px rgba(0,0,0,.35); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); }
.d-app { position: relative; width: 46px; height: 46px; cursor: pointer; transition: transform .12s ease-out; }
.d-app:hover { transform: translateY(-4px) scale(1.12); }
.d-app .icon { width: 46px; height: 46px; }
.d-app.running::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--glass-ink); opacity: .75; }
.d-sep { width: 1px; height: 40px; margin: 0 4px 3px; background: var(--glass-line); }

/* App icons, drawn: a rounded square with a glyph */
.icon { position: relative; border-radius: 23%; display: grid; place-items: center; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.25); }
.icon svg { width: 56%; height: 56%; }
.icon::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(to bottom, rgba(255,255,255,.28), rgba(255,255,255,0) 50%); pointer-events: none; }

/* The sticky note */
.sticky { position: absolute; z-index: 4000; left: 26px; top: 64px; width: 214px; padding: 14px 16px 16px; background: #fff3a6; color: #3b3415; border-radius: 3px; box-shadow: 0 14px 28px -10px rgba(0, 0, 0, .35), 0 2px 4px rgba(0, 0, 0, .12); transform: rotate(-2.4deg); font: 13px/1.45 Inter, sans-serif; }
.sticky b { display: block; font-size: 14.5px; margin-bottom: 6px; }
.sticky ul { margin: 0; padding: 0 0 0 16px; display: grid; gap: 5px; }
.sticky kbd { background: rgba(255, 255, 255, .6); border-color: rgba(59, 52, 21, .25); color: inherit; }
.sticky li.done { text-decoration: line-through; opacity: .55; }

/* Beckon's notification, as macOS shows one */
.note { position: absolute; z-index: 6200; top: 36px; right: 12px; width: 340px; display: flex; gap: 11px; align-items: center; padding: 11px 12px; border-radius: 18px;
  background: rgba(246, 246, 246, .76); color: #1d1d1f; border: .5px solid rgba(0, 0, 0, .12); box-shadow: 0 10px 34px rgba(0, 0, 0, .2);
  backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8); font: 13px/1.3 -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  transform: translateX(calc(100% + 40px)); opacity: 0; transition: transform .5s cubic-bezier(.2, .9, .25, 1), opacity .3s; pointer-events: none; }
:root[data-theme="dark"] .note { background: rgba(48, 48, 52, .7); color: #f5f5f7; border-color: rgba(255, 255, 255, .14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .note { background: rgba(48, 48, 52, .7); color: #f5f5f7; border-color: rgba(255, 255, 255, .14); } }
.note.show { transform: none; opacity: 1; pointer-events: auto; }
.note img { width: 38px; height: 38px; flex: none; }
.note .n-text { flex: 1; min-width: 0; }
.note .n-title { font-weight: 600; }
.note .n-body { opacity: .85; }
.note button { flex: none; height: 28px; padding: 0 12px; border-radius: 8px; border: 0; background: rgba(0, 0, 0, .08); color: inherit; font: 500 12.5px/1 -apple-system, Inter, sans-serif; cursor: pointer; }
:root[data-theme="dark"] .note button { background: rgba(255, 255, 255, .14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .note button { background: rgba(255, 255, 255, .14); } }

/* ---------- The ring ---------- */
.ring { position: absolute; z-index: 7000; width: 0; height: 0; pointer-events: none; }
.ring.open { pointer-events: auto; }
.ring > * { position: absolute; }
.r-layer { left: 0; top: 0; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; }
.r-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.r-app { left: 0; top: 0; transform: translate(-50%, -50%) scale(var(--s, 1)); transition: transform .12s ease-out; pointer-events: none; }
.ring.opening .r-app { transform: translate(calc(-50% - var(--dx)), calc(-50% - var(--dy))) scale(.6); opacity: 0; }
.r-app .icon { box-shadow: 0 3px 8px rgba(0,0,0,.3); }
.r-badge { position: absolute; right: -5px; top: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font: 700 10.5px/18px Inter, sans-serif; text-align: center; color: #fff; background: var(--accent); box-shadow: 0 0 0 1.5px rgba(0,0,0,.35); }
.r-dot { left: 0; top: 0; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; }
.r-center { left: 0; top: 0; transform: translate(-50%, -50%); text-align: center; pointer-events: none; white-space: nowrap; }
.r-pill { display: inline-block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; padding: 6px 13px; border-radius: 999px; font: 600 12.5px/1.2 -apple-system, Inter, sans-serif; }
.r-pill small { display: block; font-weight: 500; font-size: 10.5px; opacity: .65; }
.r-pill.two { border-radius: 14px; white-space: normal; width: 170px; }
.r-chip { position: absolute; left: 0; top: 0; width: 96px; height: 60px; border-radius: 8px; overflow: hidden; transform: translate(-50%, -50%); transition: transform .14s ease-out, box-shadow .14s; box-shadow: 0 6px 16px rgba(0,0,0,.35); background: var(--win); pointer-events: none; }
.r-chip .thumb { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.r-chip.hot { z-index: 3; box-shadow: 0 0 0 3px var(--accent), 0 18px 40px rgba(0,0,0,.45); }
.r-chip.min { opacity: .55; }

/* Looks: what's behind the icons, and how the picked one shows */
.look-glass .r-body { background: var(--glass); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 20px 50px -18px rgba(0,0,0,.5); border: .5px solid var(--glass-line); }
.look-glass .r-lens { background: rgba(255,255,255,.22); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 65%, transparent); transition: left .1s, top .1s; }
.look-glass .r-pill { background: var(--glass); color: var(--glass-ink); border: .5px solid var(--glass-line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.look-glass .r-dot, .look-outline .r-dot, .look-kiwi .r-dot { background: currentColor; color: var(--glass-ink); opacity: .7; }
.look-kiwi .r-body { background: rgba(28, 28, 32, .82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 20px 50px -18px rgba(0,0,0,.6); }
.look-kiwi .r-pill { background: transparent; color: #fff; }
.look-kiwi .r-dot { color: #fff; }
.look-aura .r-body { background: radial-gradient(circle, rgba(20,20,26,.36) 0 80%, transparent 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); -webkit-mask-image: radial-gradient(circle, #000 72%, transparent 100%); mask-image: radial-gradient(circle, #000 72%, transparent 100%); }
.look-aura .r-pill, .look-orbit .r-pill { background: rgba(14, 14, 18, .82); color: #fff; }
.look-aura .r-dot { background: #ffeec8; opacity: .8; }
.look-orbit .r-body { background: radial-gradient(circle, rgba(11,21,48,.86) 0 62%, rgba(11,21,48,.5) 80%, transparent 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.look-orbit .r-dot { background: #e8ecf8; width: 5px; height: 5px; }
.look-outline .r-body { background: var(--win); border: 1px solid color-mix(in srgb, var(--win-ink) 30%, transparent); }
.look-outline .r-pill { background: transparent; color: var(--win-ink); }

/* The Dock-style menu */
.menu { position: absolute; z-index: 8000; min-width: 230px; padding: 5px; border-radius: 9px; background: color-mix(in srgb, var(--win) 84%, transparent); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: .5px solid var(--glass-line); box-shadow: 0 14px 40px rgba(0,0,0,.3); font-size: 13px; color: var(--win-ink); display: none; }
.menu.show { display: block; }
.menu .mi { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 8px; border-radius: 5px; cursor: default; white-space: nowrap; }
.menu .mi:hover { background: var(--accent); color: #fff; }
.menu .mi .ck { width: 12px; text-align: center; font-size: 11px; }
.menu .mi.dim { opacity: .45; pointer-events: none; }
.menu .mi.head { opacity: .55; font-size: 12px; pointer-events: none; }
.menu hr { border: 0; border-top: .5px solid var(--win-line); margin: 4px 6px; }
.menu .sub { margin-left: auto; opacity: .55; }

/* on a phone: no desktop, the ring on its own */
.demo-phone { display: none; }

/* ---------- Numbers ---------- */
.facts { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: -40px; }
.fact { padding: 30px 28px; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 20px 40px -28px rgba(20, 22, 40, .3); }
.fact .big { font-size: 48px; font-weight: 650; letter-spacing: -.04em; line-height: 1; }
.fact p { margin: 12px auto 0; color: var(--muted); font-size: 14.5px; max-width: 270px; }

section.block { padding: 120px 0 0; scroll-margin-top: -40px; }
.privacy { scroll-margin-top: 84px; }
.head { max-width: 640px; }
.head p { color: var(--ink-2); margin: 14px 0 0; font-size: 17px; }

/* ---------- Looks ---------- */
.looks { display: grid; grid-template-columns: 1fr 440px; gap: 56px; align-items: center; margin-top: 48px; }
.look-list { display: grid; gap: 8px; }
.look { display: grid; grid-template-columns: 50px 1fr; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 14px; border: 1px solid transparent; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.look:hover { background: var(--soft); }
.look[aria-pressed="true"] { background: var(--card); border-color: var(--line-2); box-shadow: 0 8px 24px -14px rgba(0,0,0,.25); }
.look b { display: block; font-size: 15.5px; font-weight: 600; }
.look span { color: var(--muted); font-size: 14px; }
.look .tag { font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: 2px; }
.look .sw { width: 46px; height: 46px; border-radius: 50%; }
.sw.glass { background: radial-gradient(circle, transparent 0 40%, rgba(160,170,255,.55) 42% 70%, transparent 72%), radial-gradient(circle at 35% 30%, #fff, #c8ceff); }
.sw.kiwi { background: radial-gradient(circle, #f6f2c8 0 22%, #2a2a30 26% 86%, #8cc63f 88% 94%, transparent 96%); }
.sw.aura { background: radial-gradient(circle, transparent 0 58%, #ffd27a 62% 68%, transparent 74%), radial-gradient(circle, rgba(255,210,122,.25), transparent 72%); }
.sw.orbit { background: radial-gradient(circle, #ffd27a 0 12%, #0b1530 15% 100%); box-shadow: inset 0 0 0 2px rgba(79,209,255,.45); }
.sw.outline { background: var(--card); border: 1.5px solid var(--ink-2); }
.look-stage { position: relative; height: 440px; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); }
.look-stage .wall { position: absolute; inset: 0; -webkit-mask-image: none; mask-image: none; }
.look-stage p { position: absolute; left: 0; right: 0; bottom: 12px; margin: 0; text-align: center; font-size: 13px; color: var(--glass-ink); opacity: .8; }

/* ---------- Features ---------- */
.rows { margin-top: 40px; }
.row > * { min-width: 0; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 56px 0; }
.row h3 { font-size: 24px; line-height: 1.2; }
.row p { color: var(--ink-2); margin: 12px 0 0; max-width: 460px; }
.art { position: relative; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line); padding: 34px; min-height: 260px; display: grid; place-items: center; overflow: hidden; }
.art.walled { background: radial-gradient(70% 80% at 30% 30%, var(--wall-a), transparent 70%), radial-gradient(60% 70% at 80% 80%, var(--wall-c), transparent 70%), var(--wall-d); }
.keys-art { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.keys-art .keys { display: flex; gap: 10px; align-items: center; }
.keys-art kbd { font-size: 22px; min-width: 64px; height: 64px; border-radius: 14px; border-bottom-width: 4px; }
.keys-art kbd.wide { min-width: 170px; }
.keys-art small { color: var(--muted); font-size: 13.5px; }
.mouse { width: 54px; height: 82px; border-radius: 27px; border: 2px solid var(--ink-2); position: relative; }
.mouse::before { content: ""; position: absolute; left: 50%; top: 12px; width: 8px; height: 16px; margin-left: -4px; border-radius: 4px; background: var(--accent); }
.dock-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; max-width: 380px; }
.dock-list li { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font-size: 14px; }
.dock-list .icon { width: 28px; height: 28px; flex: none; }
.dock-list .tag { margin-left: auto; font-size: 12px; color: var(--muted); }
.toggle { margin-left: auto; width: 36px; height: 22px; border-radius: 11px; background: var(--accent); position: relative; }
.toggle::after { content: ""; position: absolute; right: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.art .menu { position: relative; display: block; width: 280px; }
.drop { display: flex; align-items: center; gap: 26px; }
.file { width: 64px; height: 80px; border-radius: 6px; background: var(--card); border: 1px solid var(--line-2); position: relative; box-shadow: 0 10px 22px -10px rgba(0,0,0,.4); transform: rotate(-6deg); }
.file::before { content: "PDF"; position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font: 700 11px Inter, sans-serif; color: #e5484d; }
.drop .arrow { font-size: 26px; color: var(--muted); }
.drop .target { position: relative; }
.drop .target .icon { width: 72px; height: 72px; box-shadow: 0 0 0 4px var(--accent), 0 0 30px color-mix(in srgb, var(--accent) 60%, transparent); }
.drop small { display: block; text-align: center; margin-top: 10px; color: var(--muted); font-size: 13px; }
.fan { position: relative; width: 100%; height: 220px; }
.fan .fw { position: absolute; width: 130px; height: 82px; border-radius: 8px; background: var(--card); border: 1px solid var(--line-2); box-shadow: 0 10px 24px -10px rgba(0,0,0,.4); overflow: hidden; }
.fan .fw.hot { box-shadow: 0 0 0 3px var(--accent), 0 16px 34px -10px rgba(0,0,0,.5); }
.fan .fw i { display: block; height: 6px; border-radius: 3px; background: var(--line-2); margin: 8px 10px 0; }
.fan .fw b { display: block; height: 16px; background: var(--soft); }

/* ---------- Privacy ---------- */
.privacy { margin-top: 120px; background: #0d0d14; color: #eef0f6; border-radius: 28px; padding: 72px 64px; position: relative; overflow: hidden; }
:root[data-theme="dark"] .privacy { background: #15151e; border: 1px solid var(--line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .privacy { background: #15151e; border: 1px solid var(--line); } }
.privacy .eyebrow { color: #8a8e9b; }
.privacy h2 { max-width: 620px; margin-top: 12px; }
.privacy > p { color: #b9bcc8; max-width: 560px; margin: 16px 0 0; font-size: 17px; }
.pv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 52px; }
.pv-grid div { border-top: 1px solid #2a2b36; padding-top: 22px; }
.pv-grid b { display: block; font-size: 16px; }
.pv-grid span { display: block; margin-top: 8px; color: #9a9eab; font-size: 14.5px; }
.privacy a.more { display: inline-block; margin-top: 40px; color: #b9bcc8; font-size: 14px; text-underline-offset: 4px; }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 780px; margin: 48px auto 0; }
.plan { border: 1px solid var(--line-2); border-radius: 20px; padding: 30px; background: var(--card); display: flex; flex-direction: column; text-align: left; }
.plan.best { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 20px 50px -30px color-mix(in srgb, var(--accent) 70%, transparent); }
.plan .p-name { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--muted); }
.plan .p-name em { font-style: normal; font-size: 12px; font-weight: 600; color: #fff; background: var(--accent); border-radius: 999px; padding: 3px 10px; }
.plan .p-price { margin-top: 18px; display: flex; align-items: baseline; gap: 8px; }
.plan .p-price b { font-size: 48px; font-weight: 650; letter-spacing: -.04em; line-height: 1; }
.plan .p-price s { color: var(--faint); font-size: 22px; }
.plan .p-price span { color: var(--muted); font-size: 14px; }
.plan .p-note { color: var(--muted); font-size: 13px; margin-top: 8px; }
.plan ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; font-size: 14.5px; color: var(--ink-2); }
.plan li { display: flex; gap: 10px; align-items: flex-start; }
.plan li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--accent); }
.center { text-align: center; }
.center .head { margin: 0 auto; }
.after-plans { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 36px; color: var(--muted); font-size: 13px; }

/* ---------- Questions ---------- */
.faq { max-width: 760px; margin: 40px auto 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 0; font-weight: 600; font-size: 16.5px; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 22px; line-height: 1; color: var(--muted); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: -6px 0 22px; color: var(--ink-2); max-width: 640px; }

.last { text-align: center; padding: 130px 0 110px; }
.last img { width: 96px; height: 96px; display: block; margin: 0 auto 26px; }
.last h2 { font-size: clamp(32px, 5vw, 52px); letter-spacing: -.035em; }
.last .btn { margin-top: 30px; }
footer.foot { border-top: 1px solid var(--line); padding: 28px 0 40px; font-size: 13.5px; color: var(--muted); }
footer.foot .wrap { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
footer.foot a { text-decoration: none; }
footer.foot .grow { flex: 1; }

.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .looks { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .links { display: none; }
  .screen-fit, .desk .wall { display: none; }
  .desk { padding: 0; }
  .demo-phone { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; color: var(--muted); font-size: 14px; padding: 0 16px; }
  .demo-phone .look-stage { width: 100%; max-width: 420px; height: 400px; }
  .row { grid-template-columns: 1fr; gap: 28px; padding: 44px 0; }
  .row .art { order: 2; }
  .facts { grid-template-columns: 1fr; margin-top: 40px; }
  .pv-grid { grid-template-columns: 1fr; gap: 22px; }
  .privacy { padding: 48px 26px; border-radius: 22px; }
  .plans { grid-template-columns: 1fr; }
  .plan.best { order: -1; }
  section.block { padding-top: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* Real app icons: the PNG carries its own shape and shadow. Scaled so the icon's body fills the box. */
.icon.img { background: none; box-shadow: none; }
.icon.img::after { display: none; }
.icon.img img { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(1.2); pointer-events: none; }
.r-app .icon.img { box-shadow: none; }
.r-app .icon.img img { filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }

/* Window contents */
.w-body { font-size: 11px; line-height: 1.4; }
.w-body img { -webkit-user-drag: none; }
.caret { color: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* Safari */
.sf-bar { height: 34px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--win-bar); border-bottom: .5px solid var(--win-line); color: var(--win-muted); }
.sf-ctl { font-size: 15px; letter-spacing: 4px; }
.sf-url { flex: 1; max-width: 300px; margin: 0 auto; height: 22px; border-radius: 7px; background: var(--win-fill); display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 11px; color: var(--win-ink); }
.sf-url svg { width: 10px; height: 10px; color: var(--win-muted); }
.sf-page { position: absolute; inset: 34px 0 0 0; padding: 14px 22px; overflow: hidden; }
.pg-nav { display: flex; align-items: center; gap: 16px; font-size: 11px; color: var(--win-muted); margin-bottom: 18px; }
.pg-nav b { display: flex; align-items: center; gap: 6px; color: var(--win-ink); margin-right: auto; font-size: 12px; }
.pg-nav img { width: 18px; height: 18px; }
.pg-nav .on { color: var(--win-ink); font-weight: 600; }
.sf-page h2 { font-size: 20px; letter-spacing: -.02em; margin: 0 0 4px; font-weight: 650; }
.pg-sub { color: var(--win-muted); margin: 0 0 14px; }
.pg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pg-cards > div { border: .5px solid var(--win-line); border-radius: 10px; padding: 12px 14px; background: var(--win-fill-2); }
.pg-cards .hl { border: 1.5px solid var(--accent); }
.pg-cards h4 { margin: 0; font-size: 12px; }
.pg-cards .pr { font-size: 22px; font-weight: 650; margin: 4px 0 6px; }
.pg-cards .pr small { font-size: 11px; color: var(--win-muted); font-weight: 400; }
.pg-cards ul { margin: 0; padding-left: 14px; color: var(--win-muted); }
.pg-docs { display: flex; gap: 22px; }
.pg-toc { width: 120px; flex: none; display: flex; flex-direction: column; gap: 6px; color: var(--win-muted); border-right: .5px solid var(--win-line); }
.pg-toc b { color: var(--win-ink); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.pg-toc .on { color: var(--accent); font-weight: 600; }
.pg-art h3 { font-size: 13px; margin: 12px 0 4px; }
.pg-art p, .pg-art ol { margin: 0 0 6px; color: color-mix(in srgb, var(--win-ink) 80%, transparent); }
.pg-art ol { padding-left: 16px; }
.pg-art kbd { font: 10px/1 inherit; padding: 1px 4px; border: .5px solid var(--win-line); border-radius: 4px; background: var(--win-fill-2); }
.pg-mast { font: 700 22px/1 Georgia, "Times New Roman", serif; border-bottom: 2px solid var(--win-ink); padding-bottom: 6px; margin-bottom: 10px; display: flex; align-items: baseline; justify-content: space-between; }
.pg-mast span { font: 400 10px/1 -apple-system, sans-serif; color: var(--win-muted); }
.pg-news { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.pg-mast { grid-column: 1 / -1; }
.pg-story { display: flex; gap: 8px; align-items: flex-start; }
.pg-story h4 { margin: 0 0 3px; font: 600 12px/1.25 Georgia, serif; }
.pg-story small { color: var(--win-muted); }
.pg-img { width: 64px; height: 44px; flex: none; border-radius: 4px; overflow: hidden; }
.pg-story.lead { grid-column: 1 / -1; }
.pg-story.lead .pg-img { width: 170px; height: 96px; }
.pg-story.lead h4 { font-size: 17px; }
/* Photos (made-up scenes) */
.ph { position: relative; width: 100%; height: 100%; overflow: hidden; }
.ph i { position: absolute; inset: 0; opacity: .9; }
.ph b { position: absolute; width: 14%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.75); right: 18%; top: 16%; }
/* VS Code */
.vs { position: absolute; inset: 0; display: flex; background: #1e1e1e; color: #ccc; font-size: 10.5px; }
.vs-act { width: 30px; background: #2c2c2c; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 10px; }
.vs-act i { width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid #858585; }
.vs-act i.on { border-color: #e7e7e7; }
.vs-side { width: 132px; background: #252526; padding: 6px 0; white-space: nowrap; overflow: hidden; }
.vs-h { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 10px 6px; color: #bbb; }
.vs-side div:not(.vs-h) { padding: 2px 8px; color: #cccccc; }
.vs-side div.on { background: #37373d; color: #fff; }
.vs-side b { display: inline-block; width: 10px; color: #c5c5c5; font-weight: 400; }
.vs-side i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: #519aba; margin: 0 5px 0 2px; }
.vs-ed { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.vs-tabs { display: flex; background: #252526; height: 26px; }
.vs-tabs span { padding: 6px 12px; color: #969696; background: #2d2d2d; border-right: 1px solid #252526; }
.vs-tabs span.on { background: #1e1e1e; color: #fff; }
.vs-code { flex: 1; padding: 6px 0; font: 10.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; overflow: hidden; color: #d4d4d4; }
.vs-code em { display: inline-block; width: 30px; padding-right: 12px; text-align: right; color: #6e7681; font-style: normal; }
.vs-status { height: 18px; background: #007acc; color: #fff; display: flex; justify-content: space-between; padding: 0 10px; font-size: 9.5px; align-items: center; }
.t-k { color: #c586c0; } .t-s { color: #ce9178; } .t-t { color: #4ec9b0; } .t-f { color: #dcdcaa; } .t-n { color: #b5cea8; } .t-v { color: #9cdcfe; } .t-c { color: #6a9955; }
/* Terminal */
.w-term { color: #e6e6e6; font-size: 10.5px; line-height: 1.6; }
.w-term span { color: #7fd17a; }
.w-term b { color: #7fd17a; font-weight: 600; }
.w-term em { color: #8a8d98; font-style: normal; }
/* Notes */
.nt-side { position: absolute; left: 0; top: 0; bottom: 0; width: 160px; background: var(--win-fill-2); border-right: .5px solid var(--win-line); padding: 8px; }
.nt-side div { padding: 6px 8px; border-radius: 6px; border-bottom: .5px solid var(--win-line); }
.nt-side div.on { background: #f7c948; border-color: transparent; color: #2b2100; }
.nt-side b { display: block; font-size: 11px; }
.nt-side span { display: block; color: var(--win-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
.nt-side div.on span { color: #5c4a10; }
.nt-main { position: absolute; left: 160px; right: 0; top: 0; bottom: 0; padding: 12px 20px; }
.nt-main small { display: block; text-align: center; color: var(--win-muted); font-size: 10px; }
.nt-main h3 { font-size: 17px; margin: 8px 0 8px; }
.nt-main p { margin: 0 0 7px; display: flex; align-items: center; gap: 8px; }
.nt-main p i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--win-muted); flex: none; }
.nt-main p.done { color: var(--win-muted); }
.nt-main p.done i { background: #f2b51e; border-color: #f2b51e; box-shadow: inset 0 0 0 2px var(--win); }
/* Mail */
.ml-side { position: absolute; left: 0; top: 0; bottom: 0; width: 112px; background: var(--win-fill-2); border-right: .5px solid var(--win-line); padding: 10px 6px; }
.ml-side div { padding: 4px 8px; border-radius: 5px; display: flex; justify-content: space-between; }
.ml-side div.on { background: color-mix(in srgb, var(--win-ink) 10%, transparent); font-weight: 600; }
.ml-side em { font-style: normal; color: var(--win-muted); }
.ml-list { position: absolute; left: 112px; width: 200px; top: 0; bottom: 0; border-right: .5px solid var(--win-line); overflow: hidden; }
.ml-list > div { position: relative; padding: 7px 10px 7px 16px; border-bottom: .5px solid var(--win-line); }
.ml-list > div.on { background: var(--accent); color: #fff; }
.ml-list > div.on small, .ml-list > div.on time { color: rgba(255,255,255,.8); }
.ml-list i { position: absolute; left: 5px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ml-list > div.on i { background: #fff; }
.ml-list b { font-size: 11px; }
.ml-list time { float: right; color: var(--win-muted); font-size: 10px; }
.ml-list span { display: block; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-list small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--win-muted); font-size: 10px; }
.ml-read { position: absolute; left: 312px; right: 0; top: 0; bottom: 0; padding: 12px 16px; }
.ml-read h4 { margin: 0 0 8px; font-size: 13px; }
.ml-from { display: flex; gap: 8px; align-items: center; padding-bottom: 8px; margin-bottom: 8px; border-bottom: .5px solid var(--win-line); }
.ml-from span { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(#b6b9c4, #8a8d98); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 600; }
.ml-from small { display: block; color: var(--win-muted); }
.ml-read p { margin: 0 0 6px; }
.ml-new { padding: 6px 14px; }
.ml-new div { padding: 6px 0; border-bottom: .5px solid var(--win-line); }
.ml-new em { color: var(--win-muted); font-style: normal; }
/* Messages */
.ms-head { height: 40px; display: flex; align-items: center; justify-content: center; gap: 7px; border-bottom: .5px solid var(--win-line); }
.ms-head span { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(#a78bfa, #6d4ae8); color: #fff; display: grid; place-items: center; font-size: 9px; font-weight: 600; }
.ms-body { padding: 8px 12px; display: flex; flex-direction: column; gap: 5px; }
.ms-body > small { text-align: center; color: var(--win-muted); font-size: 9.5px; margin-bottom: 2px; }
.ms { max-width: 78%; padding: 6px 10px; border-radius: 15px; font-size: 11px; }
.ms em { display: block; font-style: normal; font-size: 9px; color: var(--win-muted); margin: -2px 0 1px; }
.ms.them { background: var(--win-fill); align-self: flex-start; }
.ms.me { background: #1f8bff; color: #fff; align-self: flex-end; }
.ms-input { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 24px; border-radius: 12px; border: .5px solid var(--win-line); color: var(--win-muted); padding: 0 12px; display: flex; align-items: center; }
/* Finder, Photos and Music share a sidebar */
.fd-side { position: absolute; left: 0; top: 0; bottom: 0; width: 118px; background: var(--win-fill-2); border-right: .5px solid var(--win-line); padding: 8px 6px; }
.fd-side div { padding: 3px 8px; border-radius: 5px; }
.fd-side div.on { background: color-mix(in srgb, var(--win-ink) 10%, transparent); }
.fd-side .fd-h { font-size: 9.5px; font-weight: 600; color: var(--win-muted); padding: 8px 8px 2px; }
.fd-main { position: absolute; left: 118px; right: 0; top: 0; bottom: 0; padding: 12px; display: grid; grid-template-columns: repeat(4, 1fr); align-content: start; gap: 10px 6px; }
.fd-item { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.fd-item img, .fd-thumb { width: 48px; height: 48px; object-fit: contain; }
.fd-thumb { width: 50px; height: 36px; margin: 6px 0; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0,0,0,.3); }
.fd-item span { font-size: 10px; max-width: 86px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-main, .mu-main { position: absolute; left: 118px; right: 0; top: 0; bottom: 0; padding: 10px 12px; overflow: hidden; }
.ph-main b, .mu-main b { font-size: 15px; }
.ph-main small { display: block; color: var(--win-muted); margin-bottom: 8px; }
.ph-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.ph-grid .ph { aspect-ratio: 1; height: auto; }
.mu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; margin-top: 10px; }
.mu-cover { aspect-ratio: 1; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.2); margin-bottom: 4px; }
.mu-grid span { display: block; font-weight: 600; font-size: 10.5px; }
.mu-grid small { color: var(--win-muted); font-size: 10px; }
/* Calendar */
.cal-top { display: flex; align-items: baseline; gap: 5px; padding: 10px 14px 6px; font-size: 17px; color: var(--win-muted); }
.cal-top b { color: var(--win-ink); }
.cal-top .seg { margin-left: auto; display: flex; font-size: 10px; border-radius: 6px; background: var(--win-fill); padding: 2px; }
.cal-top .seg i { font-style: normal; padding: 2px 8px; border-radius: 4px; color: var(--win-ink); }
.cal-top .seg i.on { background: var(--win); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-head span { text-align: right; padding: 2px 6px; font-size: 10px; color: var(--win-muted); }
.cal-grid div { height: 52px; border-top: .5px solid var(--win-line); border-left: .5px solid var(--win-line); padding: 3px 4px; text-align: right; font-size: 10.5px; overflow: hidden; }
.cal-grid div.out { background: var(--win-fill-2); }
.cal-grid span { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 9px; }
.cal-grid span.today { background: #ff3b30; color: #fff; font-weight: 600; }
.cal-grid i { display: block; text-align: left; font-style: normal; font-size: 9.5px; padding: 1px 4px; border-radius: 3px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-g { background: #d9f5e1; color: #1d7a3a; } .ev-b { background: #dcebff; color: #1958b7; } .ev-p { background: #ece3ff; color: #6236c9; } .ev-o { background: #ffe8d1; color: #b25a0b; } .ev-r { background: #ffe0de; color: #c2261d; }
/* "Switched to …" badge, in place of a window coming forward */
.hud { position: absolute; left: 50%; top: 47%; z-index: 3500; display: flex; align-items: center; gap: 12px; padding: 12px 22px 12px 14px; border-radius: 18px; background: color-mix(in srgb, var(--win) 78%, transparent); backdrop-filter: blur(26px) saturate(1.4); -webkit-backdrop-filter: blur(26px) saturate(1.4); border: .5px solid var(--glass-line); box-shadow: 0 18px 50px -16px rgba(0,0,0,.45); color: var(--win-ink); opacity: 0; transform: translate(-50%, -50%) scale(.94); transition: opacity .18s, transform .25s cubic-bezier(.2,.9,.25,1); pointer-events: none; }
.hud.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hud b { display: block; font-size: 15px; }
.hud span { display: block; font-size: 12px; color: var(--win-muted); max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sprite { position: absolute; }

/* What the prototype had inline (the policy allows inline styles, but markup keeps to classes) */
.sticky b.inline-b { display: inline; font-size: inherit; margin: 0; }
.sticky .sticky-foot { margin: 10px 0 0; font-size: 12px; opacity: .75; }
.look-stage.feat-stage { width: 100%; height: 260px; border: 0; background: transparent; }
.fan .fw-1 { left: 6%; top: 120px; transform: rotate(-14deg); }
.fan .fw-2 { left: 24%; top: 46px; transform: rotate(-6deg); }
.fan .fw-3 { left: calc(50% - 65px); top: 14px; }
.fan .fw-4 { right: 24%; top: 46px; transform: rotate(6deg); }
.fan .fw-5 { right: 6%; top: 120px; transform: rotate(14deg); }
.fw i.w45 { width: 45%; } .fw i.w50 { width: 50%; } .fw i.w55 { width: 55%; } .fw i.w60 { width: 60%; } .fw i.w65 { width: 65%; }
.fw i.w70 { width: 70%; } .fw i.w75 { width: 75%; } .fw i.w80 { width: 80%; }
.menu.menu-art { display: block; }
.head.wide { max-width: none; }

/* ---------- Plain pages: privacy, terms, thanks, AppSumo ---------- */
.btn.btn-primary { background: var(--accent); color: #fff; }
.btn.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.page { max-width: 720px; padding: 64px 0 96px; }
.page h1 { font-size: clamp(32px, 4.4vw, 42px); letter-spacing: -.035em; line-height: 1.08; margin: 0 0 10px; }
.page .lead { font-size: 18px; color: var(--ink-2); margin: 0 0 30px; }
.prose { color: var(--ink-2); }
.prose h2 { color: var(--ink); font-size: 21px; margin: 34px 0 8px; }
.prose b, .prose strong { color: var(--ink); }
.prose a:not(.btn) { color: var(--accent); }
.prose li { margin: 4px 0; }
.prose code { font: 14px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--soft); padding: 2px 6px; border-radius: 6px; }
.keybox { display: flex; gap: 10px; align-items: center; padding: 12px 12px 12px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.keybox code { flex: 1; font-size: 16px; word-break: break-all; background: none; color: var(--ink); }
.oneclick { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 18px 0; }
.inline { color: var(--accent); }
footer.foot .copy { width: 100%; margin: 4px 0 0; font-size: 12.5px; }