/* Coded product mockups for the landing page.
   Colours, radii and component rules follow dealrun-webapp (src/styles/theme.css and the
   visual refresh block in src/styles/index.css), light theme only. Tokens carry an --m- prefix
   because the landing page defines its own --border, --muted and --radius. */

/* The view is the clipping box. Set --zoom, --focus-x and --focus-y on it to choose what shows:
   zoom multiplies the cover scale, focus is the artboard point (in artboard px) placed at the
   view's top-left corner. Negative focus leaves a margin. --cover is set by script. During playback, the script composes the full transform
   directly on .mock, keeping per-frame updates away from CSS variables. */
.mock-view{position:relative;overflow:hidden;background:#EAEAEA;--cover:.5}

.mock{
  --m-bg:#fff;--m-fg:oklch(0.205 0 0);
  --m-muted:oklch(0.97 0 0);--m-muted-fg:oklch(0.54 0 0);--m-placeholder:oklch(0.66 0 0);
  --m-border:#efefef;--m-link:oklch(0.57 0.17 258);
  --m-chart-1:oklch(0.7 0.14 250);--m-chart-2:oklch(0.7 0.15 162);--m-chart-3:oklch(0.75 0.16 70);
  --m-chart-4:oklch(0.6 0.2 295);--m-chart-5:oklch(0.64 0.21 25);
  --m-sidebar:#fafafa;--m-sidebar-fg:#5e5e5e;--m-sidebar-accent:#f0f0f0;--m-sidebar-accent-fg:#292929;
  --m-sidebar-label:#7f7f7f;--m-badge-new:#edf3fd;--m-badge-new-fg:#347df1;
  --m-radius:12px;--m-radius-control:10px;--m-shadow-xs:0 1px 2px rgb(0 0 0/.05);--m-col:768px;
  position:absolute;top:0;left:0;width:1440px;height:900px;display:flex;overflow:hidden;
  transform-origin:0 0;
  transform:scale(calc(var(--cover)*var(--zoom,1))) translate(calc(var(--focus-x,0)*-1px),calc(var(--focus-y,0)*-1px));
  background:var(--m-sidebar);color:var(--m-fg);border-radius:14px;
  box-shadow:0 0 0 1px rgb(0 0 0/.07),0 16px 40px -16px rgb(0 0 0/.16);
  font:400 14px/20px Inter,ui-sans-serif,system-ui,sans-serif;font-feature-settings:'cv11','ss01';
  letter-spacing:-.006em;text-align:left;-webkit-font-smoothing:antialiased;cursor:default;
}
.mock *,.mock *::before,.mock *::after{box-sizing:border-box}
.mock img{display:block}

/* Icons: Nucleo outline symbols from the page sprite. */
.m-i{display:block;width:16px;height:16px;flex:none}
.m-i-sm{width:14px;height:14px}
.m-dots{display:flex;align-items:center;justify-content:center;gap:2.5px;width:16px;height:16px;flex:none}
.m-dots i{width:3px;height:3px;border-radius:50%;background:currentColor}
.m-spacer{flex:1}
.m-end{margin-left:auto;flex:none}
.m-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* Accent colours for tiles, badges and avatars. */
.c-blue{--c:var(--m-chart-1)}.c-green{--c:var(--m-chart-2)}.c-amber{--c:var(--m-chart-3)}
.c-violet{--c:var(--m-chart-4)}.c-red{--c:var(--m-chart-5)}

/* Sidebar */
.m-side{width:276px;flex:none;display:flex;flex-direction:column;min-height:0;color:var(--m-sidebar-fg)}
.m-side-head{flex:none;display:flex;align-items:center;gap:4px;height:60px;padding:4px 12px 0 16px}
.m-brand{display:flex;align-items:center;gap:8px;margin-right:auto;font-weight:600;color:var(--m-fg)}
.m-brand img{width:20px;height:20px}
.m-brand .m-i{width:14px;height:14px;color:var(--m-muted-fg)}
.m-icon-btn{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:var(--m-radius-control);color:var(--m-sidebar-fg)}
.m-icon-btn.is-outline{background:var(--m-bg);border:1px solid var(--m-border);box-shadow:0 1px 2px rgb(0 0 0/.04)}
.m-side-row{flex:none;display:flex;gap:8px;padding:0 8px 4px}
.m-side-body{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:4px}
.m-side-body.is-faded{-webkit-mask-image:linear-gradient(#000 calc(100% - 56px),transparent);mask-image:linear-gradient(#000 calc(100% - 56px),transparent)}
.m-group{flex:none;display:flex;flex-direction:column;gap:4px;padding:8px}
.m-label{display:flex;align-items:center;gap:6px;height:32px;padding:0 8px;font-size:13px;color:var(--m-sidebar-label)}
.m-nav{display:flex;align-items:center;gap:8px;height:32px;padding:0 8px;border-radius:var(--m-radius-control);white-space:nowrap;min-width:0}
.m-nav>.m-i,.m-nav>.m-dots{color:var(--m-muted-fg)}
.m-nav.is-active{background:var(--m-sidebar-accent);color:var(--m-sidebar-accent-fg)}
.m-nav.is-active>.m-i{color:inherit}
.m-count,.m-hint{margin-left:auto;flex:none;font-size:12px;color:var(--m-muted-fg);font-variant-numeric:tabular-nums}
.m-new{margin-left:auto;flex:none;height:18px;padding:0 6px;border-radius:999px;background:var(--m-badge-new);color:var(--m-badge-new-fg);font-size:12px;line-height:18px;font-weight:500}
.m-side-foot{flex:none;display:flex;align-items:center;gap:8px;height:48px;padding:0 16px;color:var(--m-fg)}
.m-side-card{flex:none;display:flex;flex-direction:column;gap:2px;margin:0 8px 8px;padding:4px;background:var(--m-bg);border:1px solid var(--m-border);border-radius:var(--m-radius);box-shadow:0 1px 2px rgb(0 0 0/.02)}
.m-side-card .m-nav{color:var(--m-fg)}

/* Small coloured marks */
.m-tile{display:grid;place-items:center;width:20px;height:20px;flex:none;border-radius:6px;color:#fff;background:linear-gradient(150deg,color-mix(in oklab,var(--c,var(--m-chart-1)) 72%,white),var(--c,var(--m-chart-1)));box-shadow:inset 0 0 0 1px rgb(0 0 0/.05)}
.m-tile.is-round{border-radius:50%}
.m-tile .m-i{width:12px;height:12px}
.m-mono,.m-av{display:grid;place-items:center;flex:none;font-weight:600;line-height:1;letter-spacing:0;color:color-mix(in oklab,var(--c,var(--m-chart-1)) 70%,black);background:color-mix(in oklab,var(--c,var(--m-chart-1)) 18%,white)}
.m-mono{width:18px;height:18px;border-radius:5px;font-size:10px}
.m-av{width:20px;height:20px;border-radius:50%;font-size:9px}
.m-av.is-lg{width:28px;height:28px;font-size:11px}
.m-todo{width:14px;height:14px;margin:1px;flex:none;border-radius:50%;border:1.5px dashed oklch(0.72 0 0)}
.m-done{display:grid;place-items:center;width:16px;height:16px;flex:none;border-radius:50%;background:var(--m-link);color:#fff}
.m-done.is-green{background:oklch(0.64 0.16 155)}
.m-done .m-i{width:10px;height:10px}
.m-ring{width:12px;height:12px;margin-left:auto;flex:none;border-radius:50%}
.m-ring.is-half{background:conic-gradient(var(--m-chart-3) 0 50%,transparent 0);box-shadow:inset 0 0 0 1.5px var(--m-chart-3)}
.m-ring.is-open{border:1.5px dashed oklch(0.76 0 0)}
.m-ring.is-done{background:var(--m-chart-1);box-shadow:inset 0 0 0 2.5px #fff,0 0 0 1.5px var(--m-chart-1);width:9px;height:9px;margin-right:1.5px}

/* Content panel, framed inside the sidebar background */
.m-main{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;margin:8px 8px 8px 0;overflow:hidden;background:var(--m-bg);border:1px solid var(--m-border);border-radius:var(--m-radius);box-shadow:0 1px 3px rgb(0 0 0/.03)}
.m-top{flex:none;display:flex;align-items:center;gap:8px;height:52px;padding:0 12px 0 16px;border-bottom:1px solid var(--m-border)}
.m-crumb{display:flex;align-items:center;gap:8px;color:var(--m-muted-fg);white-space:nowrap}
.m-crumb .is-here{color:var(--m-fg)}
.m-sep{color:oklch(0.8 0 0)}

/* Buttons, badges, inputs */
.m-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;flex:none;border-radius:var(--m-radius-control);white-space:nowrap}
.m-btn-primary{color:oklch(0.985 0 0);background:linear-gradient(180deg,oklch(0.36 0 0),oklch(0.17 0 0));box-shadow:inset 0 1px 0 rgb(255 255 255/.14),0 1px 2px rgb(0 0 0/.18),0 0 0 1px oklch(0.17 0 0)}
.m-btn-outline{background:var(--m-bg);border:1px solid var(--m-border);box-shadow:0 1px 2px rgb(0 0 0/.04)}
.m-btn-soft{background:var(--m-muted)}
.m-btn-ghost{padding:0 8px}
.m-btn.is-icon{width:32px;padding:0}
.m-btn.is-round{border-radius:999px}
.m-btn.is-quiet{color:var(--m-muted-fg)}
.m-btn .m-i-sm{opacity:.6}
.m-badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;flex:none;border-radius:6px;background:var(--m-muted);font-size:12px;font-weight:500;white-space:nowrap}
.m-badge.is-tint{color:color-mix(in oklab,var(--c) 68%,black);background:color-mix(in oklab,var(--c) 11%,white);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--c) 26%,white)}
.m-badge.is-new{background:var(--m-badge-new);color:var(--m-badge-new-fg)}
.m-input{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;flex:1;min-width:0;border-radius:var(--m-radius-control);background:var(--m-bg);border:1px solid var(--m-border);color:var(--m-placeholder);white-space:nowrap}
.m-kbd{margin-left:auto;padding:0 5px;border:1px solid var(--m-border);border-radius:5px;font-size:11px;line-height:16px;color:var(--m-muted-fg)}
.m-link{color:var(--m-link);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in oklab,var(--m-link) 40%,transparent)}
.m-blue{color:var(--m-link)}
.m-violet{color:var(--m-chart-4)}
.m-quiet{color:var(--m-muted-fg)}

/* Data table */
.m-toolbar{flex:none;display:flex;align-items:center;gap:8px;height:52px;padding:0 12px}
.m-table{flex:1;display:flex;flex-direction:column;min-height:0;border-top:1px solid var(--m-border)}
.m-tr{flex:none;display:grid;grid-template-columns:40px 224px 186px 214px 150px 180px 1fr;height:40px;border-bottom:1px solid var(--m-border)}
.m-tr>div{display:flex;align-items:center;gap:8px;min-width:0;padding:0 12px;white-space:nowrap;border-right:1px solid var(--m-border)}
.m-tr>div:first-child{padding:0 0 0 16px;border-right:0}
.m-tr>div:nth-child(2){padding-left:0}
.m-tr>div:last-child{border-right:0}
.m-tr.is-head{height:36px;background:oklch(0.985 0 0);color:var(--m-muted-fg)}
.m-tr.is-foot{margin-top:auto;border-top:1px solid var(--m-border);border-bottom:0;color:var(--m-muted-fg)}
.m-tr .is-num{justify-content:flex-end;font-variant-numeric:tabular-nums}
.m-check{display:grid;place-content:center;width:14px;height:14px;border:1px solid oklch(0.88 0 0);border-radius:4px;background:var(--m-bg)}
.m-swap{position:relative;display:flex}
.m-swap>span{display:flex;align-items:center;gap:8px}
.m-swap>span+span{position:absolute;inset:0 auto 0 0}
.m-swap.m-end>span+span{inset:0 0 0 auto}
.m-selected{padding:0 4px;font-weight:500;white-space:nowrap}

/* Chat. The layout is the thread's: messages from the top, composer docked at the foot. A new chat is the
   same layout with the composer raised by --m-rise to sit under the title, which the tour cues do. The
   column is --m-col wide; the page script narrows it on mobile so the whole exchange fits the view. */
.m-chat{--m-rise:302px;position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;padding:28px 16px 12px;overflow:hidden}
.m-col{position:relative;z-index:1;width:100%;max-width:var(--m-col);display:flex;flex-direction:column}
.m-sent{align-self:flex-end}
.m-bubble{padding:10px 16px;border-radius:16px;background:var(--m-muted);font-size:15px;line-height:22px;white-space:nowrap;transform-origin:0 0}
.m-agent{display:flex;align-items:center;gap:10px;margin-top:20px;font-weight:500}
.m-agent img{width:20px;height:20px}
.m-say{margin-top:12px;font-size:15px;line-height:1.625}
.m-say.is-strong{font-size:17px;font-weight:600;letter-spacing:-.015em}
.m-steps{position:relative;display:flex;flex-direction:column;margin-top:12px;color:var(--m-muted-fg)}
.m-trail{position:relative;display:flex;flex-direction:column}
.m-trail::before{content:'';position:absolute;left:7.5px;top:24px;bottom:24px;width:1px;background:oklch(0.9 0 0)}
.m-step{position:relative;display:flex;align-items:center;gap:12px;height:30px}
.m-step>.m-i,.m-step>.m-dot{background:var(--m-bg)}
.m-dot{display:grid;place-items:center;width:16px;height:16px;flex:none}
.m-dot::before{content:'';width:5px;height:5px;border-radius:50%;background:oklch(0.68 0 0)}
.m-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-height:36px;padding:5px 0 5px 28px}
.m-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 8px;flex:none;border-radius:6px;background:var(--m-muted);color:var(--m-fg);font-size:13px;white-space:nowrap}
.m-chip .m-i{width:14px;height:14px;color:var(--m-muted-fg)}

