/* PasteMore — white, calm, Apple-like. One accent: navy, like the app. */
:root {
  --ink: #1d1d1f;
  --gray: #6e6e73;
  --faint: #d2d2d7;
  --faint-soft: #e6e6ea;
  --line: #e8e8ed;
  --soft: #f5f5f7;
  --navy: #1c3c78;
  --navy-2: #2f63c4;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.28, .52, .08, 1);
  --max: 1080px;
  --gutter: 24px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: #fff; color: var(--ink);
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1, h2, h3 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif; letter-spacing: -0.022em; margin: 0; }
a { color: var(--navy-2); text-decoration: none; }
kbd { font: 600 12px/1 -apple-system, sans-serif; padding: 4px 7px; border-radius: 6px; border: 1px solid var(--line); background: #fff; color: var(--gray); }

/* ------------------------------------------------------------ Navigation
   At the top a quiet row on the page itself. Once the page moves, it gathers into a floating glass pill in the
   middle: the width eases in like a spring (stiffness 180, damping 28: settled in 0.7 s, no overshoot), the glass
   fades in. Transitions wait for the first frame (.ready), so a page opened half way down starts as a pill. */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 30; width: min(100% - 2 * var(--gutter), var(--max)); margin: 0 auto; padding-top: 11px; }
/* Everything in the bar is drawn 10 % larger than its numbers say (zoom: the text is laid out at that size, not
   stretched): the pill 1012 px wide and 51 px tall, its words 15.4 px. */
