/* Stagecockpit website. Every visual value comes from site-tokens.css (npm run check-tokens). */

/* --- Base --- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface-black);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

img,
svg,
iframe {
  display: block;
  max-width: 100%;
}

/* An app view stays invisible until the app has loaded in it: an empty frame is drawn white on the dark page
   (site.js sets .is-shown); the frame around it stays black meanwhile */
iframe[data-src]:not(.is-shown) {
  visibility: hidden;
}

a {
  color: inherit;
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

.container {
  width: min(100% - 2 * var(--gutter), 1200px);
  margin-inline: auto;
}

/* wider, for an app shown large enough to read */
.container-wide {
  width: min(100% - 2 * var(--gutter), 1560px);
}

/* text only for screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: var(--z-header);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-4);
}

/* --- Backdrop: the concert photo behind the first screen, grey, slightly blurred, slowly zooming, never larger than
   one screen and fading into black below it --- */

.site-backdrop {
  position: fixed;
  top: -60px;
  left: -60px;
  right: -60px;
  height: calc(min(100vh, 1000px) + 120px);
  z-index: var(--z-backdrop);
  pointer-events: none;
  background:
    var(--backdrop-shade),
    url("../assets/media/audience-background.jpg?v=fa6f7068") center center / cover no-repeat;
  filter: grayscale(1) blur(3px) contrast(1.05) brightness(0.9);
  -webkit-mask-image: linear-gradient(180deg, black 82%, transparent 100%);
  mask-image: linear-gradient(180deg, black 82%, transparent 100%);
  animation: backdrop-zoom 16s linear infinite alternate;
  transition: var(--transition-blur);
  will-change: transform;
}

/* From FAQ on, the crew at the side of the stage takes the place of the audience, faded in over it (site.js sets
   is-crew once FAQ comes into view). Less blurred than the audience and grey only in the photo: the StageView in their
   monitor keeps its colour and stays recognisable. */
.site-backdrop.site-backdrop-crew,
body.is-scrolled .site-backdrop.site-backdrop-crew {
  overflow: hidden;
  background: none;
  filter: var(--backdrop-crew-filter);
}

.site-backdrop-crew {
  opacity: 0;
  transition: var(--transition-backdrop-swap);
}

body.is-crew .site-backdrop-crew {
  opacity: 1;
}

.site-backdrop-crew::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--backdrop-shade);
}

/* the photo covers the backdrop like a cover background, anchored at the top so the monitor clears the header */
.backdrop-photo {
  position: absolute;
  top: 0;
  left: 50%;
  width: max(100%, calc((min(100vh, 1000px) + 120px) * 1536 / 1024));
  aspect-ratio: 1536 / 1024;
  transform: translateX(-50%);
}

/* On a wide screen the photo moves right, so the monitor lights up beside the FAQ (which sits on the left) instead of
   behind it; on its left the photo fades into the black */
@media (min-width: 1081px) {
  .backdrop-photo {
    left: 22%;
    width: 110%;
    transform: none;
    -webkit-mask-image: var(--crew-photo-fade);
    mask-image: var(--crew-photo-fade);
  }

  #faq .faq-list {
    max-width: var(--faq-width-beside-photo);
    margin-inline: 0;
  }
}

.backdrop-photo-image {
  display: block;
  width: 100%;
  height: 100%;
}

/* the StageView at a screen's size; site.js lays it into the monitor's corners with a perspective transform */
.backdrop-photo-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--crew-view-width);
  height: var(--crew-view-height);
  transform-origin: 0 0;
}

.backdrop-photo-screen iframe,
.backdrop-photo-screen img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--surface-black);
}

/* the cap of a crew member stays in front of the screen's lower edge: its layer sits on its place in the photo
   (550, 370 of 1536 × 1024) */
.backdrop-photo-front {
  position: absolute;
  top: 36.133%;
  left: 35.807%;
  width: 9.766%;
  height: auto;
}

/* Only the photo that is seen zooms: the crew's waits until FAQ, the audience's rests behind it from then on */
body:not(.is-crew) .site-backdrop-crew,
body.is-crew .site-backdrop:not(.site-backdrop-crew) {
  animation-play-state: paused;
}

/* Once the hero has scrolled away (site.js sets is-hero-away), its light beams rest and its StageView is not drawn */
body.is-hero-away .beam {
  animation-play-state: paused;
}

body.is-hero-away .hero iframe {
  visibility: hidden;
}

/* A fine film grain over the page's black and the photo, under all content: the black reads less flat */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background: url("../assets/media/grain.svg?v=0c8aaba0") repeat;
  opacity: var(--grain-strength);
  pointer-events: none;
}

/* Scrolled past the top: the photo steps back behind the content. The legal pages keep it blurred from the start, so
   their text reads well at once (not the portal, which shares the class) */
body.is-scrolled .site-backdrop,
body.legal-page:not(.portal-page) .site-backdrop {
  filter: grayscale(1) blur(12px) contrast(1.04) brightness(0.8);
}

/* --- Buttons --- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: var(--leading-snug);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-quick);
}

.button-primary {
  background: var(--accent);
  color: var(--on-accent);
}

.button-primary:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-button-glow);
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: none;
}

.button-secondary {
  border-color: var(--line-bright);
  background: var(--surface-glass);
  color: var(--text);
}

.button-secondary:hover {
  border-color: var(--text);
  background: var(--surface-overlay);
}

.button-small {
  min-height: 40px;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
}

/* not ready yet (a field still empty) or busy: grey and still */
.button:disabled,
.button:disabled:hover {
  border-color: var(--line);
  background: var(--surface-overlay);
  box-shadow: none;
  color: var(--text-dim);
  cursor: not-allowed;
  transform: none;
}

/* on the yellow closing block */
.button-dark {
  background: var(--on-accent);
  color: var(--accent);
}

.button-dark:hover {
  background: var(--surface-black);
}

/* --- Header --- */

.site-header {
  --header-fill: 0;
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  border-bottom: 1px solid transparent;
  transition: var(--transition-header);
}

/* the header's background fades in with the first stretch of scrolling instead of switching on: site.js (and the
   portal's ui.js) set --header-fill from 0 at the top to 1 */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 calc(-1 * var(--edge-width));
  z-index: var(--z-behind);
  background: var(--header-glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: var(--header-fill);
  pointer-events: none;
}

/* the open menu on small screens: the header strip in the menu's own solid tone, above the consent chip */
.site-header.is-open {
  z-index: var(--z-cover);
  background: var(--surface-base);
}

.site-header.is-open::before {
  opacity: 0;
}

/* the header spans the whole window: logo at the left edge, menu at the right, as in board variant Hero 1 */
.site-header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: var(--header-height);
  padding-inline: var(--header-gutter);
}

/* The launch's voucher, a yellow bar above the header: site.js marks html.is-promo while the voucher runs, is not
   closed and the page has left the top, so the bar slides in together with the header's background; everything that
   measures from the header's lower edge moves down by it */
.promo-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0;
  padding-inline: var(--space-12);
  overflow: hidden;
  visibility: hidden;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--text-2xs);
  transition: var(--transition-promo);
}

.promo-bar[hidden] {
  display: none;
}

.is-promo .promo-bar {
  height: var(--promo-bar-height);
  visibility: visible;
}

.promo-text {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.promo-text strong {
  font-weight: 800;
}

.promo-code {
  padding: var(--space-1) var(--space-2);
  border: 1.5px dashed var(--line-on-accent);
  border-radius: var(--radius-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  user-select: all;
}

.promo-ends {
  margin-left: var(--space-2);
  padding-left: var(--space-3);
  border-left: var(--edge-width) solid var(--line-on-accent);
}

.promo-time {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.promo-close {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transform: translateY(-50%);
  transition: var(--transition-quick);
}

.promo-close:hover {
  background: var(--line-on-accent);
}

.promo-close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

html.is-promo,
html:has(.promo-bar:not([hidden])) {
  scroll-padding-top: calc(var(--header-height) + var(--promo-bar-height) + var(--space-4));
}

.site-logo {
  display: block;
  flex: 0 0 auto;
}

.site-logo img {
  width: auto;
  height: 26px;
}

.site-menu {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-7);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  font-size: var(--text-sm);
  font-weight: 500;
}

.site-nav a {
  color: var(--text-body);
  text-decoration: none;
  transition: var(--transition-quick);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--text);
}

.site-nav a[aria-current="page"] {
  font-weight: 700;
}

.site-actions {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}

/* Sign in reads like the links of the menu; only Get Stagecockpit is a button */
.site-signin {
  color: var(--text-body);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: var(--transition-quick);
}

.site-signin:hover,
.site-signin[aria-current="page"] {
  color: var(--text);
}

/* Sign in as an icon beside the globe and drawn like it: transparent, the grey circle only under the pointer (on the
   sign-in pages themselves it is just white); its label is read out, shows as a tooltip and stands in the open menu */
.site-signin.is-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: transparent;
}

