/* The founder walkthrough (VSL) player. One stylesheet for every page that shows the film:
   /watch, /start, the homepage, /custom and /book. Markup contract and behaviour: vsl.js.

   The box reserves 16:9 from the first paint (aspect-ratio, with a padding fallback), so nothing
   around the film moves when the poster, the video or the controls arrive. Everything inside the
   box is an absolutely positioned layer over the same area.

   Colours are the band-dark half of the site palette, written out rather than read from page
   tokens, because the pages that load this sheet name their tokens differently (the paper pages
   and the dark /start world do not share variable names). Gold #dcbc86 is the one accent, as on
   /start: the play meta line, hover, focus and the current chapter. */

/* A gated control must stay gone whatever display rule a page gives it (fleet rule). */
[hidden]{display:none!important}

.vsl{
  position:relative;display:block;width:100%;aspect-ratio:16/9;
  overflow:hidden;isolation:isolate;container-type:inline-size;
  border-radius:12px;background:#0b0a07;color:#f3f1ec;
  box-shadow:0 0 0 1px rgba(255,255,255,.10);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  text-align:center;-webkit-tap-highlight-color:transparent;
}
@supports not (aspect-ratio:16/9){.vsl{height:0;padding-top:56.25%}}
/* On the warm-paper pages the film sits like the site's other framed media (.shot). */
.vsl--paper{box-shadow:0 0 0 1px hsl(38deg 18% 18% / .12),0 1px 2px hsl(38deg 18% 18% / .06),0 4px 8px hsl(38deg 18% 18% / .06),0 8px 16px hsl(38deg 18% 18% / .06),0 18px 36px hsl(38deg 18% 18% / .07)}
/* In the dark world it takes the door radius and a hairline, nothing heavier. */
.vsl--dark{border-radius:16px;box-shadow:0 0 0 1px rgba(255,255,255,.10),0 34px 80px -46px rgba(0,0,0,.95)}