/* Composer, as in the webapp's new chat screen */
.m-composer-wrap{width:100%;max-width:var(--m-col);flex:none;border-radius:20px;background:var(--m-sidebar)}
.m-composer{background:var(--m-bg);border:1px solid var(--m-border);border-radius:20px;box-shadow:var(--m-shadow-xs)}
.m-composer-text{position:relative;min-height:72px;padding:16px 16px 0;font-size:16px;line-height:24px;color:color-mix(in oklab,var(--m-muted-fg) 80%,transparent)}
.m-composer.is-tall .m-composer-text{min-height:84px}
.m-composer-bar{display:flex;align-items:center;gap:8px;padding:0 12px 12px}
.m-composer-bar .m-btn.is-icon{border-radius:8px}
.m-composer-bar .m-btn.is-round{border-radius:999px}
.m-seg{display:flex;align-items:center;padding:2px;border-radius:8px;background:var(--m-muted)}
.m-seg>span{display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:6px;color:var(--m-muted-fg);white-space:nowrap}
.m-seg>.is-on{background:var(--m-bg);color:var(--m-fg);box-shadow:var(--m-shadow-xs)}
.m-composer-foot{display:flex;align-items:center;gap:8px;padding:10px 16px;color:var(--m-muted-fg)}
.m-ph,.m-typed{position:absolute;top:16px;left:16px;white-space:pre}
.m-typed{color:var(--m-fg);opacity:0}