.site-signin.is-icon:hover {
  background: var(--surface-overlay);
}

.site-signin-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.site-signin.is-icon .site-signin-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The language: a globe opens the list of languages, the current one marked with the accent's dot */
.lang-menu {
  position: relative;
}

.lang-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
  transition: var(--transition-quick);
}

.lang-toggle:hover,
.lang-toggle[aria-expanded="true"] {
  background: var(--surface-overlay);
  color: var(--text);
}

.lang-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.lang-options {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  display: grid;
  min-width: 160px;
  padding: var(--space-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-window);
}

.lang-options[hidden] {
  display: none;
}

.lang-options a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xs);
  color: var(--text-body);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: var(--transition-quick);
}

.lang-options a:hover {
  background: var(--surface-raised);
  color: var(--text);
}

.lang-options a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

.lang-options a[aria-current="page"]::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-glass);
  color: var(--text);
  cursor: pointer;
}

.nav-toggle svg {
  width: 20px;
  height: 20px;
  margin: auto;
}

.nav-toggle .icon-close,
.site-header.is-open .nav-toggle .icon-open {
  display: none;
}

.site-header.is-open .nav-toggle .icon-close {
  display: block;
}

/* --- Shared section parts --- */

.kicker {
  color: var(--accent);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
}

.section {
  position: relative;
  padding-block: var(--space-section);
}

/* a menu link (How it works, Pricing …) lands on the section's heading, right under the header, not on the empty space
   above it */
.section[id] {
  scroll-margin-top: calc(-1 * var(--space-section));
}

/* 8) the plans on a faintly lighter band, for some rhythm between the black sections */
#plans {
  background: var(--band);
}

/* 1) content glides in as it scrolls into view, cards one after the other (site.js; without JavaScript all shows) */
.has-reveal .reveal {
  --reveal-delay: 0ms;
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: var(--transition-reveal);
  transition-delay: var(--reveal-delay);
}

.has-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.section-head {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  max-width: 780px;
  margin-bottom: var(--space-12);
}

.section-head.is-centered {
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

/* Headings take turns instead of all sitting in the middle (board: Vorschlag 1 "Split"): most stand on the left; a split
   one puts its title on the left and its lead or its switch (Pricing) on the right, at the foot of the title; only
   One flow, the showpiece with its button, stays centred. Narrow windows stack everything on the left. */
@media (min-width: 901px) {
  .section-head.is-split {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: end;
    column-gap: var(--space-16);
    max-width: none;
  }

  .section-head.is-split > .kicker,
  .section-head.is-split > .section-title {
    grid-column: 1;
  }

  .section-head.is-split > :not(.kicker, .section-title) {
    grid-row: 2;
    grid-column: 2;
    justify-self: end;
  }

  .section-head.is-split .section-lead {
    justify-self: start;
    padding-bottom: var(--space-2);
    color: var(--text-muted);
  }
}

.section-title {
  font-family: var(--font-brand);
  font-size: var(--text-title);
  font-weight: 900;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-brand);
  text-wrap: balance;
}

.section-lead {
  color: var(--text-body);
  font-size: var(--text-lead);
  line-height: var(--leading-normal);
}

/* --- Hero: what the app is, and the real StageView on a stage screen --- */

/* The first screen looks the same on every window shape: the copy sits under the header, the StageView hangs below it
   like the LED wall over a stage, in front of the crowd, and the first screen's bottom edge cuts it exactly through the
   middle of the second slot under the live card, so the running order visibly goes on; the rest shows once the page
   scrolls. site.js sizes the screen to the real copy; the values here are the first paint. */
.hero {
  --screen-bezel: var(--space-2);
  /* where the first screen cuts the StageView: the middle of the second slot under the live card, as a share of the
     StageView's height (site.js measures it in the running view) */
  --stageview-cut: 0.6333;
  /* as wide as the room under a copy of about 500px allows (0.3562 = cut share x 9/16), at most two thirds of a wide
     window and 1280px; narrow windows up to 640px or their full width */
  --hero-content-width: calc(100vw - 2 * var(--gutter));
  --hero-screen-width: max(280px, min(1280px, max(0.66 * var(--hero-content-width), min(var(--hero-content-width), 640px)), (100svh - 500px) / 0.3562 + 2 * var(--screen-bezel)));
  --hero-view-height: calc((var(--hero-screen-width) - 2 * var(--screen-bezel)) * 9 / 16);
  /* site.js moves the screen by the little its tilt lifts the card */
  --hero-fold-shift: 0px;
  --hero-screen-top: calc(100svh - var(--screen-bezel) - var(--stageview-cut) * var(--hero-view-height));
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* below it the same room as between all sections */
  padding: var(--header-height) var(--gutter) var(--space-section);
  overflow: hidden;
  /* only the sides are clipped: the screen's glow runs on softly into the next section */
  overflow: clip visible;
}

.hero-copy,
.hero-stage {
  position: relative;
  z-index: var(--z-raised);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* centred between the top of the page and the top of the screen; a copy taller than the room pushes the screen down,
     so the first screen never shows more of the StageView than down to the cut */
  justify-content: center;
  min-height: calc(var(--hero-screen-top) - var(--header-height));
  max-width: 1080px;
  padding-block: var(--space-7) var(--hero-copy-gap);
  text-align: center;
  animation: rise-in 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.hero-title {
  margin-top: var(--space-5);
  font-family: var(--font-brand);
  font-size: var(--text-hero);
  font-weight: 900;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-brand);
}

/* the headline always breaks between its two halves ("The running order" / "for every live event."), never leaving
   the last word alone; a half that is too wide for a phone breaks evenly within itself */
.hero-title-line {
  display: block;
  text-wrap: balance;
}

.hero-lead {
  max-width: 760px;
  margin-top: var(--space-5);
  color: var(--text-soft);
  font-size: var(--text-hero-lead);
}

/* the uses in one line, each behind a yellow check */
.hero-uses {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  padding: 0;
  list-style: none;
}

.hero-uses li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hero-uses svg {
  flex: none;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

/* Mac with its logo, Windows dimmed with a "Soon" tag in its own grey, a hairline between */
.hero-platforms {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-size: var(--text-xs);
}

.platform {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text);
  font-weight: 600;
}

.platform svg {
  display: block;
}

.platform.is-soon {
  padding-left: var(--space-3);
  border-left: var(--edge-width) solid var(--line-bright);
  color: var(--text-dim);
}

