/* Translate on Top — site styles. System fonts only, no third-party requests. */

:root {
  color-scheme: light dark;
  --bg: #FAFAFA;
  --surface: #FFFFFF;
  --ink: #111114;
  /* The secondary greys and the link blue are darker than usual so they stay above 4.5:1 on every part of
     the sky, its blue corner included. */
  --ink-2: #43484F;
  --ink-3: #474C54;
  --line: rgba(17, 17, 20, .10);
  --hair: rgba(17, 17, 20, .08);
  --blue: #1441A3;
  --blue-soft: rgba(79, 153, 252, .10);
  /* The page sits on a soft evening sky, after a macOS wallpaper of the bay at sunset: blue overhead to the
     right, warm along the left, and the sun low in the bottom-left corner. It stays put like a desktop while
     the page scrolls over it, and each light screenshot is captured over the part of it that is behind the
     picture when the picture is in the middle of the screen, so the glass is tinted by what you see. */
  --sky: #DCCDD2;
  --wallpaper:
    radial-gradient(95% 70% at 12% 100%, #F2D19E 0%, rgba(240, 210, 165, .75) 30%, rgba(238, 212, 190, 0) 78%),
    radial-gradient(75% 115% at 0% 30%, #EAD6CE 0%, rgba(234, 214, 206, 0) 80%),
    linear-gradient(to top right, #EAD2C3 0%, #DCCDD2 40%, #C3C7D6 70%, #AEBFD7 100%);
  --header-bg: rgba(255, 255, 255, .36);
  --card: rgba(255, 255, 255, .42);
  --card-line: rgba(255, 255, 255, .6);
  --bar-bg: rgba(255, 255, 255, .60);
  --bar-ink: rgba(17, 17, 20, .42);
  --bar-text: rgba(17, 17, 20, .62);
  /* No drawn desktop in light mode: the sky is the desktop, and the menu bar and popover sit straight on it. */
  --desktop: transparent;
  /* Light-mode window shadow, fitted to macOS's own: a crisp rim, then a tail offset downward. Without
     the rim, light glass on a light page has no visible edge at all. Dark mode needs no rim. */
  --shot-rim: 0 0 1.5px rgba(0, 0, 0, .65);
  --shot-shadow: 0 4px 20px rgba(0, 0, 0, .20);
  --scene-shadow: none;
  --pop-shadow: drop-shadow(0 0 1.5px rgba(0, 0, 0, .65)) drop-shadow(0 4px 20px rgba(0, 0, 0, .20));
  --tab-on: #FFFFFF;
  --tab-shadow: 0 1px 3px rgba(17, 24, 39, .14);
  --panel: rgba(255, 255, 255, .42);
  --panel-line: rgba(255, 255, 255, .6);
}

.dark-vars,
:root[data-theme="dark"] {
  --bg: #111114;
  --surface: #191A1E;
  --ink: #F4F5F7;
  --ink-2: #A3A8B2;
  --ink-3: #8B9099;
  --line: rgba(255, 255, 255, .14);
  --hair: rgba(255, 255, 255, .10);
  --blue: #79ADFF;
  --blue-soft: rgba(79, 153, 252, .12);
  --bar-bg: rgba(28, 28, 32, .62);
  --bar-ink: rgba(255, 255, 255, .52);
  --bar-text: rgba(255, 255, 255, .72);
  --sky: #111114;
  --wallpaper: none;
  --header-bg: color-mix(in srgb, #111114 82%, transparent);
  --card: #191A1E;
  --card-line: rgba(255, 255, 255, .10);
  --desktop: linear-gradient(165deg, #1A2436 0%, #151922 45%, #111114 100%);
  --shot-rim: 0 0 0 rgba(0, 0, 0, 0);
  --shot-shadow: 0 20px 50px rgba(0, 0, 0, .55);
  --scene-shadow: 0 22px 60px rgba(0, 0, 0, .5);
  --pop-shadow: drop-shadow(0 18px 40px rgba(0, 0, 0, .55));
  --tab-on: rgba(255, 255, 255, .14);
  --tab-shadow: none;
  --panel: linear-gradient(165deg, #171C26 0%, #14161B 100%);
  --panel-line: rgba(121, 173, 255, .16);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111114;
    --surface: #191A1E;
    --ink: #F4F5F7;
    --ink-2: #A3A8B2;
    --ink-3: #8B9099;
    --line: rgba(255, 255, 255, .14);
    --hair: rgba(255, 255, 255, .10);
    --blue: #79ADFF;
    --blue-soft: rgba(79, 153, 252, .12);
    --bar-bg: rgba(28, 28, 32, .62);
    --bar-ink: rgba(255, 255, 255, .52);
    --bar-text: rgba(255, 255, 255, .72);
    --sky: #111114;
    --wallpaper: none;
    --header-bg: color-mix(in srgb, #111114 82%, transparent);
    --card: #191A1E;
    --card-line: rgba(255, 255, 255, .10);
    --desktop: linear-gradient(165deg, #1A2436 0%, #151922 45%, #111114 100%);
    --shot-rim: 0 0 0 rgba(0, 0, 0, 0);
    --shot-shadow: 0 20px 50px rgba(0, 0, 0, .55);
    --scene-shadow: 0 22px 60px rgba(0, 0, 0, .5);
    --pop-shadow: drop-shadow(0 18px 40px rgba(0, 0, 0, .55));
    --tab-on: rgba(255, 255, 255, .14);
    --tab-shadow: none;
    --panel: linear-gradient(165deg, #171C26 0%, #14161B 100%);
    --panel-line: rgba(121, 173, 255, .16);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
/* The wallpaper is fixed to the window, not the page, so the page scrolls over it like windows over a desktop.
   A fixed layer rather than background-attachment: fixed, which iOS ignores; 100lvh keeps it covering the
   screen while Safari's toolbars slide away. */
body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: -1;
  background: var(--wallpaper); pointer-events: none;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible,
.tab-input:focus-visible + label {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

img { max-width: 100%; }
::selection { background: rgba(79, 153, 252, .28); }

.wrap { max-width: 1080px; margin: 0 auto; padding-inline: 20px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--surface); color: var(--ink);
  padding: 10px 16px; border-radius: 10px; z-index: 50;
}
.skip:focus { left: 12px; top: 12px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hair);
}
.site-header nav {
  max-width: 1080px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 16px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink); font-size: 15px; font-weight: 590; letter-spacing: -0.015em;
}
.brand:hover { text-decoration: none; }
.brand img { width: 26px; height: 26px; border-radius: 6px; display: block; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 15px; }
.nav-links a { color: var(--ink-2); }
.theme-toggle {
  font: inherit; font-size: 14px; cursor: pointer;
  padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-2);
}
.theme-toggle:hover { color: var(--ink); }
@media (max-width: 560px) { .nav-links a[href="#features"] { display: none; } }
/* Below 440 px the header needs more width than a phone has, and the squeezed wordmark slid under the
   links. Keep the icon, hide the wordmark visually but not from screen readers, and drop Privacy, which
   the footer links too. The page title right below says the name in full. */
@media (max-width: 440px) {
  .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav-links a[href="privacy.html"] { display: none; }
}

/* Hero */
.hero { max-width: 780px; margin: 0 auto; padding: 84px 20px 40px; text-align: center; }
.hero-icon { display: block; margin: 0 auto 26px; width: 96px; height: 96px; }
h1 {
  margin: 0; font-size: clamp(38px, 6vw, 58px); line-height: 1.06;
  font-weight: 600; letter-spacing: -0.035em; text-wrap: balance;
}
.tagline {
  margin: 16px 0 0; font-size: clamp(20px, 2.6vw, 25px); line-height: 1.3;
  color: var(--ink); opacity: .82; letter-spacing: -0.02em;
}
.lede { margin: 20px auto 0; max-width: 560px; color: var(--ink-2); text-wrap: pretty; }
.cta { margin: 34px 0 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* Apple's Mac App Store badge, unmodified as Apple requires, shown 54 px tall against Apple's 40 px minimum.
   The rounding matches the badge's corners, so the focus ring follows its shape. */
.store-badge { display: block; border-radius: 13px; }
.store-badge img { display: block; width: 211px; height: auto; }
.note { margin: 0; font-size: 15px; color: var(--ink-2); }
.fine { margin: 4px 0 0; font-size: 14px; color: var(--ink-3); }

/* Menu-bar scene (built in CSS so the bar stretches to the viewport) */
.scene-wrap { max-width: 1240px; margin: 0 auto; padding-inline: 16px; }
.scene {
  /* Popover width and offset are both percentages of the scene, so they cannot disagree;
     the scene's height is derived from the popover's 1052:804 ratio, so it never clips. */
  --pw: min(500px, calc(92vw - 30px));
  --cx: max(calc(var(--pw) / 2 + 12px), min(66%, calc(100% - var(--pw) / 2 - 12px)));
  position: relative;
  min-height: calc(28px + var(--pw) * 0.7643 + 64px);
  border-radius: 18px 18px 0 0; overflow: hidden;
  background: var(--desktop);
  box-shadow: var(--scene-shadow);
}
.bar {
  position: absolute; inset: 0 0 auto; height: 26px;
  background: var(--bar-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--hair);
}
.bar-left-of-icon, .bar-right {
  position: absolute; top: 0; height: 26px;
  display: flex; align-items: center; overflow: hidden;
}
.bar-left-of-icon { right: calc(100% - var(--cx) + 21px); gap: 17px; padding-right: 4px; max-width: 40%; }
.bar-right { right: 14px; gap: 15px; font-size: 12px; color: var(--bar-text); }
.glyph-circle { width: 15px; height: 15px; border-radius: 999px; border: 1.5px solid var(--bar-ink); }
.glyph-cap { width: 20px; height: 9px; border-radius: 3px; border: 1.5px solid var(--bar-ink); }
.glyph-cap.wide { width: 22px; height: 11px; }
.glyph-square { width: 14px; height: 14px; border-radius: 4px; background: var(--bar-ink); }
.tray-icon {
  position: absolute; top: 1px; left: var(--cx); transform: translateX(-50%);
  width: 44px; height: 24px; display: block;
}
.popover {
  position: absolute; top: 28px; left: var(--cx); transform: translateX(-50%);
  width: var(--pw); height: auto; filter: var(--pop-shadow);
}

/* Sections */
section h2 {
  margin: 0; font-size: clamp(28px, 3.6vw, 38px); line-height: 1.12;
  font-weight: 600; letter-spacing: -0.03em; text-wrap: balance;
}
.section { padding-top: 104px; }
.split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 56px; align-items: center;
}
/* The middle feature puts its picture on the left, so the three alternate down the page. Only while the
   columns sit side by side, which starts at two 320 px columns, the 56 px gap and the 20 px gutters; stacked
   on a phone, every picture follows its text. */
@media (min-width: 736px) { .split.flip > figure { order: -1; } }
.stack-list { margin: 30px 0 0; display: flex; flex-direction: column; gap: 26px; }
.stack-list h3 { margin: 0 0 6px; font-size: 17px; font-weight: 590; letter-spacing: -0.015em; }
.stack-list p, .prose { margin: 0; color: var(--ink-2); text-wrap: pretty; }
.prose + .prose { margin-top: 16px; }
.measure { max-width: 46ch; }
kbd {
  font-family: inherit; font-size: 15px; padding: 1px 7px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
figure { margin: 0; display: flex; justify-content: center; }
figcaption { margin: 18px 0 0; font-size: 15px; color: var(--ink-3); text-align: center; }
.shot { height: auto; border-radius: 18px; filter: drop-shadow(var(--shot-rim)) drop-shadow(var(--shot-shadow)); }
.shot-prefs { width: min(360px, 100%); }
.shot-dict { width: min(380px, 100%); }
/* The popover with its language list open, at 0.8 of real size like the gallery shots. */
.shot-picker { width: min(420px, 100%); }
.order-2 { order: 2; }

/* Tabbed gallery — pure CSS, works without JavaScript */
.tabs { text-align: center; }
.tab-input { position: absolute; opacity: 0; pointer-events: none; }
.tabbar {
  margin: 34px auto 0; display: inline-flex; gap: 4px; padding: 4px;
  border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.tabbar label {
  cursor: pointer; font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  padding: 9px 18px; border-radius: 999px; color: var(--ink-2);
}
.tabbar label:hover { color: var(--ink); }
.panels { margin: 40px 0 0; display: flex; justify-content: center; align-items: center; }
/* The three captures are different shapes: two tall, one wide. Reserving the tallest one's height keeps the
   frame still, so switching tabs swaps the picture instead of moving the rest of the page. Only above the
   breakpoint, where the images are at their full size. */
@media (min-width: 700px) { .panels { min-height: 730px; } }
.panel { display: none; }
.panel figure { flex-direction: column; }
/* Every capture in this gallery is shown at 0.80 of the app's real size, so body text is the same 12 px in
   all three and none looks zoomed against the others. The side-by-side popover really is wider in the app
   (866 pt against 526 pt), so its frame is wider; .panels below reserves the height so nothing jumps. */
.panel-page figure { max-width: 421px; }
.panel-side figure { max-width: 693px; }
.panel-sync figure { max-width: 421px; }
#t-page:checked ~ .tabbar label[for="t-page"],
#t-side:checked ~ .tabbar label[for="t-side"],
#t-sync:checked ~ .tabbar label[for="t-sync"] {
  background: var(--tab-on); color: var(--ink); box-shadow: var(--tab-shadow);
}
#t-page:checked ~ .panels .panel-page,
#t-side:checked ~ .panels .panel-side { display: block; }
#t-sync:checked ~ .panels .panel-sync { display: block; }

/* Cards */
.card {
  border-radius: 18px; background: var(--card); border: 1px solid var(--card-line);
  padding: clamp(30px, 5vw, 56px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px; align-items: start;
}
.grid-small {
  margin: 34px 0 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px 44px;
}
.grid-small p { margin: 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-2); }
.download {
  border-radius: 18px; background: var(--panel); border: 1px solid var(--panel-line);
  padding: clamp(36px, 5vw, 64px); text-align: center;
}
.download img.icon { display: block; margin: 0 auto 22px; width: 72px; height: 72px; }
.download p { margin: 16px auto 0; max-width: 42ch; color: var(--ink-2); text-wrap: pretty; }

/* FAQ */
details { border-top: 1px solid var(--line); padding: 18px 0; }
details:last-of-type { border-bottom: 1px solid var(--line); }
/* Each question carries a chevron that turns when its answer opens. Without one, nothing shows that the
   questions open at all. */
summary {
  position: relative; padding-right: 36px;
  cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 590; letter-spacing: -0.015em;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; position: absolute; right: 6px; top: 6px; width: 8px; height: 8px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .2s ease;
}
details[open] > summary::after { transform: translateY(5px) rotate(225deg); }
summary:hover::after { border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { summary::after { transition: none; } }
details p { margin: 12px 0 0; color: var(--ink-2); }
/* Keyboard reference inside the FAQ: keys in one column, what they do in the other. */
.keys { display: grid; grid-template-columns: max-content 1fr; gap: 9px 18px; margin: 14px 0 0; align-items: baseline; }
.keys dt { white-space: nowrap; }
.keyrange { white-space: nowrap; }
.keys dd { margin: 0; color: var(--ink-2); }
.keys kbd, details p kbd, .stack-list kbd { font-size: 14px; }

/* Footer */
.site-footer {
  max-width: 1080px; margin: 104px auto 0;
  padding: 28px 20px 56px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
  font-size: 14px; color: var(--ink-3);
}
.site-footer a { color: var(--ink-3); }
.site-footer .name { color: var(--ink); font-weight: 500; }
.site-footer .spacer { flex: 1; }
.site-footer .tm { font-size: 12px; color: var(--ink-3); }

/* Theme-paired screenshots: only one variant is displayed, so only one downloads */
.only-dark { display: none; }
:root[data-theme="dark"] .only-light { display: none; }
:root[data-theme="dark"] .only-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .only-light { display: none; }
  :root:not([data-theme="light"]) .only-dark { display: block; }
}

/* Privacy page */
.doc { max-width: 68ch; margin: 0 auto; padding: 72px 20px 0; }
.doc h1 { font-size: clamp(30px, 4.4vw, 42px); letter-spacing: -0.03em; }
.doc .updated { margin: 14px 0 0; color: var(--ink-3); font-size: 15px; }
.doc h2 {
  margin: 48px 0 0; font-size: 21px; font-weight: 590; letter-spacing: -0.02em; text-wrap: balance;
}
.doc p { margin: 14px 0 0; color: var(--ink-2); text-wrap: pretty; }
.doc ul { margin: 14px 0 0; padding-left: 20px; color: var(--ink-2); }
.doc li { margin: 10px 0 0; }
.doc strong, .doc em { color: var(--ink); }
.doc em { font-style: italic; color: var(--ink-2); }