/* Dashboard page */
.m-page{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;padding:40px 24px 0;overflow:hidden}
.m-page-col{width:100%;max-width:728px}
.m-hello{font-size:22px;line-height:28px;font-weight:500;letter-spacing:-.015em;text-align:center}
.m-ask{display:flex;align-items:center;height:48px;margin-top:16px;padding:0 8px 0 18px;border:1px solid var(--m-border);border-radius:999px;box-shadow:0 1px 2px rgb(0 0 0/.04);font-size:15px;color:var(--m-placeholder)}
.m-sec{display:flex;align-items:center;justify-content:space-between;margin:32px 0 10px;color:var(--m-muted-fg)}
.m-sec .m-all{color:var(--m-fg)}
.m-card{overflow:hidden;background:var(--m-bg);border:1px solid var(--m-border);border-radius:var(--m-radius);box-shadow:0 1px 2px rgb(0 0 0/.02)}
.m-card+.m-card{margin-top:10px}
.m-row{display:flex;align-items:center;gap:12px;height:44px;padding:0 12px 0 16px;border-top:1px solid var(--m-border);white-space:nowrap}
.m-row:first-child{border-top:0}
.m-row.is-call{height:60px}
.m-row.is-promo{height:72px;padding:0 12px 0 6px;gap:16px}
.m-bar{width:4px;height:36px;flex:none;border-radius:2px;background:var(--m-chart-1)}
.m-bar.is-later{background:repeating-linear-gradient(color-mix(in oklab,var(--m-chart-1) 40%,white) 0 3px,transparent 3px 6px)}
/* The activity card shows four rows of its feed. */
.m-feed{height:178px}
.m-two{display:flex;flex-direction:column;min-width:0}
.m-sub{display:flex;gap:8px;font-size:13px;color:var(--m-muted-fg)}
.m-icon-box{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:8px;background:var(--m-muted);color:var(--m-muted-fg)}
.m-meta{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:13px;color:var(--m-muted-fg);font-variant-numeric:tabular-nums}
.m-meta .m-date{width:118px;text-align:right}