.platform-soon {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--line);
  color: inherit;
  font-size: var(--text-scene-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* Stage lights (board variant 1e): three blurred beams hang from above and swing slowly over the crowd, under the copy
   and the screen; screen blending lets them light the photo behind */
.hero-lights {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.beam {
  position: absolute;
  top: -160px;
  width: clamp(160px, 26vw, 380px);
  height: 1400px;
  transform-origin: 50% 0;
  filter: blur(26px);
  mix-blend-mode: screen;
  will-change: transform;
}

.beam-warm {
  background: var(--beam-warm);
}

.beam-1 {
  left: 5.5%;
  transform: rotate(-18deg);
  animation: sweep-1 7s ease-in-out infinite alternate;
}

.beam-2 {
  left: 68%;
  transform: rotate(16deg);
  animation: sweep-2 9s ease-in-out infinite alternate;
}

.beam-3 {
  left: 37.5%;
  transform: rotate(4deg);
  animation: sweep-3 5.5s ease-in-out infinite alternate;
}

.hero.is-out-of-view .beam {
  animation-play-state: paused;
}

/* the screen rises with its light; the tilt correction moves only the screen, never the copy above it */
.hero-stage {
  width: min(var(--hero-screen-width), 100%);
  margin-top: var(--hero-fold-shift);
  perspective: 1400px;
  animation: screen-rise 1600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* the line under the screen: what the visitor is looking at, once the screen fills the window on scrolling */
.hero-tagline {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-16);
  text-align: center;
  transition: var(--transition-fade);
}

/* Safari on the iPhone draws the page on below its toolbar, past the window it reports, so the line could peek in at
   the bottom of the first screen: it shows only once the page is scrolled (site.js sets .is-scrolled) */
.has-reveal body:not(.is-scrolled) .hero-tagline {
  opacity: 0;
}

.hero-tagline strong {
  font-family: var(--font-brand);
  font-size: var(--text-tagline);
  font-weight: 900;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-brand);
}

.hero-tagline span {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* the note under the hero's screen, right at its lower right edge, small and quiet; it tilts along with the screen */
.screen-caption {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-2);
  color: var(--text-dim);
  font-size: var(--text-3xs);
  white-space: nowrap;
  pointer-events: none;
}

/* a light glow from behind the display, in the colour of what is live (site.js sets --stage-light): the light of the
   screen falling on the smoke around it. It fades in slowly once the screen has landed (site.js sets .is-lit): through
   its colour, not its opacity, so it is drawn the same all the way and ends exactly where it fades to */
.stage-light {
  position: absolute;
  inset: -6% -4%;
  z-index: var(--z-behind);
  border-radius: var(--radius-lg);
  background: transparent;
  filter: blur(64px);
  transition: var(--transition-light);
  pointer-events: none;
}

.hero.is-lit .stage-light {
  background: var(--stage-light);
}

/* once lit, the colour changes with the countdown in the same frame, never behind it (site.js) */
.hero.is-light-settled .stage-light {
  transition: none;
}

/* A slim pro display: a narrow frame of black metal, light catching its top edge */
.screen,
.flow-screen {
  position: relative;
  padding: var(--screen-bezel);
  border-radius: var(--radius-md);
  background: var(--screen-frame);
  box-shadow: var(--shadow-screen);
}

/* In the hero the screen unfolds while it rises and stays tilted back a little; scrolling sets it upright (site.js
   lowers --screen-tilt to 0) */
.screen {
  --screen-tilt-base: 20deg;
  --screen-tilt: var(--screen-tilt-base);
  transform: rotateX(var(--screen-tilt));
  transform-origin: 50% 0;
  animation: screen-unfold 1600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.screen.is-risen {
  animation: none;
}

.screen-view,
.flow-screen-view {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--surface-black);
  box-shadow: var(--shadow-screen-panel);
  /* a screen to look at: the page scrolls on, the demo is never clicked */
  pointer-events: none;
}

/* The screen rises only with its picture in it: site.js holds the rise until the StageView has drawn (without
   JavaScript it rises as usual) */
.hero.is-waiting-for-demo .hero-stage,
.hero.is-waiting-for-demo .screen {
  animation-play-state: paused;
}

/* the cut through the second slot under the live card: site.js measures where it lands on the page, tilt included */
.screen-fold {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--screen-bezel) + (100% - 2 * var(--screen-bezel)) * var(--stageview-cut));
  height: 0;
  pointer-events: none;
}



/* --- Why: the same show without and with Stagecockpit, side by side; each side a scene and three points --- */

.why-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.why-side {
  --why-side-pad: var(--space-8);
  display: grid;
  align-content: start;
  gap: var(--space-5);
  padding: var(--why-side-pad);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-base);
}

.why-side.is-with {
  border-color: var(--accent-line);
  /* a soft yellow glow behind the card, as behind the featured plan */
  box-shadow: var(--shadow-featured);
  background: linear-gradient(180deg, var(--accent-soft), var(--surface-base) 60%);
}

.why-side h3 {
  font-family: var(--font-brand);
  font-size: var(--text-card-title);
  font-weight: 900;
  letter-spacing: var(--tracking-brand);
}

.why-points {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.why-points li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--space-3);
  color: var(--text);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.why-points svg {
  width: 20px;
  height: 20px;
  margin-top: var(--space-hair);
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.why-with {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.why-with img {
  width: auto;
  height: 0.9em;
}

/* without: grey, crossed out, the scene in black and white */
.why-side.is-without li {
  color: var(--text-muted);
}

.why-side.is-without .why-points svg {
  stroke: var(--text-dim);
}

/* under the two sides, quietly: it runs without the internet */
.why-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-10);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.why-note svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.why-scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: 184px;
  padding: var(--space-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--scene-bg);
  overflow: hidden;
  transition: var(--transition-scene);
}

.why-side.is-without .why-scene {
  filter: grayscale(1);
}

/* both sides' pictures in the same shape, edge to edge at the top of their card */
.why-side .why-scene {
  height: auto;
  margin: calc(-1 * var(--why-side-pad)) calc(-1 * var(--why-side-pad)) 0;
  aspect-ratio: 13 / 8;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
}

/* With: a close cut of the crew photo (720 x 443 of its 1536 x 1024 pixels, from 361, 95), the monitor in the middle
   and the heads of the crew below it */
.why-photo {
  display: block;
  padding: 0;
}

.why-photo-frame {
  position: absolute;
  top: -21.441%;
  left: -50.139%;
  width: 213.333%;
  aspect-ratio: 1536 / 1024;
}

/* the photo soft, as behind FAQ; only the StageView in the monitor is sharp */
.why-photo-frame > img {
  filter: var(--why-photo-filter);
}

/* Without: the printed running order taped backstage (900 x 554 of its 1024 x 1536 pixels, from 124, 180): the list
   taped to the case with the stage behind it; sharp, so the scribbles read, and without the shade of the monitor */
.why-paper-frame {
  top: -32.500%;
  left: -13.778%;
  width: 113.778%;
  aspect-ratio: 1024 / 1536;
}

.why-paper-frame > img {
  filter: var(--why-paper-filter);
}

.why-paper-frame::before {
  background: none;
}

/* the surroundings darker, the screen in front of the shade; the cap of the crew member stays in front of the screen */
.why-photo-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-photo-shade);
  background: var(--why-photo-shade);
  pointer-events: none;
}

.why-photo [data-crew-screen] {
  z-index: var(--z-photo-screen);
}

/* on both sides the photo is not cut at the picture's edge: it runs on under the text, which lies on a fade into the
   card's black */
.why-side {
  position: relative;
  isolation: isolate;
}

.why-side .why-photo {
  overflow: visible;
  border-bottom: 0;
}

/* where the photo ends (on a narrow card above the last lines) it fades out instead of stopping at an edge */
.why-side .why-photo-frame {
  -webkit-mask-image: linear-gradient(180deg, black 70%, transparent 100%);
  mask-image: linear-gradient(180deg, black 70%, transparent 100%);
}

.why-side::after {
  content: "";
  position: absolute;
  inset: 0;
  /* above the picture, below the text */
  z-index: var(--z-photo-screen);
  background: var(--why-with-fade);
  pointer-events: none;
}

.why-side.is-without::after {
  background: var(--why-without-fade);
}

.why-side > :not(.why-scene) {
  position: relative;
  z-index: var(--z-photo-front);
}

.why-photo .backdrop-photo-front {
  z-index: var(--z-photo-front);
}

/* --- OperatorView: the real app large, its main features to choose beside it; a light marks the chosen one --- */

/* the app about 1000px wide beside its list: large enough to read, not so large it fills the window; the heading above
   takes the same width, so it starts where the window does */
.tour-track {
  --tour-width: 1280px;
}

.tour-track .section-head {
  max-width: var(--tour-width);
  margin-inline: auto;
}

.tour-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 250px);
  align-items: center;
  gap: var(--space-6);
  max-width: var(--tour-width);
  margin-inline: auto;
}

.tour {
  position: relative;
}

/* On a large window the features take their turn while the page scrolls: heading and app stay together in the middle
   of the window under the header for a stretch of scrolling (site.js picks the feature from the scroll), the app as
   large as the window's height lets both fit */
@media (min-width: 1081px) and (min-height: 760px) {
  /* the stretch of scrolling (a sticky box stays only within its parent's content, not its padding) */
  .tour-track::after {
    content: "";
    display: block;
    height: var(--tour-scroll);
  }

  /* heading and app stand in the middle of the pinned view: as much room above the heading as below the window */
  .tour-pin {
    position: sticky;
    top: var(--header-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - var(--header-height));
  }

  .is-promo .tour-pin {
    top: calc(var(--header-height) + var(--promo-bar-height));
    min-height: calc(100vh - var(--header-height) - var(--promo-bar-height));
  }

  /* How it works lands where the pinning starts, right under the header, so heading and window stand centred */
  #how {
    scroll-margin-top: calc(-1 * var(--space-section) - var(--space-4));
  }

  .tour-pin .section-head {
    margin-bottom: var(--space-8);
  }

  /* the window keeps the app's 16:10; the list beside it takes about 274px */
  .tour-track {
    --tour-width: min(1280px, (100vh - var(--tour-pin-room)) * 1.6 + 274px);
  }

  .tour-pin .section-head,
  .tour-layout {
    width: 100%;
  }
}

