/* ═══════════════════════════════════════════════════════════════════════════
   SEE HOW IT WORKS PLAYER  ·  assets/css/see-how-it-works.css
   The hero's "See How It Works" opens the product video full screen, with its
   own soundtrack and a Mute control that is always on the frame (Ed,
   2026-10-16: "Make sure there's an easy way to mute it"). Pairs with
   assets/js/see-how-it-works.js. The overlay is dark by design: it is a
   cinema, on every theme (inverted-by-design).
   ═══════════════════════════════════════════════════════════════════════════ */
.shiw { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(4, 5, 8, .94); opacity: 0; transition: opacity .25s ease; }
.shiw[hidden] { display: none; }
.shiw.is-open { opacity: 1; }
.shiw-frame { position: relative; width: min(100%, 1600px, calc((100vh - 48px) * 16 / 9)); aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden; background: #000; border: 1px solid rgba(212, 175, 55, .32);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7); }
.shiw-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; cursor: pointer; }

/* The controls sit on the frame, top left (Mute) and top right (Close), always visible. */
.shiw-btn { position: absolute; top: 14px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: 999px; border: 1px solid rgba(212, 175, 55, .55); background: rgba(10, 11, 15, .82); color: #FBF7EC;
  font: 600 14px/1 'DM Sans', system-ui, sans-serif; letter-spacing: .02em; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .15s ease, border-color .15s ease; }
.shiw-btn:hover, .shiw-btn:focus-visible { background: rgba(26, 28, 36, .92); border-color: #D4AF37; outline: none; }
.shiw-btn svg { width: 18px; height: 18px; flex: none; }
.shiw-mute { left: 14px; }
.shiw-close { right: 14px; width: 40px; padding: 0; justify-content: center; }
/* Desktop only (a phone goes full screen on the tap): Full Screen, just left of Close. */
.shiw-full { right: 64px; width: 40px; padding: 0; justify-content: center; }

/* A click on the picture pauses it; the pause sign holds the middle of the frame until the next click (Ed,
   2026-10-16). It lets clicks through to the video, which is what plays it again. */
.shiw-paused { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; transition: opacity .18s ease; }
.shiw-paused span { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%;
  background: rgba(10, 11, 15, .62); border: 1px solid rgba(212, 175, 55, .55); color: #FBF7EC;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.shiw-paused svg { width: 40px; height: 40px; }
.shiw.is-paused .shiw-paused { opacity: 1; }

/* A thin gold progress line along the bottom edge. */
.shiw-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .08); }
.shiw-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #B8941F, #F3D77A); }

/* The end card's trial button and the line under it are real (Ed, 2026-10-17: the painted button "is NOT clickable").
   The video paints the card with their places left empty, and these sit on them, sized in cqw of the frame so they
   match the card at every size (the card is drawn 1920 wide, so cqw = card px / 19.2; the button's top is at 564 of
   1080). They arrive with the card and fade in with its dissolve. Watch Again joins at the very end. */
.shiw-frame { container-type: inline-size; }
.shiw-card { position: absolute; left: 0; right: 0; top: 52.22%; display: flex; flex-direction: column; align-items: center;
  opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.shiw.is-card .shiw-card { opacity: 1; visibility: visible; transition: opacity .8s ease; }
.shiw-card .btn-primary { font-size: max(11px, 1.5625cqw); line-height: 1.2; letter-spacing: .06em; padding: max(8px, 1.22cqw) max(14px, 2.5cqw);
  border-radius: max(6px, .52cqw); }
.shiw-fine { margin: 1.25cqw 0 0; font: 400 max(10px, 1.458cqw)/1.3 'DM Sans', system-ui, sans-serif; color: var(--mk-text-secondary); }
.shiw-end { position: absolute; left: 0; right: 0; bottom: 9%; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.shiw-end[hidden] { display: none; }
.shiw-end .btn-secondary { font-size: 16px; }

@media (max-width: 640px) {
  .shiw { padding: 0; }
  .shiw-frame { width: 100%; border-radius: 0; border-left: 0; border-right: 0; }
  .shiw-btn { top: 10px; height: 36px; padding: 0 12px; font-size: 13px; }
  .shiw-mute { left: 10px; }
  .shiw-close { right: 10px; width: 36px; padding: 0; }
  .shiw-full { right: 56px; width: 36px; padding: 0; }
  .shiw-end { bottom: 5%; gap: 8px; }
  .shiw-paused span { width: 68px; height: 68px; }
  .shiw-paused svg { width: 28px; height: 28px; }
  .shiw-end .btn-secondary { font-size: 13px; padding: 9px 14px; }
  /* the card is small on a phone: the button keeps a size a thumb can hit, and the line under it gives way */
  .shiw-fine { display: none; }
}

/* A phone on its side, and the player full screen on a phone (Ed, 2026-10-19: "in both portrait and landscape
   mode, the video plays full screen"): no margin and no frame, the picture as tall as the screen. dvh follows
   Safari's bar where it is supported; the vh line before it is the fallback. */
@media (max-height: 500px) {
  .shiw { padding: 0; }
  .shiw-frame { width: min(100%, calc(100vh * 16 / 9)); width: min(100%, calc(100dvh * 16 / 9));
    border: 0; border-radius: 0; box-shadow: none; }
}
.shiw.is-full { padding: 0; background: #000; }
.shiw.is-full .shiw-frame { width: min(100%, calc(100vh * 16 / 9)); width: min(100%, calc(100dvh * 16 / 9));
  border: 0; border-radius: 0; box-shadow: none; }