/* ==========================================================================
   THE WALKTHROUGH — the hero's play affordance and its lightbox.

   The page argues that a real department already did the work, and the
   strongest evidence it owns is a four-minute recording of the product
   actually doing it: a campaign created, results read, assets generated,
   reports exported. That recording belongs in the hero, because the doubt it
   answers ("is this a real tool?") is the doubt a visitor has in the first
   five seconds.

   It is NOT a third call to action. The hero already asks the visitor to
   choose between reading the guide and starting free; a third filled box
   would turn a decision into a menu. So the play affordance carries no fill
   and no border — a hairline circle and a duration — and reads as media
   rather than as another thing to weigh up.

   THE LIGHTBOX IS A FACADE, NOT AN EMBED.

   A YouTube iframe in the document costs roughly 900 KB of third-party
   JavaScript, sets cookies, and blocks the main thread before the visitor
   has asked for anything. This one is not in the document at all: the modal
   holds a poster and an empty iframe, and `walkthrough.js` writes the `src`
   on `show.bs.modal` and removes it again on `hidden.bs.modal`. Nothing is
   requested from YouTube until the visitor clicks play, and closing the
   modal stops playback instead of leaving audio running behind the page.

   `youtube-nocookie.com` is used for the same reason the site's analytics
   waits for consent: the embed should not be the one place a third party
   gets to set a cookie before the visitor has agreed to anything.

   The poster is the video's own thumbnail, self-hosted. It is loud — that is
   what the video looks like — and it is honest about what the visitor is
   about to watch, which a hand-picked still would not be.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The hero affordance.

   Sits in `.sc-hero__actions` beside the two CTAs. The circle is the
   affordance; the duration is stated because a visitor deciding whether to
   spend four minutes deserves to know the cost before they click.
   -------------------------------------------------------------------------- */

.sc-hero__btn--play {
  gap: 0.6rem;
  padding: 0.35rem 0.9rem 0.35rem 0.35rem;
  background: transparent;
  border: 1px solid transparent;
  color: #fff;
  font-weight: 600;
  /* The two CTAs beside it carry their own ground — a fill and a hairline
     box. This one has neither, so the label sits directly on the photograph
     and needs the same shadow the hero's own type uses to survive it. */
  text-shadow: 0 1px 2px rgba(6, 12, 15, 0.85), 0 1px 12px rgba(6, 12, 15, 0.7);
}

.sc-hero__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  /* Cool Mist at 55%, the same hairline the ghost CTA uses, so the two
     read as one family on the photograph. */
  border: 1px solid rgba(246, 248, 248, 0.55);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.sc-hero__play svg {
  width: 10px;
  height: 10px;
  /* Optical centring: a triangle's mass sits left of its bounding box, so a
     geometrically centred one reads as though it is sliding backwards. */
  margin-left: 2px;
  fill: currentColor;
}

.sc-hero__btn--play:hover {
  background: transparent;
  color: #fff;
}

.sc-hero__btn--play:hover .sc-hero__play {
  background: #f4f8f9;
  border-color: #f4f8f9;
  color: #16201f;
}

/* Tabular numerals, because a duration is a measurement and the two digits
   should not shift width between "3:47" and any future length.

   The colour is deliberately close to the label's white rather than a muted
   grey: this sits on a photograph, and a 0.8rem figure at low contrast is
   the first thing to disappear over the lit half of the room. It is a
   secondary detail, not a disabled one. */
.sc-hero__play-time {
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: rgba(233, 241, 244, 0.9);
  text-shadow: 0 1px 8px rgba(6, 12, 15, 0.7);
}

/* On a phone the two CTAs go full width and stack. The play affordance must
   not: a full-width bar with a 34px circle at one end reads as a third
   button, which is exactly what it is not. It stays a compact inline row
   under them, aligned left with the copy.

   The left padding is dropped to zero so the circle's edge lines up with the
   CTAs' edges above it. Keeping the desktop inset would leave the play row
   optically indented by 5px against two boxes that start flush, which reads
   as a mistake rather than as a hierarchy. */