.tour-spot {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-tour);
  opacity: 0;
  transition: var(--transition-tour);
  pointer-events: none;
}

.tour.is-ready .tour-spot {
  opacity: 1;
}

/* the app glides into the chosen feature (site.js sets its zoom); the window buttons step aside meanwhile */
.tour .app-window-view {
  transition: var(--transition-zoom);
}

.tour .app-window-buttons {
  transition: var(--transition-fade);
}

.tour.is-zoomed .app-window-buttons {
  opacity: 0;
}

.tour-features {
  display: grid;
  gap: var(--space-hair);
}

/* a numbered list with a line on the left: the chosen feature has a yellow line, a yellow fade to the right and its line
   of text sliding open; the others show number and name only, dimmed, so the list stays as low as the window */
.tour-feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  align-content: start;
  column-gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-left: 2px solid var(--line);
  border-radius: 0;
  background: none;
  color: var(--text-dim);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-tile);
}

.tour-feature:hover {
  color: var(--text-soft);
}

.tour-feature[aria-pressed="true"] {
  border-left-color: var(--accent);
  background: var(--list-fade);
  color: var(--text);
}

.tour-number {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  transition: var(--transition-tile);
}

.tour-feature[aria-pressed="true"] .tour-number {
  color: var(--accent);
}

.tour-feature strong {
  color: inherit;
  font-size: var(--text-base);
}

.tour-text {
  grid-column: 2;
  max-height: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  opacity: 0;
  transform: var(--focus-text-shift);
  transition: var(--transition-tile);
}

.tour-feature[aria-pressed="true"] .tour-text {
  max-height: var(--tile-text-height);
  padding-top: var(--space-1);
  opacity: 1;
  transform: none;
}

/* --- One flow: the real OperatorView in the Mac app's window in front, the real StageView on a stage screen behind it.
   While the section is in view a demo operator presses GO NEXT (site.js): the button lights up in the app and the
   stage screen follows in the same moment; both views share one demo day --- */

.flow-demo {
  --screen-bezel: var(--space-2);
  position: relative;
  aspect-ratio: 100 / 41;
}

.flow-stage {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
}

.flow-mac {
  position: absolute;
  top: 16%;
  left: 0;
  z-index: var(--z-raised);
  width: 49%;
}

.flow-label {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
}

.flow-label strong {
  color: var(--accent);
  font-weight: 700;
}


/* the visitor's GO NEXT under the demo, shaped like the app's key: the command, and a small line below it */
/* above the stage screen's long shadow, which would otherwise lie over the button's top and lift off it only while
   the button moves on a press */
.flow-try {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  margin-top: var(--space-10);
  text-align: center;
}

.flow-go {
  flex-direction: column;
  gap: var(--space-hair);
  min-width: 220px;
  padding-block: var(--space-3);
  /* always a soft yellow glow behind it, so it stands out under the demo */
  box-shadow: var(--shadow-go-glow);
}

/* the moment the button comes into view, rings go out of it three times: it can be pressed (site.js, once) */
.flow-try.is-inviting .flow-go:not(.is-pressed) {
  animation: go-invite 1.1s ease-out 3;
}

.flow-go strong {
  font-size: var(--text-xl);
  font-weight: 900;
  letter-spacing: var(--tracking-key);
}

/* the invitation under the button: the same, with their own running order */
.flow-signup {
  margin-top: var(--space-2);
  color: var(--text-body);
  font-size: var(--text-base);
}

/* every press, the demo operator's or the visitor's: the button goes down and springs back while bright yellow rings and
   a wide glow go out of it */
.flow-go.is-pressed {
  animation: go-press 1100ms ease-out;
}

.flow-go span {
  color: var(--on-accent-soft);
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}


/* --- The OperatorView as the Mac app's window (used by the OperatorView and One flow sections) --- */

/* a macOS window: no title bar (the app hides it), rounded corners, a hairline edge and a deep shadow */
.app-window {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-black);
  box-shadow: var(--shadow-window);
}

/* The OperatorView in the Mac app's window size (1440 x 900), scaled to the frame (site.js sets --app-scale) */
.app-window-frame {
  --app-scale: 1;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1440 / 900;
}

/* a clear pane over each demo view: Safari on the iPhone scrolls a list inside an iframe under the finger even though
   the iframe takes no pointer, so the page's scroll would stop there; on this pane it simply scrolls the page */
.app-window-frame::after,
.screen::after,
.flow-screen::after {
  content: "";
  position: absolute;
  inset: 0;
}

.app-window-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  max-width: none;
  height: 900px;
  border: 0;
  background: var(--surface-black);
  transform: scale(var(--app-scale));
  transform-origin: 0 0;
  pointer-events: none;
}

/* close, minimise, zoom where macOS puts them in a window without title bar: inside the 38px strip at the top of the
   OperatorView's sidebar, measured in the app's own pixels and scaled with it */
.app-window-buttons {
  position: absolute;
  top: calc(13px * var(--app-scale));
  left: calc(20px * var(--app-scale));
  display: flex;
  gap: calc(8px * var(--app-scale));
  pointer-events: none;
}

.app-window-buttons span {
  width: calc(12px * var(--app-scale));
  height: calc(12px * var(--app-scale));
  border-radius: var(--radius-pill);
  background: var(--mac-close);
  box-shadow: var(--shadow-mac-button);
}

.app-window-buttons span:nth-child(2) {
  background: var(--mac-minimise);
}

.app-window-buttons span:nth-child(3) {
  background: var(--mac-zoom);
}

/* --- Pricing. The plan cards keep their class names: the customer portal shows them on its purchase page. --- */

/* Personal use or Business: the app's segmented switch (ui-segmented--plain): a quiet grey track, the chosen item
   raised in a lighter grey; the highlight slides to the chosen item (prices.js places it) */
.pricing-audience {
  /* where the highlight sits; prices.js sets both to the chosen item */
  --thumb-left: 0px;
  --thumb-width: 0px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-hair);
  padding: var(--space-hair);
  border-radius: var(--radius-sm);
  background: var(--segmented-track);
}

.pricing-audience::before {
  content: "";
  position: absolute;
  top: var(--space-hair);
  bottom: var(--space-hair);
  left: 0;
  width: var(--thumb-width);
  border-radius: var(--radius-segment);
  background: var(--segmented-active);
  transform: translateX(var(--thumb-left));
  transition: var(--transition-segment);
}

.pricing-audience-option {
  position: relative;
  min-height: var(--segmented-height);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-segment);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-quick);
}

.pricing-audience-option.is-active {
  color: var(--text-bright);
  font-weight: 700;
}

/* until the script has placed the highlight (or without it), the chosen item carries the grey itself */
.pricing-audience:not(.has-thumb) .pricing-audience-option.is-active {
  background: var(--segmented-active);
}

.pricing-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.pricing-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

/* Side by side, the parts of the cards line up: name, price, note, list, the volume prices of Season and the button
   each sit in one row of the plans' grid, as high as the highest card (on the purchase page of the portal too, where
   Event's stage counter takes the row of the volume prices and the buy block the button's) */
@media (min-width: 901px) {
  #plans .pricing-plan,
  .portal-pricing .pricing-plan {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: var(--space-5);
  }

  #plans .pricing-plan-action,
  .portal-pricing .portal-plan-buy {
    grid-row: 6;
    align-self: end;
  }
}

@media (min-width: 1240px) {
  #plans .pricing-deal,
  .portal-pricing .pricing-deal {
    position: absolute;
    top: calc(var(--text-plan-price) * var(--leading-tight) / 2);
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-top: 0;
    border-radius: var(--radius-sm);
    transform: translateY(-50%);
  }
}

/* the plan most take: a warm glow (level with the others, so their rows line up) */
.pricing-plan.is-featured {
  border-color: var(--accent-line);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-featured);
}

/* 2) a light that follows the pointer along a card's edge (site.js passes the pointer's position) */
.has-edge-light {
  --edge-x: 50%;
  --edge-y: 0%;
}

.has-edge-light::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: var(--edge-width);
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--edge-x) var(--edge-y), var(--edge-light), transparent 70%);
  /* only the frame of the padding shows: the content box is cut out of the full box */
  -webkit-mask: var(--mask-fill) content-box, var(--mask-fill);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: var(--transition-fade);
  pointer-events: none;
}

.has-edge-light:hover::after {
  opacity: 1;
}

.pricing-plan.has-edge-light:hover {
  background-image: radial-gradient(420px circle at var(--edge-x) var(--edge-y), var(--card-light), transparent 60%);
}