.vsl-video,.vsl-poster,.vsl-poster img{position:absolute;inset:0;width:100%;height:100%;display:block;margin:0}
.vsl-video{z-index:0;object-fit:contain;background:#0b0a07}
.vsl-video:focus{outline:none}
.vsl-video:focus-visible{outline:2px solid #dcbc86;outline-offset:-2px}
.vsl-video::cue{background:rgba(11,10,7,.78);color:#f3f1ec;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.vsl-poster{z-index:1;transition:opacity 320ms ease}
.vsl-poster img{object-fit:cover}
/* The poster leaves only once a real frame is on screen, so starting never flashes black. */
.vsl.is-live .vsl-poster{opacity:0;visibility:hidden;transition:opacity 320ms ease,visibility 0s linear 320ms}

/* ---- the big play control: the whole poster is the target, the disc is the affordance ---- */
.vsl-play{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;
  margin:0;padding:0;border:0;border-radius:inherit;cursor:pointer;color:#f3f1ec;text-decoration:none;font:inherit;
  background:radial-gradient(34% 48% at 50% 52%,rgba(11,10,7,.46),rgba(11,10,7,0) 100%);
}
.vsl-play-disc{
  position:relative;display:grid;place-items:center;flex:none;
  width:72px;width:clamp(58px,11cqi,86px);height:72px;height:clamp(58px,11cqi,86px);border-radius:50%;
  background:#f3f1ec;color:#0b0a07;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.85),0 0 0 1px rgba(11,10,7,.08);
  transition:background 150ms ease,box-shadow 520ms cubic-bezier(.16,1,.3,1);
}
.vsl-play-disc svg{width:36%;height:36%;margin-left:8%;fill:currentColor}
/* On its own dark chip: the frame under it can be anything, including a white shirt. */
.vsl-play-meta{
  padding:.2rem .6rem;border-radius:999px;background:rgba(11,10,7,.62);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  font-family:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;font-size:.688rem;font-weight:500;line-height:1.5;
  letter-spacing:.12em;text-transform:uppercase;color:#dcbc86;
}
.vsl-play:focus,.vsl-sound:focus{outline:none}
.vsl-play:focus-visible .vsl-play-disc{outline:2px solid #dcbc86;outline-offset:4px}
/* Starting: a gold ring runs round the disc until the first frame lands. */
.vsl[data-state="loading"] .vsl-play{cursor:progress}
.vsl[data-state="loading"] .vsl-play-disc::after{
  content:"";position:absolute;inset:-7px;border-radius:50%;
  border:2px solid rgba(220,188,134,.22);border-top-color:#dcbc86;animation:vsl-spin .9s linear infinite;
}
@keyframes vsl-spin{to{transform:rotate(360deg)}}

/* ---- muted preview: the whole frame asks for sound ---- */
.vsl-sound{
  position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
  margin:0;padding:0;border:0;background:transparent;cursor:pointer;font:inherit;color:#0b0a07;
}
.vsl-sound-pill{
  display:inline-flex;align-items:center;gap:.6rem;min-height:52px;padding:.8rem 1.4rem .8rem 1.15rem;
  border-radius:999px;background:#f3f1ec;font-size:1.02rem;font-weight:600;line-height:1.2;
  box-shadow:0 16px 36px -14px rgba(0,0,0,.9),0 0 0 1px rgba(11,10,7,.08);
  transition:background 150ms ease,box-shadow 520ms cubic-bezier(.16,1,.3,1);
}
.vsl-sound-pill svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vsl-sound:focus-visible .vsl-sound-pill{outline:2px solid #dcbc86;outline-offset:4px}
/* On a phone-width player a centred pill lands on Zane's face; there it sits top left, opposite
   the pause button, and the whole frame still takes the tap. */
@container (max-width:559px){
  .vsl-sound{align-items:flex-start;justify-content:flex-start;padding:10px}
  .vsl-sound-pill{min-height:44px;padding:.5rem 1rem .5rem .8rem;font-size:.92rem}
  .vsl-sound-pill svg{width:20px;height:20px}
}
/* The preview can always be paused (WCAG 2.2.2), from the corner, out of the way of the pill. */
.vsl-hold{
  position:absolute;top:10px;right:10px;z-index:4;display:grid;place-items:center;width:44px;height:44px;
  margin:0;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:50%;cursor:pointer;color:#f3f1ec;
  background:rgba(11,10,7,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:border-color 150ms ease,background 150ms ease;
}
.vsl-hold svg{width:16px;height:16px;fill:currentColor}
.vsl-hold:focus{outline:none}
.vsl-hold:focus-visible{outline:2px solid #dcbc86;outline-offset:3px}

/* ---- end card ---- */
.vsl-end,.vsl-msg{
  position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.75rem;gap:clamp(.6rem,2.4cqi,1.1rem);padding:1rem 1.2rem;text-align:center;
  background:rgba(11,10,7,.84);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.vsl-end-line{
  margin:0;max-width:30ch;font-family:'Playfair Display',Georgia,'Times New Roman',serif;font-weight:700;
  font-size:1.3rem;font-size:clamp(1.05rem,.62rem + 2.3cqi,1.62rem);line-height:1.2;letter-spacing:-.012em;
  color:#f3f1ec;text-wrap:balance;
}
/* A phone-width player keeps only the two actions; the line returns once there is room for it. */
@container (max-width:460px){.vsl-end-line{display:none}}
.vsl-end-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem 1.1rem}
.vsl-end-book{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:46px;padding:.72rem 1.3rem;
  border:1px solid #f3f1ec;border-radius:9px;background:#f3f1ec;color:#0b0a07;
  font-size:.95rem;font-weight:600;line-height:1.3;text-decoration:none;
  transition:background 150ms ease,border-color 150ms ease,box-shadow 520ms cubic-bezier(.16,1,.3,1);
}
.vsl-end-book svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform 520ms cubic-bezier(.16,1,.3,1)}
.vsl-end-again,.vsl-retry{
  display:inline-flex;align-items:center;gap:.45rem;min-height:44px;margin:0;padding:.4rem .5rem;border:0;background:none;
  color:#cfcabd;font:inherit;font-size:.9rem;font-weight:500;cursor:pointer;transition:color 150ms ease;
}
.vsl-end-again svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vsl-msg{font-size:.92rem;color:#cfcabd}
.vsl-msg p{margin:0}
.vsl-retry{color:#f3f1ec;text-decoration:underline;text-underline-offset:4px}
.vsl-end-book:focus,.vsl-end-again:focus,.vsl-retry:focus{outline:none}
.vsl-end-book:focus-visible,.vsl-end-again:focus-visible,.vsl-retry:focus-visible{outline:2px solid #dcbc86;outline-offset:3px;border-radius:9px}

/* Pointer response only on fine pointers, and elevation lives in the shadow, never a transform. */
@media (hover:hover) and (pointer:fine){
  .vsl-play:hover .vsl-play-disc,.vsl-sound:hover .vsl-sound-pill{background:#dcbc86;box-shadow:0 14px 34px -12px rgba(220,188,134,.7)}
  .vsl-hold:hover{border-color:#dcbc86;background:rgba(220,188,134,.16)}
  .vsl-end-book:hover{background:#dcbc86;border-color:#dcbc86;box-shadow:0 12px 30px -14px rgba(220,188,134,.7)}
  .vsl-end-book:hover svg{transform:translateX(3px)}
  .vsl-end-again:hover,.vsl-retry:hover{color:#dcbc86}
}
.vsl-end-book:active,.vsl-play:active .vsl-play-disc,.vsl-sound:active .vsl-sound-pill{box-shadow:0 1px 2px rgba(0,0,0,.5)}

/* ---- what sits under a player: the booking action, and on some pages one quiet line ---- */
.vsl-after{display:flex;flex-direction:column;align-items:center;gap:.8rem;margin-top:1.15rem;text-align:center}
.vsl-after p{margin:0}
.vsl-transcript{font-size:.92rem;font-weight:500}
/* ---- the metadata row, YouTube style: tight under the box, flush with its left edge ----
   Static and empty in the markup, one line tall from the first paint (nowrap, so it can never grow
   to two), and filled by vsl.js with "<n> views on @stonegatesystems" once Ops reports 1,000+.
   Muted in the page's own tone: paper pages call it --text-muted, the dark pages --muted. */
.vsl-meta{
  display:block;margin:.5rem 0 0;padding:0 1px;min-height:18px;
  font-size:13px;line-height:18px;font-weight:400;letter-spacing:.005em;text-align:left;
  color:var(--text-muted,var(--muted,#a8a293));font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.vsl-meta + .vsl-after{margin-top:.9rem}
.vsl-disclosure .vsl-meta{color:#a8a293}

/* ---- "Find us on TikTok": an app-store style badge, the account's way in ----
   Black rounded rect, the note glyph in white over its cyan and red offsets, two-line label.
   Elevation on hover is a shadow only; a moved box clips its own corners in a tight column. */
.tt-badge{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:5px 16px 5px 12px;margin-top:.25rem;
  border:1px solid rgba(255,255,255,.18);border-radius:10px;background:#010101;color:#fff;text-decoration:none;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;text-align:left;
  box-shadow:0 1px 2px rgba(0,0,0,.28);
  transition:box-shadow 520ms cubic-bezier(.16,1,.3,1),border-color 150ms ease;
}
.tt-badge svg{width:22px;height:25px;flex:none;display:block}
.tt-badge-text{display:flex;flex-direction:column;align-items:flex-start}
.tt-badge-small{font-size:10.5px;font-weight:500;line-height:1.15;letter-spacing:.02em;color:#ededed}
.tt-badge-big{font-size:17px;font-weight:700;line-height:1.1;letter-spacing:-.01em;color:#fff}
@media (hover:hover) and (pointer:fine){
  .tt-badge:hover{border-color:rgba(255,255,255,.34);box-shadow:0 12px 26px -12px rgba(0,0,0,.8),0 3px 8px -3px rgba(0,0,0,.55)}
}
.tt-badge:active{box-shadow:0 1px 2px rgba(0,0,0,.5)}
.vsl-disclosure .tt-badge{margin-top:1rem}

/* ---- "Watch how a build works" text link, for dark heroes ---- */
.vsl-jump{
  display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:0 .15rem;
  color:#ece9e4;font-weight:600;text-decoration:underline;text-decoration-color:rgba(236,233,228,.38);text-underline-offset:4px;
  transition:color 150ms ease,text-decoration-color 150ms ease;
}
.vsl-jump:hover{color:#fff;text-decoration-color:currentColor}
.vsl-jump svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}
.vsl-jump svg path{fill:currentColor;stroke:none}

/* ---- a closed disclosure that opens a player in place (/book) ---- */
/* Closed, it is one line. The negative bottom margin tucks that line into the empty bottom padding
   the /book hero keeps above its overlapping form card, so the form moves as little as possible. */
.vsl-disclosure{max-width:760px;margin:.45rem auto -1.5rem}
.vsl-disclosure > summary{
  display:inline-flex;align-items:center;gap:.55rem;min-height:44px;cursor:pointer;list-style:none;
  color:#ded9cf;font-size:.98rem;font-weight:600;line-height:1.4;
  text-decoration:underline;text-decoration-color:rgba(236,233,228,.38);text-underline-offset:4px;
  transition:color 150ms ease,text-decoration-color 150ms ease;
}
.vsl-disclosure > summary::-webkit-details-marker{display:none}
.vsl-disclosure > summary::marker{content:""}
.vsl-disclosure > summary:hover{color:#fff;text-decoration-color:currentColor}
.vsl-disclosure > summary svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}
.vsl-disclosure > summary svg path{fill:currentColor;stroke:none}
.vsl-disclosure[open] > summary{color:#fff}
.vsl-disclosure > .vsl{margin-top:1rem}

/* ---- chapters (/watch): tap to seek; the one playing reads gold ---- */
.vsl-chapters{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.10)}
.vsl-chapters li{border-bottom:1px solid rgba(255,255,255,.07)}
.vsl-chapters button{
  display:flex;align-items:baseline;gap:.9rem;width:100%;min-height:48px;margin:0;padding:.8rem 0;border:0;background:none;
  color:#f3f1ec;font:inherit;font-size:.93rem;line-height:1.42;text-align:left;cursor:pointer;transition:color 150ms ease;
}
.vsl-chapters button::before{
  content:"";flex:none;width:5px;height:5px;border-radius:50%;background:#7d7768;transform:translateY(-3px);
  transition:background 150ms ease;
}
.vsl-ch-t{
  flex:none;min-width:2.7rem;font-family:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;font-size:.75rem;font-weight:500;
  letter-spacing:.06em;color:#dcbc86;font-variant-numeric:tabular-nums;
}
.vsl-chapters button[aria-current="true"]{color:#dcbc86}
.vsl-chapters button[aria-current="true"]::before{background:#dcbc86}
.vsl-chapters button:focus{outline:none}
.vsl-chapters button:focus-visible{outline:2px solid #dcbc86;outline-offset:3px;border-radius:8px}
@media (hover:hover) and (pointer:fine){
  .vsl-chapters button:hover{color:#dcbc86}
  .vsl-chapters button:hover::before{background:#dcbc86}
}
@media (min-width:600px){
  .vsl-chapters{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);grid-auto-flow:column;column-gap:28px}
}

/* ---- sticky booking bar (/watch): shown only while the under-player button is off screen ----
   It rides above the privacy panel (sg-attribution publishes that panel's height as
   --sg-privacy-space) and above the phone's home indicator. */
.vsl-sticky{
  position:fixed;z-index:70;left:12px;right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom,0px) + var(--sg-privacy-space,0px));
  display:flex;align-items:center;justify-content:space-between;gap:.9rem;max-width:560px;margin:0 auto;
  padding:.55rem .55rem .55rem 1.05rem;border:1px solid rgba(255,255,255,.14);border-radius:14px;
  background:rgba(16,14,10,.92);-webkit-backdrop-filter:blur(12px) saturate(130%);backdrop-filter:blur(12px) saturate(130%);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.85);color:#f3f1ec;
  animation:vsl-rise 420ms cubic-bezier(.16,1,.3,1) both;
}
.vsl-sticky p{margin:0;min-width:0;font-size:.84rem;line-height:1.35;color:#a8a293;text-align:left}
.vsl-sticky-cta{
  display:inline-flex;align-items:center;gap:.5rem;flex:none;min-height:44px;padding:.62rem 1.05rem;
  border:1px solid #f3f1ec;border-radius:9px;background:#f3f1ec;color:#0b0a07;
  font-size:.92rem;font-weight:600;line-height:1.3;text-decoration:none;white-space:nowrap;
  transition:background 150ms ease,border-color 150ms ease,box-shadow 520ms cubic-bezier(.16,1,.3,1);
}
.vsl-sticky-cta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vsl-sticky-cta:focus{outline:none}
.vsl-sticky-cta:focus-visible{outline:2px solid #dcbc86;outline-offset:3px}
@media (hover:hover) and (pointer:fine){.vsl-sticky-cta:hover{background:#dcbc86;border-color:#dcbc86;box-shadow:0 12px 30px -14px rgba(220,188,134,.7)}}
.vsl-sticky-cta:active{box-shadow:0 1px 2px rgba(0,0,0,.5)}
@media (max-width:359px){.vsl-sticky p{display:none}.vsl-sticky{justify-content:center}}
@keyframes vsl-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .vsl-sticky{animation:none}
  .vsl[data-state="loading"] .vsl-play-disc::after{animation-duration:2.4s}
  .vsl-poster,.vsl.is-live .vsl-poster{transition:none}
}

/* Phones: captions are the only way to follow the muted preview, so they get a readable size. */
@media (max-width:599px){.vsl-video::cue{font-size:15px;line-height:1.3}}
/* /book on phones: the icon flows with the first line of the wrapped summary. */
@media (max-width:480px){.vsl-disclosure > summary{display:inline;line-height:1.45}.vsl-disclosure > summary svg{display:inline-block;vertical-align:-5px;margin-right:.45rem}}