/* ============================================================
   STAGE — the /stage page's own blocks (site/src/pages/stage.astro)
   Requires: tokens.css, page.css, surface.css, patterns.css, hero.css
   «How it works» is its own component: stage-steps.css; the bento cards — .bento-cards in product-blocks.css.
   ============================================================ */

/* ── First screen: the headline in word pills (Figma «Stage promo», node 1021:3227) ──
   The frame, the blue pill and the dotted «to» are the WordPills component (word-pills.css); here — the page's
   own shapes, in em of its --ps (Figma px ÷ 52 = em). Fills: nearest colour tokens for the Figma's
   #EA4335 / #388FFF / #FBBC04. */
.stage-pills__flag { display: flex; align-items: center; }
/* the arrow and its two chevrons overlap: each next shape starts 17 (0.327em) inside the previous one */
.stage-pills__chev, .stage-pills__arrow { background: var(--color-accent-red); height: 1.346em; }
.stage-pills__chev {
  width: 0.654em;
  clip-path: polygon(0 0, 0.192em 0, 100% 50%, 0.192em 100%, 0 100%, 0.462em 50%);
}
.stage-pills__chev + .stage-pills__chev, .stage-pills__chev + .stage-pills__arrow { margin-left: -0.327em; }
.stage-pills__arrow {
  display: flex;
  align-items: center;
  padding: 0 0.5em 0.06em 0.827em;
  clip-path: polygon(0 0, calc(100% - 0.423em) 0, 100% 50%, calc(100% - 0.423em) 100%, 0 100%, 0.462em 50%);
}
.stage-pills__ribbon {
  display: flex;
  align-items: center;
  height: 1.865em;
  padding: 0 0.29em 0.06em;
  background: var(--color-primary);
  clip-path: polygon(0 14.43%, 100% 0, 100% 100%, 0 85.57%);
}
.stage-pills__icons { display: flex; gap: 0.115em; }
.stage-pills__icons img { display: block; width: 1.923em; height: 1.923em; }

/* ── Screencast ── */
.stage-video { position: relative; }
.stage-video video {
  display: block;
  width: 100%;
  height: auto; /* the video's own 1280 × 869 (width/height in the HTML) — no crop */
  border-radius: var(--radius-lg);
  background: var(--color-bg-grey);
}
.stage-video__toggle {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  cursor: pointer;
}
.stage-video__toggle:focus-visible { outline: var(--border-thin) solid var(--color-text); outline-offset: var(--border-thin); }
/* pause: two bars; play: a triangle — drawn in CSS, no icon file */
.stage-video__toggle::before {
  content: '';
  width: 0.875rem;
  height: 1rem;
  background: linear-gradient(90deg, var(--color-text) 0 35%, transparent 35% 65%, var(--color-text) 65%);
}
.stage-video__toggle[aria-pressed="false"]::before {
  width: 0.875rem;
  margin-left: 0.2rem;
  background: var(--color-text);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ── Final call to action: «From media to ads in seconds» — WordPills; the ticket is this page's own shape ── */
/* a ticket: the base pill with its corners cut in quarter circles */
.stage-ticket {
  border-radius: 0;
  --notch: 0.2em;
  mask: radial-gradient(circle var(--notch) at 0 0, transparent 98%, currentColor) top left,
        radial-gradient(circle var(--notch) at 100% 0, transparent 98%, currentColor) top right,
        radial-gradient(circle var(--notch) at 0 100%, transparent 98%, currentColor) bottom left,
        radial-gradient(circle var(--notch) at 100% 100%, transparent 98%, currentColor) bottom right;
  mask-size: 51% 51%; /* a mask reads only alpha: currentColor = opaque */
  mask-repeat: no-repeat;
}

/* ── FAQ: 8 of 12 columns, centred, as on /pricing ── */

/* ── Case card: one grid gap under the bento cards ── */
.stage-case { margin-top: var(--grid-gap); }