/* on the card's top edge, so a longer label (German "Beliebteste Wahl") never runs into the plan's name */
.pricing-badge {
  position: absolute;
  top: 0;
  right: 28px;
  transform: translateY(-50%);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.pricing-plan-head h2 {
  font-family: var(--font-brand);
  font-size: var(--text-plan-name);
  font-weight: 900;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-brand);
}

.pricing-plan-head p {
  margin-top: var(--space-2);
  color: var(--text-body);
  font-size: var(--text-sm);
}

/* the amount and the unit on its own line right under it: every card has the same two lines, so the units sit at one
   height. The Season deal never follows the amount (its width changes with the audience): on a wide window it stands at
   the right end of the amount's line, elsewhere on a line of its own under the unit. */
.pricing-price {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  align-items: center;
  gap: 0 var(--space-3);
}

.pricing-amount {
  font-family: var(--font-brand);
  font-size: var(--text-plan-price);
  font-weight: 900;
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
}

.pricing-deal {
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--text-3xs);
  font-weight: 700;
}

.pricing-unit {
  width: 100%;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.pricing-note {
  color: var(--text-body);
  font-size: var(--text-sm);
}

.pricing-features {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: 0;
  color: var(--text-body);
  font-size: var(--text-sm);
  list-style: none;
}

.pricing-features li {
  position: relative;
  padding-left: var(--space-6);
}

/* the yellow dot of the logo's live row */
.pricing-features li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

/* the line that introduces the list ("Everything in Free, plus:") is no feature: no dot, flush left */
.pricing-features .pricing-features-lead {
  padding-left: 0;
}

/* a small sad face after the watermark of Free: it is the one thing that holds it back */
.pricing-sad {
  line-height: var(--leading-tight);
}

.pricing-features .pricing-features-lead::before {
  content: none;
}

.pricing-features strong {
  color: var(--text);
}

/* Season's volume prices: a quiet line that opens smoothly (site.js) to the two prices and a small calculator with a
   stepper and the yearly total */
.pricing-volume {
  min-width: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.pricing-volume-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.pricing-volume-summary::-webkit-details-marker {
  display: none;
}

.pricing-volume-summary::after {
  content: "+";
  color: var(--accent);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  transition: var(--transition-open);
}

.pricing-volume[open] .pricing-volume-summary::after {
  transform: rotate(45deg);
}

.pricing-volume.is-closing .pricing-volume-summary::after {
  transform: none;
}

/* as wide as the card and no wider: the calculator's label and stepper share a line only where they fit */
.pricing-volume-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding-top: var(--space-4);
}

.pricing-volume-tiers {
  display: grid;
}

.pricing-volume-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-body);
  font-size: var(--text-sm);
}

.pricing-volume-row strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.pricing-calc {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-base);
}

.pricing-calc-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--text-body);
  font-size: var(--text-sm);
}

.pricing-calc-field label {
  white-space: nowrap;
}

/* minus, the number, plus: one control */
.pricing-stepper {
  flex-shrink: 0;
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-black);
}

.pricing-stepper-button {
  width: var(--space-10);
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  cursor: pointer;
  transition: var(--transition-quick);
}

.pricing-stepper-button:hover {
  background: var(--surface-elevated);
  color: var(--accent);
}

.pricing-calc-input {
  width: var(--space-12);
  min-height: var(--portal-control);
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--line);
  background: none;
  color: var(--text);
  font: inherit;
  /* 16px at least: a smaller field makes Safari on the iPhone zoom in on tapping it */
  font-size: var(--text-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  appearance: textfield;
}

/* the line inside the field: the stepper around it clips anything outside */
.pricing-calc-input:focus-visible {
  border-radius: 0;
  box-shadow: var(--shadow-field-focus);
}

.pricing-calc-input::-webkit-inner-spin-button,
.pricing-calc-input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.pricing-calc-breakdown {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.pricing-calc-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.pricing-calc-total strong {
  color: var(--accent);
  font-family: var(--font-brand);
  font-size: var(--text-xl);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.pricing-plan-action {
  width: 100%;
  margin-top: auto;
}

/* sign-up links in running text: under the GO NEXT demo, in the FAQ */
.flow-signup a,
.faq-link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.flow-signup a:hover,
.faq-link:hover {
  text-decoration: underline;
}

/* "Start free →" stays in one piece */
.flow-signup a {
  white-space: nowrap;
}

.pricing-footnote,
.footer-ai {
  text-wrap: balance;
}

.pricing-features li,
.why-points li {
  text-wrap: pretty;
}

.pricing-footnote {
  margin-top: var(--space-6);
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-align: center;
}

/* payment methods and delivery area, right under the price note: the logos, then the countries */
.pricing-footnote.pricing-payment {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.pricing-payment p {
  margin: 0;
}

.pay-methods {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.pay-tiles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

/* the logos alone, in one height; each keeps its own width */
.pay-tile {
  display: inline-flex;
  color: var(--text);
}

.pay-tile svg {
  width: auto;
  height: var(--space-4);
  fill: currentColor;
}

/* the American Express logo is a box itself: a little larger, so all five look the same size */
.pay-tile.is-badge svg {
  height: var(--space-6);
}

.compare {
  margin-top: var(--space-12);
}

.compare-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  min-height: 44px;
  margin: 0 auto;
  padding: 0 var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text-body);
  font-size: var(--text-sm);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  transition: var(--transition-quick);
}

.compare-toggle::-webkit-details-marker {
  display: none;
}

.compare-toggle::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: calc(-1 * var(--space-1));
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: var(--transition-open);
}

.compare-toggle:hover {
  border-color: var(--line-bright);
  color: var(--text);
}

.compare[open] .compare-toggle::after {
  margin-top: var(--space-1);
  transform: rotate(225deg);
}

.compare[open] .compare-table-wrap {
  margin-top: var(--space-6);
}

.compare-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.compare-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.compare-table th,
.compare-table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
}

.compare-table thead th {
  background: var(--surface-overlay);
  color: var(--text-muted);
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.compare-table tbody th {
  color: var(--text);
  font-weight: 600;
}

.compare-table td {
  color: var(--text-body);
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: 0;
}

.compare-yes {
  color: var(--show-bright);
  font-weight: 700;
}

/* not in this plan: a red cross, as clear as the check of what is */
.compare-no {
  color: var(--danger);
  font-weight: 700;
}

/* --- FAQ --- */

.faq-list {
  display: grid;
  gap: var(--space-2);
  max-width: 860px;
  margin-inline: auto;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  text-wrap: balance;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  color: var(--accent);
  font-size: var(--text-card-title);
  line-height: var(--leading-snug);
  transition: var(--transition-open);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

/* while a card closes (site.js keeps it open until its height has glided back) the cross turns back at once */
.faq-item.is-closing summary::after {
  transform: none;
}

.faq-item p {
  padding: 0 var(--space-5) var(--space-4);
  color: var(--text-body);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* --- Closing: a slim bar in the brand's yellow (board: E "Leiste"): the icon and one question on the left, the plans
   as a link and Start free on the right --- */

.closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--accent);
  color: var(--on-accent);
}

.closing-brand {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.closing-brand img {
  flex: none;
  width: 44px;
  height: 44px;
  filter: var(--shadow-icon-on-accent);
}

.closing-title {
  font-family: var(--font-brand);
  font-size: var(--text-closing);
  font-weight: 900;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-brand);
  text-wrap: balance;
}

.closing-actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.closing-link {
  color: var(--on-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

/* --- Footer: the brand on the left, four columns of links, a bottom line with the copyright --- */

.site-footer {
  position: relative;
  padding-block: var(--space-16) var(--space-8);
  background: var(--surface-black);
}

/* no edge: the page runs softly into the footer's black (the fade lies in the bottom spacing of the content above,
   which every page has: sections, legal pages and the portal end with --space-section) */
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--space-section);
  background: var(--footer-fade);
  pointer-events: none;
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 3fr);
  gap: var(--space-12);
}

.footer-brand {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-4);
}

.footer-brand img {
  width: auto;
  height: 24px;
}

.footer-tagline {
  color: var(--accent);
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
}


/* the icons alone, no frames; the touch area stays 40px, and the first icon lines up with the text above */
.footer-socials {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-2);
  margin-left: calc(-1 * var(--space-2));
}

.footer-socials a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: var(--transition-quick);
}

.footer-socials a:hover {
  color: var(--text);
}

.footer-socials svg {
  width: 24px;
  height: 24px;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
}