/* Gradient art, from the webapp's agent cards (features/experimental/welcome.css) */
.m-art{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;flex:none;overflow:hidden;border-radius:10px}
.m-art::before{content:'';position:absolute;inset:-50%;border-radius:42%;border:26px solid rgb(255 255 255/.22);transform:rotate(-30deg) translateY(-12%);filter:blur(12px)}
.m-art::after{content:'';position:absolute;inset:0;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.45' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.m-art-sky{background:radial-gradient(ellipse at 10% 100%,#b6a0f4 0%,transparent 52%),radial-gradient(ellipse at 90% 5%,#8baffb 0%,transparent 55%),radial-gradient(ellipse at 65% 100%,#b0f1f1 0%,transparent 60%),#8dcff2}
.m-art-sunrise{background:radial-gradient(ellipse at 0% 20%,#f4acd9 0%,transparent 50%),radial-gradient(ellipse at 80% 0%,#fff28c 0%,transparent 55%),radial-gradient(ellipse at 65% 120%,#b7b9fb 0%,transparent 47%),#ffd66c}
.m-art-rose{background:radial-gradient(ellipse at 0% 10%,#d7a4f3 0%,transparent 58%),radial-gradient(ellipse at 95% 100%,#ffd0b2 0%,transparent 60%),radial-gradient(ellipse at 20% 100%,#f7c7e7 0%,transparent 50%),#f49ccb}
.m-art-green{background:radial-gradient(ellipse at 0% 15%,#a7dca5 0%,transparent 55%),radial-gradient(ellipse at 95% 0%,#d6f5c5 0%,transparent 55%),radial-gradient(ellipse at 70% 110%,#43b88b 0%,transparent 60%),#83d5ad}
.m-art.is-wide{height:100px;padding-top:24px}
.m-art.is-thumb{width:104px;height:60px;gap:6px}
.m-logo{position:relative;z-index:1;display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:10px;background:rgb(255 255 255/.95);border:1px solid rgb(255 255 255/.7);box-shadow:0 1px 2px rgb(0 0 0/.06);color:#171717}
.m-logo svg{width:18px;height:18px}
.m-logo.is-sm{width:26px;height:26px;border-radius:8px}
.m-logo.is-sm svg{width:14px;height:14px}
.m-tip{position:absolute;z-index:1;top:12px;left:50%;transform:translateX(-50%);padding:2px 8px;border-radius:999px;background:oklch(0.205 0 0);color:#fff;font-size:11px;line-height:16px;font-weight:500;white-space:nowrap}

/* Assistant workspace */
.m-tabs{flex:none;display:flex;align-items:center;gap:4px;height:48px;padding:0 8px;border-bottom:1px solid var(--m-border)}
.m-tab{display:flex;align-items:center;gap:8px;width:172px;height:32px;padding:0 12px;border-radius:var(--m-radius-control);color:var(--m-sidebar-fg);white-space:nowrap}
.m-tab>.m-i{color:var(--m-muted-fg)}
.m-tab.is-on{color:var(--m-fg);background:var(--m-bg);border:1px solid var(--m-border);box-shadow:0 1px 2px rgb(0 0 0/.04)}
.m-divider{width:1px;height:48px;margin:0 4px;background:var(--m-border)}
/* What a new chat shows around its raised composer. The title sits 28px above it. */
.m-review{position:absolute;top:128px;display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;background:var(--m-muted);white-space:nowrap}
.m-title{position:absolute;top:290px;display:flex;align-items:center;gap:12px;font-size:24px;line-height:32px;font-weight:500;letter-spacing:-.02em}
.m-title .m-i{width:22px;height:22px}
.m-promo{position:absolute;bottom:40px;display:flex;align-items:center;gap:16px;width:528px;padding:6px 16px 6px 6px;background:var(--m-bg);border:1px solid var(--m-border);border-radius:16px;box-shadow:0 1px 2px rgb(0 0 0/.02)}

/* Mac-style window that frames the screens. .mac-glass is its frosted pane: the pale tone of the
   gradient behind the window, lit from the top right. It is painted once, with no backdrop filter or
   canvas, because either one redrew the pane on every scroll frame. */
.mac-window{position:relative;display:flex;flex-direction:column;padding:0 6px 6px;border-radius:12px;box-shadow:0 28px 56px -24px rgb(120 50 20/.5),0 2px 6px rgb(120 50 20/.08)}
.mac-glass{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(70% 50% at 75% 10%,rgb(255 255 255/.6),rgb(255 255 255/0)) #f6d9c8}
/* The same pale veil as the site's nav bar, a little clearer. */
.mac-glass::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(rgb(244 242 252/.4),rgb(244 242 252/.28));box-shadow:inset 0 1px 0 rgb(255 255 255/.7),inset 0 0 0 1px rgb(255 255 255/.35)}
.mac-bar{position:relative;display:flex;align-items:center;flex:none;height:20px;padding:0 4px}
.mac-lights{display:flex;gap:6px}
.mac-lights i{width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 .5px rgb(0 0 0/.14)}
.mac-lights i:nth-child(1){background:#ff5f57}
.mac-lights i:nth-child(2){background:#febc2e}
.mac-lights i:nth-child(3){background:#28c840}
.mac-screens{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:9px;background:#fafafa;box-shadow:0 0 0 1px rgb(0 0 0/.06)}
.mac-screens .mock-view{background:#fafafa}
.mac-screens .mock{border-radius:0;box-shadow:none}

/* Tour cues. The page script switches .is-on on each [data-cue] element at its moment on the tour's clock,
   so the content plays, seeks and loops with the camera. Only transform, opacity and small paints change:
   the camera is framed from the layout, which has to stay as it is. Without the script each screen shows
   at rest, because entrances are only held back inside .is-sliding.

   Rest states: in Safari a piece that fades from or to full opacity, or moves from or to `transform:none`,
   costs a long frame as it starts and another as it ends, because much more of its screen is painted again
   than the piece, and a screen is a large layer. So a piece that animates rests a hair under full opacity
   and on an identity transform, which look the same and cost nothing to leave. */

/* Order within a group, for staggered delays. */
.m-seq>:nth-child(2){--i:1}.m-seq>:nth-child(3){--i:2}.m-seq>:nth-child(4){--i:3}.m-seq>:nth-child(5){--i:4}
.m-seq>:nth-child(6){--i:5}.m-seq>:nth-child(7){--i:6}.m-seq>:nth-child(8){--i:7}.m-seq>:nth-child(9){--i:8}

/* Entrances: a line of the thread, a row of chips, the logo tiles. */
.m-in,.m-chips>*,.m-art[data-cue] .m-logo{opacity:.999;transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out)}
.m-in{transform:translateY(0)}
.m-chips>*,.m-art[data-cue] .m-logo{transform:scale(1)}
.m-art[data-cue] .m-logo{transition-duration:240ms}
.m-in.is-on{transition-delay:calc(var(--i,0)*60ms)}
.m-chips.is-on>*{transition-delay:calc(var(--i,0)*40ms)}
.m-art.is-on .m-logo{transition-delay:calc(var(--i,0)*60ms)}
.is-sliding .m-in:not(.is-on){opacity:0;transform:translateY(6px)}
.is-sliding .m-chips:not(.is-on)>*{opacity:0;transform:scale(.96)}
.is-sliding .m-art[data-cue]:not(.is-on) .m-logo{opacity:0;transform:scale(.9)}

/* The research trail: its line keeps pace with the steps, and the last step's tick draws itself. */
.m-trail::before{transform-origin:top}
.m-trail.is-on::before{transition:transform 1320ms linear}
.is-sliding .m-trail:not(.is-on)::before{transform:scaleY(0)}
.m-in .m-done{transition:transform 250ms var(--ease-out)}
.m-in .m-done .m-i{stroke-dasharray:20}
.m-in.is-on .m-done .m-i{transition:stroke-dashoffset 250ms var(--ease-out) 100ms}
.is-sliding .m-in:not(.is-on) .m-done{transform:scale(.9)}
.is-sliding .m-in:not(.is-on) .m-done .m-i{stroke-dashoffset:20}

/* The prompt types itself: characters switch on in turn, without fading. The send button wakes while there
   is something to send. */
.m-typed.is-on{opacity:1}
.m-typed>span{opacity:0}
.m-typed.is-on>span{opacity:1;transition:opacity 0s calc(var(--i)*38ms)}
.m-composer[data-cue] .m-btn-primary{opacity:.4;transition:opacity 200ms ease,transform 160ms var(--ease-out)}
.m-composer.is-on .m-btn-primary{opacity:1}

/* Sending the prompt turns the new chat into a thread, in one move. The typed text leaves the composer as
   the message bubble: it starts exactly over the text, at the composer's type size, and travels to the head
   of the thread while the composer drops to its dock and the title, review note and promo go. --m-drop is
   the distance between the bubble's text and the raised composer's. The bubble rises ahead of its sideways
   travel, which bends its path, and its tint comes in once it has left the composer. On desktop the camera
   follows the bubble, so the move takes the camera's time (set beside the camera's in index.html). Only the
   way forward is animated, so a rewind lands on the new chat at once. */
.mock{--m-send:700ms;--m-send-x:cubic-bezier(.6,0,.25,1);--m-send-y:cubic-bezier(.45,.1,.2,1);--m-drop:328.6px}
.m-chat>:is(.m-review,.m-title,.m-promo),.m-ph{opacity:0}
.m-chat.is-on>:is(.m-review,.m-title,.m-promo){transition:opacity 150ms ease}
.m-chat.is-on .m-sent{transition:transform var(--m-send) var(--m-send-x)}
.m-chat.is-on .m-composer-wrap{transition:transform var(--m-send) var(--m-send-y)}
.m-chat.is-on .m-bubble{transition:transform var(--m-send) var(--m-send-y),background-color calc(var(--m-send)*.3) ease calc(var(--m-send)*.18)}
.m-chat.is-on .m-next{transition:opacity 300ms ease calc(var(--m-send)*.5)}
.is-sliding .m-chat:not(.is-on)>:is(.m-review,.m-title,.m-promo),.is-sliding .m-chat:not(.is-on) .m-ph:not(.is-on){opacity:1}
.is-sliding .m-chat:not(.is-on) .m-composer-wrap{transform:translateY(calc(var(--m-rise)*-1))}
.is-sliding .m-chat:not(.is-on) .m-sent{transform:translateX(calc(100% - var(--m-col)))}
.is-sliding .m-chat:not(.is-on) .m-bubble{transform:translateY(var(--m-drop)) scale(1.0667);background-color:transparent;opacity:0}
.is-sliding .m-chat:not(.is-on) .m-next{opacity:0}
.is-sliding .m-chat:not(.is-on) .m-col *{transition:none}
/* The sent chat joins the sidebar's recents, taking the highlight from New chat. */
.is-sliding .m-nav.is-draft:not(.is-on){background:var(--m-sidebar-accent);color:var(--m-sidebar-accent-fg)}
.is-sliding .m-nav.is-draft:not(.is-on)>.m-i{color:inherit}
.is-sliding .m-nav.is-fresh:not(.is-on){opacity:0}
.is-sliding .m-nav.is-fresh:not(.is-on)~.m-nav{transform:translateY(-36px)}
.m-nav.is-fresh.is-on{transition:opacity 300ms var(--ease-out) 150ms}
.m-nav.is-fresh.is-on~.m-nav{transition:transform 450ms var(--ease-out)}

/* The reply streams in a word at a time. */
.m-stream.is-on>span{transition:opacity 240ms ease calc(var(--i)*32ms)}
.is-sliding .m-stream:not(.is-on)>span{opacity:0}

/* A press, held from its cue until the one that releases it. */
.m-btn[data-cue]{transform:scale(1);transition:transform 160ms var(--ease-out)}
.m-btn[data-cue].is-on{transform:scale(.97);transition-duration:100ms}

/* One label or group giving way to another in the same spot. A little blur joins the two on desktop. On a
   phone it is too small to see, and going from or to `filter:none` is the same costly change as above. */
.mock{--m-soft:blur(2px)}
@media (max-width:900px){.mock{--m-soft:none}}
.m-morph{display:grid;justify-items:center}
.m-morph>span{grid-area:1/1;display:flex;align-items:center;gap:6px}
.m-morph .m-i{color:oklch(0.64 0.16 155)}
.m-sub .m-morph,.m-step .m-morph,.m-tab .m-morph{justify-items:start}
.m-tab .m-morph .m-i{color:var(--m-muted-fg)}
.m-tab .m-morph>span{gap:8px}
.m-morph>span,.m-swap>span{opacity:.999;transition:opacity 200ms ease,filter 200ms ease}
:is(.m-morph,.m-swap):not(.is-on,.is-kept)>span+span,:is(.m-morph,.m-swap).is-on>span:first-child{opacity:0;filter:var(--m-soft)}
/* The chat's labels rest on their later state, as the rest of the thread does without the script. */
.m-morph.is-kept>span:first-child,.is-sliding .m-morph.is-kept:not(.is-on)>span+span{opacity:0;filter:var(--m-soft)}
.is-sliding .m-morph.is-kept:not(.is-on)>span:first-child{opacity:.999;filter:none}

/* Selecting the first eight buyers: the header box takes a dash, then each row ticks in turn. */
.m-check,.m-tr{transition:background-color 160ms var(--ease-out),border-color 160ms var(--ease-out)}
.m-check::after{content:'';width:4px;height:7px;margin-top:-2px;border:solid #fff;border-width:0 1.5px 1.5px 0;opacity:0;transform:rotate(45deg) scale(.8);transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out)}
.is-head .m-check::after{width:8px;height:0;margin:0;border-width:1.5px 0 0;transform:scale(.8)}
.m-table.is-on>:nth-child(-n+9) .m-check{background:var(--m-fg);border-color:var(--m-fg)}
.m-table.is-on>:nth-child(-n+9) .m-check::after{opacity:1;transform:rotate(45deg)}
.m-table.is-on>.is-head .m-check::after{transform:none}
.m-table.is-on>:nth-child(-n+9):not(.is-head){background:var(--m-muted)}
.m-table.is-on>:nth-child(-n+9),.m-table.is-on>:nth-child(-n+9) .m-check,.m-table.is-on>:nth-child(-n+9) .m-check::after{transition-delay:calc(var(--i,0)*70ms)}

/* A call going live: its dashed bar fills in, while its label and button change as above. */
.m-bar[data-cue]{position:relative}
.m-bar[data-cue]::after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--m-chart-1);opacity:0;transition:opacity 300ms var(--ease-out)}
.m-bar.is-on::after{opacity:.999}

/* A new activity arrives: the feed moves down a row to let it in, and it stays tinted for a moment. The feed
   is the one large block that moves inside a screen, so it has its own layer before it does. */
.m-feed>div{transform:translateY(0);transition:transform 450ms var(--ease-out)}
.is-sliding .buyer-slide.is-live .m-feed>div{will-change:transform}
.is-sliding .m-feed>div:not(.is-on){transform:translateY(-45px)}
.m-feed .m-row[data-cue]{transition:background-color 600ms var(--ease-out)}
.m-feed .m-row.is-on{background:color-mix(in oklab,var(--m-link) 7%,white);transition-duration:0s}

@media (prefers-reduced-motion:reduce){
  .mock [data-cue],.mock [data-cue] *,.mock [data-cue]~*,.mock [data-cue]::before,.mock [data-cue] ::after{transition:none!important}
}