/* Landing-specific. The shared system is in style.css. */

body.landing::before {
  content: ""; position: fixed; inset: -20%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(40rem 32rem at 74% 4%,  rgba(143,185,255,0.16), transparent 62%),
    radial-gradient(34rem 28rem at 16% 20%, rgba(196,181,253,0.12), transparent 62%),
    radial-gradient(26rem 22rem at 52% 76%, rgba(94,234,212,0.055), transparent 62%);
  animation: drift 28s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate3d(-3%, 2%, 0) scale(1.07); } }
body.landing::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.15;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.landing > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ hero */
.hero { max-width: 1120px; margin: 0 auto; padding: 38px 24px 18px; text-align: center; }
.hero .pill .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--good);
  box-shadow: 0 0 10px var(--good);
}
h1.big {
  font-size: clamp(36px, 5.4vw, 60px); line-height: 1.04; letter-spacing: -2.2px;
  margin: 18px 0 0; font-weight: 680;
}
h1.big .grad {
  background: linear-gradient(100deg, #b7d3ff 0%, #d4c7ff 40%, #8ff0dd 62%, #b7d3ff 100%);
  background-size: 260% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; animation: shimmer 10s linear infinite;
}
@keyframes shimmer { to { background-position: 260% 0; } }
.hero .sub {
  font-size: clamp(16px, 1.7vw, 19px); color: var(--ink-dim);
  max-width: 780px; margin: 16px auto 0; line-height: 1.6;
}
.cta { display: flex; gap: 12px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.micro { font-size: 13px; color: var(--ink-faint); margin-top: 12px; }
.hero > * { animation: rise .85s cubic-bezier(.2,.7,.3,1) both; }
.hero > *:nth-child(2) { animation-delay: .08s; }
.hero > *:nth-child(3) { animation-delay: .16s; }
.hero > *:nth-child(4) { animation-delay: .24s; }
.hero > *:nth-child(5) { animation-delay: .32s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* --------------------------------------------------------------- preview */
.preview { max-width: 790px; margin: 44px auto 0; padding: 0 24px;
           animation: rise 1s cubic-bezier(.2,.7,.3,1) .42s both; }
.window {
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(22,25,32,0.94), rgba(14,17,23,0.94));
  backdrop-filter: blur(14px);
  box-shadow: 0 44px 100px -44px #000, inset 0 0 0 1px rgba(255,255,255,0.025);
  transform: perspective(1500px) rotateX(3deg); transform-origin: top center;
}
.window .bar {
  display: flex; align-items: center; gap: 8px; padding: 11px 15px;
  border-bottom: 1px solid var(--line-soft); font-size: 11.5px; color: var(--ink-faint);
}
.window .bar .d { width: 9px; height: 9px; border-radius: 50%; background: #2b313d; }
.window .bar .d.r { background: #ff5f57; } .window .bar .d.y { background: #febc2e; }
.window .bar .d.g { background: #28c840; }
.window .body { padding: 20px 22px 24px; text-align: left; min-height: 250px; }
.q { font-size: 15px; font-weight: 640; margin-bottom: 5px; letter-spacing: -0.2px; }
.heard { font-size: 11.5px; color: var(--ink-faint); margin-bottom: 15px; }
.a { font-size: 13.5px; line-height: 1.7; color: #d6dceb; }
.a .k { color: #ffcf7a; font-weight: 700; }
.a ul { margin: 11px 0 0; padding-left: 19px; }
.a li { margin-bottom: 6px; }
.caret { display: inline-block; width: 7px; height: 15px; margin-left: 2px;
         background: var(--accent); vertical-align: -2px; animation: blink 1.05s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
html.js .reveal-later { opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; }
html.js .reveal-later.in { opacity: 1; transform: none; }
.minitable { width: 100%; border-collapse: collapse; margin-top: 13px; font-size: 12.5px;
             border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; }
.minitable th { color: #a9caff; padding: 7px 9px; background: rgba(255,255,255,0.05);
                border-bottom: 0; text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.minitable td { padding: 7px 9px; border-top: 1px solid var(--line-soft); border-bottom: 0; }

/* -------------------------------------------------------------- sections */
.section { max-width: 1120px; margin: 0 auto; padding: 96px 24px 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent); }
.section h2.h {
  font-size: clamp(28px, 3.8vw, 42px); letter-spacing: -1.4px; margin: 0 0 12px; font-weight: 660;
}
.section .lead { color: var(--ink-dim); max-width: 640px; margin: 0 0 36px; font-size: 16px; }

/* Bento: one wide tile, then a row of narrow ones. */
.bento { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.bento .tile.span2 { grid-column: span 2; }
@media (max-width: 860px) { .bento { grid-template-columns: 1fr; } .bento .tile.span2 { grid-column: auto; } }

.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.tile {
  border: 1px solid var(--line); border-radius: var(--r); padding: 24px;
  background: var(--panel); position: relative; overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, background .3s;
}
.tile::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; opacity: 0;
  background: radial-gradient(18rem 18rem at var(--mx,50%) var(--my,0%),
                              rgba(143,185,255,0.14), transparent 55%);
  transition: opacity .35s; pointer-events: none;
}
.tile:hover { transform: translateY(-4px); border-color: rgba(143,185,255,0.3); background: var(--panel-2); }
.tile:hover::before { opacity: 1; }
.tile .ico {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(140deg, rgba(143,185,255,0.2), rgba(196,181,253,0.13));
  border: 1px solid rgba(143,185,255,0.18); color: #cfe0ff; font-size: 17px; margin-bottom: 15px;
}
.tile h3 { margin: 0 0 7px; font-size: 16px; letter-spacing: -0.2px; }
.tile p { margin: 0; font-size: 14px; line-height: 1.62; color: var(--ink-dim); }

.steps { counter-reset: s; display: grid; gap: 13px; }
.step {
  display: flex; gap: 18px; align-items: flex-start; border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px 22px; background: var(--panel);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s;
}
.step:hover { transform: translateX(4px); border-color: rgba(196,181,253,0.28); }
.step::before {
  counter-increment: s; content: counter(s); min-width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; background: linear-gradient(140deg, var(--accent), var(--accent-2));
  color: #08090d; font-weight: 750; font-size: 13px;
}
.step h3 { margin: 3px 0 6px; font-size: 16px; }
.step p { margin: 0; font-size: 14px; color: var(--ink-dim); }

/* ---------------------------------------------------------- coming soon */
.soon {
  border: 1px solid var(--line); border-radius: 18px; padding: 34px;
  background: linear-gradient(140deg, rgba(196,181,253,0.09), rgba(143,185,255,0.05) 60%, transparent);
}
.badge-soon {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: #08090d; padding: 4px 10px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); margin-bottom: 14px;
}
.soon-list { display: grid; gap: 12px; margin-top: 20px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .soon-list { grid-template-columns: 1fr; } }
.soon-item {
  border: 1px solid var(--line-soft); border-radius: 12px; padding: 18px;
  background: rgba(255,255,255,0.022);
}
.soon-item h4 { margin: 0 0 6px; font-size: 14.5px; }
.soon-item p { margin: 0; font-size: 13.2px; line-height: 1.58; color: var(--ink-dim); }

.faq details {
  border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; margin-bottom: 11px;
  background: var(--panel); transition: border-color .25s, background .25s;
}
.faq details:hover { border-color: rgba(143,185,255,0.24); }
.faq details[open] { background: var(--panel-2); }
.faq summary { cursor: pointer; font-weight: 620; font-size: 15px; list-style: none; display: flex; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; color: var(--ink-faint); font-size: 19px; }
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 11px 0 0; font-size: 14px; }

.cta-band {
  max-width: 1120px; margin: 100px auto 0; padding: 56px 24px; text-align: center;
  border: 1px solid var(--line); border-radius: 20px; position: relative; overflow: hidden;
  background: linear-gradient(140deg, rgba(143,185,255,0.11), rgba(196,181,253,0.07) 60%, transparent);
}
.cta-band::after {
  content: ""; position: absolute; inset: -60% -10%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent, rgba(143,185,255,0.09), transparent 40%);
  animation: sweep 16s linear infinite;
}
@keyframes sweep { to { transform: rotate(360deg); } }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(26px, 3.4vw, 36px); margin: 0 0 10px; letter-spacing: -1.1px; }

/* Scoped to html.js, which landing.js sets on its first line.
   Without that guard every `.r` section sat at opacity 0 for anyone whose
   JavaScript did not run — a blocked script, a failed load, a crawler — and
   the page was a hero above five thousand pixels of nothing. Animation is a
   reward for JS working, not a condition of the page existing. */
html.js .r { opacity: 0; transform: translateY(22px); }
html.js .r.in { opacity: 1; transform: none;
        transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
html.js .r.d1.in { transition-delay: .07s; } html.js .r.d2.in { transition-delay: .14s; }
html.js .r.d3.in { transition-delay: .21s; } html.js .r.d4.in { transition-delay: .28s; }

@media (max-width: 680px) {
  .hero { padding-top: 46px; }
  .window { transform: none; }
  .section { padding-top: 70px; }
}
@media (prefers-reduced-motion: reduce) { .r { opacity: 1; transform: none; } }

/* ------------------------------------------------- Learning: the live card */
.learn-live {
  display: grid; grid-template-columns: minmax(0,1fr) 210px; gap: 30px;
  padding: 28px 30px; text-decoration: none;
  border: 1px solid rgba(143,185,255,.24); border-radius: 20px;
  background:
    radial-gradient(600px 300px at 10% 0%, rgba(143,185,255,.10), transparent 65%),
    linear-gradient(135deg, rgba(196,181,253,.055), rgba(255,255,255,.022));
  transition: border-color .2s, transform .2s, box-shadow .25s;
}
.learn-live:hover {
  border-color: rgba(143,185,255,.45); transform: translateY(-2px);
  box-shadow: 0 22px 50px -30px rgba(143,185,255,.6);
}
.badge-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 640; letter-spacing: .02em;
  color: var(--good); background: rgba(94,234,212,.1);
  border: 1px solid rgba(94,234,212,.25); border-radius: 999px; padding: 4.5px 12px;
}
.badge-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
.learn-live h3 {
  margin: 14px 0 10px; font-size: 23px; line-height: 1.28;
  letter-spacing: -0.5px; font-weight: 670; color: #fff;
}
.learn-live p { margin: 0 0 16px; color: var(--ink-dim); font-size: 15.4px; line-height: 1.66; }
.ll-cta { font-size: 14.5px; font-weight: 620; color: var(--accent); }
.learn-live:hover .ll-cta { color: #cfe2ff; }
.ll-right {
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  border-left: 1px solid var(--line); padding-left: 26px;
}
.ll-stat b { display: block; font-size: 25px; font-weight: 700; color: #fff; letter-spacing: -0.5px; }
.ll-stat span { font-size: 12.5px; color: var(--ink-faint); }

@media (max-width: 820px) {
  .learn-live { grid-template-columns: 1fr; gap: 22px; padding: 24px 22px; }
  .ll-right { flex-direction: row; gap: 26px; border-left: 0; border-top: 1px solid var(--line);
              padding-left: 0; padding-top: 18px; }
  .learn-live h3 { font-size: 20px; }
}

.learn-live.second { margin-top: 16px; border-color: rgba(94,234,212,.22); }
.learn-live.second:hover { border-color: rgba(94,234,212,.45); box-shadow: 0 22px 50px -30px rgba(94,234,212,.6); }
.learn-live.second .badge-live, .learn-live.second .ll-cta { color: var(--good); }
.learn-live.second .badge-live { background: rgba(94,234,212,.1); border-color: rgba(94,234,212,.25); }

/* ------------------------------------------------- an offer, when one is on

   A strip above everything rather than a note further down: an offer nobody
   sees on arrival discounts only the people who would have paid anyway.
   Warm against a cold page, because it has to be the first thing read. */
.promo {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  flex-wrap: wrap; padding: 13px 24px; text-decoration: none;
  border-bottom: 1px solid rgba(255,176,87,.34);
  background:
    radial-gradient(760px 200px at 14% 120%, rgba(255,140,170,.20), transparent 62%),
    radial-gradient(700px 200px at 86% -20%, rgba(196,181,253,.20), transparent 62%),
    linear-gradient(100deg, #2a1b25 0%, #241d33 52%, #1a1a2e 100%);
}
/* A slow shine, once every few seconds. Enough to catch an eye moving down
   the page; not enough to compete with the headline underneath. */
.promo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%,
              rgba(255,255,255,.14) 48%, rgba(255,255,255,.02) 56%, transparent 62%);
  transform: translateX(-100%);
  animation: promo-shine 5.5s ease-in-out 1.2s infinite;
}
@keyframes promo-shine { 0% { transform: translateX(-100%); }
                         38%, 100% { transform: translateX(100%); } }

.promo-label {
  position: relative;
  font-size: 12.5px; font-weight: 780; letter-spacing: .07em; text-transform: uppercase;
  color: #1a0f06; border-radius: 999px; padding: 6px 13px; white-space: nowrap;
  background: linear-gradient(120deg, #ffd48a, #ffb057 46%, #ff8fa8);
  box-shadow: 0 0 0 0 rgba(255,176,87,.5);
  animation: promo-pulse 2.6s ease-out infinite;
}
@keyframes promo-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,176,87,.46); }
  70%  { box-shadow: 0 0 0 11px rgba(255,176,87,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,176,87,0); }
}

.promo-text { position: relative; font-size: 15px; color: #fff; font-weight: 620;
              letter-spacing: -.1px; }

/* The clock is the urgency. Monospaced digits so it ticks in place instead of
   shuffling the line every second. */
.promo-ends {
  position: relative; display: inline-flex; align-items: baseline; gap: 7px;
  font-size: 13.5px; font-weight: 700; color: #ffd9a1; white-space: nowrap;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid rgba(255,176,87,.36); background: rgba(255,176,87,.11);
}
.promo-ends b { font-variant-numeric: tabular-nums; font-weight: 800; color: #fff;
                letter-spacing: .02em; }
.promo-ends.urgent { color: #ffc4c4; border-color: rgba(255,122,122,.45);
                     background: rgba(255,122,122,.13); }
.promo-ends.urgent b { color: #fff; }

.promo-go {
  position: relative; font-size: 13.5px; font-weight: 700; color: #fff;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.26); background: rgba(255,255,255,.08);
  transition: background .2s, border-color .2s;
}
.promo-go span { display: inline-block; transition: transform .2s; }
.promo:hover .promo-go { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }
.promo:hover .promo-go span { transform: translateX(3px); }

@media (max-width: 620px) {
  .promo { gap: 8px 10px; padding: 11px 14px; }
  .promo-text { font-size: 14px; flex-basis: 100%; text-align: center; order: 3; }
  .promo-go { display: none; }        /* the whole strip is the link */
}

/* Nothing moves for anyone who has asked for stillness — the colour and the
   clock carry it on their own. */
@media (prefers-reduced-motion: reduce) {
  .promo::after, .promo-label { animation: none; }
  .promo::after { display: none; }
}

/* ------------------------------------------------- what this actually is

   Four plain statements between the demo and the feature sections. Someone
   who has got this far without understanding the product is not going to be
   rescued by a grid of capabilities, so this says it in sentences. */
.what { max-width: 1120px; margin: 0 auto; padding: 10px 24px 8px; }
.what-grid {
  display: grid; gap: 1px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--line); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
}
.what-cell { padding: 24px 22px; background: var(--bg); }
.what-k {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
}
.what-cell p { margin: 0; font-size: 14.5px; line-height: 1.68; color: var(--ink-dim); }

@media (max-width: 620px) {
  .what { padding: 6px 14px; }
  .what-cell { padding: 20px 18px; }
}

/* -------------------------------------------------------------- the demo

   Four real frames of the real window, stepped through. The frames are
   stacked and cross-faded rather than swapped, so the box never changes
   height and the page does not jump under the reader. */
.demo { max-width: 1180px; margin: 0 auto; padding: 4px 24px 54px; }
.demo-head { max-width: 62ch; margin-bottom: 20px; }
.demo-head .h { margin: 10px 0 10px; }
.demo-head .lead { margin: 0; }

/* The clip gets the full width and the captions sit under it. They used to
   share a row, which left the video at 60% of a already-narrow column — the
   thing the page exists to show, shown small. */
.demo-stage { display: block; }
.demo-steps { display: grid; gap: 8px; margin-top: 18px;
              grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* No card. The first tab is the window on its own, and a framed panel inside
   a framed box read as two windows. The comparison tab brings its own call
   chrome, so it does not need one either. */
.demo-shot { position: relative; }
/* Both clips live in the same box; only one is shown. The box has no fixed
   ratio because the two clips are different shapes — it takes the shape of
   whichever is on. */

/* Two clips to choose between. */
/* Under the clip, not above it: the switcher is a caption, and the 90px it
   occupied above was 90px of the product pushed off the fold. */
.demo-tabs { display: flex; gap: 8px; margin: 14px 0 0; flex-wrap: wrap;
             justify-content: center; }
.demo-tab {
  font: inherit; text-align: left; cursor: pointer;
  padding: 11px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(255,255,255,.03);
  transition: border-color .18s, background .18s;
}
.demo-tab b { display: block; font-size: 14px; font-weight: 640; color: var(--ink-dim); }
.demo-tab span { display: block; font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.demo-tab:hover { background: rgba(255,255,255,.06); }
.demo-tab.is-on { border-color: rgba(143,185,255,.5); background: rgba(143,185,255,.10); }
.demo-tab.is-on b { color: #fff; }

.demo-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.demo-step {
  position: relative; padding: 15px 16px 16px; border-radius: 12px; cursor: pointer;
  transition: background .2s;
}
.demo-step:hover { background: rgba(255,255,255,.035); }
.demo-step.is-on { background: rgba(255,255,255,.055); }
.demo-step b { display: block; font-size: 14.5px; font-weight: 640; color: var(--ink-dim);
               margin-bottom: 5px; transition: color .2s; }
.demo-step.is-on b { color: #fff; }
.demo-step span { display: block; font-size: 13.5px; line-height: 1.6; color: var(--ink-faint); }
.demo-step.is-on span { color: var(--ink-dim); }

/* The rail fills while a step is showing, so the thing is visibly running. */
.demo-rail { position: absolute; left: 6px; top: 12px; bottom: 12px; width: 2px;
             border-radius: 2px; background: rgba(255,255,255,.10); overflow: hidden; }
.demo-rail em { display: block; width: 100%; height: 0%; background: var(--accent); }
.demo-rail em { transition: height .2s linear; }

.demo-foot { margin: 22px 0 0; font-size: 14px; color: var(--ink-faint); }
.demo-foot a { color: var(--accent); }

/* Without JavaScript the video still plays — autoplay is the browser's job,
   not ours — and every caption stays readable. Only the highlighting stops,
   so all four read as a plain numbered list of what happens. */
html:not(.js) .demo-step { background: none; }
html:not(.js) .demo-step b { color: #fff; }
html:not(.js) .demo-step span { color: var(--ink-dim); }
html:not(.js) .demo-rail { display: none; }

@media (max-width: 900px) { .demo-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) {
  .demo { padding: 18px 14px 40px; }
  .demo-steps { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------- the inputs
   What distinguishes the three inputs is which key you press, so the key is
   what the card leads with. The paragraph each used to carry was describing,
   at length, something a keycap says at a glance. */
.inputs { display: grid; gap: 14px; margin-top: 26px;
          grid-template-columns: repeat(3, 1fr); }
.input-card {
  border: 1px solid var(--line); border-radius: 16px; padding: 24px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}
.input-card h3 { margin: 16px 0 6px; font-size: 16.5px; font-weight: 640; color: #fff; }
.input-card p  { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--ink-faint); }
.cap {
  display: inline-block; font: 600 15px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #cfe0ff; padding: 10px 13px; border-radius: 9px;
  background: rgba(143,185,255,.13); border: 1px solid rgba(143,185,255,.34);
  box-shadow: 0 2px 0 rgba(143,185,255,.18);
}
.cap.sm { font-size: 13px; padding: 4px 7px; border-radius: 6px; box-shadow: none; }
.inputs-foot { margin: 20px 0 0; font-size: 14.5px; line-height: 1.9;
               color: var(--ink-faint); max-width: 74ch; }
@media (max-width: 900px) { .inputs { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- compatibility
   Light tiles because brand marks are drawn for white: Webex and Slack are
   near-black in their own palettes and vanish on this page's background. */
.works-grid {
  display: grid; gap: 12px; margin-top: 26px;
  grid-template-columns: repeat(4, 1fr);   /* eight marks, two even rows */
}
.logo {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: 16px; padding: 20px 12px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
}
.logo-tile {
  width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center;
  background: #f4f6f8; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.logo-tile svg { width: 30px; height: 30px; display: block; }
.logo b { font-size: 13.5px; font-weight: 580; color: var(--ink-dim); text-align: center;
          line-height: 1.3; }
.works-note { margin: 20px 0 0; font-size: 14px; color: var(--ink-faint); }
@media (max-width: 560px) { .works-grid { grid-template-columns: repeat(3, 1fr); } }

/* ----------------------------------------------------- illustrated cards
   Two claims a visitor weighs before anything else — does it hear me, and is
   it fast enough to be useful mid-sentence. Both are shown rather than
   asserted, because a paragraph saying "blazing fast" is worth nothing. */
.pair-cards { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.pcard {
  border: 1px solid var(--line); border-radius: 20px; padding: 22px 24px 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  overflow: hidden;
}
.pcard h3 { margin: 20px 0 8px; font-size: 21px; font-weight: 660; color: #fff;
            letter-spacing: -.5px; }
.pcard > p { margin: 0; font-size: 14.5px; line-height: 1.68; color: var(--ink-faint); }
.ptag {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px;
  font-weight: 600; color: var(--ink-dim); padding: 7px 13px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid var(--line);
}
.part { height: 150px; display: flex; flex-direction: column;
        justify-content: center; margin-top: 18px; }

/* waveform ------------------------------------------------------------- */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 84px; }
.bars i {
  flex: 1; height: var(--h); border-radius: 2px;
  background: linear-gradient(180deg, #6ee7b7, #34d399);
  opacity: .85; transform-origin: bottom;
  animation: bob 1.5s var(--d) ease-in-out infinite alternate;
}
@keyframes bob { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
.bars-mini { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.bars-mini i { width: 2px; border-radius: 1px; background: #34d399; }
.bars-mini i:nth-child(1) { height: 5px } .bars-mini i:nth-child(2) { height: 11px }
.bars-mini i:nth-child(3) { height: 7px }
.pcaption { margin: 14px 0 0; font-size: 13px; color: var(--ink-faint);
            font-style: italic; }

/* latency -------------------------------------------------------------- */
.dot-mini { width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
            box-shadow: 0 0 0 3px rgba(143,185,255,.18); }
.lat-row { display: flex; justify-content: space-between; align-items: baseline;
           font-size: 13.5px; color: var(--ink-faint); }
.lat-row b { font-variant-numeric: tabular-nums; font-weight: 640; color: var(--ink-dim); }
.lat-row b.hi { color: #8ff0dd; font-size: 15.5px; }
.lat-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.07);
           margin: 9px 0 11px; overflow: hidden; }
.lat-bar em { display: block; height: 100%; border-radius: 3px;
              background: linear-gradient(90deg, var(--accent), #8ff0dd); }

@media (prefers-reduced-motion: reduce) { .bars i { animation: none; } }
@media (max-width: 860px) { .pair-cards { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ comparison
   The objection answered as a table because the differences are mechanical:
   each row is a thing that is true of one and not the other, which a
   paragraph would have to assert and a table can just show. */
.vs { margin-top: 26px; border: 1px solid var(--line); border-radius: 18px;
      overflow: hidden; }
.vs-head, .vs-row { display: grid; grid-template-columns: 1.1fr 1.25fr 1.25fr;
                    gap: 18px; padding: 15px 20px; align-items: baseline; }
.vs-head { background: rgba(255,255,255,.05); font-size: 13px;
           text-transform: uppercase; letter-spacing: .7px; }
.vs-head b { color: var(--ink-faint); font-weight: 640; }
.vs-head b.win { color: #8ff0dd; }
.vs-row { border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.55; }
.vs-row > span { color: var(--ink-dim); font-weight: 560; }
.vs-row b { font-weight: 440; display: flex; gap: 8px; }
.vs-row b.no  { color: var(--ink-faint); }
.vs-row b.yes { color: var(--ink-dim); }
.vs-row b.no::before  { content: "—"; color: #8a6b6b; flex: none; }
.vs-row b.yes::before { content: "✓"; color: #4ade80; flex: none; }
@media (max-width: 760px) {
  .vs-head { display: none; }
  .vs-row { grid-template-columns: 1fr; gap: 7px; }
  .vs-row > span { font-size: 13px; text-transform: uppercase; letter-spacing: .6px;
                   color: var(--ink-faint); }
}

/* ---------------------------------------------------------- requirements */
.needs { padding-top: 0; }
.needs-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr);
              border-top: 1px solid var(--line); padding-top: 28px; }
.needs-grid div { display: flex; flex-direction: column; gap: 4px; }
.needs-grid b { font-size: 15.5px; font-weight: 640; color: #fff; }
.needs-grid span { font-size: 13.5px; line-height: 1.55; color: var(--ink-faint); }
@media (max-width: 760px) { .needs-grid { grid-template-columns: 1fr 1fr; } }

/* Both tabs are elements now, so the still-image and play-button machinery
   that used to live here is gone with the video it controlled. */
.shot { display: none; }
.shot.is-on { display: block; }

/* ------------------------------------------------- artwork on the inputs
   Each card draws the thing it describes. All of it is elements — same
   reason as the demo panel: it stays sharp and costs nothing to ship. */
.input-card { display: flex; flex-direction: column; }
.art {
  position: relative; height: 128px; margin: -4px 0 16px;
  border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  border: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 14px 16px;
}
.art .said { font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); font-style: italic; }

/* A crop of the real control row with a cursor that comes in, clicks, and
   the key lights — the same elements as the demo panel, so it cannot drift
   from what the app actually looks like. */
.art-click { justify-content: center; gap: 16px; overflow: visible; }
.keyrow { position: relative; display: flex; align-items: center;
          min-height: 46px; padding-left: 4px; }
.art-click .k {
  display: inline-flex; align-items: center; gap: .55em;
  padding: 10px 14px; border-radius: 12px; font-size: 14.5px; font-weight: 600;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--t) 34%, transparent);
  background: color-mix(in srgb, var(--t) 7%, transparent);
  color: color-mix(in srgb, var(--t) 58%, var(--ink-faint));
  animation: keylight 3.6s ease-in-out infinite;
}
.art-click .k.answer { --t: #ff9e40; }
.art-click .k.screen { --t: #c28fff; }
.art-click .k.mic    { --t: #59d6bf; }
.art-click .ico { width: 1.15em; height: 1.15em; flex: none; fill: none;
                  stroke: currentColor; stroke-width: 1.8;
                  stroke-linecap: round; stroke-linejoin: round; }
.art-click kbd {
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 4px 6px; border-radius: 6px; color: inherit;
  background: color-mix(in srgb, var(--t) 14%, rgba(255,255,255,.05));
  animation: capglow 3.6s ease-in-out infinite;
}
@keyframes keylight {
  0%, 34%   { color: color-mix(in srgb, var(--t) 58%, var(--ink-faint));
              border-color: color-mix(in srgb, var(--t) 34%, transparent);
              background: color-mix(in srgb, var(--t) 7%, transparent);
              box-shadow: none; }
  44%, 88%  { color: #fff;
              border-color: color-mix(in srgb, var(--t) 88%, transparent);
              background: color-mix(in srgb, var(--t) 18%, transparent);
              box-shadow: 0 0 0 4px color-mix(in srgb, var(--t) 14%, transparent); }
  100%      { color: color-mix(in srgb, var(--t) 58%, var(--ink-faint));
              border-color: color-mix(in srgb, var(--t) 34%, transparent);
              background: color-mix(in srgb, var(--t) 7%, transparent);
              box-shadow: none; }
}
@keyframes capglow {
  0%, 34%, 100% { background: color-mix(in srgb, var(--t) 14%, rgba(255,255,255,.05)); }
  44%, 88%      { background: color-mix(in srgb, var(--t) 36%, transparent); color: #fff; }
}

/* the cursor: travels in, presses, lifts */
.pointer { position: absolute; left: 0; top: 0; width: 20px; height: 20px;
           color: #fff; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
           animation: travel 3.6s cubic-bezier(.3,.7,.3,1) infinite; }
.pointer svg { width: 100%; height: 100%; fill: currentColor;
               stroke: rgba(0,0,0,.5); stroke-width: 1.2; }
@keyframes travel {
  0%        { transform: translate(128px, 64px) scale(1); opacity: 0; }
  12%       { opacity: 1; }
  34%       { transform: translate(62px, 26px) scale(1); }
  42%       { transform: translate(60px, 24px) scale(.82); }
  52%, 86%  { transform: translate(62px, 26px) scale(1); opacity: 1; }
  100%      { transform: translate(100px, 52px) scale(1); opacity: 0; }
}
/* the click itself */
.ripple { position: absolute; left: 56px; top: 20px; width: 14px; height: 14px;
          border-radius: 50%; background: rgba(255,255,255,.55);
          opacity: 0; pointer-events: none;
          animation: ring 3.6s ease-out infinite; }
@keyframes ring {
  0%, 40%  { opacity: 0; transform: scale(.3); }
  44%      { opacity: .7; transform: scale(.4); }
  60%, 100%{ opacity: 0; transform: scale(3.4); }
}

.input-card .cap { align-self: flex-start; }
.input-card h3 { margin: 14px 0 6px; }
@media (prefers-reduced-motion: reduce) {
  .pointer, .ripple, .art-click .k, .art-click kbd { animation: none; }
  .pointer { transform: translate(62px, 26px); }
}

/* ------------------------------------------------------------- privacy
   Seven claims, one open at a time.

   Closed it is a row of equal cards; open one and it takes the room while
   the rest fold to spines with their titles set sideways. Clicking the open
   one puts them all back. Flex rather than grid because transitioning
   `flex-grow` interpolates as a plain number, where `grid-template-columns`
   between `fr` values makes the browser re-solve the track layout each
   frame and judder. */
.section.wide { max-width: 1480px; }
.pv-rail { display: flex; gap: 10px; margin-top: 26px; min-height: 320px; }
.pv {
  position: relative; min-width: 0; overflow: hidden;
  flex: 1 1 0;
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  transition: flex-grow .55s cubic-bezier(.22,.9,.24,1),
              border-color .35s ease, background .35s ease, box-shadow .35s ease;
}
.pv:hover { border-color: rgba(143,185,255,.28); }
.pv.is-open {
  flex-grow: 11;
  border-color: rgba(143,185,255,.4);
  background: linear-gradient(135deg, rgba(143,185,255,.09), rgba(255,255,255,.012) 55%);
  box-shadow: 0 24px 60px -30px rgba(90,140,255,.5);
}

.pv-hit {
  position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%;
  background: none; border: 0; padding: 14px 0 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
}
.pv.is-open .pv-hit { inset: 0 auto 0 0; width: 54px; align-items: flex-start;
                      padding: 16px 0 0 17px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pv-n { font: 700 19px/1 inherit; letter-spacing: -1px; color: rgba(255,255,255,.22);
        font-variant-numeric: tabular-nums; transition: color .3s ease; }
.pv:hover .pv-n { color: rgba(255,255,255,.4); }
.pv.is-open .pv-n { color: var(--accent); }

.pv-more { position: absolute; top: 13px; right: 11px; width: 19px; height: 19px;
           border-radius: 50%; border: 1px solid var(--line);
           transition: border-color .25s ease; }
.pv:hover .pv-more { border-color: rgba(143,185,255,.4); }
.pv.is-open .pv-more { top: 44px; left: 16px; right: auto; }
.pv-more::before, .pv-more::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink-dim);
  transform: translate(-50%, -50%); transition: opacity .25s ease;
}
.pv-more::before { width: 9px; height: 1.4px; }
.pv-more::after  { width: 1.4px; height: 9px; }
.pv.is-open .pv-more::after { opacity: 0; }

.pv-spine {
  writing-mode: vertical-rl; margin-top: 40px;
  font-size: 14px; font-weight: 600; color: var(--ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-height: calc(100% - 110px);
  opacity: 0; transition: opacity .3s ease .1s;
}
.pv-rail:not([data-open="0"]) .pv:not(.is-open) .pv-spine { opacity: 1; }
.pv.is-open .pv-spine { display: none; }

.pv-face {
  position: absolute; inset: 48px 13px 15px; display: flex; flex-direction: column;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.pv-rail[data-open="0"] .pv-face { opacity: 1; }
.pv-art { display: grid; place-items: center; width: 100%; aspect-ratio: 1/.62;
          border-radius: 11px; margin-bottom: 11px;
          background: radial-gradient(70% 70% at 50% 42%, rgba(143,185,255,.17), transparent 72%),
                      rgba(255,255,255,.035);
          border: 1px solid var(--line); }
.pv-art svg { width: 40%; max-width: 34px; fill: none; stroke: #dbe6f7; stroke-width: 1.4;
              stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s ease; }
.pv:hover .pv-art svg { stroke: #fff; }
.pv-face h3 { margin: 0 0 5px; font-size: 13.5px; font-weight: 650; color: #fff;
              line-height: 1.28; letter-spacing: -.1px; }
.pv-face p { margin: 0 0 10px; font-size: 11.5px; line-height: 1.5; color: var(--ink-faint); }
.pv-face .pv-ok, .pv-face .pv-note { margin-top: auto; align-self: flex-start; }

.pv-open { display: none; }
.pv.is-open .pv-open {
  display: grid; grid-template-columns: minmax(250px, 31%) 1fr; gap: 24px;
  padding: 22px 24px 22px 58px; height: 100%; align-items: center;
  animation: pvIn .45s cubic-bezier(.22,.8,.26,1) both .12s;
}
@keyframes pvIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.pv-say h3 { margin: 0 0 10px; font-size: 21px; font-weight: 660; color: #fff;
             letter-spacing: -.4px; line-height: 1.25; }
.pv-lead { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink-dim); }
.pv-detail p { margin: 0 0 15px; font-size: 13px; line-height: 1.66; color: var(--ink-faint); }
.pv-detail code { font: 400 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
                  color: var(--accent); }
.pv-ok, .pv-note { display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
                   font-weight: 600; padding: 5px 10px; border-radius: 999px; }
.pv-ok { color: #8ff0c6; background: rgba(76,204,140,.13);
         border: 1px solid rgba(76,204,140,.3); }
.pv-ok svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6;
             stroke-linecap: round; stroke-linejoin: round; }
.pv-note { color: #ffcf9a; background: rgba(255,158,64,.12);
           border: 1px solid rgba(255,158,64,.3); }
.pv-ok.tiny, .pv-note.tiny { font-size: 10px; padding: 3px 7px; gap: 4px; }
.pv-ok.tiny svg { width: 9px; height: 9px; }
/* The stage is the container the scenes size themselves against — not the
   scene itself, which cannot query its own container. */
.pv-show { min-width: 0; position: relative; container-type: inline-size; }

@media (max-width: 1100px) {
  .pv-rail { flex-wrap: wrap; min-height: 0; }
  .pv { flex: 1 1 calc(25% - 10px); min-height: 280px; }
  .pv.is-open { flex: 1 1 100%; }
  .pv.is-open .pv-hit { inset: 0 auto auto 0; width: 100%; height: 48px;
                        flex-direction: row; gap: 12px; padding: 0 18px;
                        align-items: center; }
  .pv.is-open .pv-more { top: 14px; right: 16px; left: auto; }
  .pv-spine { display: none; }
  .pv.is-open .pv-open { grid-template-columns: 1fr; padding: 56px 20px 20px; }
}
@media (max-width: 620px) { .pv { flex: 1 1 calc(50% - 10px); } }

/* ---- the little scene on each card ---- */
/* The container is the wrapper, not the scene: an element cannot query its
   own container, so `cqw` here resolved against the viewport and the clamp
   sat at its maximum — which is how the panels came to overflow the card. */
.art-scene { position: relative; font-size: clamp(6px, 1.3cqw, 12px); }
.art-scene.desk, .art-scene.focus {
  aspect-ratio: 16/9.4; border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 90% at 20% 0%, #1b2336, #0a0d14 65%);
  border: 1px solid rgba(255,255,255,.08);
}
.art-scene.pair, .art-scene.flow { display: grid; gap: 14px; align-items: center; }
.art-scene.pair { grid-template-columns: 1fr 1fr; }
.art-scene .app { position: absolute; right: 4%; bottom: 8%; width: 58%; z-index: 3;
                  font-size: inherit; }
.art-scene.pair .app, .art-scene.flow .app { position: static; width: 100%; }
.art-scene.pair .app, .art-scene.flow .app { font-size: clamp(6px, 2.2cqw, 11px); }
.art-scene.desk .app { bottom: 26%; }
.art-scene.focus .app { right: 5%; bottom: 7%; width: 52%; }

/* 01 — the split reveal */
.art-scene.split { border-radius: 14px; overflow: hidden;
                   border: 1px solid rgba(255,255,255,.08); }
.art-scene.split .app { right: 3%; bottom: 7%; width: 46%;
                        clip-path: inset(0 0 0 0);
                        animation: scReveal 5s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes scReveal { 0%, 14% { opacity: 0; } 34%, 70% { opacity: 1; } 90%, 100% { opacity: 0; } }
.sp-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; z-index: 4;
           background: rgba(255,255,255,.7); box-shadow: 0 0 14px rgba(255,255,255,.35); }
.sp-tag { position: absolute; top: 9px; z-index: 5; font-size: 11px; font-weight: 640;
          padding: 4px 10px; border-radius: 999px; background: rgba(12,15,21,.9);
          border: 1px solid rgba(255,255,255,.16); color: var(--ink-dim); }
.sp-tag.l { left: 9px; }
.sp-tag.r { right: 9px; color: #fff; border-color: rgba(143,185,255,.5);
            background: rgba(40,62,110,.92); }

/* the windows, dock and flow are shared with the rest of the page */
.win { border-radius: .7em; overflow: hidden; background: #0d1119;
       border: 1px solid rgba(255,255,255,.1);
       box-shadow: 0 1.4em 3em -1.2em rgba(0,0,0,.85); }
.win.share { position: relative; }
.share-rule { position: absolute; inset: 0; border: 2px solid rgba(235,70,62,.9);
              border-radius: .7em; pointer-events: none; z-index: 5; }
.wbar { display: flex; align-items: center; gap: .45em; padding: .55em .75em;
        background: rgba(255,255,255,.055); border-bottom: 1px solid rgba(255,255,255,.07);
        font-size: .85em; color: var(--ink-faint); }
.wbar.light { background: #eceef2; color: #2a2e35; }
.wbar.light b { color: #1d2026; font-weight: 640; }
.wtabs { display: flex; gap: .4em; margin-left: .5em; }
.wtabs i { font-style: normal; padding: .18em .6em; border-radius: .35em;
           background: rgba(255,255,255,.05); }
.wtabs i.on { background: rgba(255,255,255,.12); color: #e7eefb; }
.wfocus { margin-left: auto; font-size: .85em; color: #8ff0c6;
          background: rgba(76,204,140,.16); border: 1px solid rgba(76,204,140,.3);
          padding: .1em .6em; border-radius: 999px; }
.wgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; padding: .55em; }
.cg { position: relative; aspect-ratio: 16/8.2; border-radius: .45em; display: grid;
      place-items: center; background: #171c26; border: 1px solid rgba(255,255,255,.06); }
.cg.sp { border-color: rgba(76,204,140,.55); }
.cgf { width: 2.2em; height: 2.2em; border-radius: 50%; display: grid; place-items: center;
       font-size: .85em; font-weight: 650; color: #fff; }
.cgf.f0 { background:#4f7d59 } .cgf.f1 { background:#5566a8 }
.cgf.f2 { background:#7a6250 } .cgf.f3 { background:#3f7f6e }
.cg b { position: absolute; left: .5em; bottom: .4em; font-size: .66em; font-weight: 500;
        color: #cdd6e2; }
.cg em { position: absolute; right: .5em; bottom: .4em; font-size: .62em; font-style: normal;
         color: #8ff0c6; background: rgba(76,204,140,.18); padding: .05em .4em;
         border-radius: 999px; }
.win.mon { background: #fbfbfd; }
.msearch { margin-left: auto; font-size: .85em; background: #fff; border: 1px solid #b9c6e4;
           border-radius: 999px; padding: .12em .7em; color: #1d2026; }
.mrows { background: #fff; }
.mrows i { display: block; height: 1.5em; border-bottom: 1px solid rgba(0,0,0,.05); }
.mrows i:nth-child(even) { background: #f6f7f9; }
.mnone { display: block; padding: .9em; text-align: center; font-size: .82em;
         color: #9aa0a9; background: #fff; }
.st-events { display: grid; grid-template-columns: 1fr auto; gap: .6em 1em; padding: .9em 1em; }
.st-events span { font: 400 .85em/1 ui-monospace, SFMono-Regular, Menlo, monospace;
                  color: var(--ink-faint); }
.st-events b { font-size: .82em; font-weight: 640; color: #8ff0c6; }
.scursor { position: absolute; left: 36%; top: 40%; width: 1.6em; height: 1.6em; z-index: 4;
           filter: drop-shadow(0 2px 3px rgba(0,0,0,.7));
           animation: sctour 9s cubic-bezier(.4,.1,.3,1) infinite; }
.scursor svg { width: 100%; height: 100%; fill: #fff; stroke: rgba(0,0,0,.45); stroke-width: 1.1; }
@keyframes sctour { 0%,10% { left:22%; top:34% } 36%,48% { left:58%; top:60% }
                    70%,82% { left:82%; top:72% } 100% { left:22%; top:34% } }

.sdock { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%);
         display: flex; align-items: flex-end; gap: .5em; padding: .4em .65em;
         border-radius: .9em; background: rgba(236,240,247,.17);
         border: 1px solid rgba(255,255,255,.22);
         backdrop-filter: blur(14px); z-index: 4; }
.sdock .dk { width: 2.5em; height: 2.5em; position: relative; display: grid;
             place-items: center; }
.sdock .dk img { width: 2.5em; height: 2.5em; display: block;
                 filter: drop-shadow(0 2px 5px rgba(0,0,0,.45)); }
.sdock .dk::after { content: ""; position: absolute; left: 50%; bottom: -.4em;
                    width: .2em; height: .2em; border-radius: 50%;
                    transform: translateX(-50%); background: rgba(255,255,255,.7); }
.sdock .dk.ours { width: 0; opacity: 0; overflow: visible;
                  animation: ghost 6.5s cubic-bezier(.3,.8,.3,1) infinite; }
.sdock .dk.ours::after { display: none; }
.sdock .dk.ours b { display: grid; place-items: center; width: 2.5em; height: 2.5em;
                    border-radius: .58em; background: linear-gradient(160deg,#1b2440,#0e1424);
                    box-shadow: 0 2px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14); }
.sdock .dk.ours b img { width: 1.75em; height: 1.75em; filter: none; }
.sdock .dk.ours em { position: absolute; left: 50%; top: -1.9em; transform: translateX(-50%);
                     white-space: nowrap; font-style: normal; font-size: .72em; font-weight: 600;
                     color: #cfe0ff; background: rgba(20,28,48,.95); padding: .2em .6em;
                     border-radius: .45em; border: 1px solid rgba(143,185,255,.4); }
@keyframes ghost {
  0%, 12%   { width: 0;     opacity: 0; transform: translateY(.4em) scale(.85); }
  24%, 54%  { width: 2.5em; opacity: 1; transform: none; }
  66%       { width: 2.5em; opacity: 0; transform: translateY(-.7em) scale(.9); }
  74%, 100% { width: 0;     opacity: 0; transform: translateY(.4em) scale(.85); }
}

.st-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 8px;
           align-items: center; }
.fl { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center;
      font-size: 11.5px; line-height: 1.4; color: var(--ink-faint);
      border: 1px solid var(--line); border-radius: 12px; padding: 13px 8px;
      background: rgba(255,255,255,.028); }
.fl.me { border-color: rgba(76,204,140,.4); background: rgba(76,204,140,.07);
         color: var(--ink-dim); }
.fl.off { border-style: dashed; opacity: .6; }
.chip { font-style: normal; font-size: 11.5px; font-weight: 650; color: #fff; }
.fl.off .chip { color: var(--ink-faint); }
.wv { display: flex; align-items: flex-end; gap: 2px; height: 18px; }
.wv i { width: 3px; border-radius: 2px; background: #6ea8ff;
        animation: wvb 1.1s ease-in-out infinite alternate; }
.wv i:nth-child(odd) { height: 60%; animation-delay: .12s }
.wv i:nth-child(even) { height: 100%; }
@keyframes wvb { from { transform: scaleY(.35) } to { transform: scaleY(1) } }
.fa { font-size: 15px; color: var(--ink-faint); }
.fa.out { color: rgba(255,107,107,.65); }

.ext-list { background: #fff; }
.ext-row { display: flex; align-items: center; gap: 9px; padding: 10px 13px;
           font-size: 11.5px; color: #2a2e35; border-bottom: 1px solid rgba(0,0,0,.06); }
.ext-row em { margin-left: auto; font-style: normal; font-size: 10.5px; color: #4a8f5f; }
.ext-ic { width: 19px; height: 19px; border-radius: 6px; background: var(--c); flex: none; }
.ext-ic.none { background: none; border: 1px dashed #b9bec7; color: #9aa0a9;
               display: grid; place-items: center; font-size: 11px; }
.ext-row.empty { color: #8a9099; }
.ext-row.empty em::after { content: "not found"; color: #b06a6a; }

.pv-ok, .pv-note { display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
                   font-weight: 600; padding: 5px 10px; border-radius: 999px; }
.pv-ok { color: #8ff0c6; background: rgba(76,204,140,.13);
         border: 1px solid rgba(76,204,140,.3); }
.pv-ok svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6;
             stroke-linecap: round; stroke-linejoin: round; }
.pv-note { color: #ffcf9a; background: rgba(255,158,64,.12);
           border: 1px solid rgba(255,158,64,.3); }

@media (max-width: 900px) {
    .art-scene.pair { grid-template-columns: 1fr; }
  .st-flow { grid-template-columns: 1fr; }
  .fa { transform: rotate(90deg); }
}
/* Sticky stacking needs scroll travel; with motion reduced it is simply a
   list, which loses nothing but the effect. */
@media (prefers-reduced-motion: reduce) {
    .scursor, .sdock .dk.ours, .wv i, .art-scene.split .app { animation: none; }
}

/* ======================= the stages ======================= */
/* Room above for the callout, which was landing on the window chrome. */
.st { position: relative; padding-top: 26px; }
.callout {
  position: absolute; top: -6px; right: 0; z-index: 6;
  max-width: 90%; text-align: center;
  font-size: 11.5px; font-weight: 600; color: #e9f0fb;
  padding: 7px 13px; border-radius: 10px;
  background: rgba(22,26,36,.94); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
}
.callout.amber { color: #ffd9a8; border-color: rgba(255,158,64,.34); }

/* ---- our panel, in miniature ---- */
.mini { position: absolute; right: 5%; bottom: 7%; width: 74%; padding: 9px 10px 10px;
        border-radius: 8px; z-index: 2;
        background: rgba(16,19,27,.84); border: 1px solid rgba(255,255,255,.14);
        backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 10px 26px rgba(0,0,0,.55); }
/* Sized and placed so the divider's travel either clears it completely or
   covers it completely — a panel sliced down the middle reads as a
   rendering fault, not as a reveal. */
.mini.float { right: 3%; bottom: 8%; width: 44%; }
.mb { display: flex; align-items: center; gap: 4px; }
.mb em { font-style: normal; font-size: 9px; color: #cfd8e6; margin-left: 3px;
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.md.r { background: #ff5f57 } .md.a { background: #febc2e }
.mrow { display: flex; gap: 3px; margin: 5px 0 5px; }
.mk { font-style: normal; font-size: 8px; font-weight: 700; padding: 4px 6px;
      border-radius: 4px; white-space: nowrap;
      border: 1px solid color-mix(in srgb, var(--t) 40%, transparent);
      background: color-mix(in srgb, var(--t) 9%, transparent);
      color: color-mix(in srgb, var(--t) 62%, #99a6ba); }
.mk.hear { --t: #61adff } .mk.mic { --t: #59d6bf }
.mk.answer { --t: #ff9e40 } .mk.screen { --t: #c28fff }
.mk.on { color: #fff; border-color: color-mix(in srgb, var(--t) 90%, transparent);
         background: color-mix(in srgb, var(--t) 22%, transparent); }
.mcard { display: block; border: 1px solid rgba(255,158,64,.45); border-radius: 5px;
         padding: 5px; background: rgba(255,158,64,.05); }
.mcard b { display: block; height: 5px; width: 78%; border-radius: 2px;
           background: rgba(255,200,120,.8); margin-bottom: 4px; }
.mcard i { display: block; height: 4px; width: 92%; border-radius: 2px;
           background: rgba(255,255,255,.26); margin-bottom: 3px; }
.mcard i.s { width: 58%; margin-bottom: 0; }

/* ---- 01: the split reveal ---- */
.st-split { position: relative; border-radius: 12px; overflow: hidden;
            border: 1px solid var(--line); }
.sp-base, .sp-over { position: relative; }
.sp-over { position: absolute; inset: 0; clip-path: inset(0 0 0 50%);
           animation: sweep 5s cubic-bezier(.5,0,.5,1) infinite; }
.sp-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; z-index: 4;
           background: rgba(255,255,255,.75); box-shadow: 0 0 14px rgba(255,255,255,.4);
           animation: sweepline 5s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes sweep {
  0%, 14%   { clip-path: inset(0 0 0 98%); }   /* their view: no panel */
  40%, 64%  { clip-path: inset(0 0 0 50%); }   /* yours: panel whole */
  90%, 100% { clip-path: inset(0 0 0 98%); }
}
@keyframes sweepline {
  0%, 14% { left: 98%; }  40%, 64% { left: 50%; }  90%, 100% { left: 98%; }
}
.sp-tag { position: absolute; top: 10px; z-index: 5; font-size: 11px; font-weight: 640;
          padding: 4px 10px; border-radius: 999px; background: rgba(12,15,21,.9);
          border: 1px solid rgba(255,255,255,.16); color: var(--ink-dim); }
.sp-tag.l { left: 10px; } .sp-tag.r { right: 10px; color: #fff;
            border-color: rgba(143,185,255,.5); background: rgba(40,62,110,.9); }

/* ---- a meeting window ---- */
.meet { background: #0c0f16; }
.meet-bar { display: flex; align-items: center; gap: 6px; padding: 7px 11px;
            border-bottom: 1px solid rgba(255,255,255,.07); font-size: 10.5px;
            color: var(--ink-faint); }
.meet-n { margin-left: 6px; }
.meet-rec { margin-left: auto; color: #ff8d86; font-size: 9.5px; }
.meet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 9px; }
/* Shorter tiles. At 760px of stage each 16:10 tile was 300px tall, so two
   rows made the call window portrait — which no call window is. */
.cg { position: relative; aspect-ratio: 16/7.4; border-radius: 8px; display: grid;
      place-items: center; background: #171b24; border: 1px solid rgba(255,255,255,.06); }
.cg.sp { border-color: rgba(76,204,140,.6); box-shadow: 0 0 0 1px rgba(76,204,140,.3); }
.cgf { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
       font-size: 12px; font-weight: 650; color: #fff; }
.cgf.f0 { background: #4f7d59 } .cgf.f1 { background: #5566a8 }
.cgf.f2 { background: #7a6250 } .cgf.f3 { background: #3f7f6e }
.cg b { position: absolute; left: 7px; bottom: 6px; font-size: 8.5px; font-weight: 500;
        color: #cdd6e2; }
.cg em { position: absolute; right: 7px; bottom: 6px; font-size: 8px; font-style: normal;
         color: #8ff0c6; background: rgba(76,204,140,.18); padding: 1px 5px; border-radius: 999px; }
.meet-ctl { display: flex; justify-content: center; gap: 7px; padding: 8px 0 11px; }
.meet-ctl i { width: 19px; height: 19px; border-radius: 50%; background: rgba(255,255,255,.09); }
.meet-ctl i.on { background: rgba(99,140,255,.4); }
.meet-ctl i.end { width: 30px; border-radius: 999px; background: #e0413a; }

/* ---- 02: a real Dock ---- */
/* One screen with the Dock on its floor, which is where a Dock is. Stacked
   as two grid rows it sat above the desktop it was supposed to belong to. */
.st-dock { position: relative; }
.st-desk { position: relative; border-radius: 11px; aspect-ratio: 16/9.6;
           background: linear-gradient(160deg, #1a2033, #0b0e14); border: 1px solid var(--line); }
.dock { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
        display: flex; align-items: flex-end; justify-content: center; gap: 9px;
        padding: 8px 13px; border-radius: 17px; z-index: 3;
        background: rgba(232,236,243,.16); border: 1px solid rgba(255,255,255,.22);
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
/* The real macOS icons, read off a Mac. Drawing them in CSS never got past
   "approximately Finder", which is exactly what looked fake. */
.dk { width: 42px; height: 42px; flex: none; position: relative;
      display: grid; place-items: center; }
.dk img { width: 42px; height: 42px; display: block;
          filter: drop-shadow(0 3px 6px rgba(0,0,0,.45)); }
.dk::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 3px;
             height: 3px; border-radius: 50%; transform: translateX(-50%);
             background: rgba(255,255,255,.7); }
.dk.sep { width: 1px; height: 34px; background: rgba(255,255,255,.3); }
.dk.sep::after { display: none; }

/* ours: in for a beat, then gone, and the Dock closes up behind it */
.dk.ours {
  width: 0; overflow: visible; opacity: 0;
  animation: ghost 6s cubic-bezier(.3,.8,.3,1) infinite;
}
.dk.ours::after { display: none; }
/* The real mark, not a letter: this is the one icon in the Dock that is
   ours, so it is the one that has no excuse for being approximate. */
.dk.ours b {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px;
  background: linear-gradient(160deg, #1b2440, #0e1424);
  box-shadow: 0 3px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14);
}
.dk.ours b img { width: 30px; height: 30px; display: block; filter: none; }
.dk.ours em {
  position: absolute; left: 50%; top: -26px; transform: translateX(-50%);
  white-space: nowrap; font-style: normal; font-size: 10px; font-weight: 600;
  color: #cfe0ff; background: rgba(20,28,48,.95); padding: 3px 8px;
  border-radius: 6px; border: 1px solid rgba(143,185,255,.4);
}
@keyframes ghost {
  0%, 10%   { width: 0;    opacity: 0; transform: translateY(6px) scale(.85); }
  22%, 52%  { width: 42px; opacity: 1; transform: none; }
  64%       { width: 42px; opacity: 0; transform: translateY(-10px) scale(.9); }
  72%, 100% { width: 0;    opacity: 0; transform: translateY(6px) scale(.85); }
}

.mac-win { border-radius: 11px; overflow: hidden; max-width: 100%; background: #fbfbfd;
           border: 1px solid rgba(0,0,0,.14); box-shadow: 0 18px 44px rgba(0,0,0,.5); }
.mac-win.dark { background: #0c0f16; border-color: var(--line); }
.mac-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px;
           background: linear-gradient(180deg, #f0f1f4, #e4e6ea);
           border-bottom: 1px solid rgba(0,0,0,.1); }
.mac-bar.dark { background: rgba(255,255,255,.05); border-bottom-color: var(--line); }
.mac-title { margin-left: 8px; font-size: 11.5px; font-weight: 640; color: #1d2026;
             display: flex; align-items: baseline; gap: 7px; }
.mac-title em { font-style: normal; font-weight: 400; font-size: 10px; color: #7b818c; }
.mac-bar.dark .mac-title { color: var(--ink-dim); }
.mac-search { margin-left: auto; font-size: 10.5px; color: #1d2026; background: #fff;
              border: 1px solid #b9c6e4; border-radius: 999px; padding: 3px 11px 3px 20px;
              position: relative; min-width: 92px; }
.mac-search::before { content: "⌕"; position: absolute; left: 7px; top: 2px; color: #8a9099; }
.mac-tab { width: 100%; border-collapse: collapse; font-size: 10.5px;
           background: #fff; table-layout: fixed; }
.mac-tab th { text-align: left; padding: 6px 12px; font-weight: 600; color: #6c727c;
              background: #f2f3f6; border-bottom: 1px solid rgba(0,0,0,.08); }
.mac-tab th:last-child, .mac-tab td:last-child { text-align: right; }
.mac-tab td { padding: 7px 12px; white-space: nowrap; color: #2a2e35; border-bottom: 1px solid rgba(0,0,0,.05); }
.mac-tab tr:nth-child(even) td { background: #f6f7f9; }
.mac-tab tr.blank td { height: 22px; }
.st-live { margin-left: auto; font-size: 10px; color: #8ff0c6;
           background: rgba(76,204,140,.15); border: 1px solid rgba(76,204,140,.3);
           padding: 2px 8px; border-radius: 999px; }

/* ---- 04: the page keeps focus ---- */
.st-page { position: relative; padding: 14px; min-height: 150px; }
.st-events { display: grid; grid-template-columns: 1fr auto; gap: 9px 14px; max-width: 70%; }
.st-events span { font: 400 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
                  color: var(--ink-faint); }
.st-events b { font-size: 11px; font-weight: 640; color: #8ff0c6; }

/* ---- 05: the pointer ---- */
.st-screen { position: relative; border-radius: 11px; aspect-ratio: 16/9;
             background: #0b0e14; border: 1px solid var(--line); overflow: hidden;
             padding: 13px; }
.st-screen.tall { aspect-ratio: 16/8.4; }
.st-code { display: grid; gap: 7px; }
.st-code i { display: block; height: 6px; border-radius: 3px; width: 70%;
             background: rgba(150,175,215,.2); }
.st-code i.w5 { width: 45% } .st-code i.w6 { width: 58% }
.st-code i.w8 { width: 82% } .st-code i.w9 { width: 92% }
.ptr { position: absolute; z-index: 5; width: 19px; height: 19px;
       filter: drop-shadow(0 2px 3px rgba(0,0,0,.7));
       animation: ptrTour 9s cubic-bezier(.4,.1,.3,1) infinite; }
.ptr svg { width: 100%; height: 100%; fill: #fff; stroke: rgba(0,0,0,.45); stroke-width: 1.1; }
@keyframes ptrTour {
  0%, 8%    { left: 14%; top: 22%; }
  24%, 36%  { left: 52%; top: 64%; }   /* over the panel */
  52%, 62%  { left: 88%; top: 86%; }   /* the resize grip */
  78%, 88%  { left: 62%; top: 78%; }   /* the slider */
  100%      { left: 14%; top: 22%; }
}

/* ---- 06: where the audio goes ---- */
.st-audio { padding: 4px 0; }
.st-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px;
           align-items: center; }
.fl { display: flex; flex-direction: column; gap: 7px; align-items: center; text-align: center;
      font-size: 11.5px; line-height: 1.4; color: var(--ink-faint);
      border: 1px solid var(--line); border-radius: 12px; padding: 14px 10px;
      background: rgba(255,255,255,.028); }
.fl.me { border-color: rgba(76,204,140,.4); background: rgba(76,204,140,.07);
         color: var(--ink-dim); }
.fl.off { border-style: dashed; opacity: .6; }
.chip { font-style: normal; font-size: 11.5px; font-weight: 650; color: #fff; }
.fl.off .chip { color: var(--ink-faint); }
.wv { display: flex; align-items: flex-end; gap: 2px; height: 20px; }
.wv i { width: 3px; border-radius: 2px; background: #6ea8ff;
        animation: wvb 1.1s ease-in-out infinite alternate; }
.wv i:nth-child(odd) { height: 60%; animation-delay: .12s }
.wv i:nth-child(even) { height: 100%; }
.wv i:nth-child(3n) { height: 40%; animation-delay: .24s }
@keyframes wvb { from { transform: scaleY(.35) } to { transform: scaleY(1) } }
.fa { font-size: 17px; color: var(--ink-faint); }
.fa.out { color: rgba(255,107,107,.65); }

/* ---- 07: nothing in the browser ---- */
.ext-list { background: #fff; }
.ext-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px;
           font-size: 11.5px; color: #2a2e35; border-bottom: 1px solid rgba(0,0,0,.06); }
.ext-row em { margin-left: auto; font-style: normal; font-size: 10.5px; color: #4a8f5f; }
.ext-ic { width: 20px; height: 20px; border-radius: 6px; background: var(--c); flex: none; }
.ext-ic.none { background: none; border: 1px dashed #b9bec7; color: #9aa0a9;
               display: grid; place-items: center; font-size: 11px; }
.ext-row.empty { color: #8a9099; }

.st-cap { margin: 10px 0 0; font-size: 12px; color: var(--ink-faint); }

/* Narrow screens cannot do sideways: stack and open downward. */
@media (max-width: 1000px) {
  .pv-rail, .pv-rail[data-open] { grid-template-columns: 1fr; min-height: 0; }
  .pv-hit, .pv.is-open .pv-hit { position: static; width: 100%; height: auto;
                                 flex-direction: row; align-items: center; gap: 12px;
                                 padding: 16px 18px; }
  .pv-more, .pv.is-open .pv-more { position: static; transform: none; margin-left: auto; }
  .pv-spine { writing-mode: horizontal-tb; margin-top: 0; max-height: none; opacity: 1; }
  .pv-rail:not([data-open="0"]) .pv:not(.is-open) .pv-spine { opacity: 1; }
  .pv-face { display: none; }
  .pv.is-open .pv-open { grid-template-columns: 1fr; padding: 0 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .pv-rail { transition: none; }
  .sp-over, .sp-line, .ptr, .wv i { animation: none; }
  .pv.is-open .pv-open { animation: none; }
}


/* ------------------------------------------------- motion in the stages
   A still picture of a claim is just a diagram. Each stage now does the
   thing it is describing, on a loop. */

/* 03 — the search being typed, then coming back empty */
.mac-search { display: inline-flex; align-items: center; gap: 1px; }
.mac-search .typed { font-style: normal; overflow: hidden; white-space: nowrap;
                     display: inline-block; max-width: 0;
                     animation: typeIn 5s steps(11, end) infinite; }
.mac-search .typed::before { content: "BunnyBuddy"; }
.mac-search .car { display: inline-block; width: 1px; height: 11px; background: #3b82f6;
                   animation: caret 1s steps(1) infinite; }
@keyframes typeIn { 0% { max-width: 0 } 34%, 88% { max-width: 72px } 100% { max-width: 0 } }
@keyframes caret { 50% { opacity: 0 } }
.mac-none { padding: 16px; text-align: center; font-size: 11px; color: #9aa0a9;
            background: #fff; opacity: 0; animation: noneIn 5s ease infinite; }
@keyframes noneIn { 0%, 32% { opacity: 0 } 42%, 88% { opacity: 1 } 100% { opacity: 0 } }

/* 04 — the panel being clicked, while the page stays focused */
.st-page .mini { animation: nudge 4.2s ease-in-out infinite; }
@keyframes nudge { 0%, 70%, 100% { transform: none } 76% { transform: scale(.985) } }
.st-page .mini::after {
  content: ""; position: absolute; left: 30%; top: 55%; width: 14px; height: 14px;
  border-radius: 50%; background: rgba(255,255,255,.5); opacity: 0;
  animation: tap 4.2s ease-out infinite;
}
@keyframes tap { 0%, 70% { opacity: 0; transform: scale(.3) }
                 76% { opacity: .75; transform: scale(.5) }
                 92%, 100% { opacity: 0; transform: scale(3.2) } }
.st-live { animation: steady 4.2s ease-in-out infinite; }
@keyframes steady { 0%, 100% { box-shadow: 0 0 0 0 rgba(76,204,140,.4) }
                    50% { box-shadow: 0 0 0 5px rgba(76,204,140,0) } }

/* 06 — a packet that travels to the Mac and stops there */
.st-flow { position: relative; }
.fa { position: relative; }
.fa::after { content: ""; position: absolute; left: -4px; top: 50%; width: 7px; height: 7px;
             margin-top: -3.5px; border-radius: 50%; background: #6ea8ff;
             box-shadow: 0 0 9px rgba(110,168,255,.8);
             animation: hop 3.4s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes hop { 0% { transform: translateX(-10px); opacity: 0 }
                 15% { opacity: 1 } 55% { transform: translateX(14px); opacity: 1 }
                 70%, 100% { transform: translateX(14px); opacity: 0 } }
.fa.out::after { background: #ff7b7b; box-shadow: none;
                 animation: blocked 3.4s cubic-bezier(.4,0,.3,1) infinite; }
@keyframes blocked { 0%, 55% { transform: translateX(-10px); opacity: 0 }
                     66% { transform: translateX(0); opacity: .9 }
                     74% { transform: translateX(2px); opacity: .9 }
                     82%, 100% { transform: translateX(-4px); opacity: 0 } }

/* 07 — the page scanning itself and finding nothing of ours */
.ext-list { position: relative; overflow: hidden; }
.ext-list::after { content: ""; position: absolute; left: 0; right: 0; height: 36px;
                   background: linear-gradient(180deg, transparent, rgba(99,140,255,.18), transparent);
                   animation: scan 3.6s ease-in-out infinite; }
@keyframes scan { 0% { top: -36px } 100% { top: 100% } }
.ext-row.empty em::after { content: "not found"; color: #b06a6a; }

@media (prefers-reduced-motion: reduce) {
  .dk, .mac-search .typed, .mac-search .car, .mac-none, .st-page .mini,
  .st-page .mini::after, .st-live, .fa::after, .ext-list::after { animation: none; }
  .mac-search .typed { max-width: 72px; } .mac-none { opacity: 1; }
}

/* The page has a `.lead` class for section intros, and the panel happens to
   use the same name for the "Short answer:" run — which came out at section
   size inside a 10px panel. Scoped back to the panel's own scale. */
.app .qa-a .lead { font-size: inherit; line-height: inherit; max-width: none;
                   margin: 0; display: inline; }

/* ---------------------------------------- the real panel in a stage
   These cards used to hold a diagram of the interface — grey bars standing
   in for text. They hold the interface itself now, running the same
   timeline as the demo at the top of the page, so it cannot drift from the
   product and cannot look invented. */
.pvx-show .app, .st .app {
  position: absolute; right: 3%; bottom: 7%; width: 56%;
  font-size: clamp(6.5px, 1.05cqw, 11px);
  border-radius: 10px; z-index: 2;
}
.st { container-type: inline-size; }
.pvx-show .app .app-heard { min-height: 2.1em; }
.pvx-show .app .qa-a ul { display: none; }
.pvx-show .app .app-foot { display: none; }
.st-split .app { right: 3%; bottom: 8%; width: 44%; }
.st-desk .app { right: 4%; bottom: 31%; width: 56%; }   /* clear of the Dock */
.st-page .app { right: 4%; bottom: 8%; width: 52%; }
.st-screen .app { right: 5%; bottom: 10%; width: 54%; }

/* ---------------------------------------------- a Dock that reads real
   Translucent light bar, running dots, and a pointer that runs along it
   looking for a tile that is not there. */
/* position is set above; this block only adds the running dots and the
   pointer that runs along looking for a tile. */
.dock::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 1px;
}
.dk::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 3px;
             height: 3px; border-radius: 50%; transform: translateX(-50%);
             background: rgba(255,255,255,.7); }
.dk.sep::after, .dock-seek {
  position: absolute; bottom: -4px; width: 17px; height: 17px; z-index: 4;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
  animation: seek 6s cubic-bezier(.4,.1,.3,1) infinite;
}
.dock-seek svg { width: 100%; height: 100%; fill: #fff; stroke: rgba(0,0,0,.45);
                 stroke-width: 1.1; }
@keyframes seek {
  0%, 6%    { left: 4%; opacity: 0; }
  12%       { left: 8%; opacity: 1; }
  46%       { left: 74%; opacity: 1; }
  62%, 76%  { left: 90%; opacity: 1; }   /* where a tile would be */
  92%, 100% { left: 90%; opacity: 0; }
}

/* ------------------------------------------------------- responsiveness
   Seven spines need width. Below that the rail wraps to a grid of faces and
   the open card drops underneath, full width. */
@media (max-width: 1240px) {
  .pv-rail { flex-wrap: wrap; min-height: 0; }
  .pv { flex: 1 1 calc(25% - 12px); min-height: 300px; }
  .pv.is-open { flex: 1 1 100%; min-height: 380px; }
  .pv-hit, .pv.is-open .pv-hit { width: 100%; align-items: center; padding-top: 16px; }
  .pv.is-open .pv-hit { inset: 0 auto auto 0; height: 50px; width: 100%;
                        flex-direction: row; justify-content: flex-start; gap: 12px;
                        padding: 0 18px; }
  .pv.is-open .pv-more { position: absolute; top: 14px; right: 16px; left: auto; }
  .pv-spine { display: none; }
  .pv-rail:not([data-open="0"]) .pv:not(.is-open) .pv-face { opacity: 1; }
  .pv.is-open .pv-open { padding: 58px 20px 20px; align-items: start; }
}
@media (max-width: 820px) {
  .pv { flex: 1 1 calc(50% - 12px); }
  .pv.is-open .pv-open { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .pv { flex: 1 1 100%; min-height: 0; }
  .pv-face { position: static; opacity: 1 !important; padding: 0 16px 16px; }
  .pv-art { aspect-ratio: 16/5; }
}


/* the panel standing alongside the other stages */
/* Side by side, not stacked. Absolutely positioning the panel over the
   window made them overlap and pushed the window off the card. */
.st-proc, .st-ext { display: grid; grid-template-columns: 42% 1fr; gap: 16px;
                    align-items: center; }
.st-ext { grid-template-columns: 1fr 42%; }
.proc-desk, .ext-desk { position: relative; }
.ext-desk { order: 2; }
.proc-desk .app, .ext-desk .app {
  position: static; width: 100%; font-size: clamp(6px, 1.5cqw, 10px);
}
.audio-wrap { display: grid; grid-template-columns: 1fr 42%; gap: 16px;
              align-items: center; }
.audio-wrap .app { position: static; width: 100%;
                   font-size: clamp(6px, 1.5cqw, 10px); }


/* The face has a seventh of the column to work with, so the badge there is a
   tick and a word; the open card carries the full phrase. */
.pv-ok.tiny, .pv-note.tiny { font-size: 10px; padding: 3px 7px; gap: 4px; }
.pv-ok.tiny svg { width: 9px; height: 9px; }


/* ------------------------------------- scenes with no panel in them
   The panel only appears on the three cards whose claim is about the panel:
   whether it reaches the screen share, whether using it blurs the page, and
   whether it changes the pointer. On the others the Dock, the process list,
   the audio path and the extensions list are the demonstration, and a copy
   of the app sitting next to them was just something else to look at. */
/* Now that the panel is gone from these, the window is the subject and
   should fill the stage rather than sit in the middle of it at panel size. */
.art-scene.pair { grid-template-columns: 1fr; font-size: clamp(9px, 1.9cqw, 17px); }
.art-scene.pair .win { width: 100%; margin: 0 auto; }   /* max alone left it at content width */
.art-scene.flow { font-size: clamp(9px, 1.5cqw, 14px); }
/* The Dock is the whole demonstration on this card, so it gets the scale
   the app panel used to take. */
.art-scene.desk { display: grid; place-items: center;
                  font-size: clamp(12px, 4cqw, 22px); }   /* measured: 2.4cqw of a 523px stage was only 12px */
.art-scene.desk .sdock { position: relative; left: auto; bottom: auto;
                         transform: none; margin-top: 8%; }
.art-scene.flow { grid-template-columns: 1fr; }

/* ------------------------------------------------------------- Glance
   The claim this section makes is that an answer has to be takeable in at a
   glance, so the section had better demonstrate that rather than describe
   it: the diagram is the first thing in the frame and the prose sits under
   it, which is the same order the app uses. */
.gl { display: grid; grid-template-columns: minmax(280px, 40%) 1fr; gap: 28px;
      margin-top: 28px; align-items: center; }
.gl-say h3 { margin: 0 0 12px; font-size: 20px; font-weight: 660; color: #fff;
             letter-spacing: -.4px; }
.gl-say > p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.68; color: var(--ink-faint); }
.gl-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.gl-list li { display: grid; gap: 3px; padding-left: 14px; position: relative; }
.gl-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px;
                      height: 5px; border-radius: 50%; background: var(--accent); }
.gl-list b { font-size: 13.5px; font-weight: 640; color: var(--ink-dim); }
.gl-list span { font-size: 13px; line-height: 1.6; color: var(--ink-faint); }

.gl-fig { margin: 0; border: 1px solid var(--line); border-radius: 16px;
          padding: 18px 20px 20px;
          background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); }
.gl-fig figcaption { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                     font-size: 14.5px; font-weight: 600; color: #fff; margin-bottom: 16px; }
.gl-tag { font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
          color: #ffcf9a; background: rgba(255,158,64,.14);
          border: 1px solid rgba(255,158,64,.3); padding: 3px 8px; border-radius: 999px; }
.gl-dia { border: 1px solid rgba(97,173,255,.35); border-radius: 10px; padding: 13px;
          background: rgba(255,255,255,.035); }
.gl-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gl-lanes i { font-style: normal; font-size: 12px; font-weight: 600; color: #e7eefb;
              text-align: center; padding: 7px 4px; border-radius: 7px;
              background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.14); }
/* Each row is three lanes wide; the arrow spans from lane --a to lane --b,
   which is what lets one rule place every message. */
.gl-step { position: relative; height: 38px; }
.gl-step::before { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent calc(16.666% - .5px), rgba(255,255,255,.1) calc(16.666% - .5px),
                    rgba(255,255,255,.1) calc(16.666% + .5px), transparent calc(16.666% + .5px)),
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(255,255,255,.1) calc(50% - .5px),
                    rgba(255,255,255,.1) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(90deg, transparent calc(83.333% - .5px), rgba(255,255,255,.1) calc(83.333% - .5px),
                    rgba(255,255,255,.1) calc(83.333% + .5px), transparent calc(83.333% + .5px));
}
.gl-step b {
  position: absolute; top: 2px;
  left: calc((min(var(--a), var(--b)) * 2 + 1) * 16.666%);
  width: calc(abs(var(--b) - var(--a)) * 33.333%);
  font-size: 11.5px; font-weight: 500; color: var(--ink-dim); text-align: center;
}
.gl-step b::after {
  content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 0;
  border-top: 1.4px solid #61adff;
}
.gl-step.ret b { color: var(--ink-faint); }
.gl-step.ret b::after { border-top-style: dashed; border-top-color: #99a6ba; }
/* the head, on the destination end */
.gl-step b::before {
  content: ""; position: absolute; top: 18px; width: 0; height: 0;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.gl-step b { --dir: 1; }
.gl-step b::before { right: -1px; border-left: 6px solid #61adff; }
.gl-step.ret b::before { right: auto; left: -1px;
                         border-left: 0; border-right: 6px solid #99a6ba; }
.gl-after { margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-faint); }
.gl-after b { color: var(--ink-dim); }

@media (max-width: 900px) { .gl { grid-template-columns: 1fr; } }

/* A flow: the second shape, and the commoner one. Wrapped rather than
   scrolled, exactly as the app wraps it — a path that runs off the edge is a
   path nobody can read, and the panel is often narrow. */
.gl-show { display: grid; gap: 16px; }
.gl-cap { font-size: 10.5px; font-weight: 600; letter-spacing: .6px;
          color: var(--ink-faint); margin-bottom: 10px; }
.gl-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.gl-flow span { font-size: 12px; font-weight: 600; color: #e7eefb;
                padding: 7px 12px; border-radius: 999px;
                background: rgba(97,173,255,.16);
                border: 1px solid rgba(97,173,255,.5); white-space: nowrap; }
.gl-flow i { width: 13px; height: 9px; flex: none; position: relative; }
.gl-flow i::before { content: ""; position: absolute; left: 0; right: 4px; top: 4px;
                     border-top: 1.4px solid rgba(97,173,255,.85); }
.gl-flow i::after { content: ""; position: absolute; right: 0; top: 1px;
                    border-top: 4px solid transparent; border-bottom: 4px solid transparent;
                    border-left: 5px solid rgba(97,173,255,.85); }