.footer-heading {
  margin-bottom: var(--space-4);
  color: var(--text);
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.footer-column {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.footer-column a,

.footer-top-link {
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition-quick);
}

.footer-column a:hover,
.footer-top-link:hover,
.footer-link-button:hover {
  color: var(--text);
}

/* "Privacy settings" opens the consent card (consent.js) and looks like the links beside it */
.footer-link-button {
  overflow-wrap: anywhere;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: var(--transition-quick);
}

/* --- Consent for the full visit statistics (consent.js): a small card at the bottom, nothing covered --- */

/* the consent chip in the bottom right corner (board: 07 "Tiny chip"): a statistics symbol and a short question, which
   link to the privacy policy, then Decline as a quiet text button and Allow as a yellow chip (.highlights-allow,
   consent.js; legal review pending) */
.consent {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-tip);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  max-width: calc(100vw - 2 * var(--space-4));
  padding: var(--space-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(var(--space-2));
  transition: var(--transition-reveal);
}

.consent.is-open {
  opacity: 1;
  transform: none;
}

/* the question: the yellow bars of a chart and one short word, underlined as the link to the privacy policy */
.consent-ask {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-2);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--line-bright);
  text-underline-offset: var(--space-1);
}

.consent-ask svg {
  width: var(--space-4);
  height: var(--space-4);
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.consent-ask:hover {
  text-decoration-color: currentColor;
}

.consent-ask:focus-visible {
  border-radius: var(--radius-xs);
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* the note under Global Privacy Control: a short sentence instead of the question */
.consent-text {
  margin: 0;
  padding-inline: var(--space-3);
  color: var(--text-body);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.consent-text a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

.consent-actions {
  display: flex;
  gap: var(--space-1);
}

/* Decline: a quiet text button; Allow: the yellow chip */
.consent-button {
  min-height: var(--space-8);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-quick);
}

.consent-button:hover {
  background: var(--surface-elevated);
  color: var(--text);
}

.highlights-allow .consent-button.is-allow {
  background: var(--accent);
  color: var(--on-accent);
}

.highlights-allow .consent-button.is-allow:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-button-glow);
}

.consent-button[aria-pressed="true"] {
  color: var(--text);
}

.consent-button:focus-visible,
.footer-link-button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* on a phone the chip stays in the corner, a little closer to the edge */
@media (max-width: 600px) {
  .consent {
    right: var(--space-2);
    bottom: var(--space-2);
  }
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line-soft);
  font-size: var(--text-3xs);
}

