/* Page graphics (15 Oct 2026, the owner's picks from the hero preview): each page its own.
     About    the line drawing (the BTR mark drawn as a blueprint, pre-rendered) and the desk-and-phone clip take turns
     Courses  the three main course covers, fanned and drifting
     Product  the desk-and-phone clip and the BTR Bot advert take turns; the advert plays again, frameless, above
              Licence & Pricing
   plus the product covers on the course and shop cards. Its own file, loaded by about.html, course.html and
   product.html only (browsers hold styles.css for hours, so a new file is fetched fresh). Every colour comes from the
   styles.css tokens.
   Playback is site.js ("looping videos", "hero graphics that take turns"). Everything here moves for everyone, whatever
   the reduced-motion setting says, and pauses off-screen or in a hidden tab: the advert has since 13 Oct 2026 and the
   top-of-page graphics since 15 Oct 2026, the owner's decision both times (Windows with "Animation effects" off
   reports reduced motion). */

:root {
  --hero-strength: 0.94;
}

.page-hero > .container {
  position: relative;
  z-index: 1;
}

.page-hero-ambient .lead {
  max-width: 600px;
}

/* ------------------------------------------------------------------ the desk-and-phone clip
   On the right, sharp, bleeding off the edge and feathered into the page on every side by a mask, so no box edge
   shows and the copy keeps solid ground on the left (the way the workbook sits on the free-checklist hero). The market
   name over the desk (DAX, Nasdaq, Dow, Gold) stays readable but quieter than the heading. */
.hero-media {
  --hero-fade-x: linear-gradient(90deg, transparent 0%, transparent 6%, #000 44%, #000 96%, transparent 100%);
  --hero-fade-y: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 12%, #000 27%, #000 76%, transparent 100%);
  position: absolute;
  z-index: -2;
  top: 50%;
  right: -3vw;
  width: min(66vw, 1040px);
  aspect-ratio: 16 / 9;
  transform: translateY(-46%);
  pointer-events: none;
  opacity: var(--hero-strength);
  -webkit-mask-image: var(--hero-fade-x), var(--hero-fade-y);
  -webkit-mask-composite: source-in;
  mask-image: var(--hero-fade-x), var(--hero-fade-y);
  mask-composite: intersect;
}

.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
  filter: saturate(0.95) contrast(1.03);
}

/* ------------------------------------------------------------------ About: the line drawing
   The BTR mark's real paths drawn as a blueprint over a fine grid: 900 x 625 CSS px rendered at 2x, 60 fps, a 15 s
   loop. The box is the hero's right half, as tall as the hero, and never so wide that the drawing's right-hand
   dimension label crosses the screen edge (1.14 = that label's end, 79% across the box, times the box's 900/625). */
.about-mark {
  --about-mark-strength: var(--hero-strength);
  --about-mark-left: 0px;
  position: absolute;
  z-index: 0;
  top: 50%;
  left: calc(50% + var(--about-mark-left));
  height: min(100%, calc((50vw - var(--about-mark-left) - 8px) / 1.14));
  aspect-ratio: 900 / 625;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: var(--about-mark-strength);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, transparent 3%, #000 33%),
    linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, transparent 3%, #000 33%),
    linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%);
  mask-composite: intersect;
}

.about-mark video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
}

/* ------------------------------------------------------------------ taking turns (site.js)
   Two layers share the hero; site.js marks the one playing .is-on and the other fades out. Before site.js runs (or
   without it) the first layer shows and the second stays hidden. */
.page-hero[data-turns] [data-turn] {
  transition: opacity 1.4s ease;
}

.page-hero[data-turns]:not(.turns-live) [data-turn="2"],
.page-hero[data-turns].turns-live [data-turn]:not(.is-on) {
  opacity: 0;
}

/* ------------------------------------------------------------------ Product: beside the heading
   The advert's own headlines sit at the left of its frame in some scenes, so here the heading is a column ("Your
   accounts. / Your keys. / Your machine.") that ends before the graphics begin, and the two never overlap. */
