/* Version 7: version 6 (few words, set loud; a coded, animated picker drawn after the real
   PickerView; the questions as large as the rest), made clearer to buy from: what koppie is and
   a way to buy in the hero, the demo's two promises in its margins, a shorter FAQ with the
   how-tos tucked away, and which Macs by the button. Version 6 is kept in v6/. */
:root {
  --paper: #F1EFE5;
  --ink: #171914;
  --lime: #C6F432;
  --blue: #263EE8;
  --orange: #F17842;
  --pink: #EFB6CF;
  --mono: "Courier New", ui-monospace, monospace;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
  --system: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pad: clamp(14px, 3vw, 44px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.4 var(--sans); overflow-x: hidden; }
h1, h2, p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
::selection { background: var(--lime); }
em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.mono { font: 12px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.buy { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; background: var(--ink); color: var(--lime); text-decoration: none; font: 700 16px/1 var(--sans); white-space: nowrap; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.buy:hover { transform: scale(1.06) rotate(-2deg); }
.buy em { font-size: 1.15em; }
.fill { display: block; font-weight: 800; letter-spacing: -.08em; line-height: .76; white-space: nowrap; }

/* The picker's order badges (the pink cat, the cobalt triangle and hexagon, the lime cat), as
   the phone's steps and the demo's caption stamp them. */
:root {
  --badge-cat-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 28 28'%3E%3Cpath d='M5.5 9.5 L4.5 2.5 L10 6 Q13 5.2 16 6 L21.5 2.5 L20.5 9.5 Q24 13.5 21.2 18.8 Q18.5 24 13 24 Q7.5 24 4.8 18.8 Q2 13.5 5.5 9.5Z' fill='%23EFB6CF' stroke='%23fff' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --badge-triangle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 28 28'%3E%3Cpath d='M13 2 L24.5 22.5 L1.5 22.5Z' fill='%23263EE8' stroke='%23fff' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --badge-hexagon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 28 28'%3E%3Cpath d='M13 1.5 L23 7.2 L23 18.8 L13 24.5 L3 18.8 L3 7.2Z' fill='%23263EE8' stroke='%23fff' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --badge-cat-lime: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 28 28'%3E%3Cpath d='M5.5 9.5 L4.5 2.5 L10 6 Q13 5.2 16 6 L21.5 2.5 L20.5 9.5 Q24 13.5 21.2 18.8 Q18.5 24 13 24 Q7.5 24 4.8 18.8 Q2 13.5 5.5 9.5Z' fill='%23C6F432' stroke='%23fff' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 1. The loop and the line. */
/* --lift is how far the demo's screen rises over the hero's foot; the hero leaves room for it. */
:root { --lift: clamp(90px, 16vw, 260px); }
.hero { position: relative; min-height: 100svh; overflow: hidden; display: grid; justify-items: center; padding: clamp(18px, 3vw, 40px) var(--pad) calc(var(--pad) + var(--lift)); }
/* The loop, pasted again and again in the brand's materials; the copies trail the pointer. */
.hero { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: 1fr; column-gap: clamp(10px, 2vw, 30px); }
.stack { position: relative; grid-column: 2; grid-row: 1; align-self: center; width: min(44vw, 64svh); aspect-ratio: 1; margin: clamp(10px, 3vw, 40px) 0; }
.stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.stack .ghost { transform: translate(calc(var(--i) * var(--dx, 2.2vw)), calc(var(--i) * var(--dy, 1.6vw))) rotate(var(--r)); filter: drop-shadow(0 12px 18px #17191422); }
/* The front loop leans a little the other way, as if the copies tugged at it. */
.stack .top { position: relative; z-index: 2; transform: translate(calc((var(--dx, 2.2vw) - 2.2vw) * -.35), calc((var(--dy, 1.6vw) - 1.6vw) * -.35)) rotate(calc(var(--r) + var(--tilt, 0deg))); filter: drop-shadow(0 30px 30px #17191433); }
/* The line, split around the loop: what you lose, then who keeps it. */
.say { position: relative; z-index: 3; grid-row: 1; font: 800 clamp(38px, 6.4vw, 118px)/.86 var(--sans); letter-spacing: -.065em; }
.say-1 { grid-column: 1; justify-self: end; align-self: start; text-align: right; margin-top: clamp(30px, 8vh, 110px); }
.say-2 { grid-column: 3; justify-self: start; align-self: end; margin-bottom: clamp(30px, 8vh, 110px); }
.say-2 em { display: inline-block; background: var(--lime); padding: 0 .12em .06em; font-size: 1.12em; letter-spacing: -.03em; transform: rotate(-4deg); }
.say h1 { font: inherit; letter-spacing: inherit; }
/* What koppie is, pencilled under the line as a caption would be: small, after the shout. */
/* A slip of paper, so it reads where it crosses the loop's pile. */
.say .note { display: flex; align-items: center; gap: 10px; width: fit-content; margin-top: clamp(14px, 1.6vw, 24px); padding: 6px 10px 6px 0; background: var(--paper); font: 700 clamp(11px, .95vw, 14px)/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.say .note::before { content: ""; width: 28px; height: 2px; background: var(--ink); flex: none; }
/* The way to buy, stuck in the corner like a price sticker: there, but quieter than the line. */
.hero-buy { position: absolute; z-index: 4; top: clamp(16px, 2.2vw, 30px); right: var(--pad); padding: 10px 15px; font-size: 14px; gap: 6px; rotate: 3deg; }
.hero-buy span { opacity: .6; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* 2. The app, in code. A 1280 × 752 Mac desktop scaled to fit; the picker is drawn after the
   real PickerView (its sizes, colours, tilts, tape and stickers come from the app's tokens), and
   a little keyboard below presses the keys. */
.demo { position: relative; z-index: 2; display: flow-root; overflow-x: clip; padding: 0 var(--pad) clamp(4px, .6vw, 10px); }
/* A screen with the scene, and the keyboard below it. */
/* The screen starts up in the hero, over its foot. */
.laptop { position: relative; width: min(100%, (100svh - 200px) / .85); margin: calc(-1 * var(--lift)) auto 0; }
/* A thin, quiet bezel. */
/* White like the keyboard, with the same soft sheen; a fine edge and a shadow keep it off the paper. */
.lid { position: relative; padding: .9%; background: linear-gradient(#FAF9F4, #ECEAE1); border-radius: clamp(10px, 1.3vw, 18px);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px #17191412, 0 1px 2px #17191424, 0 14px 34px -10px #1719143d; }
.lid::before { content: ""; position: absolute; left: 50%; top: .32%; width: .38%; aspect-ratio: 1; border-radius: 50%; background: #CFCCC0; translate: -50% 0; }
.viewport { box-shadow: 0 0 0 1px #17191414; }
/* A quiet glass button in the screen's bottom-right corner that takes the wallpaper home; its
   label slides out only on hover or focus. It sits over the screen, not inside the scene. */
.wall-dl { position: absolute; z-index: 6; right: calc(.9% + 10px); bottom: calc(.9% + 10px); display: inline-flex; align-items: center; height: 26px; padding: 0 6px; border-radius: 999px;
  background: #ffffff4d; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: inset 0 0 0 .5px #ffffff80, 0 1px 3px #1719141f;
  color: var(--ink); opacity: .5; text-decoration: none; font: 600 11px/1 var(--system); transition: opacity .2s; }
.wall-dl:hover, .wall-dl:focus-visible { opacity: 1; }
/* What the hands just pressed, shown for a moment on the screen's bottom edge, as a key-caster
   would: small paper keys on a smoked-glass strip. It sits over the screen, so it stays in view
   when a phone crops the desktop. */
.keycast { position: absolute; z-index: 7; left: 50%; bottom: 5%; display: flex; gap: 5px; padding: 6px; border-radius: 13px; background: #17191494; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 .5px #ffffff33, 0 6px 20px #17191433; translate: -50% 0; opacity: 0; scale: .9; pointer-events: none; transition: opacity .3s, scale .3s; }
.keycast.on { opacity: 1; scale: 1; transition: opacity .1s, scale .35s cubic-bezier(.3, 1.6, .5, 1); }
.keycast kbd { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 7px; background: var(--paper); color: var(--ink); box-shadow: 0 2px 0 #0000008c; font: 600 14px/1 var(--system); }
.keycast svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wall-dl svg { flex: none; width: 14px; height: 14px; }
.wall-dl span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s ease, margin .3s ease; }
.wall-dl:hover span, .wall-dl:focus-visible span { max-width: 9em; margin: 0 4px 0 6px; }
.viewport { position: relative; width: 100%; aspect-ratio: 1280 / 752; border-radius: 4px; overflow: hidden; }
/* The keyboard sits under the screen on its own, lying flat and seen from a little above.
   .deck is its container, so the slab's own sizes are shares of its width too. */
.deck { position: relative; container-type: inline-size; margin: clamp(26px, 3.4vw, 50px) auto -13%; width: 50%; perspective: 1100px; perspective-origin: 50% -40%; }
/* Its shadow on the desk: soft, wide and offset forward, darkest right under the front edge. */
.deck::after { content: ""; position: absolute; z-index: -1; left: 2%; right: 2%; top: 18%; height: 26%; border-radius: 50%; background: radial-gradient(50% 60% at 50% 55%, #000000b3, #00000040 60%, #0000 100%); filter: blur(10px); }
/* A white slab: rounded like a real keyboard, a sheen across its top, the keys sunk in a well,
   and one solid front edge, a shade greyer, for its thickness. */
.deck .board { position: relative; transform-origin: 50% 0; transform: rotateX(64deg); padding: 1.6cqw 1.8cqw 1.9cqw; border-radius: 3.4cqw;
  background: linear-gradient(100deg, #ffffff00 20%, #ffffffb3 45%, #ffffff00 62%), linear-gradient(#FAF9F4, #E9E7DE 55%, #DCDAD0);
  box-shadow: inset 0 .25cqw 0 #ffffff, inset 0 -.25cqw .1cqw #0000001f, inset 0 0 0 .12cqw #00000014, 0 .5cqw 0 #D5D3C9, 0 1cqw 0 #C4C2B7, 0 1.5cqw 0 #B2B0A5, 0 2cqw 0 #9F9D92, 0 2.1cqw 0 #6F6D64; }
/* With WebGL the 3D keyboard replaces the CSS one, which stays only to hold the keys' state. */
.deck.has3d { perspective: none; width: 72%; margin-top: clamp(30px, 4.4vw, 70px); }
.deck.has3d::after { display: none; }
.deck.has3d canvas { display: block; }
.deck.has3d .board { position: absolute; inset: 0 auto auto 0; width: 100%; visibility: hidden; }
.stage { position: absolute; left: 0; top: 0; width: 1280px; height: 752px; transform-origin: 0 0; background: url("assets/wallpapers/ribbon-current.jpg") center / cover; font-family: var(--system); color: #171914; -webkit-font-smoothing: antialiased; }

/* The macOS menu bar: 24 pt, the Apple menu first, extras left of the system ones (HIG). */
.mbar { position: absolute; inset: 0 0 auto; height: 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px 0 13px; background: #ffffff70; backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); font-size: 13px; z-index: 5; }
.mbar > div:first-child { display: flex; align-items: center; }
.mbar > div:first-child span { margin-right: 17px; }
.mbar .apple { width: 12px; height: auto; margin-right: 19px; opacity: .88; }
.mbar .right img { opacity: .86; }
.mbar b { font-weight: 700; margin-right: 17px; }
.mbar .right { display: flex; align-items: center; gap: 13px; }
.mbar .right #clock { margin-left: 3px; }
.mbar .mark { width: 17px; height: 17px; }
/* On a dark wallpaper macOS turns the menu bar's text and icons white. */
.stage.dark .mbar { background: #00000030; color: #fff; }
.stage.dark .mbar img { filter: invert(1); }
.mbar .mark.wiggle { animation: wiggle .3s steps(5); }
@keyframes wiggle { 0% { rotate: -16deg; } 20% { rotate: 12deg; } 40% { rotate: -7deg; } 60% { rotate: 3deg; } 100% { rotate: 0; } }

/* Windows: where things get copied from, and where they get pasted. */
.win { position: absolute; background: #fff; border-radius: 12px; box-shadow: 0 0 0 .5px #0003, 0 20px 50px #0004; overflow: hidden; }
.win .title { height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #F3F2EE; border-bottom: 1px solid #0001; font-size: 13px; font-weight: 600; }
.win .title i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; flex: none; }
.win .title i:nth-child(2) { background: #FEBC2E; }
.win .title i:nth-child(3) { background: #28C840; margin-right: auto; }
.win .title span { margin-right: auto; padding-right: 60px; }
.notes { left: 60px; top: 66px; width: 440px; height: 236px; }
.notes .page { padding: 22px 26px; font-size: 15px; line-height: 1.55; }
.sel { background: linear-gradient(#B3D7FF, #B3D7FF) 0 0 / 0% 100% no-repeat; transition: background-size .7s linear; }
.sel.on { background-size: 100% 100%; }
.flash { animation: flash .35s; }
@keyframes flash { 50% { filter: brightness(1.25); } }
.photo { left: 830px; top: 56px; width: 380px; height: 330px; }
.photo img { width: 100%; height: 300px; object-fit: cover; outline: 0 solid #2F7BF6; outline-offset: -3px; transition: outline-width .1s; }
.photo img.picked { outline-width: 3px; }
.photo.two { left: 975px; top: 404px; width: 270px; height: 300px; }
.photo.two img { height: 270px; }
/* Safari, open on the Figma file: clicking the address bar selects the link. */
.safari { left: 520px; top: 76px; width: 296px; height: 232px; }
.safari .title { justify-content: flex-start; }
.safari .bar { width: 206px; height: 20px; display: grid; place-items: center; border-radius: 6px; background: #0000000d; font-size: 10px; font-weight: 500; color: #55574E; transition: background .15s; }
.win.safari .title span { padding: 0 4px; margin: 0; border-radius: 3px; white-space: nowrap; }
.win.safari .title .bar { margin: 0 auto 0 8px; padding: 0; }
.safari .bar.on { background: #fff; box-shadow: 0 0 0 3px #2F7BF655; }
.safari .bar.on span { background: #B3D7FF; color: #171914; }
.safari .site { display: grid; grid-template-columns: 44px 1fr; height: 202px; background: #2C2C2C; }
/* The file is the pitch's slides, drawn as wireframes, so the link never looks like a picture. */
.safari .site i { background: repeating-linear-gradient(#0000 0 10px, #5a5a5a 10px 13px, #0000 13px 18px) 8px 10px / 26px 80px no-repeat, #383838; border-right: 1px solid #0006; }
.safari .site div { display: grid; align-content: center; justify-items: start; gap: 8px; padding: 0 18px; font-size: 10px; color: #BDBDBD; }
.safari .frames { display: grid; grid-template-columns: repeat(2, 92px); gap: 10px; }
.safari .frames s { height: 56px; border-radius: 2px; background: linear-gradient(#8a8a8a, #8a8a8a) 8px 9px / 46% 5px no-repeat, linear-gradient(#5a5a5a, #5a5a5a) 8px 20px / 70% 3px no-repeat, linear-gradient(#5a5a5a, #5a5a5a) 8px 27px / 58% 3px no-repeat, linear-gradient(#5a5a5a, #5a5a5a) 8px 34px / 64% 3px no-repeat, #3a3a3a; }
.doc { left: 330px; top: 340px; width: 620px; height: 370px; }
.doc .page { padding: 22px 30px; font-size: 15px; line-height: 1.5; }
.doc .page h4 { margin: 0 0 12px; font-size: 21px; }
.doc .page p { margin: 0 0 10px; }
.doc .page img { display: inline-block; width: 120px; border-radius: 6px; margin-right: 10px; vertical-align: bottom; }
.doc .page a { color: #263EE8; }
.doc .caret { display: inline-block; width: 2px; height: 18px; background: #263EE8; vertical-align: -3px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.doc .pasted { opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.doc .pasted.in { opacity: 1; transform: none; }

/* The picker. */
.picker { position: absolute; z-index: 6; left: 230px; top: 112px; width: 820px; height: 520px; border-radius: 28px; background: #E6E1CB; box-shadow: 0 0 0 .5px #0002, 0 30px 80px #0005; opacity: 0; transform-origin: 50% 0; pointer-events: none; }
.picker.open { animation: springOpen .42s both; }
.picker.shut { opacity: 0; animation: none; }
@keyframes springOpen { 0% { opacity: 0; transform: scale(.94); } 30% { opacity: 1; } 55% { transform: scale(1.012); } 80% { transform: scale(.998); } 100% { opacity: 1; transform: scale(1); } }
.list { position: absolute; left: 10px; top: 10px; width: 328px; height: 500px; background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px #00000012, 0 1px 3px #00000014; padding: 8px; overflow: hidden; }
.tabs { position: relative; display: flex; height: 34px; padding: 3px; border-radius: 999px; background: #0000000d; margin-bottom: 6px; }
.tabs span { flex: 1; display: grid; place-items: center; font-size: 13px; color: #55574E; position: relative; z-index: 1; transition: color .2s; }
.tabs span.off { color: #A3A497; }
.tabs span.on { font-weight: 800; color: var(--on, #1A2200); }
/* The active tab's pill: a little oversized, leaning 4° one way or the other, in the tab's colour. */
.tabs .pill { position: absolute; z-index: 0; top: 2px; bottom: 2px; left: 3px; width: calc((100% - 6px) / 5); border-radius: 999px; background: var(--lime); box-shadow: 0 0 0 2px #fff, 0 1px 3px #0000004d; transform: translateX(calc(var(--tab, 0) * 100%)) rotate(var(--lean, -4deg)) scale(1.06); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1), background .3s; }
.head { font: italic 15px/30px var(--serif); color: #55574E; padding: 0 10px; margin-top: 4px; }
.row { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 11px 10px; border-radius: 10px; font-size: 13px; line-height: 1.38; min-height: 44px; transition: background .15s; }
.row .txt { flex: 1; min-width: 0; }
.row .time { width: 38px; text-align: right; font-size: 11px; color: #6B6D63; font-variant-numeric: tabular-nums; padding-top: 1px; }
.row .slot { width: 26px; height: 18px; flex: none; position: relative; }
.row.cursor { background: #0000000b; }
.row.kept { background: #C6F4322e; }
.row.kept.cursor { background: #C6F4324d; }
.row.app { align-items: center; }
.row.app .time { padding-top: 0; }
.row.code .txt { white-space: pre; }
.thumbwrap { position: relative; flex: none; margin: -6px 0; }
.thumb { display: block; width: 48px; height: 32px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 .5px #0002; }
/* A kept thumbnail in a row gets a lime ring; in the grid only the cell does (see .cell.kept). */
.kept .thumb { box-shadow: 0 0 0 2px var(--lime), 0 1px 2px #0003; }
/* Lime tape on a kept thumbnail, as on the footer's prints. */
.tape { position: absolute; left: -9px; top: -2px; width: 30px; height: 10px; background: #C6F432e6; box-shadow: 0 0 0 .5px #1A220059; transform: rotate(-36deg); clip-path: polygon(0 10%, 8% 0, 16% 12%, 24% 0, 76% 0, 84% 12%, 92% 0, 100% 10%, 100% 90%, 92% 100%, 84% 88%, 76% 100%, 24% 100%, 16% 88%, 8% 100%, 0 90%); }
/* The select socket on the cursor row, and the badges. */
.socket { position: absolute; right: 2px; top: -1px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #fff, 0 .5px 2px #00000040; }
.badge { position: absolute; right: -2px; top: -5px; width: 26px; height: 26px; display: grid; place-items: center; font: 800 11px/1 var(--system); filter: drop-shadow(0 1px 1.5px #0004); transform: rotate(var(--r)); animation: stamp .36s cubic-bezier(.3, 1.6, .5, 1) both; }
.badge svg { position: absolute; inset: 0; overflow: visible; }
.badge b { position: relative; }
@keyframes stamp { from { opacity: 0; transform: scale(1.9) rotate(calc(var(--r) - 24deg)); } to { opacity: 1; transform: scale(1) rotate(var(--r)); } }
.grid { display: none; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 2px; }
.list.images .rows { display: none; }
.list.images .grid { display: grid; }
.cell { position: relative; height: 92px; border-radius: 10px; background: #00000009; display: grid; place-items: center; transform: rotate(var(--r)); transition: transform .15s, box-shadow .15s; }
.cell img { width: 76px; height: 64px; object-fit: cover; border-radius: 4px; box-shadow: 0 2px 6px #0002; }
.cell.cursor { transform: none; box-shadow: inset 0 0 0 1.5px #1719148c; }
.cell.kept { box-shadow: inset 0 0 0 2px var(--lime); }
.cell .badge, .cell .socket { right: 2px; top: 2px; }
.preview { position: absolute; left: 357px; top: 18px; width: 445px; height: 428px; border-radius: 18px; overflow: hidden; font-size: 15px; line-height: 1.5; display: grid; }
.preview.text { background: #fff; box-shadow: 0 0 0 1px #00000012, 0 1px 3px #00000014; padding: 24px; align-content: start; white-space: pre-wrap; }
.preview.image { place-items: center; }
.preview.image img { max-width: 92%; max-height: 92%; border-radius: 14px; box-shadow: 0 8px 24px #0003; }
.foot { position: absolute; right: 18px; bottom: 14px; left: 357px; height: 36px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: #55574E; }
.foot .meta { font-size: 11px; margin-right: auto; padding-left: 4px; }
.foot .ready { font: italic 17px var(--serif); }
.foot .ready b { font: 800 16px var(--system); }
.foot .help { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #6B6D63; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
/* Taped prints of what's kept. */
.prints { position: relative; width: 46px; height: 36px; }
.prints i { position: absolute; inset: 3px 6px; background: #fff center / cover; border-radius: 3px; box-shadow: 0 0 0 .5px #0003, 0 1px 3px #0003; transform: rotate(var(--r)); }
.prints i.lines { background-image: repeating-linear-gradient(#0003 0 2px, transparent 2px 6px); background-size: 70% 60%; background-position: 50% 50%; background-repeat: no-repeat; }
.prints i:last-child::after { content: ""; position: absolute; left: 25%; top: -5px; width: 50%; height: 8px; background: #C6F432e6; transform: rotate(-4deg); }

/* The pointer, and the chip that rides on it after ↩ until ⌘V. */
/* The pointer in the style of the page: a chunky lime arrow edged in ink with a hard shadow,
   and a bold ink I-beam over text. */
.pointer { position: absolute; z-index: 8; left: 0; top: 0; width: 28px; height: 34px; transition-property: transform; transition-timing-function: cubic-bezier(.45, 0, .25, 1); pointer-events: none; }
.pointer svg { display: block; filter: drop-shadow(2.5px 3px 0 #171914); }
.pointer .arrow { translate: -4px -3px; }
/* A click: the arrow dips for a moment. */
.pointer svg { transition: scale .12s; }
.pointer.click svg { scale: .84; }
/* The menu bar menu, as the app draws it (rendered from MenuView by site/tools/render-menu.sh),
   napping and awake; the pictures carry the card's shadow round it. It drops in under the icon,
   and waking up cross-fades one into the other. */
.mmenu { position: absolute; z-index: 7; top: 3px; width: 348px; opacity: 0; translate: 0 -10px; scale: .96; transform-origin: 50% 0; pointer-events: none; transition: opacity .35s ease, translate .35s ease, scale .35s ease; }
.mmenu.open { opacity: 1; translate: 0 0; scale: 1; transition: opacity .3s ease, translate .55s cubic-bezier(.3, 1.4, .5, 1), scale .55s cubic-bezier(.3, 1.4, .5, 1); }
.mmenu img { display: block; width: 100%; transition: opacity .45s ease; }
.mmenu .awake { position: absolute; inset: 0 auto auto 0; opacity: 0; }
.mmenu.up .awake { opacity: 1; } .mmenu.up .nap { opacity: 0; }
/* While koppie naps, its menu bar icon is dimmed, as in the app. */
.mbar .mark { transition: opacity .3s; }
.mbar .mark.nap { opacity: .35; }
/* Over text the pointer is an I-beam, centred on the point it is at. It never leaves the screen. */
.pointer .ibeam, .pointer.text .arrow { display: none; }
.pointer.text .ibeam { display: block; translate: -9px -14px; filter: drop-shadow(2px 2px 0 #17191466); }
.pointer.text .chip { left: 8px; top: 12px; }
.chip { position: absolute; left: 18px; top: 26px; width: max-content; white-space: nowrap; display: flex; align-items: center; gap: 3px; height: 24px; padding: 0 9px 0 7px; border-radius: 999px; background: var(--lime); color: #1A2200; box-shadow: 0 0 0 2px #fff, 0 2px 5px #0005; font: 700 12.5px var(--system); transform-origin: 0 0; opacity: 0; transform: scale(.3); transition: opacity .2s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.chip img { width: 13px; height: 13px; flex: none; }
.chip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.chip.on { opacity: 1; transform: rotate(var(--swing, -4deg)); }
.chip.poof { opacity: 0; transform: scale(.1); transition: opacity .2s, transform .2s ease-in; }
.flyer { position: absolute; z-index: 7; width: 46px; height: 36px; transition: transform .55s cubic-bezier(.5, 0, .3, 1.2), opacity .2s .45s; }

/* The keyboard: the keys go down as they're pressed. */
/* Every size here is a share of the keyboard's own width (container units), so the keys keep a
   laptop's proportions however big the laptop is drawn. */
.board { container-type: inline-size; display: grid; gap: .9cqw; padding: 1.1cqw; background: #151613; border-radius: 1.6cqw; }
.board .r { display: flex; gap: .9cqw; }
/* Chunky keycaps like the rest of the page: paper caps, an ink edge and a deep ink lip. */
.board .k { position: relative; flex: 1 1 0; height: 5.4cqw; display: grid; place-items: center; border-radius: 1.1cqw; color: var(--ink); border: .2cqw solid var(--ink); font: 800 1.7cqw/1 var(--sans);
  /* A slightly dished cap lit from above; a side wall that darkens as it goes down, edged in
     ink; then a soft, warm shadow on the white base rather than a black one. */
  background: radial-gradient(120% 90% at 50% 0%, #FFFFFC, #F3F1E8 55%, #E2DFD3);
  box-shadow: inset 0 .3cqw 0 #ffffff, inset 0 -.4cqw .35cqw #00000014,
    0 .22cqw 0 #DCD9CD, 0 .44cqw 0 #C9C6B9, 0 .66cqw 0 #B4B1A4, 0 .66cqw 0 .2cqw #2A2C26,
    0 1.1cqw .9cqw #3B3A2a40, 0 .5cqw 1.8cqw #0000001c;
  transition: transform .08s, background .08s, box-shadow .08s; }
.board .k.w15 { flex-grow: 1.5; } .board .k.w18 { flex-grow: 1.8; } .board .k.w2 { flex-grow: 2.3; } .board .k.sp { flex-grow: 6; }
.board .k.down { transform: translateY(.5cqw); background: radial-gradient(120% 90% at 50% 0%, #EDFF9C, var(--lime) 55%, #AED524); box-shadow: inset 0 .3cqw 0 #ffffffaa, inset 0 -.3cqw .3cqw #0000001f, 0 .16cqw 0 #94B81C, 0 .16cqw 0 .2cqw #2A2C26, 0 .35cqw .4cqw #3B3A2a40; }
.board .arrows { flex: 3 1 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: .3cqw; }
.board .arrows .k { height: auto; font-size: 1.2cqw; border-radius: .7cqw; box-shadow: inset 0 .2cqw 0 #ffffff, 0 .18cqw 0 #D2CFC2, 0 .36cqw 0 #B4B1A4, 0 .36cqw 0 .2cqw #2A2C26, 0 .6cqw .5cqw #3B3A2a40; }
.board .arrows .aup { grid-column: 2; }
.board .arrows .alt { grid-column: 1; grid-row: 2; } .board .arrows .adn, .board .arrows .art { grid-row: 2; }
.replay[hidden] { display: none; }
.replay { display: block; margin: 16px auto 0; border: 0; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 10px 16px; font: 700 13px var(--mono); text-transform: uppercase; }

/* What the demo shows, said in the margin: the order it pastes in, and where the history lives.
   Under the keyboard by default, the two lines set apart and a little crooked. */
.asides { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; max-width: 1100px; margin: clamp(30px, 4vw, 56px) auto clamp(30px, 4vw, 60px); }
.aside { display: grid; justify-items: start; gap: 6px; max-width: 19em; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.15; }
.aside b { font-weight: 800; font-size: 1.3em; letter-spacing: -.045em; white-space: nowrap; }
.aside em { font-size: 1.05em; }
.aside-order { rotate: -1.5deg; }
.aside-home { justify-items: end; text-align: right; margin-top: clamp(30px, 4vw, 60px); rotate: 1.2deg; }
/* Its tag of lime tape, like the numbers' labels. */
.aside-home b { background: var(--lime); padding: .06em .3em .1em; clip-path: polygon(0 8%, 3% 0, 6% 10%, 9% 0, 91% 0, 94% 10%, 97% 0, 100% 8%, 100% 92%, 97% 100%, 94% 90%, 91% 100%, 9% 100%, 6% 90%, 3% 100%, 0 92%); }
/* The picker's own order badges, stamped one after the other. */
.order { display: flex; margin: 0 0 6px -4px; }
.order i { display: grid; place-items: center; width: 42px; height: 42px; margin-right: -6px; font: 800 16px/1 var(--system); font-style: normal; background: var(--badge-cat-pink) center / contain no-repeat; color: #3A0A2C; rotate: -9deg; padding-top: 5px; filter: drop-shadow(0 2px 3px #0003); }
.order i:nth-child(2) { background-image: var(--badge-triangle); color: #fff; rotate: 7deg; padding-top: 12px; }
.order i:nth-child(3) { background-image: var(--badge-hexagon); color: #fff; rotate: -5deg; padding-top: 0; }
.order i:nth-child(4) { background-image: var(--badge-cat-lime); color: #1A2200; rotate: 8deg; }
/* On a wide screen they move out into the margins either side of the laptop, staggered. Each is
   as wide as the room the laptop leaves (its width is worked out as .laptop's is). */
@media (min-width: 1180px) and (min-aspect-ratio: 3 / 2) {
  .asides { position: static; margin: 0; }
  .aside { position: absolute; z-index: 3; font-size: clamp(16px, 1.3vw, 22px); width: calc((100% - min(100% - 2 * var(--pad), (100svh - 200px) / .85)) / 2 - var(--pad) - 40px); max-width: 300px; }
  .aside-order { left: var(--pad); top: 22%; }
  .aside-home { right: var(--pad); top: 50%; margin: 0; }
}

/* 3. Three keys, three words. */
.keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.key { padding: clamp(60px, 9vw, 140px) var(--pad) clamp(40px, 7vw, 110px); display: grid; justify-items: center; gap: 26px; text-align: center; }
.cap { display: inline-flex; gap: .12em; font: 800 clamp(40px, 4.6vw, 96px)/1 var(--sans); letter-spacing: -.04em; }
.cap span { display: grid; place-items: center; min-width: 1.15em; height: 1.15em; padding: 0 .14em; background: #fff; border: .03em solid var(--ink); border-radius: .16em; box-shadow: 0 .06em 0 var(--ink); transform: rotate(var(--r, 0deg)); transition: transform .15s; }
.key:hover .cap span { transform: translateY(.05em) rotate(var(--r, 0deg)); box-shadow: 0 .01em 0 var(--ink); }
/* Shift and return are drawn (Lucide), since phones swap those characters for emoji or hairlines. */
.cap .glyph { width: .62em; height: .62em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cap .glyph.shift { width: .82em; height: .82em; stroke-width: 2; }
.cap.wide span:first-child { padding: 0 .3em; font-size: .62em; height: 1.85em; }
.key p { font: italic clamp(26px, 3vw, 48px)/1 var(--serif); }
.key:nth-child(1) { background: var(--blue); color: var(--paper); }
.key:nth-child(2) { background: var(--lime); }
.key:nth-child(3) { background: var(--pink); }
.key:nth-child(4) { background: var(--orange); }
.key:nth-child(1) .cap span { color: var(--ink); }
/* Copy happens all day: the keys pile up as copies, and the words repeat. */
.stackcap { position: relative; display: inline-grid; }
.stackcap .cap { grid-area: 1 / 1; }
.stackcap .ghost { transform: translate(calc(var(--o) * .14em), calc(var(--o) * -.14em)); opacity: calc(1 - var(--o) * .3); }
.stackcap .cap:last-child { position: relative; }
.again { display: grid; justify-items: center; white-space: nowrap; }
.again span { margin-top: -.12em; translate: calc(var(--n) * .6em) 0; opacity: calc(1 - var(--n) * .24); }

/* 4. Three numbers, made of the brand's materials: the 200 woven from the brand's tubes, the 7
   in cobalt moiré with a sticker for each day, and the only cloud trapped inside the 0. */
/* A pile of huge stickers on the paper: the 200 across the top left, the 7 dropped over its end, the 0
   leaning in on the right, all spilling off the edges. They land one after another (see
   numbers() below) and drift apart a little as the page scrolls. */
.numbers { position: relative; overflow: hidden; height: clamp(560px, 68vw, 1340px); }
.num { position: absolute; display: grid; justify-items: start; translate: 0 var(--py, 0px); }
.num.big { left: 2vw; top: 5vw; --land: 0s; }
.num.week { left: 54vw; top: 21vw; --land: .22s; }
.num.none { left: 77vw; top: 1vw; --land: .44s; }
.num b { display: block; font: 800 clamp(120px, 23vw, 420px)/.8 var(--sans); letter-spacing: -.09em; padding-right: .06em; background: center / cover; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; transform: rotate(var(--r, 0deg));
  /* Cut out like a sticker: a white edge all round (four offset copies merge into one). */
  --edge: .022em; filter: drop-shadow(var(--edge) 0 0 #fff) drop-shadow(calc(-1 * var(--edge)) 0 0 #fff) drop-shadow(0 var(--edge) 0 #fff) drop-shadow(0 calc(-1 * var(--edge)) 0 #fff); }
.num.big b { font-size: 38vw; background-image: url("assets/backgrounds/woven-frequency.jpg"); --r: -4deg; }
.num.week b { font-size: 46vw; margin: -.06em 0 0 -.1em; background-image: url("assets/backgrounds/optical-drift.jpg"); --r: 6deg; }
.num.none b { font-size: 42vw; margin-left: -.12em; background-image: url("assets/zine/pocket-weather.jpg"); background-position: 45% 30%; --r: -7deg; }
.numbers.armed:not(.go) .num b, .numbers.armed:not(.go) .tag { opacity: 0; }
.numbers.go .num b { animation: land .7s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: var(--land); }
.numbers.go .tag { animation: land .45s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--land) + .4s); }
@keyframes land { from { opacity: 0; scale: 1.5; translate: 0 -12%; } 60% { opacity: 1; } }
/* Labels slapped on as tape. */
.tag { position: relative; z-index: 2; margin-top: -.6em; padding: .28em .7em .34em; background: var(--lime); font: 800 clamp(20px, 2.6vw, 46px)/1 var(--sans); letter-spacing: -.04em; text-transform: uppercase; transform: rotate(var(--t, -4deg)); clip-path: polygon(0 8%, 3% 0, 6% 10%, 9% 0, 91% 0, 94% 10%, 97% 0, 100% 8%, 100% 92%, 97% 100%, 94% 90%, 91% 100%, 9% 100%, 6% 90%, 3% 100%, 0 92%); box-shadow: 0 2px 0 #0002; }
.tag em { text-transform: none; letter-spacing: -.02em; }
.num.week .tag { --t: 3deg; background: var(--pink); }
.num.none .tag { --t: -2deg; background: var(--orange); }
/* One sticker per day of the week, stamped on one after another. */
.days { position: absolute; z-index: 3; left: -8%; top: -4%; display: flex; gap: calc(-1 * clamp(4px, .45vw, 8px)); }
.days i { display: grid; place-items: center; width: clamp(24px, 2.4vw, 38px); aspect-ratio: 1; border-radius: 50%; font: 800 clamp(11px, 1vw, 15px)/1 var(--sans); font-style: normal; background: #fff; box-shadow: 0 0 0 clamp(3px, .32vw, 5px) #fff, 0 3px 6px clamp(3px, .32vw, 5px) #17191424; transform: rotate(var(--r)); }
.days i:nth-child(3n+1) { background: var(--lime); } .days i:nth-child(3n+2) { background: var(--pink); } .days i:nth-child(3n) { background: var(--orange); }
.numbers.go .days i { animation: stamp .36s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(.7s + var(--d) * 90ms); }
.numbers:not(.go) .days i { opacity: 0; }

/* 5. Questions, set as loud as everything else. */
.qa { background: var(--ink); color: var(--paper); padding: clamp(50px, 8vw, 130px) var(--pad); }
.qa-head { display: flex; align-items: flex-end; gap: clamp(16px, 3vw, 40px); margin-bottom: clamp(30px, 5vw, 70px); }
.qa-head .q { font: 800 clamp(140px, 24vw, 400px)/.7 var(--sans); color: var(--lime); letter-spacing: -.08em; }
.qa-head p { font: italic clamp(24px, 3vw, 48px)/1 var(--serif); padding-bottom: .4em; }
/* The animated logo signs the answers. It is a video on black (site/tools/make-logo-video.swift);
   screen drops the black into the ink. Under Reduce Motion the still A3 lockup stands in,
   inverted to paper. */
.qa-head .logo { margin-left: auto; flex: none; width: clamp(260px, 44vw, 760px); aspect-ratio: 10 / 3; }
.qa-head .logo video, .qa-head .logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.qa-head .logo video { mix-blend-mode: screen; }
.qa-head .logo img { filter: invert(1); }
.qa-head .logo .still { display: none; }
/* Tear-off dashes between the questions, like a strip of tickets. */
.qa details { border-top: 2px dashed #F1EFE52e; }
.qa details:last-child { border-bottom: 2px dashed #F1EFE52e; }
.qa summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; padding: clamp(16px, 2vw, 26px) 0; font: 800 clamp(28px, 4.6vw, 76px)/.95 var(--sans); letter-spacing: -.055em; transition: color .2s; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover, .qa summary:focus-visible { color: var(--lime); }
/* The toggle is a paper keycap like the ones up the page: open, it's pressed in, turns lime and
   its + becomes a ×. */
.qa summary::after { content: "+"; display: grid; place-items: center; width: 1.25em; height: 1.25em; padding-bottom: .06em; box-sizing: border-box; border-radius: .24em; background: var(--paper); color: var(--ink);
  font: 800 .62em/1 var(--sans); letter-spacing: 0; box-shadow: 0 .14em 0 #8C8A80; rotate: -4deg; transition: rotate .35s cubic-bezier(.3, 1.6, .5, 1), translate .15s, box-shadow .15s, background .2s; }
.qa summary:hover::after { rotate: 6deg; }
.qa details[open] > summary::after { content: "×"; rotate: 3deg; translate: 0 .12em; box-shadow: 0 .02em 0 #8C8A80; background: var(--lime); }
/* Each answer is a strip of torn tape stuck under its question, in the brand's colours in turn
   and a little crooked; it slaps on when the question opens. */
.qa details p { --c: var(--lime); display: inline-block; max-width: 24em; margin: 0 0 clamp(22px, 3vw, 40px) -.2em; padding: .42em .8em .5em; background: var(--c); color: var(--ink);
  font: italic clamp(22px, 2.6vw, 42px)/1.15 var(--serif); rotate: var(--t, -1.5deg); transform-origin: 0 50%; box-shadow: 0 3px 0 #0003;
  clip-path: polygon(0 6%, 2% 0, 4% 8%, 6% 0, 94% 0, 96% 8%, 98% 0, 100% 6%, 100% 94%, 98% 100%, 96% 92%, 94% 100%, 6% 100%, 4% 92%, 2% 100%, 0 94%); }
.qa details:nth-of-type(4n+2) p { --c: var(--pink); --t: 1.2deg; }
.qa details:nth-of-type(4n+3) p { --c: var(--orange); --t: -.8deg; }
.qa details:nth-of-type(4n) p { --c: var(--blue); --t: 1.8deg; color: var(--paper); }
.qa details[open] > p { animation: slap .45s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes slap { from { opacity: 0; scale: .7; rotate: -9deg; } }
.qa details p a { color: inherit; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .14em; }
.qa details p kbd { font: 800 .62em/1 var(--sans); font-style: normal; color: var(--ink); background: #fff; border: .07em solid var(--ink); border-radius: .22em; box-shadow: 0 .1em 0 var(--ink); padding: .12em .38em; vertical-align: .18em; }

/* The how-tos for owners: one smaller question at the foot that opens onto the rest, set in from
   the left like a footnote, with the same tape and keycaps. */
.qa .help > summary { font-size: clamp(20px, 2.4vw, 38px); letter-spacing: -.04em; color: var(--lime); }
.qa .help > summary em { color: var(--paper); margin-left: .2em; }
.qa .help > summary:hover em { color: var(--lime); }
.qa .help > details { margin-left: clamp(18px, 7vw, 140px); }
.qa .help > details summary { font-size: clamp(22px, 3vw, 48px); }
.qa .help > details:last-child { border-bottom: 0; }

/* 6. The price, as wide as the page. */
/* The price is the page's last word, and its footer. */
.price { position: relative; background: var(--blue); color: var(--paper); padding: clamp(40px, 6vw, 90px) 0 clamp(50px, 7vw, 110px); overflow: hidden; }
/* The app icon drifts round the footer, bouncing off its edges; it can be grabbed and thrown
   (see priceIcon() below). */
.price-icon { position: absolute; z-index: 4; left: 0; top: 0; width: clamp(200px, 26vw, 440px); cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 8px 12px #0A15827a) drop-shadow(0 30px 46px #0A1582cc); transition: filter .3s ease; will-change: transform; }
.price-icon.held { cursor: grabbing; filter: drop-shadow(0 10px 16px #0A158259) drop-shadow(0 48px 64px #0A158299); }
/* The icon floats over the figure and the button; when it drifts over them it can be thrown
   out of the way. The figure lets drags through to the icon. */
.price .fill, .price .row2 { position: relative; z-index: 3; }
.price .fill { pointer-events: none; }
/* Which Macs, under the button, in the small print's place. */
.checkout { display: grid; justify-items: center; gap: 12px; }
/* On its own slip of blue, so it still reads when the icon drifts under it. */
.checkout .fits { justify-self: center; padding: 5px 9px; background: var(--blue); font: 700 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.price .fill { font-size: 39vw; padding-left: 1vw; }
.price .row2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 26px var(--pad) 0; }
.price .row2 > em { font-size: clamp(34px, 5vw, 80px); color: var(--lime); }
.price .buy { background: var(--lime); color: var(--ink); font-size: clamp(18px, 1.8vw, 24px); padding: 20px 30px; }
/* Until the checkout and the support address exist, what can't be done yet has a strip of
   duct tape slapped across its corner, torn at both ends like the numbers' tape (see soon()
   below). */
.soon-sticker { position: absolute; z-index: 1; top: 0; right: 0; translate: 22% -45%; padding: .3em .85em .36em; background: repeating-linear-gradient(90deg, #ffffff1f 0 1px, transparent 1px 4px), repeating-linear-gradient(0deg, #17191414 0 1px, transparent 1px 3px), var(--orange); color: var(--ink); font: 800 .78em/1 var(--sans); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
  clip-path: polygon(0 6%, 4% 0, 7% 14%, 10% 2%, 90% 0, 93% 12%, 96% 2%, 100% 10%, 100% 88%, 96% 100%, 93% 86%, 90% 98%, 10% 100%, 7% 88%, 4% 100%, 0 92%); filter: drop-shadow(0 2px 0 #0002); --r: 8deg; transform: rotate(var(--r)); pointer-events: none; animation: stamp .4s cubic-bezier(.3, 1.6, .5, 1) .6s both; }
.checkout .buy, .support-link.soon { position: relative; }
/* On the buy buttons the tape is stuck right over the price, as if it were taped over. */
.buy.soon em { position: relative; }
.buy .soon-sticker { top: 50%; left: 50%; right: auto; translate: -45% -50%; font-size: .7em; padding: .4em .7em .46em; --r: -7deg; }
.hero-buy .soon-sticker { opacity: 1; }
.support-link.soon { text-decoration: none; cursor: default; }
/* In the running text the tape sits after the words rather than over them. */
.support-link .soon-sticker { position: relative; display: inline-block; vertical-align: .15em; translate: none; margin: -.4em .1em -.4em .35em; font-size: .5em; --r: -6deg; }
/* Nobody owns it yet, so the question gets its answer on a strip of tape stuck over its "?",
   before the how-tos. */
.help-tape { position: relative; display: inline-block; vertical-align: .2em; translate: none; margin: -.5em .45em -.5em -.3em; font-size: max(12px, .46em); letter-spacing: .03em; --r: -4deg; }
/* Clicking Buy before the shop opens: the button shakes no, and a line of tape slides up from
   the bottom with an excuse. */
.buy.soon { cursor: pointer; }
.buy.soon.nope { animation: nope .45s ease; }
@keyframes nope { 20% { translate: -7px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 2px 0; } }
.toast { position: fixed; z-index: 50; left: 50%; bottom: clamp(16px, 4vh, 40px); width: max-content; max-width: calc(100vw - 32px); translate: -50% calc(100% + 60px); rotate: -2deg; filter: drop-shadow(0 6px 10px #17191440); transition: translate .5s cubic-bezier(.3, 1.5, .5, 1); pointer-events: none; }
.toast.on { translate: -50% 0; }
.toast p { padding: .55em 1.2em .65em; background: var(--lime); color: var(--ink); font: italic clamp(18px, 2vw, 26px)/1.25 var(--serif); text-align: center;
  clip-path: polygon(0 6%, 2% 0, 4% 12%, 6% 2%, 94% 0, 96% 10%, 98% 2%, 100% 8%, 100% 90%, 98% 100%, 96% 88%, 94% 98%, 6% 100%, 4% 88%, 2% 100%, 0 94%); }
.soon-note { justify-self: center; font: italic clamp(18px, 1.6vw, 22px)/1.2 var(--serif); color: var(--lime); }


@media (prefers-reduced-motion: reduce) {
  .wall-dl span { transition: none; }
  .keycast, .keycast.on { scale: 1; transition: opacity .2s; }
  .key.go::before { animation: none; }
  html { scroll-behavior: auto; }
  .buy, .cap span, .tabs .pill, .doc .pasted, .pointer, .chip, .flyer, .sel, .board .k { transition: none !important; }
  .toast { translate: -50% 0; opacity: 0; transition: opacity .25s; }
  .toast.on { opacity: 1; }
  .soon-sticker, .buy.soon.nope, .qa details[open] p, .key.go .cap > span, .picker.open, .badge, .mbar .mark.wiggle, .doc .caret, .flash, .numbers.go .days i, .numbers.go .num b, .numbers.go .tag { animation: none; }
  .picker.open { opacity: 1; }
  .mmenu, .mmenu.open { translate: none; scale: 1; }
  .pointer.click svg { scale: none; }
  .qa-head .logo video { display: none; }
  .qa-head .logo .still { display: block; }
    }
@media (max-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .stack, .say { grid-column: 1; grid-row: auto; }
  /* On a phone the hero is one tight collage rather than a full screen: the loop, pushed a
     little right, tucks under both lines, so the demo starts on the first screen. */
  .hero { min-height: 0; align-content: start; padding-top: 16px; }
  .stack { width: 74vw; justify-self: center; translate: 6vw 0; margin: -7vw 0 -13vw; }
  .say-1 { justify-self: start; text-align: left; margin: 44px 0 0; }
  .say-2 { justify-self: end; margin: 0 0 18px; text-align: right; }
  .say .note { margin: 12px 0 0 auto; padding: 6px 0 6px 10px; }
  .hero-buy { top: 18px; padding: 11px 14px; font-size: 13px; }
  /* Two lines on a phone, like the line above it: koppie, then doesn’t. */
  .say-2 em { display: table; margin: 0 0 .08em auto; }
  .keys, .numbers { grid-template-columns: minmax(0, 1fr); }
  /* On a phone the four steps are short bands in a zigzag, keys on one side and the words on
     the other. Each step's number is one of the picker's own order badges (the pink cat, the
     cobalt triangle and hexagon), stamped on tilted in the corner away from the keys; the keys press themselves as
     each arrives. */
  .keys { display: block; }
  .key { position: relative; overflow: hidden; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; gap: 18px; padding: 78px var(--pad) 46px; text-align: left; }
  .key:nth-child(even) { grid-template-columns: minmax(0, 1fr) auto; }
  .key:nth-child(even) > p { order: -1; justify-self: end; text-align: right; }
  .key::before { content: attr(data-n); position: absolute; z-index: 2; left: calc(var(--pad) - 4px); top: 12px; width: 60px; height: 60px; display: grid; place-items: center; padding-top: var(--dy, 0); box-sizing: border-box;
    background: var(--shape) center / contain no-repeat; color: var(--on); font: 800 23px/1 var(--system); rotate: var(--tilt); filter: drop-shadow(0 2px 3px #0003); pointer-events: none; }
  .key:nth-child(1) { --shape: var(--badge-cat-pink); --on: #3A0A2C; --tilt: -9deg; --dy: 6px; }
  .key:nth-child(2) { --shape: var(--badge-triangle); --on: #fff; --tilt: 7deg; --dy: 14px; }
  .key:nth-child(3) { --shape: var(--badge-hexagon); --on: #fff; --tilt: -6deg; }
  .key:nth-child(4) { --shape: var(--badge-cat-lime); --on: #1A2200; --tilt: 8deg; --dy: 6px; }
  /* Opposite the keys: right on the odd bands, left on the even ones. */
  .key:nth-child(odd)::before { left: auto; right: calc(var(--pad) - 4px); }
  .key.go::before { animation: stampOn .45s cubic-bezier(.3, 1.6, .5, 1) both; }
  @keyframes stampOn { from { opacity: 0; scale: 1.8; rotate: calc(var(--tilt) * -2); } }
  .key > * { position: relative; z-index: 1; }
  .cap { font-size: 11vw; }
  .cap.wide span:first-child { font-size: .5em; }
  .key p { font-size: 9vw; white-space: nowrap; }
  .again { justify-items: start; }
  .key.go .cap > span { animation: tap .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i, 0) * 140ms + 150ms); }
  @keyframes tap { 40% { transform: translateY(.07em) rotate(var(--r, 0deg)); box-shadow: 0 0 0 var(--ink); } }
  /* On a phone the pile runs down the screen, each sticker overlapping the one above. */
  .numbers { height: auto; display: grid; padding: 60px 0 30px; }
  .num, .num.big, .num.week, .num.none { position: relative; left: auto; top: auto; }
  .num.big { justify-self: start; margin-left: 4vw; }
  .num.week { justify-self: end; margin: -12vw 6vw 0 0; }
  .num.none { justify-self: start; margin: -26vw 0 0 10vw; }
  .num.big b { font-size: 58vw; } .num.week b { font-size: 80vw; } .num.none b { font-size: 76vw; }
  .days { left: -18%; } .days i { width: 20px; font-size: 9px; }
  .qa-head { flex-wrap: wrap; }
  .qa-head .logo { order: -1; width: 100%; margin: 0 0 10px; }
  .asides { flex-direction: column; gap: 22px; margin: 34px 0 40px; }
  .aside { font-size: 17px; max-width: 16em; }
  .aside-home { align-self: flex-end; margin-top: 0; }
  /* On a phone the demo crops to the picker. */
  .viewport { aspect-ratio: 840 / 560; }
  .laptop { width: 100%; }
      .deck { width: 78%; margin-bottom: -22%; }
      .deck.has3d { width: 100%; }
      .price-icon { width: 44vw; }
      /* On a phone the price fills the screen: the figure as wide as it goes, the icon with room
         to roam, and the button across the bottom. */
      .price { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 80px 0 60px; }
      /* As wide as the screen allows with the € whole: the figure is about 2.3 of its size wide. */
      .price .fill { font-size: 43vw; margin-left: 0; padding-left: 2vw; }
      .checkout { justify-items: stretch; }
      .checkout .fits { text-align: center; }
      .price .row2 { flex-direction: column; align-items: stretch; gap: 28px; padding-top: 34px; }
      .price .row2 > em { font-size: 14vw; line-height: .95; }
      .price .buy { justify-content: center; font-size: 22px; padding: 26px 30px; }
      .help-tape { display: table; margin: .35em 0 .4em -.15em; }
}