/* the mark of the company behind Stagecockpit, a link to its site, beside the copyright */
.footer-credit {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.footer-maker {
  flex: none;
  height: var(--space-5);
  aspect-ratio: 233 / 202;
  color: var(--text-dim);
  background: currentColor;
  transition: var(--transition-quick);
  -webkit-mask: url("../assets/brand/1more-mark.svg?v=523b7a70") center / contain no-repeat;
  mask: url("../assets/brand/1more-mark.svg?v=523b7a70") center / contain no-repeat;
}

.footer-maker:hover,
.footer-maker:focus-visible {
  color: var(--text);
}

.footer-copy {
  color: var(--text-dim);
}

/* some photos of the site are made with AI: said on its own in the middle of the last line, quieter than the rest */
.footer-ai {
  color: var(--text-faint);
  text-align: center;
}

.site-footer:not(.portal-footer) .footer-bottom {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
}

.site-footer:not(.portal-footer) .footer-top-link {
  justify-self: end;
}

/* --- Forms: the customer portal and the sign-in overlay share them --- */

.portal-hint {
  margin: var(--space-1) 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.portal-form {
  display: grid;
  gap: var(--space-5);
}

.portal-field {
  display: grid;
  gap: var(--space-2);
}

.portal-field > span {
  color: var(--text-muted);
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.portal-input {
  width: 100%;
  min-height: 50px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-black);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  transition: var(--transition-quick);
}

.portal-input[readonly] {
  color: var(--text-muted);
  cursor: default;
}

/* a focused field gets the app's fine accent line on its own edge, not the wide ring of buttons and links */
.portal-input:focus-visible {
  border-color: var(--field-focus-line);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.portal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.portal-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-family: inherit;
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.portal-link:hover,
.portal-link:focus-visible {
  color: var(--accent-hover);
}

/* the notes under the sign-in and sign-up forms (privacy, terms, "Create account", "Sign in") and under the keys
   ("Write to our support") show their links in white,
   underlined: they stand out from the grey text, and nothing yellow competes with the button above */
.sign-in-card .portal-hint .portal-link,
.sign-in-foot .portal-link,
.portal-licenses-foot .portal-link {
  color: var(--text);
}

/* a link in the sign-up hint stays in one piece, so two links never meet across a line break */
.sign-in-card .portal-hint .portal-link {
  white-space: nowrap;
}

.sign-in-card .portal-hint .portal-link:hover,
.sign-in-card .portal-hint .portal-link:focus-visible,
.sign-in-foot .portal-link:hover,
.sign-in-foot .portal-link:focus-visible,
.portal-licenses-foot .portal-link:hover,
.portal-licenses-foot .portal-link:focus-visible {
  color: var(--accent);
}

.portal-link:disabled {
  color: var(--text-muted);
  cursor: default;
}

.portal-status {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.portal-status[hidden] {
  display: none;
}

.portal-status-error {
  color: var(--danger);
}

.portal-status-info {
  color: var(--show-bright);
}

/* --- Sign-in (portal/login.html, portal/js/sign-in.js): one field, one full-width button, a quiet note --- */

/* no card around it: the form stands free in the middle of the page */
.portal-card.sign-in-card {
  width: min(100%, 24rem);
  margin: var(--space-16) auto 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.sign-in-head {
  margin-bottom: var(--space-6);
}

.sign-in-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-brand);
  font-size: var(--portal-title);
  font-weight: 900;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-brand);
}

.sign-in-head .portal-hint {
  margin: 0;
}

.sign-in-steps .portal-form {
  gap: var(--space-3);
}

.sign-in-steps .portal-input {
  min-height: var(--portal-control);
  padding: var(--space-2) var(--space-3);
}

.sign-in-steps input[name="code"] {
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-code);
  text-align: center;
}

.sign-in-steps .portal-actions {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.sign-in-steps .portal-actions .button {
  justify-content: center;
  width: 100%;
}

.sign-in-steps .portal-actions .portal-link {
  align-self: center;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.sign-in-steps .portal-hint {
  margin: 0;
  font-size: var(--text-xs);
}

/* the address the code went to, in white, so a typo shows at once */
.sign-in-steps .portal-hint strong {
  color: var(--text);
  font-weight: 600;
}

/* under the button: a new code, and the way back for a wrong address, side by side */
.sign-in-code-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
}

/* sign-up: the optional consent as quiet as the hints around it */
.sign-in-steps .portal-check {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.sign-in-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.sign-in-foot p {
  margin: 0;
}

/* --- Legal pages (built by operations/scripts/build-legal-pages.py from imprint.html) --- */

/* the footer stands at the bottom of the window, also when a page is short (imprint, withdrawal, 404) */
.legal-page {
  display: flex;
  flex-direction: column;
  min-height: var(--viewport-full);
}

.legal-main {
  flex: 1 0 auto;
  width: min(100% - 2 * var(--gutter), 920px);
  margin: 0 auto;
  padding: calc(var(--header-height) + var(--space-12)) 0 var(--space-section);
}

/* a running text (terms, privacy, license, withdrawal): lines of about 80 characters, easier to read than the full width */
.legal-text {
  max-width: 680px;
  margin-inline: auto;
}

/* a long text: its sections listed beside it, the list stays in view while reading and marks the section read (site.js) */
.legal-main.has-toc {
  display: grid;
  grid-template-columns: 220px minmax(0, 680px);
  justify-content: center;
  align-items: start;
  gap: var(--space-10);
  width: min(100% - 2 * var(--gutter), 1120px);
}

.legal-toc {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  display: grid;
  gap: var(--space-3);
  max-height: calc(var(--viewport-full) - var(--header-height) - var(--space-12));
  overflow-y: auto;
  scrollbar-width: none;
}

.legal-toc-title {
  color: var(--accent);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
}

.legal-toc ol {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-toc a {
  display: block;
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  border-left: 1px solid var(--line);
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  text-decoration: none;
  transition: var(--transition-quick);
}

.legal-toc a:hover {
  color: var(--text);
}

/* the same list folded at the top of the text, where the side list has no room (shown below 1081px) */
.legal-toc-fold {
  display: none;
}

.legal-toc-fold summary {
  color: var(--accent);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  cursor: pointer;
}

.legal-toc-fold ol {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.legal-toc-fold a {
  display: block;
  padding-block: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-decoration: none;
}

.legal-toc-fold a:hover {
  color: var(--text);
}

.legal-toc a.is-active {
  border-left-color: var(--accent);
  color: var(--text);
}

.legal-main.has-toc .legal-text {
  margin-inline: 0;
}

/* a heading jumped to from the list stops below the header */
.legal-sheet h2[id] {
  scroll-margin-top: calc(var(--header-height) + var(--space-6));
}

.legal-card {
  padding: var(--space-legal);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-base);
}

/* the legal pages: their text stands right on the page, no card behind it */
.legal-card.legal-sheet {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* 404 (404.html): one line and the way back */
.error-text {
  color: var(--text-muted);
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.legal-hero {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.legal-eyebrow {
  color: var(--accent);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
}

.legal-title {
  font-family: var(--font-brand);
  font-size: var(--text-title);
  font-weight: 900;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-brand);
  /* "Datenschutzerklärung", "Geschäftsbedingungen": a long German word breaks with a hyphen rather than widen the page */
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* version, date and notes right under the title */
.legal-meta {
  display: grid;
  gap: var(--space-2);
}

.legal-meta p {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.legal-sheet-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-10);
}

/* calm sections: room between them instead of a line */
.legal-sheet-section {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-5);
}

.legal-sheet-section h2 {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

.legal-sheet-section h3 {
  margin-top: var(--space-2);
  font-size: var(--text-base);
}

.legal-sheet-section p,
.legal-sheet-section li {
  color: var(--text-body);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.legal-sheet-section strong {
  color: var(--text);
}

/* links in the text in white and underlined, as in the portal; yellow under the pointer */
.legal-sheet a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: var(--transition-quick);
}

.legal-sheet a:hover,
.legal-sheet a:focus-visible {
  color: var(--accent);
}

.legal-annex {
  margin-top: var(--space-6);
}

.legal-list {
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-6);
}

.legal-table-wrap {
  overflow-x: auto;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
}

.legal-table th,
.legal-table td {
  padding: var(--space-3);
  border: 1px solid var(--line);
  color: var(--text-body);
  text-align: left;
  vertical-align: top;
}

.legal-table th {
  background: var(--surface-overlay);
  color: var(--text);
}

.legal-table td:not(:first-child) {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.legal-form-line {
  height: 36px;
  border-bottom: 1px solid var(--line-bright);
}

/* --- Motion --- */

@keyframes backdrop-zoom {
  from {
    transform: scale(1.04);
  }

  to {
    transform: scale(1.12);
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sweep-1 {
  from {
    transform: rotate(-34deg);
  }

  to {
    transform: rotate(-6deg);
  }
}

@keyframes sweep-2 {
  from {
    transform: rotate(30deg);
  }

  to {
    transform: rotate(4deg);
  }
}

@keyframes sweep-3 {
  from {
    transform: rotate(-14deg);
  }

  to {
    transform: rotate(14deg);
  }
}

@keyframes go-invite {
  0% {
    box-shadow: var(--shadow-invite-from);
  }

  70%,
  100% {
    box-shadow: var(--shadow-invite-to);
  }
}

@keyframes go-press {
  0% {
    transform: none;
    box-shadow: var(--shadow-go-press-from);
  }

  12% {
    transform: scale(0.94);
  }

  35% {
    transform: scale(1.04);
  }

  100% {
    transform: none;
    box-shadow: var(--shadow-go-press-to);
  }
}

/* a screen is never see-through: it rises fully opaque, from below the first screen's bottom edge (more than its own
   height down, so nothing of it shows while it waits for its picture) */
@keyframes screen-rise {
  from {
    transform: translate3d(0, 110%, 0);
  }

  to {
    transform: none;
  }
}

@keyframes screen-unfold {
  from {
    transform: rotateX(40deg) scale(0.92);
  }

  to {
    transform: rotateX(var(--screen-tilt-base));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* GO NEXT keeps its steady glow but not the expanding rings */
  .flow-try.is-inviting .flow-go:not(.is-pressed) {
    animation: none;
  }

  .site-backdrop {
    animation: none;
    transform: scale(1.04);
  }

  .tour .app-window-view,
  .tour-spot {
    transition: none;
  }

  .flow-go.is-pressed {
    animation: none;
  }

  .pricing-audience::before {
    transition: none;
  }

  .consent {
    transition: none;
  }

  .has-reveal .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .button:hover {
    transform: none;
  }

  .hero-copy,
  .hero-stage,
  .screen,
  .beam,
  .flow-go {
    animation: none;
  }
}

/* --- Smaller screens --- */

@media (max-width: 1080px) {
  /* no room beside the window: the features go under it */
  .tour-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .tour-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* no room for the list of sections beside a long legal text: the text alone, centred */
  .legal-main.has-toc {
    display: block;
    width: min(100% - 2 * var(--gutter), 680px);
  }

  .legal-toc {
    display: none;
  }

  .legal-toc-fold {
    display: block;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--line-soft);
  }
}

@media (max-width: 900px) {
  /* without above with */
  .why-compare {
    grid-template-columns: minmax(0, 1fr);
  }

  .nav-toggle {
    display: grid;
  }

  /* the flow stacked as it runs: the Mac where the operator presses GO NEXT, then the stage screen that follows */
  .flow-demo {
    display: grid;
    gap: var(--space-8);
    aspect-ratio: auto;
  }

  .flow-mac {
    order: -1;
  }

  .flow-stage,
  .flow-mac {
    position: static;
    width: 100%;
  }

  .site-menu {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-6);
    padding: var(--space-4) var(--gutter) var(--space-8);
    border-bottom: 1px solid var(--line);
    /* solid: a blur inside the already blurred header shows nothing, the page would read through */
    background: var(--surface-base);
    /* on a short screen (a phone held sideways) the menu scrolls on its own, from its top */
    justify-content: flex-start;
    max-height: calc(var(--viewport-full) - var(--header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-menu > * {
    flex-shrink: 0;
  }

  .is-promo .site-menu {
    top: calc(var(--header-height) + var(--promo-bar-height));
    max-height: calc(var(--viewport-full) - var(--header-height) - var(--promo-bar-height));
  }


  .site-header.is-open .site-menu {
    display: flex;
  }

  .site-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-size: var(--text-xl);
  }

  .site-nav a {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--line-soft);
    color: var(--text);
  }

  .site-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--space-2);
  }

  /* Sign in and Start free: one height, one width */
  .site-actions .button {
    min-height: var(--space-12);
    padding-inline: var(--space-2);
  }

  /* in the open menu the languages stand side by side above the buttons, without the globe */
  .lang-menu {
    grid-column: 1 / -1;
  }

  .lang-toggle {
    display: none;
  }

  .lang-options,
  .lang-options[hidden] {
    position: static;
    display: flex;
    gap: var(--space-2);
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .lang-options a {
    flex: 1;
    justify-content: center;
    min-height: 44px;
    border: 1px solid var(--line-soft);
  }

  /* in the open menu Sign in is a button beside Get Stagecockpit */
  .site-signin {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: 1px solid var(--line-bright);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-weight: 600;
  }

  .site-signin:hover,
  .site-signin[aria-current="page"] {
    background: var(--surface-overlay);
  }

  .site-signin.is-icon {
    gap: var(--space-2);
    width: auto;
    height: auto;
    border-radius: var(--radius-sm);
  }

  .site-signin.is-icon .site-signin-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  .pricing-plans {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin-inline: auto;
  }

  .closing {
    padding: var(--space-6);
  }

  /* the brand above the links, the links in two columns */
  .footer-top {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-10);
  }

  .footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .legal-sheet-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A phone held sideways: the wide layouts again, so One flow's two screens, both Why sides and the tour's window and
   list fit the short screen together (stacked, GO NEXT would press a view that is out of sight) */
@media (max-width: 900px) and (max-height: 520px) {
  .flow-demo {
    display: block;
    aspect-ratio: 100 / 41;
  }

  .flow-stage,
  .flow-mac {
    position: absolute;
  }

  .flow-stage {
    width: 60%;
  }

  .flow-mac {
    width: 49%;
  }

  .why-compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1080px) and (max-height: 520px) {
  .tour-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .tour-features {
    grid-template-columns: minmax(0, 1fr);
  }

  .tour {
    position: sticky;
    top: calc(var(--header-height) + var(--space-2));
    z-index: var(--z-raised);
  }

  .is-promo .tour {
    top: calc(var(--header-height) + var(--promo-bar-height) + var(--space-2));
  }
}

@media (max-width: 600px) {
  /* the voucher bar on a phone: offer and code, centred on one line, the close beside them */
  .promo-bar {
    padding-inline: var(--space-10);
    font-size: var(--text-3xs);
  }

  .promo-text {
    gap: var(--space-1);
    letter-spacing: var(--tracking-key);
  }

  .promo-code {
    padding-inline: var(--space-1);
  }

  .promo-ends {
    display: none;
  }

  .promo-close {
    right: var(--space-2);
  }

  /* the copyright and the way back on one line, the AI note centred beneath them */
  .site-footer:not(.portal-footer) .footer-bottom {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .site-footer:not(.portal-footer) .footer-ai {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .portal-card.sign-in-card {
    margin-top: var(--space-6);
  }

  .why-side {
    --why-side-pad: var(--space-6);
  }

  .tour-features {
    grid-template-columns: minmax(0, 1fr);
  }

  /* both buttons side by side on a phone, with tighter padding so the German labels fit; they stack only on the narrowest phones */
  .hero-actions {
    gap: var(--space-2);
  }

  .hero-actions .button {
    padding: 0 var(--space-4);
  }

  .hero {
    --screen-bezel: var(--space-1);
  }

  .screen {
    --screen-tilt-base: 12deg;
  }

  .screen,
  .flow-screen {
    border-radius: var(--radius-sm);
  }

  .beam-1,
  .beam-2 {
    display: none;
  }

  .pricing-plan {
    padding: var(--space-6);
  }

  .legal-title {
    font-size: var(--text-title-phone);
  }

  /* the scenes of Why a little lower, so the two sides scroll less */
  .why-scene {
    height: 156px;
  }

  /* the comparison fits the phone: four narrow columns instead of a table to swipe sideways */
  .compare-table {
    min-width: 0;
    table-layout: fixed;
    font-size: var(--text-2xs);
  }

  .compare-table th,
  .compare-table td {
    padding: var(--space-3) var(--space-2);
    overflow-wrap: break-word;
  }

  .compare-table th:first-child,
  .compare-table td:first-child {
    width: 31%;
    padding-inline: var(--space-2) var(--space-1);
  }

  /* the e-mail address in one piece */
  .footer-nav {
    column-gap: var(--space-4);
  }

  .footer-column a[href^="mailto:"] {
    overflow-wrap: normal;
    white-space: nowrap;
    font-size: var(--text-xs);
  }

  /* the comparison's narrow columns break words at a hyphen, never in the middle without one */
  .compare-table td,
  .compare-table thead th {
    padding-inline: var(--space-1);
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  .compare-table thead th {
    letter-spacing: normal;
  }

  /* the tour's window stays in view under the header while the list scrolls beneath it, so a tapped feature is seen */
  .tour {
    position: sticky;
    top: calc(var(--header-height) + var(--space-2));
    z-index: var(--z-raised);
    align-self: start;
  }

  .is-promo .tour {
    top: calc(var(--header-height) + var(--promo-bar-height) + var(--space-2));
  }

  /* the chosen feature's text keeps two lines' room, so the list does not jump when the next one is shorter */
  .tour-feature[aria-pressed="true"] .tour-text {
    min-height: calc(var(--tile-text-height) * 2 / 3 + var(--space-1));
  }

  .platform-soon {
    font-size: var(--text-3xs);
  }

  /* the closing bar: Start free across the card, the plans link centred under it */
  .closing-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--space-4);
    width: 100%;
  }

  .closing-link {
    align-self: center;
  }

  .legal-table th,
  .legal-table td {
    padding: var(--space-2);
  }

  /* a wide legal table (the offers of the license terms) as one card per row, every value with its column's name */
  .legal-table.is-wide thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .legal-table.is-wide,
  .legal-table.is-wide tbody {
    display: grid;
    gap: var(--space-3);
  }

  .legal-table.is-wide tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--line);
  }

  .legal-table.is-wide td {
    border: 0;
    border-top: 1px solid var(--line-soft);
  }

  .legal-table.is-wide td:first-child {
    grid-column: 1 / -1;
    border-top: 0;
    background: var(--surface-overlay);
    color: var(--text);
    font-weight: 600;
  }

  .legal-table.is-wide td::before {
    content: attr(data-label);
    display: block;
    color: var(--text-muted);
    font-size: var(--text-3xs);
  }

  .legal-table.is-wide td:first-child::before {
    content: none;
  }
}

/* The narrowest phones: the hero's two buttons stay on one row, Sign in and Start free stack in the open menu */
@media (max-width: 374px) {
  .site-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 360px) {
  .hero-actions .button {
    padding: 0 var(--space-2);
    font-size: var(--text-sm);
  }
}

/* Touch screens: everything to tap at least 44px high (Apple's guideline); the desktop keeps its finer controls */
@media (pointer: coarse) {
  .pricing-audience-option {
    min-height: 44px;
  }

  .pricing-volume-summary {
    padding-block: var(--space-3);
  }

  .pricing-calc-input {
    min-height: 44px;
  }

  .pricing-stepper-button {
    width: 44px;
  }

  .footer-socials a {
    width: 44px;
    height: 44px;
  }

  .footer-column {
    gap: 0;
  }

  .footer-column a,
  .footer-top-link,
  .footer-link-button {
    min-height: 44px;
    padding-block: var(--space-3);
  }

  /* the mark stays small, its tap area around it */
  .footer-maker {
    box-sizing: content-box;
    padding: var(--space-3);
    margin: calc(-1 * var(--space-3));
    -webkit-mask-origin: content-box;
    mask-origin: content-box;
  }

  /* the consent chip keeps its look; its buttons and its question take a larger tap area around them */
  .consent-actions {
    gap: var(--space-2);
  }

  .consent-button {
    position: relative;
  }

  .consent-button::after,
  .consent-ask::after {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--space-2));
  }

  .consent-button::after {
    inset-inline: 0;
  }

  .closing-link,
  .flow-signup a {
    display: inline-block;
    padding-block: var(--space-3);
    margin-block: calc(-1 * var(--space-3));
  }

  .legal-toc-fold a {
    padding-block: var(--space-3);
  }
}

/* A touch screen wide enough for the desktop header (an iPad, a large phone held sideways): its controls 44px high */
@media (pointer: coarse) and (min-width: 901px) {
  .lang-toggle,
  .site-signin.is-icon {
    width: 44px;
    height: 44px;
  }

  .site-header .button-small {
    min-height: 44px;
  }

  .site-nav a {
    padding-block: var(--space-3);
  }
}

/* No hover on touch: a tapped button would keep its lift, its lighter yellow and its glow (GO NEXT keeps its own) */
@media (hover: none) {
  .button:hover {
    transform: none;
  }

  .button-primary:hover {
    background: var(--accent);
    box-shadow: none;
  }

  .flow-go:hover {
    box-shadow: var(--shadow-go-glow);
  }

  /* the other hover looks would stay on after a tap as well */
  .button-secondary:hover {
    border-color: var(--line-bright);
    background: var(--surface-glass);
  }

  .button-dark:hover {
    background: var(--on-accent);
  }

  .pricing-stepper-button:hover {
    background: none;
    color: var(--text);
  }

  .compare-toggle:hover {
    border-color: var(--line);
    color: var(--text-body);
  }

  .has-edge-light:hover::after {
    opacity: 0;
  }

  .pricing-plan.has-edge-light:hover {
    background-image: none;
  }
}

/* Below the wide layout FAQ spans the screen, so the crew's monitor would sit behind its text: the crew photo rests as a
   blurred mood like the audience, its StageView does not run (site.js) */
@media (max-width: 1080px) {
  .site-backdrop.site-backdrop-crew,
  body.is-scrolled .site-backdrop.site-backdrop-crew {
    filter: var(--backdrop-crew-filter-narrow);
  }

  .site-backdrop-crew .backdrop-photo-screen,
  .site-backdrop-crew .backdrop-photo-front {
    display: none;
  }
}

@media (max-height: 520px) {
  /* a phone held sideways: a slimmer header and less room between the sections, so the content keeps the short screen */
  :root {
    --header-height: var(--space-14);
    --space-section: var(--space-16);
  }

  .hero-lead {
    display: none;
  }

  .hero-copy {
    padding-block: var(--space-3) var(--space-4);
  }

  .hero-actions {
    margin-top: var(--space-4);
  }

  /* the tilt correction may lower the screen, never lift it over the buttons and the platform line */
  .hero-stage {
    margin-top: max(0px, var(--hero-fold-shift));
  }
}