.page-hero-side .hero-media {
  --hero-fade-x: linear-gradient(90deg, transparent 0%, #000 5%, #000 97%, transparent 100%);
  --hero-fade-y: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  right: -2vw;
  width: min(54vw, 900px);
  transform: translateY(-50%);
}

.page-hero-side .hero-media video {
  filter: none;
}

.page-hero-side h1,
.page-hero-side .lead {
  max-width: 540px;
}

/* ------------------------------------------------------------------ Courses: the three main covers, fanned */
.hero-covers {
  --cw: clamp(200px, 16.5vw, 240px);
  position: absolute;
  z-index: -2;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  pointer-events: none;
  perspective: 1700px;
  perspective-origin: 40% 45%;
  opacity: var(--hero-strength);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 22%, #000 100%),
    linear-gradient(180deg, transparent 0%, #000 12%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 22%, #000 100%),
    linear-gradient(180deg, transparent 0%, #000 12%, #000 86%, transparent 100%);
  mask-composite: intersect;
}

/* a soft steel light behind the fan, so the dark covers keep their edges on the dark page */
.hero-covers::before {
  content: "";
  position: absolute;
  left: 61%;
  top: 52%;
  width: calc(var(--cw) * 3.2);
  height: calc(var(--cw) * 2.4);
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(94, 124, 158, 0.26), rgba(94, 124, 158, 0.08) 55%, transparent 100%);
  filter: blur(8px);
}

.hero-covers-stage {
  position: absolute;
  left: 61%;
  top: 52%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

.hc {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cw);
  aspect-ratio: 794 / 1123;
  margin-left: calc(var(--cw) / -2);
  margin-top: calc(var(--cw) * -0.7072);
  overflow: hidden;
  border-radius: 4px;
  background: #0b0f14;
  box-shadow:
    0 42px 70px -18px rgba(0, 0, 0, 0.8),
    0 14px 26px -8px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(197, 214, 228, 0.1);
  backface-visibility: hidden;
}

.hc img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* a slow light sweep across each cover in turn */
.hc::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(197, 214, 228, 0.1) 48%, rgba(197, 214, 228, 0.03) 54%, transparent 62%);
  background-size: 260% 100%;
  background-position: 160% 0;
}

.hc-centre {
  transform: translateZ(70px) rotateY(-9deg) rotateX(2deg);
}

.hc-left {
  transform: translateX(calc(var(--cw) * -0.8)) translateZ(-90px) rotateY(28deg) rotateZ(-2deg);
  filter: brightness(0.9);
}

.hc-right {
  transform: translateX(calc(var(--cw) * 0.8)) translateZ(-90px) rotateY(-28deg) rotateZ(2deg);
  filter: brightness(0.9);
}

.hero-covers-stage {
  animation: hc-sway 22s ease-in-out infinite alternate;
}

.hc {
  animation: hc-float 8s ease-in-out infinite alternate;
}

.hc-centre { animation-duration: 9s; }
.hc-left { animation-duration: 7.5s; animation-delay: -3s; }
.hc-right { animation-duration: 10.5s; animation-delay: -5s; }

.hc::after {
  animation: hc-sheen 12s ease-in-out infinite;
}

.hc-left::after { animation-delay: 4s; }
.hc-right::after { animation-delay: 8s; }

@keyframes hc-sway {
  from { transform: rotateY(-6deg) rotateX(3deg); }
  to { transform: rotateY(5deg) rotateX(-1deg); }
}

@keyframes hc-float {
  from { translate: 0 -8px; }
  to { translate: 0 8px; }
}