.nav-bar {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: var(--max); height: 46px; margin: 0 auto; padding: 0; zoom: 1.1;
  border: 1px solid transparent; border-radius: 999px; background: transparent;
}
.nav.scrolled .nav-bar {
  max-width: 920px; padding-inline: 16px 6px; border-color: rgba(0, 0, 0, .1);
  background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
}
/* Over the phone menu the bar is a plain row again. */
.nav.open .nav-bar { border-color: transparent; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav.ready .nav-bar { transition: max-width .7s var(--spring), padding .7s var(--spring), background-color .4s var(--ease), border-color .4s var(--ease), -webkit-backdrop-filter .4s var(--ease), backdrop-filter .4s var(--ease); }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 600; font-size: 16px; }
.brand img { border-radius: 6px; }
.nav .brand { flex-shrink: 0; white-space: nowrap; }
.nav-bar nav { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.nav-links { display: flex; gap: 2px; }
/* Each link a quiet pill: on hover a soft circle grows from its middle. */
.nav-links a {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; height: 36px; padding: 0 12px;
  border: 1px solid transparent; border-radius: 999px; color: var(--ink); white-space: nowrap; transition: border-color .2s;
}
.nav-links a::after {
  content: ""; position: absolute; z-index: -1; top: 50%; left: 50%; width: 150%; aspect-ratio: 1; border-radius: 50%;
  background: rgba(0, 0, 0, .04); opacity: 0; transform: translate(-50%, -50%) scale(0); transition: transform .36s ease-out, opacity .1s;
}
@media (hover: hover) {
  .nav-links a:hover { border-color: rgba(116, 114, 113, .2); }
  .nav-links a:hover::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .lang:hover { border-color: rgba(0, 0, 0, .2); }
}
/* The language: a hairline pill, the current one raised inside it. */
.lang {
  display: flex; align-items: center; gap: 4px; height: 32px; padding: 3px; padding-inline-start: 8px; cursor: pointer;
  border: 1px solid rgba(0, 0, 0, .1); border-radius: 999px; background: none; color: var(--gray); font: 500 12px -apple-system, sans-serif;
  transition: border-color .2s;
}
.lang svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.lang span { display: flex; align-items: center; height: 100%; padding: 0 10px; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
/* The trial button sits in the pill's round end, the same 6 px from its edge all round. */
.nav .button.small { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; white-space: nowrap; }
.nav .button.small:hover { transform: none; box-shadow: none; }
.nav .button.small:active { transform: scale(.97); }
/* The menu button (phones): two lines that turn into a cross. */
.nav-toggle { display: none; position: relative; flex-shrink: 0; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.nav-toggle i { position: absolute; left: 10px; top: 50%; width: 16px; height: 1.5px; margin-top: -.75px; border-radius: 1px; background: currentColor; transition: transform .4s var(--ease-out); }
.nav-toggle i:first-child { transform: translateY(-3px); }
.nav-toggle i:last-child { transform: translateY(3px); }
.nav.open .nav-toggle i:first-child { transform: rotate(45deg); }
.nav.open .nav-toggle i:last-child { transform: rotate(-45deg); }
.nav-sheet { display: none; }

.button {
  display: inline-block; background: var(--navy); color: #fff; padding: 13px 24px; border-radius: 999px;
  font-weight: 600; font-size: 16px; transition: transform .25s var(--ease), background .25s, box-shadow .25s;
  box-shadow: 0 6px 20px rgba(28, 60, 120, .18);
}
.button:hover { background: #234a92; transform: translateY(-1px); box-shadow: 0 10px 28px rgba(28, 60, 120, .24); }
.button:active { transform: translateY(0) scale(.98); }
.button.small { padding: 7px 14px; font-size: 13px; box-shadow: none; }
.button.ghost { background: #fff; color: var(--navy); border: 1px solid var(--line); box-shadow: none; }
.button.ghost:hover { border-color: var(--navy); }
.link { font-weight: 500; }
.link::after { content: " ›"; transition: margin .2s; }
.link:hover::after { margin-left: 3px; }

/* ------------------------------------------------------------ Reveal & word-by-word light-up */
.reveal { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out), filter 1s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; filter: none; }
.words .w { color: var(--faint); transition: color .9s var(--ease) var(--d, 0s); }
.words.in .w { color: var(--ink); }
.words.soft .w { color: var(--faint-soft); }
.words.soft.in .w { color: var(--gray); }
/* Japanese and Chinese: a word's characters stay together on a line. Korean breaks only between words. */
.wj { display: inline-block; }
:lang(ko) :is(h1, h2, h3, .lead, .text p, .kg li, .note) { word-break: keep-all; }
:lang(ja) :is(h1, h2, h3, .lead, .text p, .kg li, .note, .fine) { word-break: auto-phrase; }

/* ------------------------------------------------------------ Layout */
main > section { padding: 0 var(--gutter); }
.band { max-width: var(--max); margin: 0 auto; padding-top: 140px !important; padding-bottom: 20px !important; }
.band.narrow { max-width: 760px; }
.text { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.text h2, .scene-head h2, .narrow h2 { font-size: clamp(34px, 5vw, 56px); line-height: 1.07; }
.text p, .scene-head p { font-size: clamp(18px, 2.1vw, 22px); line-height: 1.45; margin: 18px 0 0; }
.scene-head p.big { font-size: clamp(30px, 4.3vw, 48px); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; }
.note { text-align: center; color: var(--gray); font-size: 15px; max-width: 620px; margin: 30px auto 0; }
.note.center { text-align: center; }
/* The clipboard note moves on in place: a line slides a little to the left as it fades, the next comes from the
   right. The edges are soft, so nothing travels out to the screen's edge. */
.ticker { position: relative; height: 1.5em; line-height: 1.5em; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ticker span { position: absolute; inset: 0; white-space: nowrap; opacity: 0; transform: translateX(46px); transition: opacity .8s var(--ease), transform 1.1s var(--ease-out); }
.ticker span.in { opacity: 1; transform: none; }
.ticker span.out { opacity: 0; transform: translateX(-46px); transition: opacity .6s var(--ease), transform .9s var(--ease); }

/* ------------------------------------------------------------ Hero */
.hero { text-align: center; padding-top: 118px !important; max-width: 980px; margin: 0 auto; }
/* Until the page's language is in, it stays hidden (see lang.js). */
.i18n-wait body { visibility: hidden; }
/* The language menu: each language in its own name. */
.lang-menu { position: relative; }
.lang-list { position: absolute; inset-inline-end: 0; top: calc(100% + 10px); z-index: 60; margin: 0; padding: 6px; list-style: none; min-width: 190px; max-height: min(70vh, 520px); overflow: auto; border-radius: 16px; background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(0, 0, 0, .06); box-shadow: 0 0 1px rgba(0, 0, 0, .2), 0 0 4px rgba(0, 0, 0, .02), 0 12px 32px rgba(0, 0, 0, .08); animation: menuIn .2s var(--ease-out); }
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } }
.lang-list li { padding: 8px 12px; border-radius: 8px; font-size: 14px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.lang-list li:hover { background: var(--soft); }
.lang-list li[aria-selected="true"] { color: var(--navy-2); font-weight: 600; }
.kicker { color: var(--gray); font-weight: 600; font-size: clamp(17px, 2vw, 21px); letter-spacing: -0.01em; margin: 0 0 14px; display: flex; justify-content: center; align-items: flex-end; gap: .3em; }
.kicker > span:first-child { line-height: 1.25em; }
/* The lead-in of a rising line never breaks; when the phrase doesn't fit beside it, the phrase moves to the next line. */
.kicker { flex-wrap: wrap; }
.kicker > span:first-child, .final-line > span:first-child { white-space: nowrap; }
.hero h1 { font-size: clamp(44px, 7.4vw, 88px); line-height: 1.02; letter-spacing: -0.035em; }
.hero .lead { font-size: clamp(19px, 2.3vw, 24px); line-height: 1.4; max-width: 720px; margin: 24px auto 0; }
.cta { display: flex; gap: 26px; justify-content: center; align-items: center; margin-top: 34px; flex-wrap: wrap; }
.hero-stage { position: relative; height: 430px; margin-top: 26px; display: grid; place-items: center; }
.halo { position: absolute; width: min(520px, 92vw); height: min(520px, 92vw); border-radius: 50%; background: radial-gradient(circle, rgba(47, 99, 196, .10), rgba(47, 99, 196, 0) 62%); animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.08); opacity: .75; } }
.chip {
  position: absolute; bottom: 6px; left: 50%; transform: translate(-50%, 0);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; align-items: center; padding: 10px 18px; border-radius: 22px;
  background: rgba(255, 255, 255, .86); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .07);
  font-size: 15px; text-align: center; transition: opacity .45s var(--ease), transform .45s var(--ease);
  /* Never wider than the screen. */
  width: max-content; max-width: calc(100vw - 2 * var(--gutter));
}
.chip.out { opacity: 0; transform: translate(-50%, 8px); }
.chip-a { font-weight: 600; color: var(--navy); }
.fine { color: var(--gray); font-size: 14px; margin-top: 26px; }
/* ⇧ ⌘ V as keys of a Mac keyboard: white caps with a little depth, pressed one after the other (app.js). */
.hero-stage { height: 380px; }
.keys { position: relative; display: flex; gap: 14px; }
.keycap {
  display: grid; place-items: center; width: 108px; height: 100px; padding: 0; border: 0; border-radius: 20px;
  background: linear-gradient(180deg, #fff, #f6f6f8 62%, #efeff3);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .04), 0 7px 0 #dcdee4, 0 9px 3px rgba(0, 0, 0, .05), 0 22px 40px rgba(28, 60, 120, .13);
  color: #3a3a3f; font: 400 40px/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), color .25s var(--ease);
}
.keycap.wide { width: 146px; }
.keycap.down { transform: translateY(6px); color: var(--navy-2);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 0 #dcdee4, 0 2px 2px rgba(0, 0, 0, .05), 0 10px 22px rgba(28, 60, 120, .12); }
.keys.small { justify-content: center; gap: 8px; }
.keys.small .keycap { width: 58px; height: 54px; border-radius: 12px; font-size: 22px; box-shadow: inset 0 1px 0 #fff, 0 4px 0 #dcdee4, 0 5px 2px rgba(0, 0, 0, .05), 0 14px 26px rgba(28, 60, 120, .12); }
.keys.small .keycap.wide { width: 78px; }
.keys.small .keycap.down { transform: translateY(3px); box-shadow: inset 0 1px 0 #fff, 0 1px 0 #dcdee4, 0 6px 14px rgba(28, 60, 120, .1); }
/* Under the keys, the copy that comes back: its picture and what it says. */
.clip-chip { gap: 10px; flex-wrap: nowrap; padding: 9px 18px 9px 10px; bottom: 26px; }
.clip-chip .chip-a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
.chip-pic { --u: 10px; display: grid; }

/* ------------------------------------------------------------ Sticky scroll scenes */
.scene { position: relative; height: calc(var(--len) * 100vh); }
.sticky { position: sticky; top: 0; height: 100vh; max-width: var(--max); margin: 0 auto; display: flex; flex-direction: column; justify-content: center; padding-top: 56px; }
.scene-head { text-align: center; max-width: 820px; margin: 0 auto 30px; }

/* ------------------------------------------------------------ How it works: a stage (curtain, cornice, desk, buttons) */
/* A navy curtain, hung behind a white marble cornice, opens with the scroll (or by hand) onto a white stage: the
   clipboard's desk (below), drawn in shares of its own width (cqw of .cb), the Mac on its screen in shares of the
   screen (--u). Left to right in every language, as a Mac is. The title sits under the cornice's middle. */
.theater-scene .sticky { justify-content: center; padding-top: 104px; padding-bottom: 10px; }
.theater, .curtain { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none; }
.theater { background: #fff; }

/* The title stays through the whole scene: white on the navy curtain, ink on the stage (from the scroll). The
   buttons come right under it, then the desk, then the steps. */
.theater-scene .scene-head { position: relative; z-index: 4; max-width: 1080px; margin-bottom: 18px; }
/* On a short window the title gives way a little, so the desk keeps its size. */
.theater-scene .scene-head h2 { font-size: min(clamp(34px, 5vw, 56px), 6.6vh); }
.theater-scene .scene-head p { font-size: min(clamp(18px, 2.1vw, 22px), 2.8vh); }
.theater-scene .scene-head .words.in .w { color: var(--hc, var(--ink)); }
.theater-scene .scene-head .words.soft.in .w { color: var(--hc2, var(--gray)); }
.theater-scene .scene-head .words .w { transition: color .9s var(--ease) var(--d, 0s); }
.theater-scene.head-settled .scene-head .words .w { transition: color .25s linear 0s; }

/* The buttons: the ways to open the clipboard. The chosen one is navy, a thin line in it runs with its story; until
   one is chosen a soft light passes along them now and then, so they read as buttons. */
/* The buttons may reach a little past the page's column (a long language still fits one row from 1230 px). */
.th-picks { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; align-self: center; width: min(1180px, 100vw - 2 * var(--gutter)); margin: 0 0 16px; }
.th-pick {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 11px; overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .1); border-radius: 999px; background: rgba(255, 255, 255, .86); color: var(--ink); cursor: pointer;
  font: 500 14px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04); transition: background-color .35s var(--ease), color .35s var(--ease), border-color .3s, box-shadow .35s, transform .35s var(--ease-out);
}
.th-pick svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--navy-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s; }
.th-pick svg .fill { fill: var(--navy-2); stroke: none; transition: fill .35s; }
.th-pick i { position: absolute; left: 18px; right: 18px; bottom: 5px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .22); opacity: 0; transition: opacity .3s; }
.th-pick i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, .85); transform: scaleX(var(--k, 0)); transform-origin: 0 50%; }
[dir="rtl"] .th-pick i::after { transform-origin: 100% 50%; }
@media (hover: hover) {
  .th-pick:hover { border-color: rgba(28, 60, 120, .35); box-shadow: 0 6px 18px rgba(28, 60, 120, .12); transform: translateY(-1px); }
}
.th-pick:active { transform: scale(.97); }
.th-pick:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 2px; }
.th-pick[aria-selected="true"] { border-color: var(--navy); background: var(--navy); color: #fff; box-shadow: 0 8px 22px rgba(28, 60, 120, .26); transform: none; }
.th-pick[aria-selected="true"] svg { stroke: #fff; }
.th-pick[aria-selected="true"] svg .fill { fill: #fff; }
.th-pick[aria-selected="true"] i { opacity: 1; }
.th-picks.hint .th-pick:not([aria-selected="true"]) { animation: pickHint 1.5s var(--ease) both; animation-delay: calc(var(--n) * 90ms); }
@keyframes pickHint { 40% { border-color: rgba(47, 99, 196, .55); box-shadow: 0 0 0 3px rgba(47, 99, 196, .12); } }
/* Phones: the buttons in one row that slides sideways (its ends fade, so more of it shows), the words a little
   tighter, so the stage and its buttons fit on the screen together; the caption spans the screen. */
@media (max-width: 600px) {
  .theater-scene .scene-head { margin-bottom: 10px; }
  .theater-scene .scene-head p { margin-top: 8px; font-size: 16px; }
  .th-picks {
    flex-wrap: nowrap; justify-content: flex-start; gap: 6px; align-self: stretch; width: auto; margin: 0 calc(-1 * var(--gutter)) 8px; padding: 4px var(--gutter) 8px;
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  }
  .th-picks::-webkit-scrollbar { display: none; }
  .th-pick { flex: none; height: 38px; font-size: 14px; }
}

/* The curtain: navy cloth, pleated (the WebGL shader); without WebGL, CSS drapes that fold up and slide out. */
.curtain { z-index: 3; overflow: hidden; }
/* Either half can be pulled aside by hand: a strip as wide as its cloth takes the pointer (sideways; up and down still
   scrolls the page). Through the opening the stage takes it. */
.curtain-hit { position: absolute; top: 0; bottom: 0; width: 0; pointer-events: auto; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.curtain-hit.left { left: 0; }
.curtain-hit.right { right: 0; }
.curtain.pulling .curtain-hit { cursor: grabbing; }
/* The cornice over it (and over the stage): drawn by the script for the window's width. */
.cornice { position: absolute; z-index: 5; top: 0; left: 50%; display: block; width: 100vw; transform: translateX(-50%); pointer-events: none; overflow: visible; }
.curtain-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.curtain.gl .drape { display: none; }
.curtain:not(.gl) .curtain-gl { display: none; }
.drape { position: absolute; top: 0; bottom: 0; width: 50.5vw; will-change: transform; }
.drape.left { left: 0; transform-origin: 0 50%; box-shadow: 18px 0 50px rgba(0, 0, 0, calc(.25 * var(--shade, 1))); }
.drape.right { right: 0; transform-origin: 100% 50%; box-shadow: -18px 0 50px rgba(0, 0, 0, calc(.25 * var(--shade, 1))); }
.drape .folds, .drape .creases { position: absolute; inset: 0; }
.drape .folds {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, transparent 18%, transparent 82%, rgba(0, 0, 0, .18) 100%),
    repeating-linear-gradient(90deg, #22427f 0, #2c4f92 1.3vw, #1f3d77 2.5vw, #142a58 3.05vw, #1f3d77 3.6vw, #284a8b 4.8vw);
}
/* The darker side of each pleat, deeper as it folds up. */
.drape .creases {
  opacity: 0;
  background: repeating-linear-gradient(90deg, transparent 0, transparent 1.6vw, rgba(6, 14, 34, .5) 2.6vw, rgba(4, 10, 26, .8) 3.05vw, rgba(6, 14, 34, .45) 3.5vw, transparent 4.4vw, transparent 4.8vw);
}

/* ------------------------------------------------------------ Clipboard: a desk */
/* Everything is drawn in shares of a width, so the desk scales as one picture: on the desk, of the desk (cqw of .cb);
   on the screen, of the screen (--u). On a narrow screen --u is larger: the windows and the panel are drawn bigger
   and placed again, so their text stays readable on a phone. The scene is a Mac: left to right in every language. */
.cb { max-width: 880px; margin: 0 auto; container: cb / inline-size; direction: ltr; }
/* On the stage: as tall as the window leaves it under the title, the buttons and the steps. */
.theater-scene .cb { position: relative; z-index: 1; width: min(100%, 860px, calc((100vh - var(--taken, 383px)) * 1.37)); }
.cb-desk { position: relative; padding-bottom: 1.5cqw; }
.desk-display { position: relative; padding: 1.4cqw; border-radius: 2.3cqw; background: #19191c; box-shadow: 0 0 0 .22cqw #d5d8de, 0 0 0 .32cqw #b3b8c1, 0 2.6cqw 5cqw rgba(0, 0, 0, .13), 0 .6cqw 1.2cqw rgba(0, 0, 0, .06); }
.cb-screen { position: relative; isolation: isolate; aspect-ratio: 16 / 10; overflow: hidden; border-radius: .8cqw; container: cbscreen / inline-size; color: var(--ink); line-height: 1.35;
  background: radial-gradient(85% 70% at 80% 8%, rgba(255, 255, 255, .8), transparent 60%), radial-gradient(70% 60% at 6% 100%, #c3d0ee, transparent 70%), linear-gradient(150deg, #eaf0fb, #d6e0f4 55%, #cbd7ef); }
.cb-screen > * { --u: 1cqw; }
.desk-neck { width: 16cqw; height: 6.5cqw; margin: 0 auto; background: linear-gradient(90deg, #aab1bc, #dde1e6 22%, #eff1f4 50%, #dde1e6 78%, #aab1bc); clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%); }
.desk-base { width: 26cqw; height: 1cqw; margin: 0 auto; border-radius: .2cqw .2cqw .6cqw .6cqw; background: linear-gradient(180deg, #e6e9ed, #b4bac4); box-shadow: 0 1.4cqw 2.4cqw rgba(0, 0, 0, .12); }

/* The Mac: menu bar, two windows, the Dock. */
.mac-menubar { position: absolute; z-index: 4; inset: 0 0 auto; height: calc(var(--u) * 2.3); display: flex; align-items: center; gap: calc(var(--u) * 1.5); padding: 0 calc(var(--u) * 1.4); background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.mac-menubar b { width: calc(var(--u) * 3); height: calc(var(--u) * .6); border-radius: 99px; background: rgba(0, 0, 0, .17); }
.mac-menubar .mac-appname { width: calc(var(--u) * 3.6); background: rgba(0, 0, 0, .48); }
/* PasteMore in the menu bar: a small clipboard. */
.mac-pm { position: relative; width: calc(var(--u) * .9); height: calc(var(--u) * 1.15); border: max(1px, calc(var(--u) * .14)) solid rgba(0, 0, 0, .6); border-radius: calc(var(--u) * .22); }
.mac-pm::before { content: ""; position: absolute; left: 22%; right: 22%; top: calc(var(--u) * -.3); height: calc(var(--u) * .35); border-radius: calc(var(--u) * .1); background: rgba(0, 0, 0, .6); }
.mac-menubar span { flex: 1; }
.mac-menubar .mac-clock { width: calc(var(--u) * 4.4); }
.mac-apple { width: var(--u); height: var(--u); border-radius: 50%; background: #1d1d1f; opacity: .8; }
.mac-win { position: absolute; overflow: hidden; background: #fff; border-radius: var(--u); box-shadow: 0 calc(var(--u) * 1.6) calc(var(--u) * 4) rgba(20, 30, 60, .16), 0 0 0 1px rgba(0, 0, 0, .06); }
.cb-mail { left: 7%; top: 9%; width: 52%; height: 64%; }
.cb-msg { z-index: 1; left: 51%; top: 20%; width: 43%; height: 61%; display: flex; flex-direction: column; }
.mac-bar { flex: none; height: calc(var(--u) * 3); display: flex; align-items: center; gap: calc(var(--u) * .55); padding: 0 calc(var(--u) * 1.1); background: #f6f6f8; border-bottom: 1px solid #ececf0; }
.mac-bar i { width: calc(var(--u) * .85); height: calc(var(--u) * .85); border-radius: 50%; background: #ff5f57; transition: background-color .3s; }
.mac-bar i:nth-child(2) { background: #febc2e; }
.mac-bar i:nth-child(3) { background: #28c840; }
.mac-win.inactive .mac-bar i { background: #dcdce1; }
.mac-bar u { width: 40%; height: calc(var(--u) * 1.5); margin-left: calc(var(--u) * 2); border-radius: calc(var(--u) * .5); background: #ececf0; }
.cb-msg .mac-bar u { width: 18%; height: calc(var(--u) * .75); margin: 0 auto; border-radius: 99px; background: #d9d9df; translate: calc(var(--u) * -2.6) 0; }
.cb-head { display: flex; align-items: center; gap: var(--u); padding: calc(var(--u) * 1.4) calc(var(--u) * 1.8) var(--u); border-bottom: 1px solid #f0f0f3; }
.cb-avatar { flex: none; width: calc(var(--u) * 2.8); height: calc(var(--u) * 2.8); border-radius: 50%; background: linear-gradient(135deg, #b3c1dd, #7d90b8); }
.cb-head div { flex: 1; display: grid; gap: calc(var(--u) * .6); }
.cb-head b { width: 45%; height: calc(var(--u) * .75); border-radius: 99px; background: #d9d9df; }
.cb-head b.s { width: 70%; background: #ececf0; }
.cb-body { display: grid; gap: calc(var(--u) * 1.1); padding: calc(var(--u) * 1.6) calc(var(--u) * 1.8); font-size: calc(var(--u) * 1.45); }
.cb-body p { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.4; }
.cb-body .cb-bar-line { height: calc(var(--u) * .7); margin: calc(var(--u) * .45) 0; border-radius: 99px; background: #ececf1; }
.cb-body .cb-bar-line.short { width: 55%; }
/* A selection: grows under the text as it is dragged over; grey once another window has the keyboard. */
.cb-sel { position: relative; z-index: 0; unicode-bidi: plaintext; }
.cb-sel > i { --s: 0; position: absolute; z-index: -1; left: -.12em; top: -.04em; bottom: -.04em; width: calc((100% + .24em) * var(--s)); border-radius: .18em; background: #b4d5fe; transition: background-color .3s, opacity .35s; }
.cb-sel.off > i { opacity: 0; }
.cb-mail.inactive .cb-sel > i { background: #dcdce2; }
.cb-link { color: #1f63d6; text-decoration: underline; text-decoration-color: rgba(31, 99, 214, .35); text-underline-offset: .18em; }
.cb-thread { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(var(--u) * .8); padding: calc(var(--u) * 1.4) calc(var(--u) * 1.6); }
.cb-thread b { flex: none; align-self: center; width: 16%; height: calc(var(--u) * .6); margin-bottom: calc(var(--u) * .3); border-radius: 99px; background: #e4e4e9; }
.cb-thread span { flex: none; width: 58%; height: calc(var(--u) * 2.6); border-radius: calc(var(--u) * 1.3); }
.cb-thread .in { align-self: flex-start; background: #e9e9ee; }
.cb-thread .out { align-self: flex-end; width: 46%; background: #4b8cf5; }
.cb-thread .short { width: 34%; }
.cb-thread .wide { width: 70%; }
/* The message being written. The ring and the label are the app's own ("Pastes here"). */
.cb-input { position: relative; flex: none; margin: 0 calc(var(--u) * 1.4) calc(var(--u) * 1.4); min-height: calc(var(--u) * 3); padding: calc(var(--u) * .7) calc(var(--u) * 1.2); border-radius: calc(var(--u) * 1.5); border: 1px solid #dadade; background: #fff; font-size: calc(var(--u) * 1.4); line-height: 1.15; overflow-wrap: anywhere; transition: border-color .3s, box-shadow .3s; }
.cb-input.focus { border-color: rgba(47, 99, 196, .55); box-shadow: 0 0 0 calc(var(--u) * .3) rgba(47, 99, 196, .22); }
.cb-input::after { content: ""; position: absolute; inset: calc(var(--u) * -.5); border-radius: calc(var(--u) * 2); border: calc(var(--u) * .22) solid var(--navy-2); box-shadow: 0 0 calc(var(--u) * .8) rgba(47, 99, 196, .55); opacity: 0; transform: scale(1.04); transition: opacity .3s var(--ease), transform .45s var(--ease-out); pointer-events: none; }
.cb-input.target::after { opacity: 1; transform: none; }
.cb-here { position: absolute; left: calc(var(--u) * -.5); bottom: calc(100% + var(--u) * .9); display: inline-flex; align-items: center; gap: calc(var(--u) * .4); padding: calc(var(--u) * .35) calc(var(--u) * .8); border-radius: 99px; background: var(--navy-2); color: #fff; font-size: calc(var(--u) * 1.1); font-weight: 600; line-height: 1.2; white-space: nowrap; opacity: 0; transform: translateY(calc(var(--u) * .5)); transition: opacity .3s var(--ease), transform .45s var(--ease-out); }
.cb-input.target .cb-here { opacity: 1; transform: none; }
.cb-here svg { width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1); }
.cb-here .doc { fill: #fff; }
.cb-here .arr { fill: none; stroke: var(--navy-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Inline, so a long paste wraps and the caret follows its last word; it drops in by `top` (an inline box takes no
   transform). */
.cb-typed { position: relative; top: 0; unicode-bidi: plaintext; opacity: 0; transition: opacity .25s; }
.cb-typed.on { opacity: 1; animation: cbLand .5s var(--ease-out); }
.cb-typed.gone { display: none; }
@keyframes cbLand { from { opacity: 0; top: -.4em; } }
.cb-caret { display: inline-block; vertical-align: text-bottom; width: max(1px, calc(var(--u) * .13)); height: 1.15em; margin-left: 1px; background: var(--ink); opacity: 0; }
.cb-input.focus .cb-caret, .cb-panel.live .cb-caret { animation: cbBlink 1.06s linear infinite; }
@keyframes cbBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.mac-dock { position: absolute; z-index: 3; left: 50%; bottom: calc(var(--u) * .8); display: flex; gap: calc(var(--u) * .6); padding: calc(var(--u) * .55); border-radius: calc(var(--u) * 1.5); background: rgba(255, 255, 255, .42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 calc(var(--u) * .4) calc(var(--u) * 1.4) rgba(30, 40, 80, .1); transform: translateX(-50%); }
.mac-dock i { width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); border-radius: calc(var(--u) * .8); }
.mac-dock i:nth-child(1) { background: linear-gradient(#7cc4ff, #2f7df0); }
.mac-dock i:nth-child(2) { background: linear-gradient(#5eb0ff, #1f6fe8); }
.mac-dock i:nth-child(3) { background: linear-gradient(#6ee27b, #26b343); }
.mac-dock i:nth-child(4) { background: linear-gradient(#fdfdfd, #e2e4e8); }
.mac-dock i:nth-child(5) { background: linear-gradient(#ffe27a, #f7b928); }
.mac-dock i:nth-child(6) { background: linear-gradient(#ff7a8a, #f23d55); }
.mac-dock i:nth-child(7) { background: linear-gradient(#3d5f9e, #1c3c78); }

/* A copy, on its way to the clipboard at the screen's left edge; the edge glows as it takes it. ⌘C as it is pressed. */
.cb-edge { position: absolute; z-index: 5; left: 0; top: 0; bottom: 0; width: calc(var(--u) * 2.4); background: linear-gradient(90deg, rgba(47, 99, 196, .42), rgba(47, 99, 196, 0)); opacity: 0; pointer-events: none; }
.cb-chip { position: absolute; z-index: 6; left: 0; top: 0; max-width: calc(var(--u) * 20); padding: calc(var(--u) * .45) calc(var(--u) * .9); overflow: hidden; border-radius: calc(var(--u) * .7); background: #fff; box-shadow: 0 calc(var(--u) * .5) calc(var(--u) * 1.6) rgba(20, 30, 60, .18), 0 0 0 1px rgba(0, 0, 0, .05); font-size: calc(var(--u) * 1.2); line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; unicode-bidi: plaintext; opacity: 0; will-change: transform, opacity; }
.cb-keys { position: absolute; z-index: 6; left: 50%; bottom: calc(var(--u) * 6); display: flex; gap: calc(var(--u) * .5); padding: calc(var(--u) * .7); border-radius: calc(var(--u) * 1.2); background: rgba(28, 28, 32, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transform: translateX(-50%); }
.cb-keys kbd { display: grid; place-items: center; min-width: calc(var(--u) * 4); height: calc(var(--u) * 4); padding: 0; border: 0; border-radius: calc(var(--u) * .7); background: linear-gradient(#fafafa, #e3e3e8); box-shadow: 0 calc(var(--u) * .25) 0 #a7a7ae; color: var(--ink); font: 500 calc(var(--u) * 1.9)/1 -apple-system, BlinkMacSystemFont, sans-serif; }

/* The clipboard, as the app draws it against the left edge: search, filters, the copies, the keys. */
.cb-panel { position: absolute; z-index: 7; left: 0; top: calc(var(--u) * 2.3); bottom: 0; width: 31%; display: flex; flex-direction: column; background: rgba(246, 246, 249, .84); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); border-radius: 0 calc(var(--u) * 1.2) calc(var(--u) * 1.2) 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), calc(var(--u) * .8) 0 calc(var(--u) * 3) rgba(20, 30, 60, .2); transform: translateX(-104%); visibility: hidden; will-change: transform; }
.cb-search { display: flex; align-items: center; gap: calc(var(--u) * .7); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.3) calc(var(--u) * .5); overflow: hidden; color: #8e8e93; font-size: calc(var(--u) * 1.5); white-space: nowrap; }
.cb-search svg { flex: none; width: calc(var(--u) * 1.4); height: calc(var(--u) * 1.4); fill: none; stroke: #8e8e93; stroke-width: 1.8; stroke-linecap: round; }
.cb-search .cb-caret { margin: 0 calc(var(--u) * -.55) 0 0; }
.cb-filters { display: flex; gap: calc(var(--u) * .15); padding: calc(var(--u) * .4) var(--u) calc(var(--u) * .9); border-bottom: 1px solid rgba(0, 0, 0, .06); }
.cb-filters svg { flex: none; width: calc(var(--u) * 2.5); height: calc(var(--u) * 2.2); padding: calc(var(--u) * .5) calc(var(--u) * .65); border-radius: calc(var(--u) * .5); fill: none; stroke: #8e8e93; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cb-filters svg.on { background: rgba(0, 0, 0, .08); stroke: var(--ink); }
.cb-list { flex: 1; min-height: 0; display: grid; align-content: start; gap: calc(var(--u) * .55); margin: 0; padding: calc(var(--u) * .7); overflow: hidden; list-style: none; }
.cb-row { display: flex; align-items: center; gap: calc(var(--u) * .8); padding: calc(var(--u) * .55) calc(var(--u) * .65); border-radius: calc(var(--u) * .65); background: rgba(0, 0, 0, .04); box-shadow: inset 0 0 0 max(1px, calc(var(--u) * .1)) transparent; transition: background-color .15s, box-shadow .15s, color .15s; }
.cb-row.hover { background: rgba(0, 0, 0, .06); box-shadow: inset 0 0 0 max(1px, calc(var(--u) * .1)) rgba(47, 99, 196, .7); }
.cb-row.sel { background: rgba(29, 29, 31, .86); box-shadow: none; color: #fff; }
.cb-thumb { flex: none; display: grid; place-items: center; width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); border-radius: calc(var(--u) * .55); }
.cb-thumb svg { width: 72%; height: 72%; fill: none; stroke: #fff; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.cb-thumb.mail { background: linear-gradient(#5eb0ff, #1f6fe8); }
.cb-thumb.numbers { background: linear-gradient(#55d470, #1f9b3e); }
.cb-thumb.numbers svg { stroke-width: 2; }
.cb-thumb.terminal { background: linear-gradient(#3b3b40, #1c1c1f); }
.cb-thumb.messages { background: linear-gradient(#6ee27b, #26b343); }
.cb-thumb.messages svg { fill: #fff; stroke: none; }
.cb-thumb.file { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.cb-thumb.safari { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.cb-thumb.safari svg { stroke: #1f6fe8; }
.cb-thumb.image { overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.cb-thumb.image svg { width: 100%; height: 100%; stroke: none; }
.cb-thumb.file svg { stroke: #8e8e93; }
.cb-thumb.color { background: #1c3c78; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.cb-tx { flex: 1; min-width: 0; display: grid; gap: calc(var(--u) * .15); }
.cb-tx b, .cb-tx small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cb-tx b { font-size: calc(var(--u) * 1.25); font-weight: 400; unicode-bidi: plaintext; }
.cb-tx small { unicode-bidi: plaintext; }
.cb-tx small { color: #8e8e93; font-size: var(--u); }
.cb-row.sel small { color: rgba(255, 255, 255, .72); }
.cb-end { flex: none; display: grid; justify-items: end; align-items: center; }
.cb-end > * { grid-area: 1 / 1; }
.cb-end em { color: rgba(60, 60, 67, .5); font: 500 calc(var(--u) * .95)/1 ui-rounded, -apple-system, BlinkMacSystemFont, sans-serif; transition: opacity .15s; }
.cb-row.sel em { opacity: 0; }
.cb-paste { display: inline-flex; align-items: center; gap: calc(var(--u) * .35); padding: calc(var(--u) * .4) calc(var(--u) * .8); border-radius: 99px; background: var(--navy-2); color: #fff; font-size: var(--u); font-weight: 600; line-height: 1.2; white-space: nowrap; opacity: 0; transform: scale(.9); transition: opacity .18s, transform .2s var(--ease-out), background-color .12s; }
.cb-row.sel .cb-paste { opacity: 1; transform: none; }
.cb-row.sel .cb-paste.down { background: #244f9e; transform: scale(.95); }
.cb-paste svg { width: calc(var(--u) * 1.05); height: calc(var(--u) * 1.05); fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cb-foot { display: flex; align-items: center; gap: calc(var(--u) * .45); padding: calc(var(--u) * .7) calc(var(--u) * .9) calc(var(--u) * .8) calc(var(--u) * 1.2); border-top: 1px solid rgba(0, 0, 0, .06); color: #8e8e93; font-size: calc(var(--u) * .95); white-space: nowrap; }
.cb-foot kbd { padding: calc(var(--u) * .08) calc(var(--u) * .35); border: 0; border-radius: calc(var(--u) * .3); background: rgba(0, 0, 0, .07); color: #6e6e73; font: 600 calc(var(--u) * .85)/1.2 ui-rounded, -apple-system, BlinkMacSystemFont, sans-serif; }
.cb-foot kbd + span { margin-right: calc(var(--u) * .6); }
.cb-preview { position: relative; flex: none; display: flex; flex-direction: column; height: calc(var(--u) * 15); border-top: 1px solid rgba(0, 0, 0, .08); background: rgba(0, 0, 0, .035); }
.cb-pv { position: absolute; inset: 0 0 calc(var(--u) * 2.8); display: grid; align-content: start; gap: calc(var(--u) * .9); padding: calc(var(--u) * 1.3); overflow: hidden; font-size: calc(var(--u) * 1.3); opacity: 0; transition: opacity .2s; }
.cb-pv.on { opacity: 1; }
.cb-pv p { margin: 0; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.cb-pv svg { width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); fill: none; stroke: #8e8e93; stroke-width: 1.2; stroke-linecap: round; }
.cb-pv-foot { display: flex; align-items: center; gap: var(--u); height: calc(var(--u) * 2.8); margin-top: auto; padding: 0 var(--u) 0 calc(var(--u) * 1.3); border-top: 1px solid rgba(0, 0, 0, .05); color: #8e8e93; font-size: calc(var(--u) * .95); white-space: nowrap; }
.cb-pv-foot span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cb-pv-foot svg { flex: none; width: calc(var(--u) * 1.25); height: calc(var(--u) * 1.25); fill: none; stroke: #8e8e93; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.cb-count { min-width: 0; margin-left: auto; overflow: hidden; color: #b0b0b5; text-overflow: ellipsis; }
.cb-foot svg { flex: none; width: calc(var(--u) * 1.3); height: calc(var(--u) * 1.3); fill: none; stroke: #8e8e93; stroke-width: 1.3; stroke-linecap: round; }
/* The pointer: an arrow, an I-beam over text. Its hot spot is placed by the script. */
.mac-pointer { position: absolute; z-index: 9; left: 0; top: 0; width: calc(var(--u) * 1.5); height: calc(var(--u) * 2.1); pointer-events: none; will-change: transform; }
.mac-pointer svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mac-pointer .arrow path { fill: #111; stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; }
.mac-pointer .arrow { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .3)); }
/* A press of the mouse button: a ring opens where it goes down; a soft dot stays while it is held. */
.cb-click { position: absolute; z-index: 8; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.cb-click i { position: absolute; left: calc(var(--u) * -1.7); top: calc(var(--u) * -1.7); width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); border-radius: 50%; opacity: 0; }
.cb-click .ring { border: max(1.5px, calc(var(--u) * .2)) solid rgba(47, 99, 196, .8); }
.cb-click .dot { background: rgba(47, 99, 196, .26); transform: scale(.6); transition: opacity .12s; }
.mac-pointer .ibeam { display: none; }
.mac-pointer .ibeam path { fill: none; stroke: #111; stroke-width: 1.3; stroke-linecap: round; }
.mac-pointer .ibeam .outline { stroke: #fff; stroke-width: 3; }
.mac-pointer.text .arrow { display: none; }
.mac-pointer.text .ibeam { display: block; }

/* A phone: the screen taller, and its contents drawn larger. (On a short desktop window the desk is small too, but
   keeps a desktop's proportions: the stage works out its size from them.) */
@media (max-width: 600px) {
  .cb-screen { aspect-ratio: 4 / 3; }
}
@container cbscreen (max-width: 480px) {
  .cb-screen > * { --u: 1.75cqw; }
  .cb-mail { left: 3%; top: 10%; width: 66%; height: 58%; }
  .cb-msg { left: 56%; top: 28%; width: 41%; height: 58%; }
  .cb-panel { width: 54%; }
  .cb-here { font-size: calc(var(--u) * 1.2); }
  .mac-dock i { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); border-radius: calc(var(--u) * .6); }
  .mac-dock i:nth-child(n+6) { display: none; }
  .cb-keys { bottom: calc(var(--u) * 5); }
  .cb-preview { height: calc(var(--u) * 9); }
}

/* The four steps under the desk; the one being played is lit. */
.cb-steps { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; max-width: 880px; margin: 18px auto 0; padding: 0; list-style: none; }
.cb-steps li { display: flex; align-items: center; gap: 9px; color: var(--gray); font-size: 15px; transition: color .4s var(--ease); }
.cb-steps b { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); color: var(--gray); font-size: 12px; font-weight: 600; transition: background-color .4s var(--ease), color .4s, box-shadow .4s, transform .5s var(--ease-out); }
.cb-steps li.on { color: var(--ink); }
.cb-steps li.on b { background: var(--navy); box-shadow: none; color: #fff; transform: scale(1.08); }

/* ------------------------------------------------------------ Find: the clipboard as a window in the middle */
/* As the app's centred window: the search and the filters on one line, the list, the selected copy beside it.
   Drawn in --u like the desk's panel; a Mac's window, so left to right in every language (its texts in their own
   direction). Rows that do not match fold away. */
.fw { --u: 11px; max-width: 860px; margin: 0 auto; overflow: hidden; border-radius: 18px; background: rgba(246, 246, 249, .96); direction: ltr; text-align: left;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 34px 80px rgba(20, 30, 60, .16), 0 8px 22px rgba(20, 30, 60, .06); }
.fw-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px 12px 20px; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.fw-search { flex: 1 1 220px; min-width: 0; display: flex; align-items: center; gap: 10px; height: 32px; font-size: 19px; color: var(--ink); white-space: nowrap; overflow: hidden; }
.fw-search svg { flex: none; width: 19px; height: 19px; fill: none; stroke: #8e8e93; stroke-width: 1.8; stroke-linecap: round; }
.fw-q { unicode-bidi: plaintext; }
.fw-caret { flex: none; width: 1.5px; height: 22px; margin-left: -9px; background: var(--ink); animation: cbBlink 1.06s linear infinite; }
.fw-ph { margin-left: -9px; color: #a1a1a6; }
.fw-ph.off { display: none; }
.fw-filters { display: flex; gap: 2px; }
.fw-filters svg { flex: none; width: 32px; height: 30px; padding: 7px 8px; border-radius: 7px; fill: none; stroke: #8e8e93; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: background-color .25s, stroke .25s; }
.fw-filters svg.on { background: rgba(0, 0, 0, .08); stroke: var(--ink); }
.fw-body { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); height: 392px; }
.fw-list { margin: 0; padding: 8px; overflow: hidden; list-style: none; border-right: 1px solid rgba(0, 0, 0, .06); }
.fw-row { display: flex; align-items: center; gap: 10px; height: 48px; margin-bottom: 6px; padding: 0 10px 0 8px; overflow: hidden; border-radius: 9px; background: rgba(0, 0, 0, .04);
  transition: height .4s var(--ease), margin .4s var(--ease), opacity .3s var(--ease), background-color .15s, color .15s; }
.fw-row.out { height: 0; margin-bottom: 0; opacity: 0; }
.fw-row.sel { background: rgba(29, 29, 31, .86); color: #fff; }
.fw-row.sel small { color: rgba(255, 255, 255, .72); }
.fw-row .cb-thumb { width: 32px; height: 32px; border-radius: 8px; }
.fw-end { flex: none; display: flex; align-items: center; gap: 6px; color: rgba(60, 60, 67, .5); font: 500 11px/1 ui-rounded, -apple-system, BlinkMacSystemFont, sans-serif; }
.fw-end .pin { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.fw-row.sel .fw-end { color: rgba(255, 255, 255, .75); }
.fw-preview { display: flex; flex-direction: column; min-width: 0; padding: 22px 26px 16px; background: rgba(0, 0, 0, .02); }
.fw-pv { flex: 1; min-height: 0; display: grid; align-content: start; justify-items: start; gap: 12px; animation: fwIn .35s var(--ease-out); }
@keyframes fwIn { from { opacity: 0; transform: translateY(4px); } }
.fw-pv p { margin: 0; font-size: 21px; line-height: 1.35; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.fw-pv p.url { color: #1f63d6; font-size: 19px; }
.fw-pv b { font-size: 19px; font-weight: 500; unicode-bidi: plaintext; }
.fw-pv small { color: #8e8e93; font-size: 13px; }
.fw-swatch { width: 100%; height: 170px; border-radius: 12px; background: #1c3c78; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.fw-pic { width: 100%; height: 210px; overflow: hidden; border-radius: 12px; }
.fw-pic svg { display: block; width: 100%; height: 100%; }
.fw-doc svg { width: 72px; height: 72px; fill: none; stroke: #8e8e93; stroke-width: 1; stroke-linejoin: round; }
.fw-link svg { width: 34px; height: 34px; fill: none; stroke: var(--navy-2); stroke-width: 1.4; stroke-linecap: round; }
.fw-pv-foot { margin: 0; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, .06); color: #8e8e93; font-size: 13px; unicode-bidi: plaintext; }
.fw-foot { display: flex; align-items: center; gap: 6px; padding: 10px 20px; border-top: 1px solid rgba(0, 0, 0, .06); color: #8e8e93; font-size: 12px; white-space: nowrap; }
.fw-foot kbd { padding: 2px 6px; border: 0; border-radius: 4px; background: rgba(0, 0, 0, .07); color: #6e6e73; font: 600 11px/1.2 ui-rounded, -apple-system, BlinkMacSystemFont, sans-serif; transition: background-color .15s, color .15s, transform .15s; }
.fw-foot kbd + span { margin-right: 10px; }
.fw-foot kbd.press { background: var(--navy-2); color: #fff; transform: scale(1.12); }
@media (max-width: 700px) {
  .fw { --u: 10px; border-radius: 16px; margin: 0 calc(-.5 * var(--gutter)); }
  .fw-head { padding: 12px 14px 10px; }
  .fw-search { font-size: 17px; flex-basis: 100%; }
  .fw-body { grid-template-columns: minmax(0, 1fr); height: 300px; }
  .fw-list { border-right: 0; }
  .fw-preview { display: none; }
}

/* ------------------------------------------------------------ Private: a password turned away, a copy let in */
.pv { --u: 12px; position: relative; width: min(100%, 440px); margin: 0 auto; padding-top: 74px; direction: ltr; text-align: left; }
.pv-drop { position: absolute; z-index: 2; inset: 0 0 auto; height: 74px; pointer-events: none; }
.pv-chip { position: absolute; left: 50%; top: 12px; display: inline-flex; align-items: center; gap: 9px; max-width: 94%; padding: 7px 14px 7px 8px; border-radius: 12px; background: #fff;
  box-shadow: 0 10px 26px rgba(20, 30, 60, .16), 0 0 0 1px rgba(0, 0, 0, .05); font-size: 14px; white-space: nowrap; opacity: 0; transform: translate(-50%, -70%); will-change: transform, opacity, filter; transition: box-shadow .3s; }
.pv-chip b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; unicode-bidi: plaintext; }
.pv-chip .cb-thumb { width: 26px; height: 26px; border-radius: 7px; }
.pv-key { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(#3b3b40, #1c1c1f); }
.pv-key svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; }
.pv-secret b { letter-spacing: .14em; color: #3a3a3f; }
.pv-secret em { max-width: 0; overflow: hidden; opacity: 0; font-style: normal; font-size: 12px; font-weight: 600; color: #b3261e; transition: max-width .45s var(--ease-out), opacity .3s var(--ease); }
.pv-secret.stopped { box-shadow: 0 10px 26px rgba(20, 30, 60, .12), 0 0 0 1.5px rgba(179, 38, 30, .45); }
.pv-secret.stopped em { max-width: 140px; opacity: 1; }
.pv-card { position: relative; padding: 10px; border-radius: 18px; background: rgba(246, 246, 249, .96); box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 26px 64px rgba(20, 30, 60, .14); }
.pv-list { display: grid; margin: 0; padding: 0; list-style: none; }
.pv-list .cb-row { height: 54px; margin-bottom: 6px; padding-block: 0; overflow: hidden; transition: height .45s var(--ease), margin .45s var(--ease), opacity .35s var(--ease); }
.pv-list .cb-row:last-child { margin-bottom: 0; }
.pv-list .cb-thumb { width: 34px; height: 34px; border-radius: 9px; }
.pv-list .cb-row.new { height: 0; margin-bottom: 0; opacity: 0; }
.pv-list .cb-row.new.in { height: 54px; margin-bottom: 6px; opacity: 1; }
.pv-home { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; color: var(--gray); font-size: 14px; font-weight: 500; }
.pv-home svg { width: 24px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#private .ticker { margin-top: 26px; }

/* ------------------------------------------------------------ Where: left, right or center */
.wh { max-width: 600px; margin: 0 auto; direction: ltr; }
.wh-monitor { container: wh / inline-size; }
.wh-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1.8cqw solid #19191c; border-radius: 2.6cqw;
  background: radial-gradient(85% 70% at 80% 8%, rgba(255, 255, 255, .8), transparent 60%), radial-gradient(70% 60% at 6% 100%, #c3d0ee, transparent 70%), linear-gradient(150deg, #eaf0fb, #d6e0f4 55%, #cbd7ef);
  box-shadow: 0 0 0 .3cqw #c9cdd4, 0 3cqw 6cqw rgba(0, 0, 0, .12); }
.wh-screen::before { content: ""; position: absolute; z-index: 3; inset: 0 0 auto; height: 3.4%; background: rgba(255, 255, 255, .6); }
.wh-win { position: absolute; border-radius: 1.2cqw; background: #fff; box-shadow: 0 1.6cqw 4cqw rgba(20, 30, 60, .14), 0 0 0 1px rgba(0, 0, 0, .05); }
.wh-win::before { content: ""; position: absolute; inset: 0 0 auto; height: 4.4cqw; border-radius: 1.2cqw 1.2cqw 0 0; background: #f6f6f8; border-bottom: 1px solid #ececf0; }
.wh-win.w1 { left: 12%; top: 13%; width: 48%; height: 58%; }
.wh-win.w2 { left: 46%; top: 27%; width: 40%; height: 50%; }
.wh-dock { position: absolute; z-index: 1; left: 50%; bottom: 2.4%; width: 38%; height: 7%; border-radius: 1.4cqw; background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); transform: translateX(-50%); }
.wh-glow { position: absolute; z-index: 4; left: 0; top: 0; bottom: 0; width: 7%; opacity: 0; background: linear-gradient(90deg, rgba(47, 99, 196, .6), rgba(47, 99, 196, 0));
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.wh-glow.right { left: auto; right: 0; transform: scaleX(-1); }
.wh-panel { position: absolute; z-index: 5; left: 0; top: 3.4%; bottom: 0; width: 30%; display: grid; align-content: start; gap: 1.3cqw; padding: 2.2cqw 1.8cqw; opacity: 0;
  border-radius: 0 1.8cqw 1.8cqw 0; background: rgba(246, 246, 249, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 1cqw 0 3cqw rgba(20, 30, 60, .18); will-change: transform, opacity; }
.wh-panel b { height: 3.6cqw; margin-bottom: .6cqw; border-radius: 1cqw; background: rgba(0, 0, 0, .07); }
.wh-panel span { height: 4.4cqw; border-radius: 1cqw; background: rgba(0, 0, 0, .05); }
.wh-panel span:first-of-type { background: rgba(29, 29, 31, .82); }
.wh-screen[data-pos="right"] .wh-panel { left: auto; right: 0; border-radius: 1.8cqw 0 0 1.8cqw; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), -1cqw 0 3cqw rgba(20, 30, 60, .18); }
.wh-screen[data-pos="center"] .wh-panel { left: 50%; top: 52%; bottom: auto; width: 54%; height: 64%; border-radius: 1.8cqw; grid-template-columns: 1fr 1fr; grid-auto-rows: min-content; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 3cqw 7cqw rgba(20, 30, 60, .22); }
.wh-screen[data-pos="center"] .wh-panel b { grid-column: 1 / -1; }
.wh-screen[data-pos="center"] .wh-panel span { grid-column: 1; }
.wh-neck { width: 15cqw; height: 7cqw; margin: 0 auto; background: linear-gradient(90deg, #aab1bc, #dde1e6 22%, #eff1f4 50%, #dde1e6 78%, #aab1bc); clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%); }
.wh-foot { width: 25cqw; height: 1.1cqw; margin: 0 auto; border-radius: .2cqw .2cqw .6cqw .6cqw; background: linear-gradient(180deg, #e6e9ed, #b4bac4); box-shadow: 0 1.4cqw 2.4cqw rgba(0, 0, 0, .12); }
.wh-picks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 28px auto 0; }
.wh-picks button { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 11px; border: 1px solid rgba(0, 0, 0, .1); border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer;
  font: 500 14px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; white-space: nowrap; transition: background-color .3s var(--ease), color .3s, border-color .3s, box-shadow .3s; }
.wh-picks svg { width: 16px; height: 16px; fill: none; stroke: var(--navy-2); stroke-width: 1.4; stroke-linejoin: round; }
.wh-picks svg .fill { fill: var(--navy-2); stroke: none; opacity: .35; }
.wh-picks button[aria-checked="true"] { border-color: var(--navy); background: var(--navy); color: #fff; box-shadow: 0 8px 22px rgba(28, 60, 120, .22); }
.wh-picks button[aria-checked="true"] svg { stroke: #fff; }
.wh-picks button[aria-checked="true"] svg .fill { fill: #fff; }
.wh-picks button:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 2px; }
@media (hover: hover) { .wh-picks button:not([aria-checked="true"]):hover { border-color: rgba(28, 60, 120, .35); } }

/* ------------------------------------------------------------ Keys: each action, its key */
.kg { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 880px; margin: 0 auto; padding: 0; list-style: none; }
.kg li { flex: 0 1 200px; display: grid; justify-items: center; align-content: start; gap: 14px; padding: 28px 12px 22px; border-radius: 20px; background: var(--soft); text-align: center; font-size: 15px; line-height: 1.3; color: var(--gray);
  transition: background-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease); }
.kc { position: relative; display: flex; align-items: center; gap: 6px; height: 48px; direction: ltr; }
.kc kbd { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 10px; border: 0; border-radius: 10px; background: linear-gradient(#fff, #f3f3f6);
  box-shadow: 0 3px 0 #d6d8de, 0 4px 10px rgba(0, 0, 0, .06); color: #3a3a3f; font: 400 20px/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), color .25s; }
.kc kbd.w { min-width: 60px; font-size: 17px; }
.kg li.on { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 16px 36px rgba(28, 60, 120, .1); }
.kg li.on kbd { transform: translateY(3px); color: var(--navy-2); box-shadow: 0 0 0 #d6d8de, 0 1px 4px rgba(0, 0, 0, .08); }
/* Drag: an image taken by the pointer and carried out, again and again. */
.kg-drag .kc { width: 104px; }
.kg-target { position: absolute; right: 0; top: 2px; width: 44px; height: 44px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 4px 10px rgba(0, 0, 0, .05); }
.kg-target::before { content: ""; position: absolute; inset: 0 0 auto; height: 9px; border-radius: 8px 8px 0 0; background: #f2f2f5; border-bottom: 1px solid #e6e6ea; }
.kg-item { --u: 13px; position: absolute; z-index: 1; left: 2px; top: 8px; display: grid; animation: kgDrag 3.2s var(--ease) infinite; }
.kg-item .cb-thumb { width: 32px; height: 32px; border-radius: 8px; box-shadow: 0 6px 14px rgba(20, 30, 60, .18); }
.kg-ptr { position: absolute; z-index: 2; left: 22px; top: 26px; width: 13px; height: 18px; overflow: visible; animation: kgDrag 3.2s var(--ease) infinite; }
.kg-ptr path { fill: #111; stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; }
@keyframes kgDrag { 0%, 18% { transform: none; opacity: 1; } 60%, 74% { transform: translate(62px, 0); opacity: 1; } 86% { transform: translate(62px, 0); opacity: 0; } 87% { transform: none; opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (max-width: 600px) { .kg { gap: 10px; } .kg li { flex-basis: calc(50% - 5px); padding: 22px 8px 18px; font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .kg-item, .kg-ptr { animation: none; } }

/* ------------------------------------------------------------ The Mac family */
/* The headline rises word by word out of a soft blur. */
.words.rise .w { display: inline-block; opacity: 0; transform: translateY(.35em); filter: blur(8px); transition: opacity .9s var(--ease) var(--d, 0s), transform 1.1s var(--ease-out) var(--d, 0s), filter .9s var(--ease) var(--d, 0s), color .9s var(--ease) var(--d, 0s); }
.words.rise.in .w { opacity: 1; transform: none; filter: none; }
/* PasteMore on the left; the Macs it runs on pass by in circles on the right. */
.pair { display: grid; grid-template-columns: auto minmax(40px, 120px) minmax(0, 420px); align-items: center; justify-content: center; gap: clamp(14px, 3vw, 34px); max-width: 900px; margin: 0 auto; }
.pair figure { margin: 0; display: grid; justify-items: center; gap: 14px; }
.pair figcaption { font-size: 14px; font-weight: 600; color: var(--gray); white-space: nowrap; }
.pair-app img { width: clamp(70px, 10vw, 110px); height: auto; filter: drop-shadow(0 14px 22px rgba(28, 60, 120, .16)); }
/* A thin line with a light running along it, from PasteMore to the Macs. */
.pair-link { position: relative; height: 2px; border-radius: 2px; background: var(--faint-soft); overflow: hidden; }
.pair-link i { position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--navy-2), transparent); animation: pairRun 1.6s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes pairRun { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
.pair-macs { --disc: clamp(78px, 10vw, 118px); overflow: hidden; padding: 6px 0 4px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.pair-track { display: flex; column-gap: clamp(14px, 2vw, 24px); width: max-content; will-change: transform; }
.pair-mac .disc { display: grid; place-items: center; width: var(--disc); height: var(--disc); border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff, #f1f2f5 70%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05), 0 10px 24px rgba(0, 0, 0, .06); }
.pair-mac .disc svg { width: 64%; height: auto; overflow: visible; }
.pair-mac figcaption { font-size: 13px; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .pair-link i { animation: none; opacity: 0; } }

/* ------------------------------------------------------------ Pricing */
/* The lifetime price before its launch price: small, grey, struck through, above it. */
.was { margin: 8px 0 -6px; font-size: 17px; color: var(--gray); }
.was s { text-decoration-thickness: 1px; }
/* Not sure yet: the trial, set apart from the plans, as calm as they are. */
.undecided { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; max-width: 760px; margin: 18px auto 0; padding: 22px 26px; border-radius: 24px; background: var(--soft); }
.undecided b { display: block; font-size: 19px; color: var(--ink); }
.undecided span { color: var(--gray); }
.agree { max-width: 760px; margin: 14px auto 0; text-align: center; font-size: 13px; color: var(--gray); }
/* Give PasteMore: the wrapped gift beside a short form. */
.gift { display: grid; grid-template-columns: 220px 1fr; gap: 44px; align-items: center; max-width: 860px; margin: 0 auto; padding: 44px; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(180deg, #fff, var(--soft)); }
.gift-art { margin: 0; display: grid; place-items: center; }
.gift-art img { width: 140px; height: auto; filter: drop-shadow(0 18px 30px rgba(28, 60, 120, .16)); }
.gift-copy h2 { font-size: clamp(30px, 4.2vw, 44px); }
.gift-copy .soft { color: var(--gray); margin: 10px 0 22px; }
.gift-form { display: grid; gap: 14px; }
.gift-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gift-form label { display: grid; gap: 6px; font-size: 14px; color: var(--gray); position: relative; }
.gift-form input:not([type=radio]), .gift-form textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.gift-form textarea { resize: vertical; min-height: 84px; }
.gift-form input:focus, .gift-form textarea:focus { outline: 2px solid rgba(47, 99, 196, .22); border-color: var(--navy-2); }
.gift-form .count { position: absolute; right: 12px; bottom: 9px; font-size: 12px; color: var(--faint); }
.gift-when { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 15px; }
.gift-when legend { padding: 0; margin-bottom: 8px; font-size: 14px; color: var(--gray); }
.gift-when .choice { display: inline-flex; flex-direction: row; gap: 8px; align-items: center; font-size: 15px; color: var(--ink); cursor: pointer; }
.gift-when .choice input { accent-color: var(--navy); width: 17px; height: 17px; margin: 0; }
.gift-when input[type=date] { width: auto; }
.gift-form .button { justify-self: start; }
.gift-note { margin: 0; font-size: 14px; color: var(--gray); }
.gift-err { margin: 0; min-height: 1.2em; font-size: 14px; color: #b3261e; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 760px; margin: 0 auto; }
.plan { position: relative; border: 1px solid var(--line); border-radius: 24px; padding: 32px; }
.plan.best { border: 2px solid var(--navy); box-shadow: 0 20px 50px rgba(28, 60, 120, .1); }
.plan h3 { font-size: 22px; }
.price { font-size: 44px; font-weight: 600; letter-spacing: -0.02em; margin: 10px 0 6px; }
.price span { font-size: 17px; font-weight: 400; color: var(--gray); letter-spacing: 0; }
/* The amount itself stays large and dark; only the "/ year" beside it is small. */
.price span[data-amount] { font-size: inherit; font-weight: inherit; color: inherit; letter-spacing: inherit; }
.plan p { color: var(--gray); }
.plan .price { color: var(--ink); }
.plan .button { margin-top: 12px; }
.badge { position: absolute; top: -13px; left: 32px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px; }
/* "Add another Mac": one quiet row under the plans. */

/* ------------------------------------------------------------ FAQ */
.narrow h2 { text-align: center; margin-bottom: 30px; }
details { border-bottom: 1px solid var(--line); padding: 20px 0; }
summary { cursor: pointer; font-weight: 600; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--gray); font-weight: 400; transition: transform .3s var(--ease); }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--gray); margin: 12px 0 0; }

/* ------------------------------------------------------------ Final & footer */
.final { text-align: center; padding: 160px var(--gutter) 120px !important; }
.final .keys { margin: 0 auto 34px; }
.final h2 { font-size: clamp(36px, 5vw, 60px); line-height: 1.06; max-width: 900px; margin: 0 auto; }
/* "With PasteMore:" and a word that rises into place, Apple-style, then gives way to the next. */
.final-line { margin: 22px auto 40px; font: 600 clamp(26px, 3.6vw, 42px)/1.15 -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; letter-spacing: -0.02em; color: var(--gray); display: flex; justify-content: center; align-items: flex-end; gap: .32em; flex-wrap: wrap; }
.final-line > span:first-child { line-height: 1.25em; }
.rotator { position: relative; display: inline-block; height: 1.25em; overflow: hidden; vertical-align: bottom; transition: width .7s cubic-bezier(.2, .8, .2, 1); text-align: left; }
.rotator span { position: absolute; left: 0; top: 0; line-height: 1.25em; padding-right: .06em; white-space: nowrap; background: linear-gradient(90deg, var(--navy), var(--navy-2)); -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: translateY(105%); opacity: 0; filter: blur(6px); transition: transform .85s cubic-bezier(.2, .8, .2, 1), opacity .6s ease, filter .6s ease; }
.rotator span.in { transform: none; opacity: 1; filter: none; }
.rotator span.out { transform: translateY(-105%); opacity: 0; filter: blur(6px); }
footer { border-top: 1px solid var(--line); padding: 26px max(var(--gutter), calc((100vw - var(--max)) / 2)); display: flex; gap: 24px; justify-content: space-between; color: var(--gray); font-size: 12px; }
footer .copy { white-space: nowrap; }
footer .legal { max-width: 560px; }
/* Round 17: the second line (teams, partners), small and quiet under the legal links. */
footer .links { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; text-align: end; }
footer .links a { color: var(--gray); } footer .links a:hover { color: var(--ink); }
/* A partner's link: whose code it is and what it gives, under the prices' title. */
.ref-note { font-size: 14px; color: var(--navy-2); margin: 12px 0 0; }

/* ------------------------------------------------------------ Small screens */
/* Up to 1020 px (the longest language, Portuguese, needs about 905 px for the full bar at its larger size) the bar
   keeps the name, the trial and the menu button; the links and languages go into the sheet. */
@media (max-width: 1020px) {
  .nav-links, .lang-menu { display: none; }
  .nav-bar nav { gap: 6px; }
  .nav-toggle { display: block; }
  .nav-sheet {
    position: fixed; inset: 0; z-index: 0; display: flex; flex-direction: column; gap: 30px;
    padding: 82px var(--gutter) max(30px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
    background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility 0s .25s;
  }
  .nav.open .nav-sheet { opacity: 1; visibility: visible; transition: opacity .25s var(--ease); }
  .sheet-links { display: flex; flex-direction: column; }
  .sheet-links a { padding: 20px 4px; border-bottom: 1px solid rgba(0, 0, 0, .08); color: var(--ink); font-size: 19px; font-weight: 500; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s; }
  .nav.open .sheet-links a { opacity: 1; transform: none; transition: opacity .4s var(--ease) var(--d), transform .6s var(--ease-out) var(--d); }
  .sheet-langs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .sheet-langs button { height: 32px; padding: 0 12px; border: 1px solid rgba(0, 0, 0, .1); border-radius: 999px; background: none; color: var(--gray); font: 500 13px -apple-system, sans-serif; cursor: pointer; }
  .sheet-langs button[aria-pressed="true"] { border-color: transparent; background: var(--soft); color: var(--ink); font-weight: 600; }
  html.menu-open { overflow: hidden; }
}

@media (max-width: 860px) {
  .band { padding-top: 100px !important; }
  /* The longer clipboard lines take two lines on a phone. */
  .ticker { height: 3em; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
  .ticker span { padding: 0 18px; }
  .ticker span { white-space: normal; }
  .pair { grid-template-columns: auto 28px minmax(0, 1fr); gap: 10px; }
  .pair-macs { --disc: 72px; }
  .pair-mac figcaption, .pair figcaption { font-size: 12px; }
  .plans { grid-template-columns: 1fr; }
  .gift { grid-template-columns: 1fr; padding: 28px 20px; gap: 18px; }
  .gift-row { grid-template-columns: 1fr; }
  .pair { gap: 18px; }
  .cb-steps { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 10px 22px; margin-top: 14px; }
  .cb-steps li { font-size: 14px; }
  footer { flex-direction: column; }
  footer .links { align-items: flex-start; text-align: start; }
  .scene-head { margin-bottom: 14px; }
}

@media (max-width: 520px) {
  .nav .button.small { padding: 0 12px; font-size: 12px; }
  .hero { padding-top: 110px !important; }
  .hero-stage { height: 290px; }
  .keys { gap: 10px; }
  .keycap { width: 82px; height: 76px; border-radius: 16px; font-size: 31px; }
  .keycap.wide { width: 110px; }
  .clip-chip { bottom: 8px; }
  .chip { font-size: 13px; padding: 8px 14px; }
}

/* Narrow phones: the pill reaches 16 px from the screen's edges (at the top the name still lines up with the page)
   and its spacing tightens, so the longest trial label (Polish) still fits; under 340 px only the icon stands for
   the name. Phones keep the bar at its own size (larger, the longest trial label, Polish, would not fit). */
@media (max-width: 440px) { .nav-bar { zoom: 1; } }
@media (max-width: 400px) {
  .nav { width: calc(100% - 32px); }
  .nav-bar { gap: 10px; padding-inline: 8px; }
  .nav.scrolled .nav-bar { padding-inline: 12px 4px; }
  .nav-bar nav { gap: 4px; }
  .nav .brand { gap: 8px; font-size: 15px; }
  .nav .button.small { padding: 0 10px; }
}
@media (max-width: 340px) { .nav .brand span { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav.ready .nav-bar { transition: background-color .3s, border-color .3s; }
  .sheet-links a, .nav.open .sheet-links a { transform: none; }
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .words .w { color: var(--ink) !important; transition: none; }
  .words.soft .w { color: var(--gray) !important; }
  .halo { animation: none; }
  .th-picks.hint .th-pick { animation: none !important; }
  /* The stage's title keeps following the curtain (white on navy); a still picture has no running line. */
  .theater-scene .scene-head .words .w { color: var(--hc, var(--ink)) !important; }
  .theater-scene .scene-head .words.soft .w { color: var(--hc2, var(--gray)) !important; }
  .th-pick i { display: none; }
}


/* Arabic and Hebrew read right to left, so the page mirrors. These pictures keep their own geometry: a Mac's screen
   is laid out left to right in every language, and the Macs slide in from the right. */
[dir="rtl"] :is(.pair-track, .keys, .wh-picks) { direction: ltr; }
[dir="rtl"] .wh-picks button { direction: rtl; }
[dir="rtl"] .pv-home { direction: rtl; }

/* The trial download: a calm sheet with the progress, then the three steps (assets/download.js). */
.dl-sheet { position: fixed; left: 50%; bottom: 24px; z-index: 60; width: min(360px, calc(100vw - 32px)); padding: 18px 20px 16px;
            background: rgba(255, 255, 255, .94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 18px;
            border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, .16); color: var(--ink); text-align: start;
            transform: translate(-50%, 16px); opacity: 0; transition: transform .45s var(--ease-out), opacity .3s; }
.dl-sheet.in { transform: translate(-50%, 0); opacity: 1; }
.dl-sheet b { display: block; font-size: 14.5px; font-weight: 600; }
.dl-x { position: absolute; top: 8px; inset-inline-end: 10px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none;
        color: var(--gray); font-size: 18px; line-height: 1; cursor: pointer; }
.dl-x:hover { background: var(--soft); color: var(--ink); }
.dl-bar { height: 4px; margin: 12px 0 7px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.dl-bar i { display: block; height: 100%; background: var(--navy); border-radius: 4px; transform: scaleX(0); transform-origin: left; transition: transform .2s linear; }
[dir="rtl"] .dl-bar i { transform-origin: right; }
.dl-bar.unknown i { width: 30%; transform: none; animation: dlSlide 1.1s ease-in-out infinite; }
@keyframes dlSlide { from { margin-inline-start: -30%; } to { margin-inline-start: 100%; } }
.dl-sheet small { color: var(--gray); font-size: 12px; font-variant-numeric: tabular-nums; }
.dl-done { display: none; }
.dl-sheet.done .dl-load { display: none; }
.dl-sheet.done .dl-done { display: block; animation: dlIn .5s var(--ease-out); }
@keyframes dlIn { from { opacity: 0; transform: translateY(6px); } }
.dl-sheet ol { margin: 4px 0 8px; padding-inline-start: 20px; font-size: 13.5px; line-height: 1.5; color: #3a3a3c; }
.dl-again { font-size: 12px; color: var(--gray); text-decoration: underline; }
/* Drag PasteMore onto Applications: the icon glides across, again and again. */
.dl-art { position: relative; height: 70px; margin: 12px 0 6px; border-radius: 12px; background: var(--soft); direction: ltr; }
.dl-app { position: absolute; left: 22%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 9px; }
/* The copy glides from the icon to the folder by its own left edge: no measured width (Safari ignores variables inside
   keyframes, so it stopped halfway — round 13). */
.dl-ghost { opacity: 0; animation: dlDrag 2.8s var(--ease) infinite; }
@keyframes dlDrag { 0%, 12% { left: 22%; transform: none; opacity: 0; } 22% { left: 22%; transform: translateY(-4px) scale(1.04); opacity: .9; }
                    66% { left: 78%; transform: translateY(-4px) scale(1.04); opacity: .9; } 80%, 100% { left: 78%; transform: scale(.55); opacity: 0; } }
.dl-arrow { position: absolute; left: 50%; top: 50%; width: 52px; height: 12px; margin: -6px 0 0 -26px; }
.dl-arrow path { fill: none; stroke: #c2c2c8; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dl-folder { position: absolute; left: 78%; top: 50%; width: 44px; height: 37px; margin: -19px 0 0 -22px; }
.dl-folder .b { fill: #4a8fe0; } .dl-folder .f { fill: #6eaaf0; }
.dl-folder .a { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
@media (prefers-reduced-motion: reduce) { .dl-ghost { animation: none; } }