/* Version A2 (2026-10-21 evening): today's A with a new scroll section, "Watch the magic.".
   Based on two patterns common on software landing pages now: stacking cards (each kind is a card that slides up over
   the one before, which sinks back like a deck) and animation tied directly to the scroll position, over a short
   distance (as on Apple's product pages). Inside each card the document turns into the video as the card scrolls in:
   "from this, to this" happens under the reader's thumb. a2.js sets --p (0 to 1, how far the card has come in) and
   --q (0 to 1, how far the next card has covered it). Loaded after v3b-a.css and docs-paper.css. */
.deck { position: relative; margin-top: clamp(10px, 2vw, 30px); }
.dcard { position: sticky; top: calc(96px + var(--i) * 14px); height: min(74vh, 660px); margin-bottom: 22vh; --p: 1; --q: 0; }
.dcard:last-child { margin-bottom: 4vh; }
.dinner { height: 100%; display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: clamp(24px, 4vw, 64px);
  padding: clamp(26px, 3.4vw, 54px); border-radius: clamp(24px, 2.6vw, 36px); background: rgba(255,255,255,.9);
  border: 1px solid rgba(37,49,217,.08); box-shadow: 0 1px 2px rgba(20,24,80,.05), 0 -20px 60px -40px rgba(30,34,140,.35), 0 40px 90px -60px rgba(30,34,140,.6);
  transform-origin: 50% 0; transform: scale(calc(1 - var(--q) * .06)); filter: brightness(calc(1 - var(--q) * .08));
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.dcard:nth-child(2n) .dinner { background: rgba(246,247,255,.94); }

/* the picture: the document starts big in the middle; as the card comes in it moves back to the top left, and the
   video grows out of it into the bottom right, overlapping it at one corner, so both stay in view */
.dvis { position: relative; height: 100%; min-height: 0; display: grid; grid-template: 1fr / 1fr; }
.dbefore, .dafter { grid-area: 1 / 1; }
.dbefore { z-index: 1; justify-self: start; align-self: start; width: min(300px, 50%); transform-origin: 50% 50%;
  transform: translate(calc((1 - var(--p)) * 50%), calc((1 - var(--p)) * 28%)) rotate(calc(-1deg - var(--p) * 4deg)) scale(calc(1.18 - var(--p) * .26)); }
.dbefore .doc { transform: none; }
.dafter { position: relative; z-index: 2; justify-self: end; align-self: end; width: 80%; transform-origin: 30% 30%;
  transform: translate(calc((1 - var(--p)) * -14%), calc((1 - var(--p)) * -18%)) scale(calc(.5 + var(--p) * .5)); opacity: clamp(0, calc(var(--p) * 1.8 - .3), 1); }
.dafter video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; background: #eef0fb;
  box-shadow: 0 0 0 1px rgba(20,24,80,.06), 0 40px 70px -36px rgba(30,34,140,.65); }