@keyframes hc-sheen {
  0%, 62% { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}

/* ------------------------------------------------------------------ the product covers on the cards */
.cover-thumb {
  display: grid;
  place-items: center;
  height: 236px;
  margin-bottom: 1rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  perspective: 900px;
  background:
    radial-gradient(70% 62% at 50% 42%, rgba(94, 124, 158, 0.2), transparent 72%),
    linear-gradient(180deg, rgba(18, 24, 31, 0.75), rgba(9, 12, 16, 0.25));
}

.cover-thumb img {
  display: block;
  width: auto;
  max-width: none;
  height: 194px;
  aspect-ratio: 794 / 1123;
  border-radius: 3px;
  box-shadow:
    0 22px 34px -10px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(197, 214, 228, 0.1);
  transform: rotateY(-16deg) rotateX(3deg);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.pricing-card:hover .cover-thumb img,
.pricing-card:focus-within .cover-thumb img {
  transform: rotateY(0deg) rotateX(0deg) translateY(-4px);
}

/* ------------------------------------------------------------------ Product: the advert above Licence & Pricing
   Full width, no frame: it fades in from the page above and out into the page below, so it reads as background. */
.ad-band {
  position: relative;
  padding: 2.5rem 0 0;
}

.ad-band-frame {
  max-width: min(1320px, 100%);
  margin: 0 auto;
  opacity: var(--hero-strength);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
  mask-composite: intersect;
}

.ad-band-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: transparent;
}

/* ------------------------------------------------------------------ narrower screens */

/* Under 1180px there is no room beside the product heading: its graphics sit under the copy, full width. */
@media (max-width: 1179.98px) {
  .page-hero-side {
    padding-bottom: calc(min(100vw - 48px, 900px) * 0.5625 + 5rem);
  }

  .page-hero-side .lead {
    max-width: 640px;
  }

  .page-hero-side .hero-media {
    top: auto;
    right: 0;
    bottom: 2.5rem;
    left: 0;
    width: min(100vw - 48px, 900px);
    margin: 0 auto;
    transform: none;
  }

  .about-mark {
    --about-mark-left: 24px;
  }
}

/* Under 1100px the About clip slips behind the copy, softer, with its market names masked out so nothing large moves
   behind the heading; the course covers drop beside the paragraph and buttons, softened. */
@media (max-width: 1099.98px) {
  .page-hero-ambient:not(.page-hero-side) .hero-media {
    --hero-fade-y: linear-gradient(180deg, transparent 0%, transparent 22%, #000 36%, #000 78%, transparent 100%);
    top: auto;
    right: -24vw;
    bottom: 0;
    width: 100vw;
    transform: none;
    opacity: calc(var(--hero-strength) * 0.4);
  }

  .hero-covers {
    --cw: clamp(150px, 19vw, 200px);
    top: 46%;
    left: 46%;
    right: -6vw;
    opacity: calc(var(--hero-strength) * 0.34);
    filter: blur(1.5px);
  }
}

/* Up to 900px the About copy spans the container: the line drawing sits behind it, centred at 72%, softly. */
@media (max-width: 900px) {
  .about-mark {
    --about-mark-strength: calc(var(--hero-strength) * 0.34);
    left: 72%;
    height: 100%;
    transform: translate(-50%, -50%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%);
  }
}

/* Phones: low in the hero, behind the end of the copy, faint enough that the text reads on it. */
@media (max-width: 719.98px) {
  .page-hero-ambient:not(.page-hero-side) .hero-media {
    --hero-fade-x: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
    right: -46vw;
    bottom: -2%;
    width: 150vw;
    opacity: calc(var(--hero-strength) * 0.36);
  }

  .page-hero-side {
    padding-bottom: calc(100vw * 0.5625 + 3.5rem);
  }

  .page-hero-side .hero-media {
    --hero-fade-x: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
    bottom: 1.5rem;
    width: 100%;
  }

  .hero-covers {
    --cw: 132px;
    top: auto;
    height: 64%;
    left: 24%;
    right: -22vw;
    bottom: -2%;
    opacity: calc(var(--hero-strength) * 0.3);
  }

  .cover-thumb {
    height: 212px;
  }

  .cover-thumb img {
    height: 174px;
  }

  .ad-band {
    padding-top: 1.5rem;
  }

  .ad-band-frame {
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 10%, #000 88%, transparent 100%);
    mask-image:
      linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 10%, #000 88%, transparent 100%);
  }
}