/* THE DEMO VIDEO IS THE HERO — AG-TRADES-DEMOS-PAGES-BUILD-0929: the video as large as the screen allows,
   with the logo and one line of words above it. The takes are 1920×1080 screen recordings of
   the app, so every pixel of width is legibility: the stage is as wide as the viewport allows while the
   video alone still fits the screen's height, native 16:9 with nothing cropped and no bars. The logo (the
   bar) and one line of words sit above it; the calls are tabs on that line. Generated by
   tools/build_trade_demos.py → build_vertical_pages.py; never hand-edited on a page. */

body.vpage nav{padding:12px 44px 14px}
body.vpage nav .brand{gap:5px}
body.vpage nav .brand .pm{--d:34px}
body.vpage nav .brand .word{font-size:13.5px}

.vhero{background:var(--c-bg);padding:108px 24px 34px}
.vh-in{--vh-w:min(100%, calc((100vh - 24px) * 16 / 9), 1920px);--vh-w:min(100%, calc((100svh - 24px) * 16 / 9), 1920px);width:var(--vh-w);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);grid-template-areas:"title tabs" "stage stage" "foot foot";
  align-items:end;gap:14px 24px}
.vh-title{grid-area:title;font-family:Fraunces,serif;font-weight:500;font-size:28px;line-height:1.15;letter-spacing:-.3px;
  color:var(--c-ink-deep);margin:0;min-width:0}
.vh-title em{font-style:italic;color:var(--c-gold-deep)}
.vh-tabs{grid-area:tabs;justify-self:end;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;min-width:0}
.vh-tab{display:inline-flex;align-items:baseline;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--c-line);
  background:var(--c-paper);color:var(--c-ink-deep);font:inherit;font-size:14px;font-weight:600;cursor:pointer;line-height:40px;white-space:nowrap}
.vh-tab span{font-size:12.5px;font-weight:600;color:var(--c-ink-mute);font-variant-numeric:tabular-nums}
.vh-tab[aria-selected="true"]{background:var(--c-ink-deep);border-color:var(--c-ink-deep);color:var(--c-surface)}
.vh-tab[aria-selected="true"] span{color:var(--c-gold-warm)}
.vh-tab:focus-visible,.vh-switch:focus-visible{outline:2px solid var(--c-gold);outline-offset:2px}
.vh-stage{grid-area:stage;position:relative;border-radius:14px;overflow:hidden;background:#0b0c0f;
  box-shadow:0 24px 70px rgba(16,18,25,.22);aspect-ratio:16/9}
.vh-stage video{display:block;width:100%;height:100%;object-fit:contain;background:#0b0c0f}
.vh-play{position:absolute;left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;border:1px solid rgba(240,212,136,.55);
  background:rgba(12,14,18,.62);box-shadow:0 18px 50px rgba(6,7,10,.45);cursor:pointer;display:grid;place-items:center;padding:0;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .15s ease,background .15s ease}
.vh-play i{display:block;width:0;height:0;margin-left:8px;border-style:solid;border-width:19px 0 19px 32px;border-color:transparent transparent transparent #f0d488}
.vh-play:hover{transform:scale(1.05);background:rgba(12,14,18,.75)}
.vh-play:focus-visible{outline:3px solid #f0d488;outline-offset:3px}
.vh-stage.started .vh-play{display:none}
.vh-foot{grid-area:foot;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.vh-acted{margin:0;font-size:13.5px;line-height:1.5;color:var(--c-ink-mute)}
.vh-acted .demo-tag{margin-right:8px}
.vh-switch{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:4px 4px 4px 20px;border-radius:999px;border:1px solid var(--c-line);
  background:var(--c-paper);color:var(--c-ink-soft);text-decoration:none;font-size:15px;box-shadow:0 10px 30px rgba(16,18,25,.08)}
.vh-switch b{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;color:var(--c-night);font-weight:700;
  background:linear-gradient(180deg,var(--c-gold-warm),var(--c-gold-mid))}
.vh-switch::after{display:none}
.vhero + .hero{padding-top:88px}

/* 761–1063 px: the bar pill is narrower than its 1000 px and the left links ran under the centred logo (also
   true before this change). Keep the two that matter; Integrations and Pricing are further down the page. */
@media (min-width:761px) and (max-width:1063px){
  nav .links.pages a:nth-child(n+3){display:none}
}
@media (max-width:1100px){
  .vh-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "tabs" "stage" "foot"}
  .vh-tabs{justify-self:start;justify-content:flex-start}
}
@media (max-width:760px){
  .vh-play{width:72px;height:72px;margin:-36px 0 0 -36px}
  .vh-play i{border-width:14px 0 14px 23px;margin-left:6px}
  .vhero{padding:96px 0 26px}
  .vh-in{width:100%;grid-template-areas:"title" "stage" "tabs" "foot";gap:12px}
  .vh-title{font-size:23px;padding:0 18px}
  .vh-stage{border-radius:0;box-shadow:none}
  .vh-tabs{flex-direction:column;flex-wrap:nowrap;gap:0;padding:0 12px;width:100%;box-sizing:border-box}
  .vh-tab{justify-content:space-between;width:100%;min-height:48px;line-height:48px;border-radius:12px;border-color:transparent;background:none;font-size:15.5px}
  .vh-tab[aria-selected="true"]{background:var(--c-paper);border-color:var(--c-line);color:var(--c-ink-deep);box-shadow:inset 3px 0 0 var(--c-gold)}
  .vh-tab[aria-selected="true"] span{color:var(--c-gold-deep)}
  .vh-foot{padding:0 18px;flex-direction:column;align-items:stretch}
  .vh-switch{justify-content:space-between}
  .vhero + .hero{padding-top:56px}
}