@media (max-width: 991.98px) {
  .sc-hero__btn--play {
    flex: 0 0 auto;
    width: auto;
    min-height: 44px;
    padding: 0.3rem 0.9rem 0.3rem 0;
    justify-content: flex-start;
    /* The dogfooding note is hidden at this width, so the play row is the
       last thing in the copy column and would otherwise sit flush against
       the section's bottom edge with nothing under it. */
    margin-bottom: 0.35rem;
  }
}

/* --------------------------------------------------------------------------
   2. The lightbox.

   Dark, because a video player on a white card is a bright rectangle in a
   dark room. The stage is 16:9 and the bar below it carries the one line of
   context plus the escape hatch to YouTube, which matters while the video is
   unlisted and again for anyone who wants full screen or captions.
   -------------------------------------------------------------------------- */

.sc-walkthrough .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: #0e181c;
  box-shadow: 0 1.5rem 4rem rgba(6, 12, 15, 0.55);
}

.sc-walkthrough__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* On a short laptop the 16:9 box would push the bar off-screen. Capping
     the height letterboxes the video inside a wider box, which is what every
     player does anyway, rather than cropping the controls. */
  max-height: calc(100dvh - 7rem);
  background: #0e181c;
}

.sc-walkthrough__poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The poster sits ABOVE the iframe so it can cover the load, which means
     it would otherwise swallow every click meant for the player. It is
     decoration over a live control surface, so it never takes a pointer. */
  pointer-events: none;
  transition: opacity 320ms ease;
}

/* Lifted once the player has actually painted a frame, not when the modal
   opens. Until then it is the only thing in the stage that is not black. */
.sc-walkthrough__poster[data-loaded] {
  opacity: 0;
}

/* No background on the frame: an iframe paints its own background the
   moment it is given one, which would hide the poster before YouTube has
   anything to show. Left transparent, the poster stays visible until the
   player paints over it. */
.sc-walkthrough__frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
}

.sc-walkthrough__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(246, 248, 248, 0.35);
  border-radius: 50%;
  background: rgba(9, 16, 20, 0.62);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.sc-walkthrough__close:hover {
  background: rgba(9, 16, 20, 0.88);
  border-color: rgba(246, 248, 248, 0.7);
}

.sc-walkthrough__close:focus-visible {
  outline: 2px solid #8fb0c0;
  outline-offset: 2px;
}

.sc-walkthrough__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.25rem;
  padding: 0.85rem 1.15rem;
  border-top: 1px solid rgba(246, 248, 248, 0.1);
  background: #0e181c;
}

.sc-walkthrough__title {
  margin: 0;
  color: #e9f1f4;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
}

.sc-walkthrough__link {
  color: #b9c4ca;
  font-size: 0.8rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(185, 196, 202, 0.4);
  transition: color 160ms ease, border-color 160ms ease;
}

.sc-walkthrough__link:hover {
  color: #fff;
  border-bottom-color: #fff;
}

.sc-walkthrough__link:focus-visible {
  outline: 2px solid #8fb0c0;
  outline-offset: 3px;
  border-radius: 2px;
}

/* The local-preview note. It only ever appears when the page is opened from
   disk, where YouTube cannot play the embed at all. It sits on its own line
   under the title and the YouTube link, in the bar's muted tone rather than
   an alert colour — this is an explanation, not an error the visitor caused. */
.sc-walkthrough__note {
  flex: 1 0 100%;
  margin: 0;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(246, 248, 248, 0.1);
  color: #b9c4ca;
  font-size: 0.78rem;
  line-height: 1.5;
}

.sc-walkthrough__note[hidden] {
  display: none;
}

@media (max-width: 575.98px) {
  .sc-walkthrough .modal-dialog {
    margin: 0.5rem;
  }

  .sc-walkthrough__bar {
    padding: 0.7rem 0.85rem;
  }

  .sc-walkthrough__title {
    font-size: 0.82rem;
  }
}