.dafter.phone { align-self: center; width: min(220px, 44%); padding: 7px; border-radius: 34px; background: #111; box-shadow: 0 40px 70px -34px rgba(30,34,140,.8); }
.dafter.phone video { aspect-ratio: 9 / 16; border-radius: 28px; box-shadow: none; }
.is-phone .dbefore { align-self: center; }

/* the words */
.dtxt .tag { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.dtxt h3 { margin-top: 12px; color: var(--ink); font-size: clamp(30px, 3.2vw, 50px); line-height: 1.05; letter-spacing: -.03em; font-weight: 700; }
.dfrom { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 15px; color: var(--muted); }
.dfrom svg { width: 18px; height: 18px; fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dfrom b { color: var(--ink); }
.dtxt .price { margin-top: 22px; padding: 10px 14px; border-radius: 12px; background: #f6f7ff; border: 1px solid var(--line); color: var(--muted); font-size: 14px; width: fit-content; }
.dtxt .price b { display: block; color: var(--blue); font-size: 19px; }

@media (max-width: 900px) {
  .dcard { top: calc(76px + var(--i) * 8px); height: auto; min-height: 0; margin-bottom: 14vh; }
  .dinner { grid-template-columns: 1fr; gap: 22px; padding: 22px; }
  .dvis { height: auto; min-height: 280px; }
  .is-phone .dvis { min-height: 400px; }
  .dbefore { width: min(220px, 58%); }
  .dafter { width: 86%; }
  .dafter.phone { width: min(190px, 52%); }
}
@media (prefers-reduced-motion: reduce) {
  .dcard { position: relative; top: 0; margin-bottom: 30px; }
}

/* ---------- 21 October, night: new for A1 and A2 ---------- */
/* hover: the video grows a little (--h eases between 0 and 1); a click opens it on the videos page */
@property --h { syntax: "<number>"; inherits: false; initial-value: 0; }
a.dafter { display: block; text-decoration: none; cursor: pointer; transition: --h .25s ease;
  transform: translate(calc((1 - var(--p)) * -14%), calc((1 - var(--p)) * -18%)) scale(calc((.5 + var(--p) * .5) * (1 + var(--h) * .04))); }
a.dafter:hover, a.dafter:focus-visible { --h: 1; }
a.dafter:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 18px; }
/* the curved arrow from the document to the video, drawn as the card comes in */
.carrow { position: absolute; z-index: 3; pointer-events: none; overflow: visible; opacity: clamp(0, calc(var(--p) * 2.2 - .9), 1); }
.carrow path[pathLength] { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); }
.ver-a2 .carrow { left: 50%; top: 0; width: 34%; height: 40%; }
.ver-a2 .carrow path[pathLength] { stroke: #7f87d6; stroke-width: 2; stroke-dasharray: .025 .02; stroke-dashoffset: 0; }
.ver-a2 .carrow { clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
.ver-a2 .carrow marker path { stroke: #7f87d6; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ver-a2 .carrow text { font: italic 600 9px/1 Georgia, "Times New Roman", serif; fill: #6b72c4; }
.ver-a2 .is-phone .carrow { left: 43%; top: 8%; width: 24%; height: 24%; }
/* hover: a "Watch bigger" badge appears on the video */
.ver-a2 a.dafter::after { content: "Watch bigger \2197"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.9); opacity: 0;
  padding: 9px 16px; border-radius: 99px; background: rgba(13,15,40,.78); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap;
  transition: opacity .2s, transform .2s; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ver-a2 a.dafter:hover::after, .ver-a2 a.dafter:focus-visible::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* the price and the button side by side */
.dbuy { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-top: 22px; }
.dbuy .price { margin-top: 0 !important; }
.dbuy .kbtn { padding: 13px 20px; }
@media (max-width: 900px) {
  .ver-a2 .carrow { left: 58%; top: 0; width: 34%; height: 36%; }
  .ver-a2 .is-phone .carrow { left: 44%; top: 4%; width: 22%; height: 24%; }
}

/* ---------- A2: five realistic documents (tools/site/realistic_docs.py) ----------
   A real email, a release notes page, a social post, a help centre page and a printed manual page, with real text.
   They sit a little larger than the drawings did. All names and apps are made up. */
.ver-a2 .dbefore { width: min(350px, 56%); }
.ver-a2 .is-phone .dbefore { width: min(330px, 52%); }
.rdoc { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 12px; background: #fff; color: #23263a;
  font: 400 10px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; text-align: left;
  border: 1px solid rgba(20,24,80,.1);
  box-shadow: 0 1px 2px rgba(20,24,80,.06), 0 12px 24px -14px rgba(20,24,80,.22), 0 36px 64px -36px rgba(30,34,140,.5); }
.rdoc p { margin: 0; } .rdoc b { font-weight: 650; }
.rdoc ul, .rdoc ol { margin: 4px 0 0; padding-left: 16px; } .rdoc li { margin-top: 2px; }
/* long text runs off the bottom of the page, the way a real one would */
.r-mail::after, .r-help::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(rgba(255,255,255,0), #fff 80%); }

/* 1. email */
.rm-tools { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #eceef4; }
.rm-tools i { width: 12px; height: 12px; border-radius: 3px; background: #e6e8f0; }
.rm-tools span { margin-left: auto; color: #8a8ea6; font-size: 9px; }
.rm-subj { padding: 10px 12px 4px; font-size: 13.5px; line-height: 1.25; font-weight: 600; color: #15172a; }
.rm-from { display: flex; align-items: center; gap: 8px; padding: 6px 12px 8px; }
.rm-av { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #c8553d; color: #fff; font-weight: 700; font-size: 11px; }
.rm-from b { display: block; font-size: 10.5px; } .rm-from small { color: #8a8ea6; font-size: 9px; }
.rm-from time { margin-left: auto; align-self: start; color: #8a8ea6; font-size: 9px; }
.rm-body { padding: 0 12px 0 44px; } .rm-body p { margin-top: 6px; }
.rm-att { position: absolute; z-index: 1; left: 44px; bottom: 10px; display: flex; align-items: center; gap: 7px; padding: 5px 9px 5px 5px; border-radius: 7px; border: 1px solid #e3e5ee; background: #fff; }
.rm-att span { padding: 4px 5px; border-radius: 4px; background: #d6453b; color: #fff; font-size: 8px; font-weight: 800; }
.rm-att b { display: block; font-size: 9.5px; } .rm-att small { color: #8a8ea6; font-size: 8.5px; }

/* 2. release notes page */
.r-notes { background: #fbfbfe; }
.rn-top { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #15172e; color: #fff; }
.rn-logo { width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(135deg, #8b7bff, #5b4be0); }
.rn-top nav { display: flex; gap: 9px; margin-left: auto; color: rgba(255,255,255,.6); font-size: 9px; } .rn-top nav .on { color: #fff; }
.rn-page { padding: 11px 13px; }
.rn-meta { display: flex; align-items: center; gap: 8px; color: #7d8199; font-size: 9px; }
.rn-ver { padding: 2px 7px; border-radius: 99px; background: #ebe8ff; color: #4a3cc9; font-weight: 700; }
.rn-h { margin-top: 7px !important; font-size: 14px; line-height: 1.2; font-weight: 700; color: #15172a; }
.rn-p { margin-top: 4px !important; color: #4b4f66; }
.rn-sec { margin-top: 8px !important; }
.r-notes .t { display: inline-block; padding: 1px 7px; border-radius: 5px; font-size: 8.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.r-notes .t.n { background: #dcf5ea; color: #13795b; } .r-notes .t.m { background: #e6e9ff; color: #3640b8; } .r-notes .t.f { background: #fff1d6; color: #9a6200; }
.r-notes ul { color: #3a3e55; }

/* 3. social post */
.r-post { aspect-ratio: auto; padding: 12px; border-radius: 16px; }
.rp-head { display: flex; align-items: center; gap: 8px; }
.rp-av { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #f26b1d; color: #fff; font-weight: 800; font-size: 13px; }
.rp-head b { display: block; font-size: 11px; } .rp-head small { color: #7d8199; font-size: 9.5px; }
.rp-more { margin-left: auto; color: #9aa0b8; letter-spacing: 1px; }
.rp-text { margin-top: 8px !important; font-size: 10.5px; line-height: 1.45; }
.rp-card { margin-top: 9px; border: 1px solid #e5e7ef; border-radius: 12px; overflow: hidden; }
.rp-card img { display: block; width: 100%; height: 92px; object-fit: cover; object-position: 50% 30%; }
.rp-card div { padding: 6px 9px 8px; } .rp-card small { color: #7d8199; font-size: 8.5px; } .rp-card b { display: block; font-size: 10px; }
.rp-acts { display: flex; justify-content: space-between; margin-top: 9px; padding: 0 4px; color: #6f7490; font-size: 9.5px; }

/* 4. help centre page */
.rh-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #1f6f4e; color: #fff; font-size: 10px; }
.rh-logo { width: 12px; height: 12px; border-radius: 50%; background: #c9f0db; }
.rh-search { margin-left: auto; padding: 3px 8px; border-radius: 99px; background: rgba(255,255,255,.18); color: rgba(255,255,255,.85); font-size: 8.5px; }
.rh-page { padding: 10px 13px; }
.rh-crumb { color: #1f6f4e; font-size: 8.5px; }
.rh-h { margin-top: 5px !important; font-size: 13.5px; line-height: 1.2; font-weight: 700; color: #15172a; }
.rh-meta { margin-top: 3px !important; color: #8a8ea6; font-size: 8.5px; }
.rh-p { margin-top: 6px !important; color: #3a3e55; }
.r-help ol { padding-left: 15px; color: #3a3e55; } .r-help ol li::marker { color: #1f6f4e; font-weight: 700; }
.rh-help { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: #6f7490; font-size: 9px; }
.rh-help i { font-style: normal; padding: 1px 8px; border: 1px solid #dfe2ea; border-radius: 99px; }

/* 5. staff handbook page (2026-10-22): an ordinary company wiki page, white, plain sans-serif like the others */
.r-manual { display: grid; grid-template-rows: auto 1fr; }
.r-manual::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14%; background: linear-gradient(rgba(255,255,255,0), #fff 80%); }
.rmn-top { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid #e8eaf0; font-size: 10px; color: #23263a; }
.rmn-logo { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: #4a5568; color: #fff; font-size: 6.5px; font-weight: 700; letter-spacing: .02em; }
.rmn-wiki { margin-left: auto; color: #7a8094; font-size: 8.5px; }
.rmn-body { display: grid; grid-template-columns: 70px 1fr; min-height: 0; }
.rmn-nav { display: flex; flex-direction: column; gap: 2px; padding: 9px 6px; border-right: 1px solid #eef0f4; background: #fafbfc; font-size: 8px; color: #5b6175; }
.rmn-nav span { padding: 3px 5px; border-radius: 4px; }
.rmn-nav .on { background: #e9edf5; color: #23263a; font-weight: 650; }
.rmn-page { padding: 9px 12px 14px; }
.rmn-crumb { color: #7a8094; font-size: 8px; }
.rmn-h { margin-top: 4px !important; font-size: 14px; line-height: 1.2; font-weight: 700; color: #1a1d2e; }
.rmn-meta { margin-top: 2px !important; color: #8a8ea6; font-size: 8px; }
.rmn-p { margin-top: 6px !important; color: #3a3e55; font-size: 9.5px; }
.rmn-h2 { margin-top: 7px !important; font-size: 10.5px; font-weight: 700; color: #1a1d2e; }
.r-manual ol { margin-top: 2px; font-size: 9.5px; color: #3a3e55; padding-left: 15px; }
.rmn-tip { margin-top: 7px !important; padding: 5px 7px; border-radius: 6px; background: #f3f5f9; border: 1px solid #e6e9f0; color: #3a3e55; font-size: 9px; }

@media (max-width: 900px) {
  .ver-a2 .dbefore, .ver-a2 .is-phone .dbefore { width: min(250px, 66%); }
}

/* hero full screen (2026-10-22, videos-fast.js data-full): the frame fills the screen, the video fits inside it, and our
   own bar sits at the bottom (play/pause, timeline, time, sound, exit). Hidden on the page. */
.vfs { display: none; }
.screen.vfs-on { position: fixed; inset: 0; width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; transform: none !important; background: #000; }
.screen.vfs-on video, .screen.vfs-on .vcover { object-fit: contain; }
.screen.vfs-on > .vctl { display: none; }
.screen.vfs-on .vfs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 14px;
  padding: 48px clamp(16px, 3vw, 40px) clamp(16px, 2.4vw, 28px); background: linear-gradient(transparent, rgba(8,10,40,.75)); color: #fff; transition: opacity .35s; }
.screen.vfs-on.vfs-idle { cursor: none; }
.screen.vfs-on.vfs-idle .vfs { opacity: 0; }
.vfs button { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; }
.vfs button:hover { background: rgba(255,255,255,.28); }
.vfs button:focus-visible, .vfs input:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.vfs input { flex: 1; min-width: 0; height: 22px; margin: 0; padding: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.vfs input::-webkit-slider-runnable-track { height: 5px; border-radius: 99px; background: linear-gradient(90deg, #fff var(--p, 0%), rgba(255,255,255,.3) var(--p, 0%)); }
.vfs input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5.5px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.vfs input::-moz-range-track { height: 5px; border-radius: 99px; background: rgba(255,255,255,.3); }
.vfs input::-moz-range-progress { height: 5px; border-radius: 99px; background: #fff; }
.vfs input::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; }
.vfs-t { flex: none; font-size: 14px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.85); }
/* phones: the video itself goes full screen in the browser's own player; show all of it, not cropped */
.screen video:fullscreen { object-fit: contain; background: #000; }
.screen video:-webkit-full-screen { object-fit: contain; background: #000; }
/* phones (2026-10-22): the hero's three buttons smaller and tucked into the bottom-right corner, covering less video */
@media (max-width: 600px) {
  .lead .screen > .vctl { right: 6px; bottom: 6px; gap: 4px; }
  .lead .screen > .vctl button { width: 28px; height: 28px; background: rgba(18,22,79,.55); }
  .lead .screen > .vctl svg { width: 14px; height: 14px; }
}